【Cocoon】Javascriptのプログラムを記事に埋め込む方法【WordPress】

cocoon

Javascriptのプログラムを記事に埋め込みたい事ってありませんか?例えば、ある計算プログラムを、この記事だけに使いたいということありませんか?

私も、記事の中に自分のJavascriptのプログラムを埋め込みたいと思っていたのですが、WordPressの編集すると、タグが自動的に修正されてしまい、Javascriptのプログラムを動かすことが出来ません。

WordPressで独自のJavascriptのプログラムを動かそうとするのはどうしたらいいのかというのを調べました。次の事が解りましたので紹介したいと思います。

これはすべての記事にJavascriptのプログラムを埋め込むのではなく、特定の記事にJavascriptのプログラムを埋め込む方法の紹介です。

記事にJavascriptのプログラムの書く場所- カスタム Javascript

普段、WordPressで記事を書く時は、普通に編集画面に書きますよね。Javascriptの作成した関数は、編集画面下の方にある『カスタムJavascript』の中に書くようにして下さい。<script></script>のタグは必要ありません。functionから始まる関数を書けばいいです。

HTMLタグを書く場合 – “HTMLとして編集”に切り替える

多くの方は、記事を書く際は、『 ビジュアルエディター TinyMCE 』を使われていると思います。Javascriptで使用する<id><name>のタグを追記する場合は、『カスタムHTML』に切り替えて追記するようにして下さい。ビジュアルエディターの画面では、<id><name>のタグを入力することが出来ません。

これでJavascriptのプログラムは動くようになります。

別ファイルにJavascriptのプログラムを書いた場合の読み込み方

この記事を訪れた方が一番知りたいことはこの項目だと思います。例えば、Javascriptの関数を書いたtest.jsというファイルを使いたいという場合、どのように記事からこのtest.jsというファイルを呼び出せばいいかということになります。

test.jsのファイルをサーバーに上げ、記事のカスタムHTML画面で<script></script>のタグを付け加えるてもダメです。タグの自動編集がされて、test.jsを指定できません。

この場合は、先ほどの『カスタムJavascript』の画面を使うのです。但し、書き方にはコツがあります。入力画面には、下記の通りに書いて下さい。

</script><script src=”Javascriptのファイルの場所のURL”></script><script>

カスタムJavascript』では自動的に<script></script>のタグが挿入されます。ただ、Javascriptのファイルを使用する場合、どうしても<script></script>タグ内にファイルの場所を指定する必要があります。それが上記のタグの書き方でWordPressに埋め込むことが出来るのです。ちょっとしたコツですね。

まとめ

記事にJavascriptを埋め込む方法はいかがだったでしょうか。

今まで、この方法が解らなかったので、プログラム関連の記事は書けませんでしたが、これからは簡単なプログラムですが、色々と上げていこうと思っています。Javascriptの初心者に等しいので、それほど凝ったものは作れませんが、将来的には色々な方に重宝されるようなプログラムを作れればと思っています。楽しみにしていて下さい。

コメント

タイトルとURLをコピーしました