WordPressの記事上でJavaScriptを使うには少し工夫が必要です。そのままJavaScriptのコードを書いても動作しないからです。
原因はWordPressのエディターの自動改行機能により、文中に挿入された<script>～</script> 内に含まれる改行に <p>タグが追加されてしまうためです。
よって、本稿では記事中でJSを使うための4つの方法を提示します。用途に応じて、どれにするかお選びください。
目次
ページごとにdivを挿入する方法
- ブロックエディタの「カスタムHTML」を使う
- scriptをdivで囲む
- 空行を削除
1. コードエディタを使う
JavaScriptはコードエディタを使って書いてください。コードエディタとは、ブロックエディタの「カスタムHTML」、もしくはクラシックエディタの「テキスト」です。
2. scriptをdivで囲む
<div>
<script>
</script>
</div>3. 空行を削除
最後にScript内の空行（2連続以上の改行）を削除すると、JavaScriptが動作するようになります。
自動改行をオフにする方法
上記の、ページごとにdiv挿入で解決する方法が面倒なら、自動改行機能をオフにしてしまう手もあります。
functions.phpに下記コードを追加すると、自動改行がオフになります。しかし、自動改行ができなくなるのはそれはそれで不便なので、一長一短でしょうか。
remove_filter('the_content', 'wpautop');参考： 関数リファレンス/wpautop – WordPress Codex 日本語版
functions.phpかheader.phpにスクリプトを記述する
ページ全体でJSを動かしたいなら、functions.phpかheader.phpの<head></head>内にJSを読み込ませるようにしておく方法もあります。
ただ、これはページ全体で動作させることを目的とした記述方法のため、動作させる必要のないページでもコードを読み込ませるのは、サイトの表示速度のことを考えるともったいない気がします。個別ページだけでスクリプトを動かしたいなら、あまり選択しない方法ですね。
プラグインで対応する方法
Scripts n Styles
「Scripts n Styles」は個別記事ごとにカスタムCSSとカスタムスクリプトが記述できるようになります。カスタムスクリプトにJSを挿入しておけば、個別記事ごとに動作させることができます。
このプラグインのいいところは安全性を考慮して、JavaScriptを挿入できるのが管理者ユーザーのみに制限されていることです。また、サーバー環境が推奨のPHPバージョンでなければ、動作しないようになっています。
外部ファイルから読み込む方法
JavaScriptを外部ファイルとして読み込む方法もあります。詳しくはこちらの記事で解説しています。
Webサイトに何かしら動きをつけたい時にJavaScriptが必要になります。しかし、WordPress開発に慣れていないと、JavaScriptをどう読み込むべきか分からないですよね。 当記事では、WordPressでJavaScriptを外部ファイルとして読み込む基本的な方法をご紹介します...
まとめ
個別ページだけでJavaScriptを動作させる場合、1つ目の「divを挿入する方法」と4つ目の「Scripts n Stylesプラグイン」が手間のかからないやり方になるでしょうか（非エンジニア向け）。
divを挿入するやり方の方が手軽ですが、ページが多いようなら「Scripts n Styles」プラグインを導入してしまったほうが早そうですね。
コメント