プラグインなしで投稿記事のJavaScriptを実行する WordPress

以前にWordPressにJavaScriptを投稿しても動かない！の記事で、投稿フォームにJavascriptを直接書いて動作させるプラグイン「inline-javascript」を紹介しました。

ところが、別の記事を書くのに調べている最中に、なんとプラグインなしでできることがわかりました。

不要なプラグインの見直しもできて一石二鳥ということもあり、本日はこちらの方法を紹介したいと思います。

JavaScriptが動かない原因

投稿フォームに入力したJavaScriptが動かない原因は、コチラの記事で言及している通り、WordPressの処理でscriptタグ内にPタグが記述されてしまうためです。

（JavaScriptの記述ルールに、script要素内に『<』『>』『&』を書いてはいけない、がある）

この解決方法として「inline-javascript」があるのですが、タイトル通りプラグインを使わずに解決する方法を以下に紹介します。

プラグインなしでJavaScriptを実行する

実はすごく簡単で、なんとscriptタグの前後をdivタグで括るだけです。

「それだけ？」と思うかも知れませんが、ハイ、本当にそれだけです。

ソースを見せたほうが早いと思うので、以下、説明します。

簡単な例として「JavaScriptで文字を置き換え」という文字列をid=”js”で指定したdivタグで括り、このdivタグの中身のテキストを「Hello World」で置き換えるよう処理するソースで紹介します。

<div id="js">JavaScriptで文字を置き換え</div>
<div>
    <script type="text/javascript">
        var e1 = document.getElementById('js');
        e1.innerText = 'Hello World';
    </script>
</div>

この通り、ちゃんとJavaScriptが実行されています。（もちろん、inline-javascriptプラグインは使っていません）

ただ、このページのソースを見るとわかりますが、

<div id="js">JavaScriptで文字を置き換え</div>
<div><script type="text/javascript">//<![CDATA[
var e1=document.getElementById('js');e1.innerText='Hello World';
//]]></script></div>

空白やdivの閉じタグ後の改行が削除され、scriptタグの開始タグの直後、終了タグの直前に「// <![CDATA[」「// ]]>」という文字列が追加されてますが、こちらは投稿を保存する際にWordPress側で自動入力されたものになります。

ただし、1点記述にあたっての注意事項がありますので、以下説明します。

script 要素内にdivタグを含めないようにする

これはscriotタグの中で、divタグを記述すると意図しないところで改行されるためです。

こちらも具体例で見てみましょう。

先ほどの例をベースに、divタグの中身のテキストを「<div>Hello World</div>」で置き換えるよう処理するソースで実行してみます。

<div id="js2">JavaScriptで文字を置き換え</div>
<div>
    <script type="text/javascript">
        var e1 = document.getElementById('js2');
        e1.innerText = '<div>Hello World</div>';
    </script>
</div>

この通りdivタグの中身が置き換わりません。

このページのソースを見てみると、

<div id="js2">JavaScriptで文字を置き換え</div>
<div><script type="text/javascript">//<![CDATA[
var e1=document.getElementById('js2');e1.innerText='


<div>Hello World</div>




';
//]]></script></div>

のとおり、<div>Hello World</div>の前後に改行が入ってしまっています。

この改行が原因で、innerTextが実行できないのですね。

ただ、どうしてもdivタグを記述したい場合は、

e1.innerText = '<d'' + 'iv>Hello World</' + 'div>';

のように文字列を連結してやれば大丈夫です。

最後に

昔のWordPressのバージョンでは、scriptタグ内に空行を入れるのもNGでしたが、今ではdivタグの記述の注意するだけなので、とても楽ですね。

プラグインはとても便利ですが、導入すればそれだけサイト表示が重くなる可能性があるので、使わないに越したことはありません。

このサイトも表示に時間がかかるようになってしまったので、本日紹介したような小さなことからコツコツとチューニングしていきたいと思います。

Author：yukio iizuka

フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com