JavaScript/jQuery WordPress

WordPressの記事内でJavaScriptを動かす

更新日:

スポンサードリンク

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かないJavaScriptをどうやって動かすか検証しました。ちなみに、自分の調べたときのWordPressのバージョンは3.91です。

WordPressでJavaScriptを動かす方法

ここから本題なのですが、WordPressの記事内でJavaScriptを動かす手法にプラグインを導入する方法とそうしない方法があるようですのでそれぞれ調べました。

プラグインを使わない方法

案外何もプラグインを導入しなくても動くものは動きます。このことはJavaScript製のブログパーツが普通に動くのをみるとわかります。

スクリプトが動かない場合としてはWordPress側で自動で挿入される<p>~</p>タグが原因かと思います。

このタグが非常にハタ迷惑なのですが、これが挿入されるタイミングとして考えられるのが改行してスペースが出てきたときです。
その他にも<div>タグをスクリプトに含めると変なところで改行してしまう場合があります。例えばDOMを作成するときに$("<div>")などとするとうまくいかないことがありました。他のタグでもこういった現象が起きるのではないかと思います。

なので、ベストなのは記事の方にソースは書かないで、外部スクリプトとして保存して呼び出すというのが無難かと思います。

inline-javascriptを使う方法

inline-javascriptというプラグインを使用するとスクリプト部分を[inline]~[/inline]で囲むだけでスクリプトが動くようになります。ただし、このプラグインを使うとWordPressのバージョンによっては文章のレイアウトが多少崩れるといった欠点もあるため、その辺については注意が必要です。

また、このinline-javascriptのプラグインでも上記同様にDIVタグなどを使用するとうまくいかないといった症状が見られましたので使う際は気を付けてください。

Custom CSS and JSを使う方法

プラグイン「Custom CSS and JS」では記事作成ページのカスタムフィールドからCSSやJavaScriptを記事に追加することができます。ただし、いちいちカスタムフィールドに別途記述する必要があるため多少面倒ではあります。

CSS & JavaScript Toolboxを使う方法

上記のCustom CSS and JSはカスタムフィールドにソースを追加する形のものでしたが、こちらはエディタ形式でソースを変更することができて、かつソースをそのまま一括管理、どこの記事で、もしくは全体でそのスクリプトを有効にするかを簡単に決定・変更することができます。正直一番使いやすいと思います。

cssjstoolbox

このプラグインをインストールすると下図のように左側のメニューバーに『CSS & javascript Toolbox』という項目が出てきてJS・CSSだけでなくPHPやHTMLのソースコードを追加・編集・管理することができます。右の赤枠部分で編集しているソースをどこの記事に反映させるか決めることができます。

最後に

プラグインも便利ですが気をつけさえすればスクリプトはキチンと動いてくれるので何も導入しなくても意外と大丈夫ですので、必要な場合に応じてインストールするもしくは利用する方針でいいかと思います。

スポンサードリンク

-JavaScript/jQuery, WordPress

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.