JavaScriptをWordPressページに追加する方法（+デバッグのヒント）

公開: 2025-06-20

JavaScriptをWordPressページに追加したいのですが、どこから始めればいいのかわからないと思いますか？または、すでにそれを行っていて、トラブルシューティングの方法がわからないエラーメッセージやパフォーマンスの問題が表示されていますか？

いずれにせよ、あなたは正しい場所にいます。

この投稿は、JavaScriptとWordPressのすべてのものに関する一列列の全面的な教育になるでしょう。最後に、WordPressでJavaScriptを使用することが良いアイデアである理由、ページに追加する方法、および適切に機能していない場合やサイトを遅くしている場合に何をすべきかについて、必要なものがすべてわかります。

tl; dr

投稿全体を読むには忙しすぎて、簡単な要約が必要ですか？わかりましたが、それがあなただからです。

JavaScriptをWordPressページに追加すると、サイトがよりインタラクティブになり、多くのサードパーティツールと統合できるようになります。同時に、サイトを壊さないように慎重に検討する必要があります。

信頼できるソースからJavaScriptを使用し、Webサイトのバックアップ、子供のテーマを使用し、最初にステージングまたは開発環境で変更をテストするなどの安全上の注意を払ってください。さらに、サイトに追加するコードのパフォーマンスへの影響に注意してください。

WordPressフック、 functions.php 、個別のファイル、WordPressエディター、またはプラグインなど、JavaScriptをサイトに追加する方法はいくつかあります。

ブラウザ開発ツール、プラグインの競合の調査、およびWordPressデバッグモードを介して問題をトラブルシューティングします。

スクリプトを組み合わせ、削除、延期、または遅延させることにより、JavaScriptのパフォーマンスを向上させます。 WP Rocketなどのプラグインを使用して、プロセスを自動化することもできます。

JavaScriptをWordPressページに追加するのはなぜですか？

しばしばJSに略されたJavaScriptは、人気のあるプログラミング言語です。これは、Webページの作成に使用される3つの主要なテクノロジーの1つです。他の2つはHTMLで、ページの構造とコンテンツ、およびスタイリングを担当するCSSを定義します。

JavaScriptはクライアント側の言語であり、サーバーではなくブラウザで実行されることを意味します。そのため、ページが読み込まれた後でも、既存のCSSとHTMLを変更および更新するために使用できます。

そのため、その主な用途の1つは、Webページをよりインタラクティブにすることです。たとえば、JavaScriptはしばしば次のようなページ要素を駆動します。

  • スライドインメニュー
  • ポップアップ
  • アニメーション

WordPressブロックエディターは、主にJavaScriptで書かれています。

JavaScriptベースのWordPressブロックエディター

インタラクティブ性に加えて、JavaScriptは、Web分析の追跡スクリプトなど、サードパーティサービスをサイトに統合する一般的な方法でもあります。その他の例は次のとおりです。

  • ライブチャット
  • 電子メールのオプトインと連絡先フォーム
  • 埋め込まれたビデオ
  • インタラクティブマップ
  • ソーシャルメディアフィード

重要な考慮事項

誤って完了した場合、WordPressページにJavaScriptを追加すると、エラーや問題が発生する可能性があります。最初から予防策を講じることで、時間と欲求不満を後で節約できます。

  • 信頼できるソースのJavaScriptを使用して、サイトを安全で安定させてください。
  • 何か問題が発生した場合に変更を加える前に、ウェブサイトファイルとデータベースの完全なバックアップを取得します。
  • JavaScriptをテーマファイルに直接追加するときは、常に子テーマを使用してください。メインテーマを変更すると、更新すると変更が失われます。
  • ライブサイトに適用する前に、ステージングまたは開発環境の変更をテストします。
  • JavaScriptは、WordPressページに追加のコードを追加します。これにより、遅くなる可能性があります。サイトに新機能を紹介するときは、パフォーマンスを追跡してください。

WordPressのページにJavaScriptを追加する6つの方法

理論では十分です。以下では、JavaScriptをWordPressに追加する6つの方法を、最大から技術的なものまで示しています。

1. WordPressフックと機能を使用します

フックは、特定の時間または場所で実行されるように、カスタムコード（いわゆる「関数」）を添付できるWordPressロードプロセス内に配置されたコードの部分です。

たとえば、wp_head（）は、サイトの上部にある<head>セクションで実行されます。 JavaScriptをWordPressページに追加するために使用する場合は、（子）テーマのfuncions.phpファイルでそれを行う必要があります。

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

JavaScriptコードを「JavaScriptコードをここに配置してください」と書かれているところに入力してください。また、関数名を「add_custom_script」からより説明的なものに変更することもできます。

