特定の WordPress ページのみに JavaScript を追加する方法

ターゲットの WordPress ページに JavaScript を実装する

WordPress は、Web サイトの管理とカスタマイズを簡単にする使いやすいプラットフォームです。ただし、特定のページでの JavaScript の実行など、一部の変更は実装が困難な場合があります。 Web サイトの「ヘッド」セクションに追加したスクリプトがすべてのページに存在する可能性があります。これは典型的な初心者の難しさです。

JavaScript ファイルを使用して特定のページをターゲットにする場合、JavaScript ファイルを条件付きで適用する方法を理解することが重要です。 JavaScript を全体的に使用すると、予期せぬ結果が生じ、Web サイトの速度が低下する可能性があります。これが、スクリプトを必要なページに制限することが重要である理由です。

この記事では、必要なページでのみ JavaScript が起動するように WordPress の設定を変更する手順を説明します。その答えは開発者以外の人にも理解できます。このガイドは、これから始めようとする人を対象としています。

このレッスンを終了する頃には、WordPress でページ固有のスクリプトを快適に扱えるようになっているはずです。 JavaScript が必要な場所でのみ実行され、Web サイトのパフォーマンスが向上するようにするために必要な正確なコードと手順について説明します。

指示	使用例
is_page()	として知られる関数 現在の WordPress ページが指定されたページ ID、タイトル、またはスラッグに対応するかどうかを確認します。スクリプトが特定のページにのみロードされることを保証するには、この機能は不可欠です。たとえば、 (is_page(42)) {... } の場合
wp_enqueue_script()	WordPress が使用するのは、 JavaScript ファイルをロードするメソッド。これにより、スクリプトがサイトのヘッドまたはフッターに読み込まれ、依存関係に正しく含まれることが保証されます。 wp_enqueue_script('custom-js', 'https://example.com/code.js') はこの例です。
add_action()	カスタム関数を事前定義された WordPress イベント (読み込みスクリプトなど) にフックするには、 方法。これにより、必要に応じてスクリプトを動的に挿入できるようになります。 'wp_enqueue_scripts'、'load_custom_js_on_specific_page' は、追加アクションの 2 つの例です。');
add_shortcode()	WordPress では、 関数。これにより、JavaScript などの動的なマテリアルを投稿エディターに直接追加できます。 Add_shortcode('custom_js', 'add_js_via_shortcode') は例です。
$.getScript()	ページが読み込まれたら、jQuery メソッドを使用できます。 外部 JavaScript ファイルを動的にロードします。 URL またはその他の基準に基づいてスクリプトの読み込みに条件付きロジックを適用することは、その貴重な用途です。 $.getScript('https://example.com/code.js') など
window.location.href	の property returns the full URL of the current page. It can be used to check for specific URL patterns, making it useful for conditionally loading JavaScript on certain pages. Example: if (window.location.href.indexOf('specific-page-slug') > プロパティは、現在のページの完全な URL を返します。特定の URL パターンをチェックするために使用できるため、特定のページで JavaScript を条件付きで読み込む場合に便利です。例: if (window.location.href.indexOf('特定のページのスラッグ') > -1) { ... }
get_header()	ヘッダー テンプレート ファイルは、WordPress によってロードされます。 関数。 JavaScript コードを追加する前に、そのコードはカスタム ページ テンプレートで使用され、構造が適切であることを確認します。例えば、
get_footer()	WordPress フッター テンプレートは、 この関数は、JavaScript がページ出力に適切に挿入される前にロードされることを確認します。例えば、

特定の WordPress ページにおける JavaScript の役割を理解する

スクリプトを「Head」セクションに直接置く方法では、スクリプトを実行する必要があるときにスクリプトがすべてのページに読み込まれる可能性があります。 特定の WordPress ページ上のファイル。ユーザーエクスペリエンスとパフォーマンスの観点から、これは理想的ではありません。前述のオプションは、スクリプトを指定されたページのみに制限することで、スクリプトをより効果的に処理する方法を提供します。たとえば、WordPress の ID またはスラッグに基づいて、ユーザーが特定のページを見ているかどうかを判断するメソッド。これは、JavaScript ファイルが必要な場合にのみ読み込まれるようにするために使用される主な手法です。

最初の方法では、コンディショナルタグを使用します。 一緒にファイルする 。この手法では、適切な依存関係管理を確保し、ページの適切な領域にスクリプトをロードする方法でスクリプトを追加する、WordPress の基本機能を利用します。を通じて アクションフックの場合、JavaScript 関数は WordPress が条件を満たすページを処理する場合にのみ追加されます。 is_page() 要件。これは効果的であるだけでなく、重要でないサイトでの無意味なスクリプトの実行を停止します。

ショートコードの使用は 2 番目の戦略の一部です。 WordPress ショートコードを使用すると、動的マテリアルをページまたは投稿に簡単に追加できます。 カスタム ショートコードを作成するために使用できます。これにより、必要に応じてコンテンツ領域にスクリプトを条件付きで挿入できるようになります。これにより、Web サイトまたは投稿のページ全体ではなく、特定のセクションでスクリプトを使用する場合に、より多くのオプションが提供されます。さらに、PHP ファイルに直接変更を加えることに抵抗がある人にとっては、より親しみやすいオプションです。

もう 1 つの方法は、jQuery を使用して URL 内の特定のパターンを検索するため、URL に特定のパラメーターがあるページにスクリプトを動的に読み込むのに最適です。 そして このアプローチでは、特定の文字列が URL に含まれているかどうかを識別し、JavaScript ファイルを適切にロードするために使用されます。このアプローチは、URL 構造でスクリプトの使用が必要な、独自のトラッキング コードを持つ電子商取引サイトやランディング ページなどの状況に適しています。これらの手法はすべてモジュール式で再利用可能で、必要な場合にのみスクリプトが読み込まれるようにすることで、ユーザー エクスペリエンスとパフォーマンスが向上します。

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
//php get_header(); //
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
//php get_footer(); //

WordPress ページでの JavaScript 読み込みの最適化

特定の WordPress ページで JavaScript を使用する場合、スクリプトがどこにロードされるかは重要な考慮事項です。 WordPress ではデフォルトでページ内にスクリプトを読み込むことが許可されています。 または 。パフォーマンス上の理由から、特に外部リソースを使用する場合は、通常、フッターにスクリプトをロードすることをお勧めします。これは、ページの読み込みが完了するまで JavaScript の実行を延期することで、ユーザーがページの読み込みを高速化できるようにするためです。

変更できます を渡してフッターにスクリプトをロードするメソッド 最後のパラメータとして。こうすることで、最後の body タグとページ コンテンツの残りの前にスクリプトが読み込まれるようにすることができます。重要度の低いスクリプトは遅延され、より重要なリソースが優先されるため、この手法は見かけの読み込み時間を短縮するのに役立ちます。この最適化は初心者にとっては大したことではないように思えるかもしれませんが、WordPress サイトの速度と機能に大きな影響を与えます。

キャッシュ無効化とバージョン管理も 2 つの重要な要素です。 WordPress は、 スクリプトにバージョン番号を追加する機能。 version 引数を追加することで、ユーザーがキャッシュから古い JavaScript を取得しないようにすることができます。これにより、スクリプトの最新バージョンが常に読み込まれるようになり、スクリプトの開発またはアップグレード時に非常に役立ちます。この手順により、スクリプトの衝突の可能性が低くなり、Web サイトの機能が強化されます。

1. スクリプトが特定のページでのみ開くようにするにはどうすればよいですか?
2. ページ ID またはスラッグに基づいてスクリプトを条件付きでロードするには、 の機能 テーマのファイル。
3. WordPress に JavaScript を追加する最良の方法は何ですか?
4. WordPress に JavaScript を追加するには、 関数を使用することをお勧めします。これにより、依存関係とスクリプト処理の適切な管理が保証されます。
5. フッターにJavaScriptを読み込むことはできますか?
6. はい、パフォーマンスを向上させるためにフッターにスクリプトをロードするには、次のように渡します。 の 5 番目の引数として 。
7. JavaScript ファイルのキャッシュ無効化はどのように処理すればよいですか?
8. 最新バージョンがロードされていることを確認するには、次のバージョン管理オプションを使用してスクリプトの URL にバージョン番号を追加します。 。
9. ショートコードを使用して JavaScript を追加できますか?
10. はい、使用できます ページまたは投稿の特定の領域に JavaScript を追加できるショートコードを構築します。

JavaScript コードが特定のページをターゲットにしている場合、Web サイトでの JavaScript コードの実行が向上し、ユーザー エクスペリエンスが向上します。スクリプトは、次のような関数を使用することで、必要な場所にのみロードされます。 そして これにより、Web サイトの他の領域の読み込み時間が短縮されます。

WordPress を初めて使用し、多くのコードを知らなくてもスクリプトを効率的に管理したい場合は、これらの方法が最適です。コードの実行範囲を制限することで、特定のページに JavaScript を適切に実装すると、効率に加えてセキュリティも強化されることを思い出してください。