漢字クイズを作りました｜ワードプレスにJavascriptを書く方法

WPの編集画面にある、カスタムCSSやカスタムJavascriptにCSSやコードを書き入れて、簡単な漢字パズルを作りました。

WPにJSのコードを書くと、それが消えてしまうという、たしかに困った問題がでます。

どうも、ビジュアル画面とコード画面を行き来したり、ビジュアル画面で保存（更新）したりすると、Javascriptの関係するコードの一部が消えてしまうのですが、そういう事があることを知っておいて、保存するときに、ちょっとした工夫をすると、問題なく動きます。下が、今回作ったものです。

この漢字が書けますか？
『　』の部分を漢字にしてください。

　5秒後に答えが出ます

＊＊＊＊＊＊＊＊＊＊＊

簡単なJavascriptなら直接記事に書いて「動けばよし」としたのですが …　しかし

以前に、HTMLでブログを書いていたときにJavascriptをかじったことがあって、WP（ワードプレス）でブログを書くようになって、Javascriptで「なにかしてみたい　…　」と思っていました。

しかし、WPに直接コード類を書くのは良くないとか、WPの都合でコードを書き換えて動かなくなる　…　というWEB記事もあったので、ようやくトライして、それを確かめてみました。

たしかに、WPは、私のようなJavascript初心者がうまく動くようなものを書くには、いろいろ問題点がありそうです。

HPのコードを見ていただくといいのですが、プログラムのHTMLの　「input type=”button” value=”Pushで開始” onclick=”myGou()”」を保存するときに、勝手にWPが「onclick=”myGou()”」を削除してしまうのですが、それで、アップしてもプログラムが動かなくなってしまっています。

この対策は、コードエディターで書いた状態で「更新」をかけてアップするようにすればいいのですが、いったんビジュアル画面に戻ると、うまくいかないようです。

もちろん、再度ダッシュボードで記事を開くと、更新をかけると、消される部分が出てくるので、毎回、記事を開くごとにチェックして、「コード画面から更新」する必要が出てきます。

コードエディターの画面で「更新」をしないようにするのも邪魔くさいですが、WPの仕組みなので、どうにもならないのかもしれません。

そこで、細かいことは考えずに、ともかく「動けばいい」とかんがえて取りかかればいいのでしょう。

Javascriptを使う場合には、Javascriptを書き込める「プラグイン」を使う方法がWEBで紹介されていますが、趣味で作る小さなプログラムコードなので、ここでは、WPに備わった仕組みを使って、直接書く方法をやってみました。

簡単なコードですから、例えば、漢字を他の用語に変えたり、百人一首の上の句と下の句を出したり　…　など、応用もできると思いますので、ヒントにしてください。

WPが勝手に一部を消してしまうので、私は、うまく動いたときの本文のテキストコピーをとっておいて、動かなければタグ部分を『張替え』して修正して、コードエディター画面で更新することをやり続けています。

自分で楽しむ程度なら、こちらの例のように、HTMLで保存するほうが簡単な感じですが、ここでは、これで動いていますので、細かい内容には触れませんが、単語の練習や、クイズを作ったりして遊べますので、簡単に、作り方を紹介しておきます。