この方法は、単純な分析追跡コードや基本的なインタラクティブ要素など、非常に明確に定義された目的を持つ小さなスクリプトに最適です。また、ページのパフォーマンスを向上させるための一般的なソリューションであるフッターにJavaScriptをロードするためにも機能します。 wp_head（）の代わりにwp_footer（）を使用するだけです。

ページヘッドとフッターは、通常、ウェブサイトのどこにでも表示されるため、スクリプトをロードするための人気のある場所です。これにより、WordPressサイトのすべてのページにJavaScriptを追加するのに最適な方法になります。

特定のページにJavaScriptのみをロードする場合は、この方法と条件付きステートメントを組み合わせることができます。

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

これを単一ページに制限する部分は、is_page（123）です。 「123」はページIDであり、このコードを使用する場合は、ページのIDに更新する必要があります。 WordPressエディターでページを開くと、ブラウザバーに表示されます。 is_page（）を使用して、名前またはURLスラグでページをターゲットにすることもできます。

ブラウザバーのWordPressページID
ブログ投稿のis_single（）、ブログページのis_home（）、アーカイブページのis_archive（）、カテゴリアーカイブのis_category（）など、他にも多くの条件付きタグがあります。

2。別のファイルにJavaScriptをロードします

別のオプションは、JavaScriptを独自のファイルに入れることです。これは特に大規模なスクリプトについては良い考えですが、wp_register_script（）およびwp_enqueue_script（）関数でファイルをロードできるため、一般的には理にかなっています。

競合を回避し、スクリプトを正しい順序でロードし、依存関係を管理するのに役立つため、これは好ましい方法です。これがそれがどのように見えるかです：

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

この例では、スクリプトはTheme Directoryに配置されます。これはget_template_directory_uri（）でターゲットになります（子のテーマの場合は、代わりにget_stylesheet_directory_uri（）を使用してください）。配列（ 'jquery'）は、このスクリプトがjQueryに依存しており、その後ロードする必要があることを示します。 「1.0.0」はバージョン番号であり、「True」はWor​​dPressがフッターにスクリプトをロードする必要があることを意味します。

これも機能し、追跡コードのようなサードパーティのJavaScriptをロードする正しい方法です。サイトに掲載する前に、コードをユースケースに必ず更新してください。

3。テーマファイルにコードを含めます

フックは、すべてのJSスクリプトを単一の場所からenqueueするのに最適な方法ですが、テーマにロードする唯一の方法ではありません。

wp_head（）を使用してヘッドセクションに何かをロードする代わりに、スクリプトまたはそれへのリンクをヘッダーテーマファイルに直接投稿することで、同じことを実現できます。

古典的なテーマでは、それは通常header.phpです。テーマでそれを見つけ、コピーを作成して子供のテーマに配置し、スクリプトを<head>セクションのどこかに直接含めます。

特定のページにのみロードする場合は、以前と同様に条件付きステートメントを使用できます。または、テンプレートの階層のおかげで、そのページのみのカスタムファイルを作成することもできます。たとえば、PageContact.php 。

WordPressブロックテーマは、これらのテーマファイルを使用しなくなりました。あなたのテーマがブロックテーマである場合、ここで言及した他の方法のいずれかを選択することをお勧めします。

4.カスタムプラグインを作成します

JavaScriptをテーマファイルを使用してWordPressページに追加することの問題は、コードがテーマに依存することです。テーマを切り替えると、JavaScriptも消えます。

カスタムプラグインを使用して、それを回避できます。これにより、コードはテーマに依存しなくなり、WordPressプラグインメニューでアクティブ化および非アクティブ化することもできます。

WordPressページにJavaScriptを追加する簡単なプラグインのマークアップは次のとおりです。

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

このコードをPHPファイルに配置し、WordPressプラグインメニューに表示されるように、プラグイン名、プラグインURI 、説明、著者、および著者URIを独自の情報に調整してください。

ファイルに意味のあるものに名前を付けます。たとえば、 Custom-Tracking-Code-plugin.phpなど、WordPressインストールのWPコンテンツ/プラグイン内の同じ名前のディレクトリにアップロードします。その後、プラグインメニューに表示されます。

5.WordPressエディターにJavaScriptを追加します

これは最も推奨される方法ではありませんが、WordPressエディターを使用してJavaScriptをページに直接追加することもできます。これを行うには、新しいブロックを追加し（プラスボタンをクリックするか、フォワードスラッシュを使用します）、カスタムHTMLブロックを選択します。

JavaScriptコードを挿入して、ページにまっすぐロードするようにするだけです。

opening </script>タグをopening </script>タグを使用して、エディターの変更を保存してください。

