(プラグイン不要！) 記事ごとに個別のJavaScriptを実装する方法 | ブログtips / WordPress

先日、リタイアシミュレーターなる自作ツールをPHP+JavaScriptで作成して公開しました↓↓↓
このツールはWordPressの記事内で動作するようにしたかったのですが、
そのためにはこの記事だけ特定のJavaScriptを動作するようにする必要がありました。

記事ごとにJavaScriptを設定するプラグインもいくつかあるようですが、
あまり使い勝手の良いものは見つかりませんでした。

何か方法はないものかと考えたところ、
結局、前述のツールではプラグインなしでJavaScriptを実装することができました。

この記事ではそのときに使用した記事ごとに個別のJavaScriptを動作させる方法を紹介したいと思います。

記事ごとに任意のJavaScriptを記述する方法

記事ごとに任意のJavaScriptを記述する方法、
それは普通に記事中にHTMLでscriptタグを記述するだけです。

例としては以下のようなscriptタグを記事中に配置させます。

<div>
    <script src="./hogehoge.js"></script>
</div>

bodyタグ内にscriptタグがあるのは少し気持ちが悪いですが、
この書き方でも普通にJavaScriptは動作しますよ！！

例えば、冒頭のツールでは記事中にscriptタグを設定していますが、
Chrome, Firefox, Edgeのそれぞれの環境で問題なく動作しています。

参考: キャッシュには気をつけよう

この方法で記事ごとのJavaScriptを実装した後に、
.jsを更新してもそれが反映されない場合はキャッシュが原因です。

対処方法は以下の記事をご覧ください。

まとめ

この記事ではWordPressで記事ごとに個別のJavaScriptを実装する方法を紹介しました。

この方法を用いれば、冒頭で紹介したツールのように
WordPressの記事内に自作のツールを持ち込むことができますよ！！