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

ホームページ作成は順調に進んでいますか？

今回はホームページでよく使われるプログラム『Javascript』についてです。

Javascriptのプログラムを使った記事を作成したいってありませんか？

私も、記事の中に、自分が作成したプログラムを使った記事を作成したのですが、ワードプレスの編集画面に記入すると、タグが自動的に修正され、プログラムを動かすことが出来ませんでした。

そこで、ワードプレスでJavascriptのプログラムを動かす方法について調べたので紹介したいと思います。

今回紹介する方法は、すべての記事にプログラムを埋め込むのではなく、各記事にプログラムを埋め込む方法の紹介です。

方法①　カスタム Javascript

これが一般的な方法です。

コードを書く場所 – カスタムJavascript

まずはコードを書く場所を説明します。

記事を書く時は、編集画面に書きますが、Javascriptのコードは、編集画面下の方にある『カスタムJavascript』の中に書いて下さい。

この入力欄では、<script></script>のタグは必要ありません。functionから始まるコードを書いて下さい。

HTMLタグはカスタムHTMLを使う

多くの方は、『 クラシック 』のビジュアル編集を使用されていると思います。

ただ、Javascriptで使用する<id>や<name>のタグの部分は、『 クラシック 』ではなく『カスタムHTML』を使って下さい。

『 クラシック 』でも、ビジュアル編集からHTMLとして編集できますが、ビジュアル編集に戻した時に、コードが書き換わり、<id>や<name>のタグを使用出来ません。

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

方法②　個別のファイルを使用する場合

test.jsなど、個別のJavascriptのファイルを使用する場合について説明します。

ファイルのアップロード先

Javascriptのファイルをアップロードする場所について説明します。

ワードプレスをサーバーにインストールすると『public_html』というフォルダが作成されます。

ファイルは、この『public_html』フォルダ以下にアップロードして下さい。

ファイル場所の指定の方法

次に、記事からアップロードしたファイル場所の指定について説明します。

『カスタムJavascript』の欄にファイルの場所を入力します。

例えば、public_htmlのフォルダにtest.jsをアップロードした場合は下記の通り記述します。

</script><script src=”test.jp”></script><script>

また、public_htmlのフォルダにjavascriptというフォルダを作成し、そのフォルダにtest.jsをアップロードした場合は、下記になります。

</script><script src=”/javascript/test.jp”></script><script>

HTMLのタグの部分は先述の通りにカスタムHTMLを使用して下さい。これで、Javascriptのプログラムが動くようになります。

まとめ

いかがだったでしょうか。

みなさんのJavascriptを使用した記事が無事に動くといいですね。