コードタブを使用して、JavaScriptをクラシックエディターに追加することもできます。

6.コードスニペットプラグインを使用します

JavaScriptをサイトに追加するプラグインソリューションもなければ、WordPressではありません。実際、以下を含むいくつかがあります。

  • wpcode
  • ヘッダーフッターコードマネージャー
  • シンプルなカスタムCSSおよびJS
  • CSS＆JavaScriptツールボックス

プラグインを使用すると、JavaScriptをより適切に管理できます。スニペットに名前を付け、カテゴリに整理し、選択的にオンとオフを切り替えて、条件付きルールを設定できます。さらに、カスタムプラグインソリューションと同様に、JavaScriptをテーマから独立させます。

これらのプラグインを使用することも簡単です。彼らは通常、JavaScriptスニペットを管理できる新しいメニューをサイトに追加します。

新しいスニペットを作成し、コードを挿入してから、表示したい場所を構成します。

それはほとんどそれです。

WordPressのJavaScriptの問題のトラブルシューティング

WordPressのWebサイトとページにJavaScriptを追加する方法がわかりました。しかし、何かが機能しているように機能していない場合はどうなりますか？この記事の最後の部分で、遭遇する可能性のあるJavaScriptの問題を特定して解決する方法について話します。

1.ブラウザ開発者ツールを確認します

JavaScriptエラーを確認する1つの方法は、ブラウザの開発者ツールを使用することです。スクリプトを含む、基礎となるサイトコードを検査することができます。

任意のWebページを右クリックして検査を選択することで、それらを開くことができます。

または、ブラウザメニューを介してアクセスします。たとえば、Chromeには、より多くのツール> Developer Toolsの下にあります。

また、Chrome、Edge、およびFirefoxで、それらを開くためのキーボードショートカットもあります。Ctrl/CMD+Shift+I 、Safari CMD+OPT+Cです。

サイトで開発ツールを開き、 [コンソール]タブに移動します。ここでJavaScriptによって引き起こされたエラーを含むエラーが表示されるはずです。

ページをリロードする必要がある場合があることに注意してください。最も一般的なJavaScriptエラーは次のとおりです。

  • 参照エラー：欠落または未定義の変数または関数を示します。
  • TypeError：たとえば、不適切なタイプの値を使用しようとする操作に問題があることを示唆しています。
  • SyntaxError：括弧、セミコロン、引用符の欠落など、コード内のタイプミスまたは誤ったフォーマットのために発生することがよくあります。

どのスクリプト、ファイル、または関数がエラーを引き起こしているかを確認したいので、修正できます。 [ソース]タブでブレークポイントを使用するのに役立ちます。これにより、JavaScriptの実行を一時停止し、何が起こっているのかを検査できます。

お気に入りの検索エンジンまたはAIを使用して、見つけたエラーメッセージの詳細を確認してください。さらに、 [ネットワーク]タブをチェックして、スクリプトが適切に読み込まれているかどうかを確認することもできます。

2。テーマとプラグインの競合を解決します

たとえば、互換性のないライブラリや重複関数を使用する場合、テーマやプラグインの競合のためにJavaScriptエラーも発生する可能性があります。

これらのJavaScriptの問題をトラブルシューティングする方法は次のとおりです。

  • テーマとプラグインを更新：テーマまたはプラグイン開発者は、問題についてすでに知っており、最新バージョンでそれらを修正した可能性があります。
  • 一時的にデフォルトのテーマに切り替えます： Twenty25のようなWordPressデフォルトテーマをアクティブにします。問題が消えた場合、テーマに責任がある可能性があります。
  • プラグインを非アクティブ化：サイトのすべてのプラグインをオフにし、1つずつオンにして、問題が再び現れるかを確認します。それを引き起こすプラグインを更新または交換します。

Health Checkプラグインを使用すると、WordPressダッシュボード（トラブルシューティングタブに移動）から上記のすべてをシミュレートし、1回のクリックで戻ることができます。

また、あなたのウェブサイトの状態に関するより多くの追加情報もあります。ライブサイトではなく、開発またはステージングWebサイトでこれらのテストを行うことをお勧めします。

3.デバッグモードを使用します

WordPressには、サイトの問題を見つけて解決するのに役立つデバッグモードが組み込まれています。 JavaScriptの問題は直接表示されませんが、サイトのスクリプトに干渉する可能性のあるPHP、プラグイン、およびテーマエラーを簡単に見つけることができます。

デバッグモードをアクティブにするには、 WP-config.phpファイル（FTPまたはホスティングファイルマネージャーを介して）を開き、次の行を追加します。

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

既にdefine（ 'script_debug'、false）を見つけることができます。ファイル内。もしそうなら、単にそれを「真」に変更します。ファイルを保存して再アップロードします。

