WordPressで使えるおりたたみ機能 誰でも出来るように丁寧に解説

未分類

WordPress用JavaScript

WordPressで作成したブログの中で、文字をクリックすると絵や文字が表示され、もう一度クリックすると見えなくなる。このような動作をコピペだけで簡単にできるようになります。JavaScriptですが、何の知識もなく出来ます。

実例は私のブログから囲碁問題で記載しています。是非囲碁を始めて下さい。それだけを願っています。

もくじ

1、実際の動き
2、Javascriptの設定
3、その場所の記載方法

1、実際の動き

下記の問題の下に「問題1解答」をクリックすると、解答の絵が表示されます。
もう一度クリックすると非表示になります

問題1:つながっている石を囲んで下さい

問題1 解 答

2、Javascriptの設定

WordPressブログの一番上に以下のJavaScriptの設定を記載します
「oritatami」というJavaScripです。

jsファイルにまとめて記述するのがスマートなやり方なのですが、どこにjsファイルがあるかわからないのでとりあえずこの場所に記載します。jsファイルに記載すればブログ毎に毎回記載する必要はなくなります。

3、その場所の記載方法


実際の記述方法です。

ひとつづつ解説します

①はブログに表示される文字です。
②はブログに表示される絵(画像)です。
③はブログに表示される文字です。ここをクリックする事で、画像が表示されたり、非表示になったりします。
まずここのoritatamiは最初に設定したJavaScript内のoritatamiと同じ文字である必要があります。
oritatami(‘n00001’)のn00001と次の行のdiv id=’n00001’のn00001は、ここも同じ文字を記述しないといけません。別にn00001でなくても良いです。1ブログにおりたたみヶ所が複数設定する場合は、ここのn00001をそれぞれユニークなもの(別な物)にする必要があります。
④はクリックされた時、表示したり非表示にする絵(画像)です。pの間に挟まれているのが必要で、今回は絵(画像)ですが、この場所に文字を記述すれば、文字が表示されたり非表示になったりします。