【WordPress】jQueryを読み込む方法

WordPressの開発を進める中で、jQueryを活用したいと考えることがあるでしょう。WordPressにはデフォルトでjQueryが含まれていますが、適切な方法で読み込む必要があります。この記事では、jQueryをWordPressで正しく読み込む方法を見出し付きで解説します。

wp_enqueue_scriptを使用してjQueryを読み込む

WordPressテーマやプラグインでjQueryを読み込む最も基本的な方法は、wp_enqueue_script関数を使用することです。この関数を使うことで、WordPressに同梱されているjQueryを適切に読み込むことができます。以下に、functions.phpファイルに追加すべきコードを示します。

function my_theme_enqueue_scripts() {
    // jQueryを読み込む
    wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

このコードにより、WordPressにデフォルトで含まれているjQueryが確実に読み込まれます。

jQueryに依存するスクリプトを登録する方法

jQueryを使用するカスタムスクリプトがある場合、その依存関係を指定してスクリプトを読み込む必要があります。依存関係を正しく指定することで、スクリプトの実行順序が保たれ、エラーを防ぐことができます。以下にその例を示します。

function my_theme_enqueue_scripts() {
    // jQueryを読み込む
    wp_enqueue_script('jquery');

    // カスタムスクリプトを読み込む（jQueryに依存）
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), null, true);
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

このコードでは、custom-script.jsがjQueryに依存していることを示し、jQueryが読み込まれた後に実行されるように設定しています。

jQueryのnoConflictモードへの対応方法

WordPressでは、jQueryが「noConflict」モードで動作します。このため、$シンボルを直接使用するとエラーが発生することがあります。これを防ぐために、jQueryを明示的に使用するか、即時関数でスコープを限定する方法があります。

jQuery(document).ready(function($) {
    // jQueryコード
    $('#element').hide();
});

もしくは、以下のように即時関数を使うことで、$を使えるようにスコープを限定することも可能です。

(function($) {
    // jQueryコード
    $('#element').hide();
})(jQuery);

まとめ

jQueryをWordPressで正しく読み込むためには、wp_enqueue_script関数を使用し、依存関係を考慮してスクリプトを登録することが重要です。また、noConflictモードに対応するための対策も忘れずに行いましょう。これらの手順を踏むことで、WordPressでのjQuery利用がスムーズに進みます。