上記の設定では、デバッグモード、エラーログ（エラーがWP-Content/debug.logに表示されます）、およびコアCSSおよびJavaScriptファイルの未成年のバージョンをロードして、問題をより簡単に追跡できます。

繰り返しますが、これを訪問者の目から離れた開発サイトで行います。さらに、このコードを削除して通常に戻ることを忘れないでください。

WPデバッグプラグインを使用して、WordPressデバッグモードを有効にすることもできます。

4。パフォーマンスの問題に対処します

他のコードと同様に、WordPressページにJavaScriptを追加すると、Webサイトが遅くなる可能性があります。多くの場合、Webサイトをスピードテストし、「未使用のJavaScriptを減らす」という警告を受け取ることに気付くことがよくあります。

JavaScriptによって引き起こされるパフォーマンスの問題を回避するには、次のベストプラクティスに従ってください。

  • 不要なスクリプトを削除します。サイトでJavaScriptロードを定期的に監査して、実際にすべて、特にサードパーティサービスが必要かどうかを確認します。
  • フッターにスクリプトをロードする：早期にロードする必要がある場合に、JavaScriptファイルをヘッドセクションに配置するだけです。
  • スクリプトの結合：いくつかのスクリプトを単一のファイルに結合します（これは「連結」と呼ばれます）。多くの場合、単一の大きなファイルは、いくつかの小さなファイルよりも速くロードされます。
  • JavaScriptファイルのマイニー：これにより、コードを実行するのが不要な不要なフォーマットと白面が削除されます。
  • JavaScriptを非同期にロードします。つまり、ブラウザはJavaScriptファイルのロード中にサイトの処理を停止しないことを意味しますが、バックグラウンドにロードしてダウンロードしたら実行します。
  • 大規模なスクリプトの延期：ここでは、ファイルもバックグラウンドでダウンロードされますが、残りのロードプロセスが終了した後にのみ実行されるため、中断されません。
  • JavaScriptの実行の遅延：これにより、ユーザーの対話ができるまで、すべてのJavaScriptファイルとインラインスクリプトの読み込みが延期されます。それは、画像の怠zyなロードのようなものですが、JavaScriptファイル用です。

WPロケットでJavaScriptのパフォーマンスの最適化を簡素化します

これを手作業で行う代わりに、WPロケットを使用してはるかに簡単に実装するオプションもあります。サイトでアクティブな場合、プラグインはデフォルトでJavaScriptを模倣し、ファイル最適化メニューにいくつかのボックスをチェックするだけで、WordPressサイトのスクリプトを組み合わせ、遅延、延期、および非同期にロードできます。

WPロケットのJavaScript最適化設定

必要に応じて、ページ要素の応答性を妨げる場合に備えて、個々のスクリプト、プラグイン、ファイルを最適化されないように除外するオプションがあります。

それとは別に、WP Rocketは、次のようなバックグラウンドで多くのパフォーマンスの改善を自動的に実装します。

  • 別のモバイルキャッシュを含むキャッシュ
  • GZIP圧縮
  • キャッシュとリンクのプリロード
  • 重要な画像の最適化（怠zyなロードからの折り目の上の画像を除外するため）最大の満足した塗料を改善する
  • ページ上に要素を高く搭載するための自動怠zyなレンダリング

実際のところ、プラグインを単純にインストールしてアクティブ化すると、サイトのパフォーマンスベストプラクティスの80％が実装され、すぐに高速になります。それだけでは不十分な場合は、以下のように、サイトの速度を上げるためにアクティブ化できる他の多くの機能があります。

  • CSSの背景、ビデオ、IFRAMEなどの画像の怠zyLoading
  • 外部ファイルとフォントのプリロード
  • 自己ホストのGoogleフォント
  • データベースの最適化
  • RocketCDNを含むCDNに簡単に接続するオプション

WordPressページにJavaScriptを追加する準備はできましたか？

JavaScriptは、インタラクティブ性を追加したり、サードパーティソフトウェアとの統合を追加しても、WordPress Webサイトに多くのエキサイティングな可能性を提供します。スキルレベルと好みに応じて、ページに追加する方法はたくさんあります。

同時に、JavaScriptはエラーを導入し、ページのパフォーマンスの大きな要因になることができます。そのため、WordPressページにJavaScriptを注意して追加することが不可欠です。

JavaScriptに関連するパフォーマンスの問題に苦労している場合、WP Rocketは簡単かつ効果的に対処するのに役立ちます。さらに、サイトをスピードアップするために他の多くの機能を提供します。今日WPロケットを手に入れて、14日間リスクなしで試してみてください！