ブログの中で、自分で作ったプログラムを動かしてみたいと思ったことはないでしょうか？
プログラムの種類にもよりますが、javascriptでつくって記事に埋め込むのが一番簡単です。
実際にjavascriptが動く記事を作ってみたので、そのコツを説明したいと思います。
[toc]
実際につくったプログラム
確定申告を実施したのですが、そのときにちまたのサイトで出回っている医療費控除の還付額の計算機が間違っていることに気がつきました。
それなら、自分で作ってしまえと思い、作ったのが下記のページです。
たとえば、この記事でもjavascriptを動かすことができます。下記のボタンを押すと、ポップアップが出ます。
オススメのjavascriptのいれ方
WordPressの記事内でjavascriptのプログラムを動かす方法はいくつかあります。
- プラグインを使う
- テーマのphpを編集し、javascriptを呼び出すようにする
- 『テキスト(htmlモード)』で書き込む
一番オススメなのは、javascriptを『テキスト(htmlモード)』で記事に書きこむ方法です。この場合ですと、何かあってもその記事にしか、影響は出ません。
他のプラグインを使う方法や、テーマのphpをいじる方法は他の記事に影響が出てしまいかねません。
シンプルですが、記事に直接javascriptを書いてしまいましょう。
javascriptのいれ方
基本は記事エディタのモードを『ビジュアル』から『テキスト』にするだけなのですが、記事内にjavascriptコードを入れるにあたって、注意すべき点がいくつかあります。
- <div>タグでjavascriptコードを囲む
- javascriptコードに空行はつくらない
- 記事の編集はjavascriptを入れたら『ビジュアル』モードに切り替えない。
最初の２つは、改行を入れてしまうと、javascriptコード中に自動的に<p>タグが埋め込まれてしまうからです。
また、『ビジュアル』モードに切り替えると、やはり<javascript>タグの部分によけいなコードを自動的に入れてしまいます。
どうしても、『ビジュアル』モードに切り替えたいときは、javascriptコードをテキストエディタに退避しておきましょう。『ビジュアル』モードでの編集が終わったら、『テキスト』モードに切り替えて、退避させたコードに差し替えて直しておきます。
まとめ
javascriptを記事内に埋め込むとプログラムを動かせて面白いコンテンツがつくれます。ただし、場合によってはWordPressが自動的にタグを入れたりしてしまうので、注意しておきましょう。
コメント