この漢字が書けますか？
『 』の部分を漢字にしてください。
5秒後に答えが出ます
＊＊＊＊＊＊＊＊＊＊＊
簡単なJavascriptなら直接記事に書いて「動けばよし」としましょう
HTMLでブログを書いていたときにJavascriptを勉強したことがあり、WPでブログを書くようになって、Javascriptで「なにかしてみたい … 」と、上のようなものを作りました。
WPに直接コード類を書くのは良くないとか、WPの都合でコードを書き換えて動かなくなるというWEB記事もあるのですが、細かいことは考えずに、ともかく「動けばいい」と思えば、いろいろなものを作って楽しめると思います。
一般的には、プラグインを使うことがWEBで紹介されていますが、ここでは、WPに備わった仕組みを使って、直接書いています。
上のような簡単な内容ですが、漢字を他の用語に変えたり、百人一首の上の句と下の句を出したり … など、応用のヒントになればと思います。
書き方は、ビジュアルエディターではなく、コードを書くテキスト（コード）エディターの本文にhtmlタグを、そして、CSSやJavascriptはWPに用意されている「カスタムCSS」「カスタムJavaScript」に書いていきます。
この過程で、コードエディターとビジュアルエディターを切り替えると、WPが、本文のタグなどの内容を、内部で勝手に書き換えをしてしまうようで、私は、うまく動いたときの本文のテキストコピーをとっておいて、動かなければタグ部分を『張替え』してしのぎました。（参考に）
ともかくここでは、これで動いていますので、細かい内容の説明には触れないで、大きな流れを掴んでいただくといいと思います。
本文に「体裁」を、CSSとJSはカスタム欄に記入する
本文は、ビジュアルエディターではなく、「コードエディター」に書いていきます。
私のWPは WordPress 6.9.4で、まだ、クラシックエディターを使いつづけていますが、ブロックエディターを使えば、カスタムHTMLブロックにタグが書けるので、そのほうが書き換えられなくていいかもしれません。（試していません m(_ _)m）
ここでは、CSSとJSは「カスタムCSS」「カスタムJavaScript」の書き込み欄がWPにあるので、そこに書いています。
書き込む際には、下に示すように CSSの「style」やJSの「script」タグは不要です。
本文
ここでは、ボタンを押すと、「textarea」に「my1st」の問題と「my2nd」の答えが表示するというだけの内容です。
カスタムCSS
この6行で、問題と答えの字の大きさを指定しています。
カスタムJavascript
ここでは、流れだけに注目いただき、細かいところは自分で調整していただくといいでしょう。
参考になった書籍
私自身、Javascriptをちょっとかじった程度ですから、うまく動かなくて、この記事を何回も書き直しました。「動かない」と滅入ってしまいますが、動いてくれたときはホッとします。
さらに、WPのこともよくわからないのですが、一応、これで動いているので「良し」としています。
ともかく、WEB記事を読んでも、書いてある内容すら理解できないことの多いJavascriptですが、私は、下に紹介する本が勉強に役立ちました。大手書店にもあり、安価ですのでチェックしてみてください。
これはhtml用に書かれていますが、自分でJavascriptを書いて、それを動かすことで動きを確認できますし、「なにかを表示したい」など、身近で使えそうなものを扱っている、初心者にはわかりやすく真似しやすい内容が掲載されています。
