初心者・独学でも安心！WordPressでJavaScriptを扱う基本-読み込みや実装手順

「JavaScriptでアニメーションを入れてみたい」「クリックで動くサイトにしたい」そんなことを思いながらWordPressを使っていて、どうやってJavaScriptを導入すればいいか迷った経験はありませんか？ WordPressでは、functions.phpを使った読み込みや、scriptタグの記述、プラグインの活用など、複数の方法でJavaScriptを組み込むことができます。本記事では、独学者向けに、JavaScriptの導入と実装方法を、ステップごとに解説します。

「ぼくら」の失敗談

1.コードを書き換えたはずなのに表示に反映されず、原因を探るのに時間がかかった⇒原因で多かったのが、キャッシュや記述ミスで、原因を探るためのステップを考える必要があった。まずキャッシュを疑う、次に読み込み位置を確認、そしてjQueryなどの依存関係、ファイルパスなど…
2.自作するというより、他のサイトで使われているコードを参考にすることが多かった。⇒jQueryやその他のライブラリの読み込み順やバージョンが合ってないと動作しないのことが難解で、ライセンス面やセキュリティ面をあまり考えていなかった。

WordPressでJavaScriptを使う意味とは？

JavaScriptはWordPressの必須言語ではありませんが、動きのあるインタラクティブな表現を実現するために使われる重要なスクリプト言語です。アニメーションや動的コンテンツの実装により、ユーザーの体験価値を向上させることができます。

WordPressでJavaScriptを読み込む4つの方法

① functions.phpで読み込む（推奨）

WordPress公式が推奨する最も適切な方法です。テーマのfunctions.phpに、
以下のコードを記述することで、JavaScriptファイルを読み込むことができます。
function my_custom_scripts() {
wp_enqueue_script(
‘my-script’, // ハンドル名
get_template_directory_uri() . ‘/js/my-script.js’, // ファイルの場所
array(), // 依存スクリプト（例：[‘jquery’]）
null, // バージョン
true // フッターで読み込む（true）かhead（false）か
);
}
add_action(‘wp_enqueue_scripts’, ‘my_custom_scripts’);
＊my-script.js は /wp-content/themes/your-theme/js/ に設置します。

② scriptタグで直接読み込む（簡易）

より簡単な方法として、親テーマを直接編集せず、子テーマのheader.phpやfooter.phpに以下のように記述することでJavaScriptを読み込むことができます。

<script src="<?php echo get_template_directory_uri(); ?>/js/my-script.js"></script>

③ プラグインを使って読み込む（初心者向け）

コードが苦手なら、安心して使えるプラグインで、管理画面から追加できます。以下の２つは特に使いやすい代表例です：
・Simple Custom CSS and JS
・WPCode – Insert Headers and Footers

④ 投稿ページに直接記述（非推奨）

記事エディタの「コードエディタ」モードで<script>を記述することも可能ですが、以下の理由から非推奨です。：
　・セキュリティ上の制限で無効化されることがある
　・テーマやプラグインによっては正常に動作しない

→ 限定的な用途に留め、常用は避けたほうが安全です。

WordPressでJavaScriptを扱う際の注意点

WordPressでは関数get_template_directory_uri()を使って正確なパスを取得する必要があります。ディレクトリ構造のズレが生じることがあるため、HTML的にパスを書くだけでは不具合の原因になることもあります。

❓ よくある質問（Q&A形式）

Q1：functions.phpとheader.php、どちらに書くべきですか？
A：基本的にはfunctions.phpで読み込むのが推奨されます。 WordPress公式が推奨する方法で、安全性と保守性の面でも優れています。header.phpなどに直接記述する場合は、子テーマを使って編集しましょう。

Q2：JavaScriptを読み込んだのに動作しないのはなぜ？
A：読み込み位置・依存関係・テーマの仕様が原因の可能性があります。
wp_enqueue_script()の引数でtrueを指定している場合、直前で読み込まれます
jQueryなど他スクリプトとの依存関係がある場合は、array(‘jquery’)のように指定する必要あり
特定のテーマやプラグインが干渉している場合もあるので確認しましょう

Q3：プラグインを使うとSEOに悪影響はありますか？
A：通常は影響しませんが、ページ読み込み速度やコードの品質が低下するとSEOに間接的に影響することもあるため、軽量で評判の良いプラグインを選ぶようにしましょう。