WordPressでJavaScriptを使う方法｜追加できない・動かない原因と解決策を初心者向けに解説
はじめに
WordPressでサイトを運営していると、「ボタンをクリックしたら表示を切り替えたい」「スライダーを設置したい」「お問い合わせフォームの入力チェックをしたい」など、JavaScriptを使いたい場面が出てきます。
しかし、HTMLサイトと同じ感覚でscriptタグを貼り付けても、WordPressではJavaScriptが追加できない、保存できない、なぜか動かないということがあります。
WordPressはテーマ、プラグイン、ブロックエディタ、セキュリティ設定、キャッシュなどが関係するため、JavaScriptの追加方法にもいくつかのルールがあります。
この記事では、WordPressでJavaScriptを使う基本から、functions.phpでの正しい読み込み方、プラグインを使う方法、JavaScriptが追加できない・動かない原因と解決策まで、初心者向けにわかりやすく解説します。
1. WordPressでJavaScriptを使う前に知っておきたい基本
WordPressでJavaScriptを扱う前に、まずは「何ができるのか」「なぜ普通のHTMLサイトと違うのか」「どこを編集すればよいのか」を理解しておくことが大切です。
特に初心者の場合、いきなりテーマファイルを編集すると、サイトが表示されなくなる可能性があります。安全に作業するためにも、WordPressの仕組みを確認しておきましょう。
1-1. JavaScriptでWordPressサイトにできること
JavaScriptを使うと、WordPressサイトに動きや便利な機能を追加できます。
たとえば、次のようなことが可能です。
・クリックしたときにメニューを開閉する
・画像スライダーを表示する
・アコーディオンメニューを作る
・ページ上部へ戻るボタンを設置する
・フォーム入力内容をチェックする
・ポップアップを表示する
・特定の条件でコンテンツを切り替える
・外部サービスのタグや計測コードを設置する
WordPressはPHPでページを生成しますが、ブラウザ上で動きをつける部分にはJavaScriptが使われます。
そのため、見た目や操作感を改善したい場合、JavaScriptは非常に役立ちます。
1-2. HTMLサイトとWordPressでJavaScriptの追加方法が違う理由
通常のHTMLサイトでは、HTMLファイルに次のようなscriptタグを書くだけでJavaScriptを読み込めます。
HTML<script src="script.js"></script>
一方、WordPressではページが1枚のHTMLファイルとして存在しているわけではありません。
WordPressは、テーマファイル、テンプレート、投稿データ、プラグインなどを組み合わせて、アクセスされたタイミングでページを生成しています。
そのため、JavaScriptを追加する場所を間違えると、以下のような問題が起こります。
・コードが特定のページに反映されない
・テーマ更新でコードが消える
・読み込み順序がずれてエラーになる
・jQueryが正しく動かない
・管理画面でscriptタグが削除される
・キャッシュの影響で変更が反映されない
WordPressでJavaScriptを使う場合は、WordPressの仕組みに合った方法で追加することが重要です。
1-3. 初心者がまず理解すべき「テーマ」「プラグイン」「functions.php」の役割
WordPressでJavaScriptを追加する際によく出てくるのが、テーマ、プラグイン、functions.phpです。
テーマは、サイトのデザインやレイアウトを管理するものです。header.php、footer.php、single.phpなどのテンプレートファイルが含まれており、サイトの見た目に関わります。
プラグインは、WordPressに機能を追加するものです。JavaScriptを追加するためのプラグインを使えば、テーマファイルを直接編集せずにコードを挿入できます。
functions.phpは、テーマに機能を追加するためのファイルです。JavaScriptファイルを正しく読み込む場合、多くのケースでfunctions.phpにコードを記述します。
初心者が覚えておきたいのは、次の考え方です。
サイト全体に安全にJavaScriptを読み込むなら、functions.phpまたはプラグインを使うのが基本です。テーマファイルに直接scriptタグを書く方法もありますが、管理や保守の面では注意が必要です。
1-4. 直接編集する前にバックアップと子テーマを用意する
WordPressでJavaScriptを追加する前に、必ずバックアップを取っておきましょう。
特にfunctions.phpを編集する場合、1文字の記述ミスでもサイト全体にエラーが出ることがあります。管理画面にも入れなくなるケースがあるため、事前準備が重要です。
最低限、次の準備をしておくと安心です。
・WordPress全体のバックアップを取る
・テーマファイルのバックアップを取る
・子テーマを作成する
・FTPまたはサーバーのファイルマネージャーにアクセスできる状態にする
・編集前のコードをコピーして保存しておく
親テーマを直接編集すると、テーマ更新時に変更内容が消える可能性があります。そのため、テーマにコードを追加する場合は子テーマを使うのが基本です。
2. WordPressにJavaScriptを追加する主な方法
WordPressにJavaScriptを追加する方法はいくつかあります。
代表的なのは、functions.phpで読み込む方法、プラグインを使う方法、カスタムHTMLブロックに直接書く方法、header.phpやfooter.phpにscriptタグを追加する方法です。
それぞれメリットと注意点があるため、目的に合わせて選びましょう。
2-1. functions.phpでJavaScriptファイルを読み込む方法
WordPressでJavaScriptファイルを読み込む基本的な方法は、functions.phpにwp_enqueue_scriptを使って記述する方法です。
たとえば、子テーマ内にjs/script.jsを設置して読み込む場合は、次のように記述します。
PHPfunction my_enqueue_scripts() {
wp_enqueue_script(
'my-script',
get_stylesheet_directory_uri() . '/js/script.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
この方法を使うと、WordPressのルールに沿ってJavaScriptを読み込めます。
また、依存関係や読み込み位置を管理できるため、jQueryを使う場合や複数のJavaScriptファイルを扱う場合にも適しています。
2-2. プラグインを使ってJavaScriptを追加する方法
初心者にとって扱いやすいのが、プラグインを使ってJavaScriptを追加する方法です。
コードを入力する専用画面が用意されているため、テーマファイルを直接編集せずにJavaScriptを追加できます。
たとえば、ヘッダーやフッターにコードを追加できるプラグイン、投稿・固定ページごとにコードを追加できるプラグインなどがあります。
プラグインを使うメリットは、テーマを変更してもコードが残りやすいことです。一方で、プラグインを入れすぎると管理が複雑になったり、表示速度に影響したりする場合があります。
2-3. カスタムHTMLブロックに直接JavaScriptを書く方法
投稿や固定ページの一部だけでJavaScriptを使いたい場合、ブロックエディタの「カスタムHTML」ブロックにscriptタグを書く方法もあります。
例として、クリックするとメッセージを表示する簡単なコードは次のようになります。
HTML<button id="sample-button">クリック</button>
<script>
document.getElementById('sample-button').addEventListener('click', function() {
alert('クリックされました');
});
</script>
ただし、WordPressの環境やユーザー権限、セキュリティ設定によってはscriptタグが削除されたり、保存できなかったりすることがあります。
また、複雑なJavaScriptをカスタムHTMLブロックに直接書くと、管理しづらくなります。簡単なテストや一部ページだけの小さな処理に向いている方法です。
2-4. header.phpやfooter.phpにscriptタグを追加する方法
テーマファイルのheader.phpやfooter.phpにscriptタグを直接追加する方法もあります。
たとえば、footer.phpの閉じbodyタグの直前に次のようなコードを追加できます。
HTML<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>
ただし、この方法は初心者にはあまりおすすめできません。
理由は、テーマ更新でコードが消える可能性があること、WordPressの読み込み管理に乗らないこと、他のJavaScriptとの依存関係を管理しづらいことです。
どうしても直接追加する場合は、必ず子テーマを使い、編集前にバックアップを取っておきましょう。
2-5. どの方法を選ぶべきか初心者向けに比較
初心者がWordPressでJavaScriptを追加する場合、目的に合わせて次のように選ぶとわかりやすいです。
サイト全体で使うJavaScriptを追加したい場合は、functions.phpでwp_enqueue_scriptを使う方法がおすすめです。WordPressの標準的な読み込み方法で、管理もしやすくなります。
コード編集に不安がある場合は、プラグインを使う方法が向いています。テーマファイルを触らずに済むため、初心者でも比較的安全です。
特定の投稿や固定ページだけで簡単なJavaScriptを試したい場合は、カスタムHTMLブロックを使う方法があります。ただし、scriptタグが保存できないこともあります。
header.phpやfooter.phpに直接書く方法は、仕組みを理解している中級者向けです。初心者は、まずfunctions.phpまたはプラグインから始めるとよいでしょう。
3. functions.phpでJavaScriptを正しく読み込む手順
WordPressでJavaScriptを本格的に使うなら、functions.phpで読み込む方法を覚えておくと便利です。
ここでは、JavaScriptファイルを設置して、wp_enqueue_scriptで読み込む基本手順を解説します。
3-1. JavaScriptファイルをテーマフォルダに設置する
まず、JavaScriptファイルをテーマフォルダ内に設置します。
子テーマを使っている場合は、子テーマのフォルダ内にjsフォルダを作成し、その中にscript.jsを置きます。
例として、次のような構成になります。
wp-content/
themes/
your-child-theme/
functions.php
js/
script.js
script.jsには、動かしたいJavaScriptを書きます。
JavaScriptdocument.addEventListener('DOMContentLoaded', function() {
console.log('JavaScriptが読み込まれました');
});
DOMContentLoadedを使うと、HTMLの読み込みが終わってからJavaScriptを実行できます。要素がまだ存在しないタイミングで処理が走ることを防げます。
3-2. wp_enqueue_scriptでJavaScriptを読み込む
次に、functions.phpにwp_enqueue_scriptを使ってJavaScriptファイルを読み込みます。
PHPfunction my_enqueue_scripts() {
wp_enqueue_script(
'my-script',
get_stylesheet_directory_uri() . '/js/script.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
それぞれの意味は次のとおりです。
PHP'my-script'
これはハンドル名です。WordPressがスクリプトを識別するための名前です。
PHPget_stylesheet_directory_uri() . '/js/script.js'
これはJavaScriptファイルのURLです。子テーマ内のファイルを読み込む場合に使います。
PHParray()
これは依存関係です。jQueryに依存する場合はarray('jquery')と書きます。
PHP'1.0.0'
これはバージョン番号です。キャッシュ対策にも使えます。
PHPtrue
これはJavaScriptをfooter側で読み込む指定です。trueにすると、通常はページ下部で読み込まれます。
3-3. get_template_directory_uriとget_stylesheet_directory_uriの違い
WordPressでJavaScriptを読み込むときに混乱しやすいのが、get_template_directory_uriとget_stylesheet_directory_uriの違いです。
get_template_directory_uriは、親テーマのディレクトリURLを取得します。
一方、get_stylesheet_directory_uriは、現在有効なテーマのディレクトリURLを取得します。子テーマを使っている場合は、子テーマのURLを取得します。
子テーマにJavaScriptファイルを置いている場合は、基本的にget_stylesheet_directory_uriを使います。
PHPget_stylesheet_directory_uri() . '/js/script.js'
親テーマ内のファイルを読み込む場合は、get_template_directory_uriを使います。
PHPget_template_directory_uri() . '/js/script.js'
初心者は、子テーマを使ってカスタマイズすることが多いため、まずはget_stylesheet_directory_uriを覚えておくとよいでしょう。
3-4. headerではなくfooterで読み込むべきケース
JavaScriptは、可能であればfooter側で読み込むのが一般的です。
理由は、JavaScriptの読み込みがページ表示を妨げる場合があるからです。特に、表示に直接関係しない処理や、HTMLの要素を操作する処理は、ページ下部で読み込んでも問題ないことが多いです。
wp_enqueue_scriptの第5引数をtrueにすると、footer側で読み込めます。
PHPwp_enqueue_script(
'my-script',
get_stylesheet_directory_uri() . '/js/script.js',
array(),
'1.0.0',
true
);
ただし、ページの表示前に必要なJavaScriptや、head内で読み込む必要がある外部タグなどは、header側に読み込む場合もあります。
その場合は、第5引数をfalseにします。
PHPwp_enqueue_script(
'my-script',
get_stylesheet_directory_uri() . '/js/script.js',
array(),
'1.0.0',
false
);
迷った場合は、まずfooterで読み込み、動作に問題がないか確認するとよいでしょう。
3-5. 特定のページだけJavaScriptを読み込む方法
すべてのページで同じJavaScriptを読み込むと、不要なページでもファイルが読み込まれ、表示速度に影響することがあります。
特定のページだけJavaScriptを読み込みたい場合は、条件分岐を使います。
たとえば、固定ページのスラッグがcontactのページだけで読み込む場合は、次のように書きます。
PHPfunction my_enqueue_contact_script() {
if (is_page('contact')) {
wp_enqueue_script(
'contact-script',
get_stylesheet_directory_uri() . '/js/contact.js',
array(),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'my_enqueue_contact_script');
投稿ページだけで読み込みたい場合は、is_singleを使います。
PHPfunction my_enqueue_single_script() {
if (is_single()) {
wp_enqueue_script(
'single-script',
get_stylesheet_directory_uri() . '/js/single.js',
array(),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'my_enqueue_single_script');
ページごとに必要なJavaScriptだけを読み込むことで、サイト全体を軽く保ちやすくなります。
4. プラグインでJavaScriptを追加する手順
functions.phpの編集に不安がある場合は、プラグインを使ってJavaScriptを追加する方法が便利です。
管理画面からコードを追加できるため、初心者でも扱いやすいのが特徴です。
4-1. プラグインを使うメリットとデメリット
プラグインを使うメリットは、テーマファイルを直接編集しなくてよいことです。
functions.phpを編集する必要がないため、記述ミスでサイト全体がエラーになるリスクを減らせます。また、テーマを変更しても、プラグイン側に保存したコードは残ることが多いです。
一方で、デメリットもあります。
プラグインを増やしすぎると、管理が複雑になります。また、プラグイン同士の競合や、表示速度への影響が起こる可能性もあります。
そのため、プラグインは便利ですが、必要なものだけを選んで使うことが大切です。
4-2. 初心者に向いているJavaScript追加プラグイン
WordPressでJavaScriptを追加するプラグインには、ヘッダーやフッターにコードを挿入できるタイプがあります。
初心者は、次のような機能があるプラグインを選ぶと使いやすいです。
・ヘッダーとフッターを分けてコードを追加できる
・サイト全体と個別ページで使い分けられる
・管理画面がわかりやすい
・不要になったコードを簡単に削除できる
・利用者が多く、更新が継続されている
JavaScript追加用のプラグインを選ぶときは、最終更新日、利用者数、レビュー、対応しているWordPressバージョンを確認しましょう。
長期間更新されていないプラグインは、セキュリティや互換性の面で注意が必要です。
4-3. サイト全体にJavaScriptを追加する方法
プラグインでサイト全体にJavaScriptを追加する場合は、一般的に次の手順で進めます。
まず、WordPress管理画面からプラグインをインストールして有効化します。
次に、プラグインの設定画面を開きます。ヘッダー用、フッター用、body開始直後用など、コードを挿入する場所が分かれていることがあります。
JavaScriptは、基本的にフッター側に追加するのがおすすめです。
HTML<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('サイト全体で読み込まれています');
});
</script>
外部JavaScriptファイルを読み込む場合は、scriptタグでURLを指定します。
HTML<script src="https://example.com/sample.js"></script>
ただし、外部スクリプトを使う場合は、信頼できる提供元かどうかを必ず確認しましょう。
4-4. 投稿・固定ページごとにJavaScriptを追加する方法
投稿や固定ページごとにJavaScriptを追加したい場合は、個別ページ単位でコードを設定できるプラグインを使うと便利です。
たとえば、特定のランディングページだけに計測タグを入れたい場合や、特定ページだけでアニメーションを動かしたい場合に向いています。
ページごとにJavaScriptを追加できると、不要なページでコードが読み込まれないため、表示速度の面でも有利です。
ただし、ページごとにバラバラにコードを入れすぎると、後から管理しづらくなります。
どのページにどのJavaScriptを入れたか、メモを残しておくと安心です。
4-5. プラグイン使用時に注意したいセキュリティと表示速度
プラグインでJavaScriptを追加する場合でも、セキュリティと表示速度には注意が必要です。
特に、外部サービスのコードをそのまま貼り付ける場合は、提供元が信頼できるか確認しましょう。悪意のあるJavaScriptを追加すると、サイト改ざんや情報漏えいにつながる可能性があります。
また、JavaScriptが多すぎると、ページの表示速度が遅くなることがあります。
使っていないコードは削除し、必要なページだけで読み込むようにしましょう。
5. WordPressでJavaScriptが追加できない原因と解決策
WordPressでJavaScriptを追加しようとしても、保存できない、反映されない、エラーになることがあります。
ここでは、よくある原因と解決策を紹介します。
5-1. functions.phpの記述ミスでサイトにエラーが出る
functions.phpにコードを追加した直後にサイトが表示されなくなった場合、PHPの記述ミスが原因である可能性があります。
よくあるミスは次のとおりです。
・セミコロンが抜けている
・括弧の数が合っていない
・関数名が重複している
・全角文字が混ざっている
・コピー時に不要な文字が入っている
たとえば、次のようにセミコロンが抜けているとエラーになります。
PHPadd_action('wp_enqueue_scripts', 'my_enqueue_scripts')
正しくは次のように書きます。
PHPadd_action('wp_enqueue_scripts', 'my_enqueue_scripts');
functions.phpを編集する前には、必ず元のコードをコピーして保存しておきましょう。エラーが出た場合は、FTPやサーバーのファイルマネージャーから元に戻します。
5-2. JavaScriptファイルのパスが間違っている
JavaScriptが読み込まれない原因として多いのが、ファイルパスの間違いです。
たとえば、functions.phpでは次のように指定しているのに、
PHPget_stylesheet_directory_uri() . '/js/script.js'
実際にはファイル名がscripts.jsになっていると、読み込まれません。
確認すべきポイントは次のとおりです。
・jsフォルダの場所は正しいか
・ファイル名は一致しているか
・大文字と小文字が一致しているか
・子テーマと親テーマを間違えていないか
・URLにアクセスしたとき404エラーにならないか
ブラウザの検証ツールでNetworkタブを開くと、JavaScriptファイルが正しく読み込まれているか確認できます。
5-3. テーマやプラグインの更新でコードが消える
親テーマのfunctions.php、header.php、footer.phpを直接編集している場合、テーマ更新時に追加したコードが消えることがあります。
これは、テーマ更新によってファイルが上書きされるためです。
解決策は、子テーマを使うことです。
子テーマにfunctions.phpやJavaScriptファイルを用意し、そこにカスタマイズを追加すれば、親テーマを更新しても変更内容が残りやすくなります。
また、テーマに依存しないコードであれば、プラグインを使って管理する方法もあります。
5-4. WordPressのエディタでscriptタグが削除される
投稿や固定ページにscriptタグを直接入力したのに、保存後に消えてしまうことがあります。
これは、WordPressの権限やセキュリティ機能によって、危険なコードと判断される場合があるためです。
特に、管理者以外の権限ではscriptタグを保存できないことがあります。また、セキュリティ系プラグインやサーバー側のWAFによって保存がブロックされる場合もあります。
解決策としては、次の方法があります。
・管理者権限で作業する
・カスタムHTMLブロックを使う
・JavaScript追加用プラグインを使う
・functions.phpで読み込む
・セキュリティ設定を確認する
安全性を考えると、投稿本文に直接scriptタグを書くより、functions.phpやプラグインで管理する方法がおすすめです。
5-5. 権限やセキュリティ設定で保存できない
JavaScriptを追加しようとしたときに、403エラーが出たり、保存ボタンを押しても反映されなかったりする場合があります。
この場合、サーバーのWAF、セキュリティプラグイン、ユーザー権限が関係している可能性があります。
たとえば、scriptタグや外部URLを含むコードが不正な操作と判断され、保存がブロックされることがあります。
解決策としては、次の順番で確認しましょう。
まず、管理者権限でログインしているか確認します。
次に、セキュリティプラグインの設定を確認します。
それでも保存できない場合は、サーバーのWAF設定を確認します。ただし、WAFを無効化する場合は一時的に行い、作業後は元に戻すようにしましょう。
6. WordPressでJavaScriptが動かない原因と解決策
JavaScriptを追加できても、実際に動かないことがあります。
原因は、コードのエラー、読み込み順序、キャッシュ、jQueryの書き方、プラグイン競合などさまざまです。
ここでは、よくある原因と確認方法を解説します。
6-1. ブラウザの検証ツールでエラーを確認する
JavaScriptが動かないときは、まずブラウザの検証ツールを確認しましょう。
Google Chromeの場合、ページ上で右クリックして「検証」を選び、Consoleタブを開きます。
エラーがある場合、赤い文字で表示されます。
たとえば、次のようなエラーが出ることがあります。
Uncaught TypeError: Cannot read properties of null
これは、JavaScriptで取得しようとしているHTML要素が存在しない場合によく出るエラーです。
次のようなコードで、存在しない要素にイベントを設定しようとすると発生します。
JavaScriptdocument.getElementById('button').addEventListener('click', function() {
alert('クリックされました');
});
要素が存在するか確認してから処理を書くと安全です。
JavaScriptdocument.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('button');
if (button) {
button.addEventListener('click', function() {
alert('クリックされました');
});
}
});
JavaScriptが動かないときは、まずConsoleでエラーを確認する習慣をつけましょう。
6-2. キャッシュが残っていて変更が反映されない
コードを修正したのに変化がない場合、キャッシュが原因かもしれません。
WordPressでは、次のようなキャッシュが影響することがあります。
・ブラウザキャッシュ
・キャッシュ系プラグイン
・サーバーキャッシュ
・CDNキャッシュ
・テーマ側のキャッシュ
まずはブラウザで強制再読み込みを試します。
WindowsならCtrl + F5、MacならCommand + Shift + Rで再読み込みできます。
それでも反映されない場合は、キャッシュプラグインやサーバーのキャッシュを削除しましょう。
functions.phpでJavaScriptを読み込む場合、バージョン番号を変更することでキャッシュ対策になることがあります。
PHPwp_enqueue_script(
'my-script',
get_stylesheet_directory_uri() . '/js/script.js',
array(),
'1.0.1',
true
);
修正するたびにバージョン番号を変えると、新しいファイルとして読み込まれやすくなります。
6-3. jQueryの書き方がWordPress向けになっていない
WordPressでjQueryを使う場合、一般的な書き方がそのまま動かないことがあります。
よくあるのが、$を使ったコードです。
JavaScript$(function() {
$('.button').on('click', function() {
alert('クリックされました');
});
});
WordPressでは、jQueryがnoConflictモードで読み込まれるため、$がそのまま使えない場合があります。
WordPressで安全に書くなら、次のようにします。
JavaScriptjQuery(function($) {
$('.button').on('click', function() {
alert('クリックされました');
});
});
この書き方なら、関数の中で$を使えます。
jQueryを使ったコードをコピペして動かない場合は、まず$の扱いを確認しましょう。
6-4. JavaScriptの読み込み順序が間違っている
JavaScriptには読み込み順序があります。
たとえば、jQueryを使うコードがjQuery本体より先に読み込まれると、エラーになります。
Uncaught ReferenceError: jQuery is not defined
この場合は、wp_enqueue_scriptで依存関係を指定します。
PHPfunction my_enqueue_jquery_script() {
wp_enqueue_script(
'my-jquery-script',
get_stylesheet_directory_uri() . '/js/jquery-script.js',
array('jquery'),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_script');
array('jquery')と指定することで、WordPressがjQueryを先に読み込んでから、自分のJavaScriptを読み込んでくれます。
複数のJavaScriptファイルを使う場合も、依存関係を正しく設定することが大切です。
6-5. 他のプラグインやテーマと競合している
JavaScriptが動かない原因として、他のプラグインやテーマとの競合もあります。
特に、スライダー、ポップアップ、最適化、キャッシュ、広告、計測タグ関連のプラグインはJavaScriptを追加することが多いため、競合が起こる場合があります。
確認方法としては、次の手順が有効です。
まず、ブラウザのConsoleでエラーを確認します。
次に、キャッシュや最適化系プラグインを一時的に無効化して確認します。
それでも解決しない場合は、プラグインを1つずつ停止して原因を探します。
ただし、本番サイトでいきなりプラグインを停止すると表示に影響する可能性があります。できればステージング環境やテスト環境で確認しましょう。
6-6. deferやasync、遅延読み込みが原因で動かない
表示速度を改善するために、JavaScriptにdeferやasyncを付けたり、遅延読み込みを有効にしたりしている場合があります。
これ自体は有効な施策ですが、JavaScriptの実行タイミングが変わるため、コードが動かなくなることがあります。
特に、次のようなケースでは注意が必要です。
・jQueryより先に自作コードが実行される
・DOMができる前に要素を取得している
・外部スクリプトの読み込み完了前に処理している
・最適化プラグインがファイルを結合して順序が変わっている
JavaScriptが突然動かなくなった場合は、キャッシュ・最適化プラグインのdefer、async、遅延読み込み、ファイル結合の設定を一時的に無効化して確認しましょう。
7. WordPressでjQueryを使うときの注意点
WordPressでJavaScriptを使うとき、jQueryを利用する場面も多くあります。
ただし、WordPressのjQueryには独自の注意点があります。
7-1. WordPressにはjQueryが標準で用意されている
WordPressにはjQueryが標準で用意されています。
そのため、自分で外部CDNからjQueryを読み込まなくても、wp_enqueue_scriptで依存関係にjqueryを指定すれば利用できます。
PHPfunction my_enqueue_script_with_jquery() {
wp_enqueue_script(
'my-script',
get_stylesheet_directory_uri() . '/js/script.js',
array('jquery'),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_script_with_jquery');
無理に別のjQueryを読み込むと、WordPress本体やプラグインが利用しているjQueryと競合する可能性があります。
基本的には、WordPressに用意されているjQueryを使うのがおすすめです。
7-2. $が使えない原因とnoConflictモード
通常のjQueryでは、次のように$を使うことが多いです。
JavaScript$(document).ready(function() {
console.log('ready');
});
しかし、WordPressでは他のライブラリとの競合を避けるため、jQueryがnoConflictモードで動作します。
そのため、$をそのまま使うと、次のようなエラーが出る場合があります。
Uncaught TypeError: $ is not a function
WordPressでは、次のようにjQueryと書くのが安全です。
JavaScriptjQuery(document).ready(function() {
console.log('ready');
});
または、関数内で$を使えるようにします。
JavaScriptjQuery(function($) {
console.log('ready');
});
7-3. jQueryを依存関係として正しく読み込む方法
jQueryを使うJavaScriptファイルを読み込む場合は、wp_enqueue_scriptの依存関係にjqueryを指定します。
PHPfunction my_enqueue_jquery_dependent_script() {
wp_enqueue_script(
'custom-jquery-script',
get_stylesheet_directory_uri() . '/js/custom-jquery.js',
array('jquery'),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_dependent_script');
これにより、WordPressはjQueryを先に読み込み、その後にcustom-jquery.jsを読み込みます。
依存関係を指定しないと、読み込み順序によってはjQueryが未定義になり、JavaScriptが動かない原因になります。
7-4. jQueryコードを安全に書く基本形
WordPressでjQueryを書くときは、次の基本形を使うと安全です。
JavaScriptjQuery(function($) {
$('.button').on('click', function() {
$('.target').toggleClass('is-active');
});
});
この書き方では、jQueryが読み込まれた後に処理が実行され、関数内では$を使えます。
要素が存在するか確認したい場合は、次のように書くとより安全です。
JavaScriptjQuery(function($) {
const button = $('.button');
if (button.length) {
button.on('click', function() {
$('.target').toggleClass('is-active');
});
}
});
コピペしたjQueryコードがWordPressで動かない場合は、この形に書き換えて試してみましょう。
8. JavaScriptを安全に運用するためのポイント
WordPressでJavaScriptを追加できるようになっても、運用方法を間違えると、エラーや表示速度低下の原因になります。
安全に管理するためのポイントを確認しておきましょう。
8-1. 親テーマを直接編集しない
WordPressでカスタマイズする場合、親テーマを直接編集しないことが重要です。
親テーマを直接編集すると、テーマ更新時に変更内容が上書きされて消える可能性があります。
JavaScriptをテーマ側で管理する場合は、子テーマを作成し、子テーマのfunctions.phpやjsフォルダにコードを追加しましょう。
また、テーマに依存しないJavaScriptであれば、プラグインを使って管理する方法もあります。
8-2. 不要なJavaScriptを増やしすぎない
JavaScriptは便利ですが、増やしすぎると管理が難しくなります。
使っていないコードが残っていると、エラーの原因になったり、表示速度に影響したりします。
特に、外部サービスのタグ、計測コード、広告タグ、チャットツール、ヒートマップツールなどは、知らないうちに増えがちです。
定期的に確認し、不要なJavaScriptは削除しましょう。
8-3. 表示速度に影響するJavaScriptを見直す
JavaScriptはページ表示速度に影響します。
ファイルサイズが大きい、外部スクリプトが多い、すべてのページで不要なコードを読み込んでいる、といった状態は改善の余地があります。
見直すポイントは次のとおりです。
・不要なJavaScriptを削除する
・必要なページだけで読み込む
・footerで読み込む
・ファイルを軽量化する
・外部スクリプトを減らす
・キャッシュを活用する
ただし、最適化プラグインでJavaScriptを結合・遅延読み込みすると、動作不良が起きる場合もあります。表示速度と動作確認のバランスが大切です。
8-4. 外部JavaScriptを使うときの注意点
外部JavaScriptを使う場合は、提供元を必ず確認しましょう。
信頼できないサイトのJavaScriptを読み込むと、セキュリティリスクがあります。
また、外部サービス側で障害が発生すると、自分のサイトの表示や動作に影響する可能性もあります。
外部JavaScriptを使うときは、次の点を確認してください。
・提供元が信頼できるか
・本当に必要なコードか
・個人情報を扱っていないか
・表示速度に影響していないか
・利用規約に問題がないか
よくわからないコードをそのまま貼り付けるのは避けましょう。
8-5. エラー発生時にすぐ戻せる管理方法
JavaScriptを追加・変更するときは、エラーが起きてもすぐに戻せるように管理しておくことが大切です。
おすすめの管理方法は次のとおりです。
・変更前のコードを保存しておく
・どのファイルを編集したかメモする
・追加した日付と内容を記録する
・テスト環境で確認してから本番に反映する
・バックアップから復元できる状態にしておく
特にfunctions.phpを編集する場合は、ミスがあるとサイト全体に影響します。
「どこに何を追加したか」がわかる状態にしておくと、トラブル時の復旧が早くなります。
9. WordPressのJavaScriptに関するよくある質問
ここでは、WordPressでJavaScriptを使うときによくある疑問に回答します。
9-1. WordPressでJavaScriptはどこに書けばいい？
基本的には、JavaScriptファイルを作成し、functions.phpでwp_enqueue_scriptを使って読み込む方法がおすすめです。
コード編集に不安がある初心者は、JavaScript追加用のプラグインを使う方法でも問題ありません。
一部の投稿や固定ページだけで簡単なJavaScriptを使いたい場合は、カスタムHTMLブロックに書く方法もあります。
ただし、長く運用するサイトでは、コードをまとめて管理できる方法を選ぶのが安全です。
9-2. functions.phpとプラグインはどちらがおすすめ？
WordPressの仕組みに慣れている場合は、functions.phpでwp_enqueue_scriptを使う方法がおすすめです。読み込み条件や依存関係を細かく管理できます。
初心者や、テーマファイルを編集したくない場合は、プラグインを使う方法が向いています。
判断基準としては、次のように考えるとわかりやすいです。
・長期的にきちんと管理したいならfunctions.php
・コード編集に不安があるならプラグイン
・テーマを変更しても使いたいコードならプラグイン
・テーマに関係する動きなら子テーマのfunctions.php
どちらが絶対に正解というわけではなく、目的とスキルに合わせて選ぶことが大切です。
9-3. 投稿ページだけにJavaScriptを入れられる？
投稿ページだけにJavaScriptを入れることは可能です。
functions.phpでis_singleを使うと、投稿ページだけにJavaScriptを読み込めます。
PHPfunction my_enqueue_post_only_script() {
if (is_single()) {
wp_enqueue_script(
'post-only-script',
get_stylesheet_directory_uri() . '/js/post-only.js',
array(),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'my_enqueue_post_only_script');
特定の投稿だけに入れたい場合は、投稿IDやスラッグで条件分岐することもできます。
PHPif (is_single('sample-post')) {
// 特定の投稿だけで読み込む
}
不要なページでJavaScriptを読み込まないようにすると、表示速度の改善にもつながります。
9-4. JavaScriptを入れたら画面が真っ白になったときは？
JavaScriptを入れただけで画面が真っ白になることは少ないですが、functions.phpにPHPの記述ミスがあると、サイト全体が表示されなくなることがあります。
まず、直前に追加したfunctions.phpのコードを確認してください。
管理画面に入れない場合は、FTPやサーバーのファイルマネージャーからfunctions.phpを開き、追加したコードを削除します。
事前にバックアップを取っていれば、元のファイルに戻すことで復旧できます。
画面が真っ白になるトラブルを防ぐためにも、本番環境で直接編集せず、テスト環境で確認してから反映するのがおすすめです。
9-5. コピペしたJavaScriptが動かないのはなぜ？
コピペしたJavaScriptがWordPressで動かない原因はいくつかあります。
よくある原因は次のとおりです。
・HTML要素のIDやclass名がサイトと合っていない
・jQueryの$が使えない
・jQueryを依存関係として読み込んでいない
・JavaScriptの読み込み順序が間違っている
・コードが実行されるタイミングが早すぎる
・キャッシュが残っている
・テーマやプラグインと競合している
まずは、ブラウザの検証ツールでConsoleエラーを確認しましょう。
jQueryのコードなら、WordPress向けに次の形へ書き換えると動く場合があります。
JavaScriptjQuery(function($) {
// ここに処理を書く
});
また、JavaScriptで操作したい要素が実際のページに存在しているかも確認してください。
まとめ
WordPressでJavaScriptを使う方法はいくつかありますが、基本はfunctions.phpでwp_enqueue_scriptを使ってJavaScriptファイルを読み込む方法です。
コード編集に慣れていない初心者は、プラグインを使ってJavaScriptを追加する方法も選択肢になります。
一方で、投稿本文やテーマファイルに直接scriptタグを書く方法は、手軽ではありますが、管理や安全性の面で注意が必要です。
WordPressでJavaScriptが追加できない場合は、functions.phpの記述ミス、ファイルパスの間違い、エディタによるscriptタグ削除、権限やセキュリティ設定を確認しましょう。
JavaScriptが動かない場合は、ブラウザの検証ツールでエラーを確認し、キャッシュ、jQueryの書き方、読み込み順序、プラグイン競合、deferやasyncの影響をチェックします。
特にjQueryを使う場合は、WordPressのnoConflictモードに注意し、次のような形で書くのが安全です。
JavaScriptjQuery(function($) {
// jQueryの処理
});
WordPressでJavaScriptを安全に運用するためには、親テーマを直接編集しないこと、不要なコードを増やしすぎないこと、表示速度への影響を確認すること、外部スクリプトの安全性を確認することが大切です。
正しい方法でJavaScriptを追加すれば、WordPressサイトに便利な機能や動きを安全に取り入れることができます。