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

コンディショナルタグを使用して特定の WordPress ページに JavaScript を追加する

このアプローチでは、WordPress の PHP 組み込みコンディショナル タグを利用して、選択したページにのみ JavaScript ファイルを読み込みます。この手法は WordPress に非常に最適化されています。

// 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');

ショートコードを使用して特定の WordPress ページで JavaScript を実行する

この方法では、WordPress ショートコードを使用して特定のページに JavaScript を条件付きで追加することで、スクリプトをどこで使用するかを自由に指定できます。

// 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

jQueryを使用したURLパラメータに基づくJavaScriptのロード

この手法では、条件付きで JavaScript を読み込み、jQuery を使用して特定の URL パターンを識別します。ページを動的にターゲット設定する場合、これは理想的です。

<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>

テンプレート ファイルを使用して特定のページに JavaScript を追加する

この方法では、JavaScript を WordPress ページ テンプレート ファイルに直接追加することで、スクリプトがその特定のページにのみ読み込まれるようになります。

// 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 の追加に関するよくある質問

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

WordPress ページの JavaScript の最適化に関する最終的な考え

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

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