動的な検索バー、高度な商品フィルター、スライダーなどのインタラクティブなページ要素は、サイトをより使いやすく魅力的にできます。しかし、JavaScriptを使ったり、WordPressのプラグインをインストールしたりしなければ、これらの機能を作成することはできません。
幸い、WordPressでjQueryを使えば、JavaScriptのデザイン要素を簡単に作成できます。手動で行うことも、プラグインを使って作業を効率化することもできます。
この記事では、jQueryについて紹介し、なぜ使うとよいのかを説明します。続いて、WordPressサイトにカスタムjQueryスクリプトを追加する2つの方法と、よくある質問について説明します。
jQueryとは？（そして、なぜ使うとよいのか）
WordPressにjQueryスクリプトを追加する方法を学ぶ前に、まずjQuery自体について基本的な理解が必要です。
要するに、jQueryは軽量なオープンソースのJavaScriptライブラリで、このプログラミング言語の記述や使用を簡単にします。
WordPressのテーマやプラグインをJavaScriptで簡単に変更・拡張できます。この機能は、JavaScriptが多くの機能に不可欠であるため、非常に役立ちます。
たとえば、JavaScriptが必要なのはAjax、イベント処理、DOMの横断・操作などです。特にAjax機能は実用的で人気があります。ウェブ開発者はこれを使って、検索結果を即座に読み込んだり、高度なEC商品フィルタリングを作成したりします。
クリックや検索などのユーザー操作によって、これらのJavaScript機能がトリガーされることがよくあります。また、スライダーやライトボックスポップアップなど、クライアント側の追加機能を作成するにはjQueryも必要です。
jQueryはWordPressにデフォルトで含まれていますか？
jQueryは非常に便利で人気のあるリソースで、WordPressのインストール環境にデフォルトで含まれています。使い方を知るだけでよいのです！次のセクションでは、その方法を説明します。
WordPressにjQueryスクリプトを追加する前に行うこと
まもなくWordPressにjQueryスクリプトを追加する方法を説明します。しかしその前に、コアファイルを変更する前にウェブサイトを保護するため、いくつか行っておくべきことがあります。
何よりもまず、サイトをバックアップすることを常におすすめします。重要なウェブサイトファイルのコードにほんのわずかな誤りがあるだけでも、深刻な被害が生じる可能性があるためです。バックアップを作成しておけば、緊急時にもサイトを以前の状態に簡単に復元できます。
もしWordPressサイトのバックアップ方法がわからない場合、または手順を効率化するツールを探しているだけの場合は、Jetpack VaultPress Backupは優れた選択肢です。
Jetpack VaultPress Backupはサイト上の変更をすべて自動保存します。その後、ワンクリックで復元してコンテンツをすばやく復旧できます。Jetpackでは、Jetpackモバイルアプリからサイトを復元することもできます。さらに、問題が発生した場合は、一流のカスタマーサポートであるHappiness Engineersからサポートを受けられます。
ウェブサイトをさらに保護するには、WordPressのステージングサイトを作成するのもおすすめです。その後、本番環境に反映する前に変更をテストできます。
WordPressにカスタムjQueryスクリプトを追加する方法
jQueryについて理解を深め、サイトに大きな変更を加える準備ができたところで、WordPressにカスタムjQueryを追加する2つの方法を説明しましょう！
方法1：jQueryを手動で追加する
まず、WordPressにjQueryを手動で追加する方法を説明します。開発経験があり、手順を完全に自分で管理したい場合は、この方法が適しています。
おすすめなのは子テーマを使用することです。テーマを更新しても、加えた変更が上書きされないようにできます。
ステップ1：互換モードにする
jQueryの優れた点の1つは、コーディング時に使い慣れたショートカットを使用できることです。特に、$記号をjQueryの代わりに使えます。これにより時間を大幅に節約できますが、他のライブラリではこのショートカットが別のものを表すために使われることがあります。
そのため、互換モードにして、jQueryに固有のエイリアスを作成するとよいでしょう。これにより、他のライブラリとの競合を回避できます。
次のコードを使って実行できます。
<!-- Putting jQuery into no-conflict mode. -->
http://prototype.js
http://jquery.js
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById()。下記のmainDivはDOM要素であり、jQueryオブジェクトではありません。
window.onload = function() {
var mainDiv = $( "main" );
}
</script>上記のスクリプトを実行すると、$の代わりにショートカットとして$jを使えるようになります。また、次のようにすることもできます。
<!-- Loading jQuery before other libraries. -->
http://jquery.js
http://prototype.js
<script>
// jQueryを参照するには、完全なjQuery関数名を使用します。
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>このコードスニペットは競合を防ぐだけです。ただし、ショートカットではなく、完全な名前であるjQueryを使う必要があります。
ステップ2：スクリプトファイルを作成する
必要なコードが用意できたので、スクリプトファイルを作成できます。ファイルを作成し、「my_new_script_file.js」のような説明的な名前を付けます。必ず.js拡張子を使用し、先頭に任意の互換性コードスニペットを追加してください。
ここで、テーマファイルにアクセスして編集する必要があります。テーマファイルは、ウェブサイトのファイル内にそれぞれ固有のフォルダーを持っています。
まず、ファイルマネージャーまたは無料のFile Transfer Protocol (FTP)クライアントやFileZillaを使って、ウェブサイトに接続します。
次に、ルートディレクトリを開きます。通常はpublic_htmlまたは単にpublicという名前です。あるいは、ウェブサイト名そのものの場合もあります。
次に、現在使用しているテーマのフォルダーを見つけ、新しいサブフォルダーを作成します。名前は/js/とします。
最後に、新しいスクリプトファイルをこのサブフォルダーに追加します。内容は、実装しようとしている機能によって異なります。
ステップ3：jQueryスクリプトをfunctions.phpファイルに追加する
次に、テーマのfunctions.phpファイル。親テーマと子テーマのどちらにもこのファイルがあります。ここですべての手動カスタマイズを行います。
JavaScriptは読み込み登録が必要なため、wp_enqueue_script()関数を使用します。コードは次のようになります。
function my_theme_scripts() {
wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );固有のスクリプトファイル名に置き換え、functions.phpに追加してください。これにより、テーマファイルが前の手順で作成したスクリプトファイルを使用するようになります。
方法2：WordPressプラグインでjQueryを追加する
先ほど見たように、jQueryを手動で追加するのは時間がかかり、少しリスクもあります。特に、WordPressのコードを編集することに不慣れな場合です。そこで、WordPressプラグインを使ってjQueryを追加する方法を説明します。
ステップ1：jQueryプラグインをインストールする
まず、jQueryプラグインを選ぶ必要があります。特に人気の高い選択肢はSimple Custom CSS and JSとAdvanced Custom Fieldsです。
このチュートリアルでは、Advanced Custom Fieldsを使用します。このツールを使うと、カスタムブロックタイプで魅力的でインタラクティブな機能を作成できます。
無料版には、ボタングループ、Googleマップ、カラーピッカー、oEmbedなどの要素を追加するための便利なブロックタイプが豊富に用意されています。ただし、30種類すべてのカスタムブロックを使いたい場合は、Advanced Custom Fieldsの有料版にアップグレードする必要があります。
希望するプランを選択したら、通常どおりプラグインをインストールして有効化するだけです。プラグイン設定でライセンスキーを追加します。
ステップ2：新しいカスタムフィールドを作成する
プラグインをインストールして有効化したら、カスタムフィールド → 新規追加に移動します。
ここで、最初のフィールドグループを作成します。新しいフィールドグループを追加の横にタイトルを入力します。次に、変更を保存をクリックします。
これで新しいフィールドの編集を開始できます。ラベルの下にある編集をクリックすると、オプションを展開できます。
まず、フィールドタイプ、のドロップダウンメニューを開き、いずれかを選択します。
次に、フィールドラベル、 フィールド名などを入力します。さらに下にスクロールすると、表示ルールや表示などの追加設定を変更できます。
選択した場所に応じて、その場所で新しいカスタムブロックを表示できるようになります。ブロックエディターでは、フィールドラベルで指定したラベルによってブロックを識別できます。
完了したら、変更を保存をクリックします。＋フィールドを追加ボタンを選択して、このプロセスを繰り返すこともできます。その後、フィールド用に選択した場所のいずれかに移動し、カスタマイズを始めましょう。
WordPressでjQueryを遅延読み込みする方法
これまで説明してきたように、JavaScriptとjQueryをWordPressで使用する理由は数多くあります。実際、多くのユーザーが当然のものとして利用している特定のインタラクティブ機能には、これらが不可欠です。
しかし、こうした高度なクライアント側の要素は、ウェブサイトの表示を遅くする可能性があります。そのため、自動的にJavaScriptの読み込みを遅延するよう（ひいてはjQueryも）、WordPressサイトの読み込み時に設定することを検討してもよいでしょう。
JavaScriptの読み込みを遅延させると、サイトの主要な要素はより先に JavaScriptの重要度が低い機能よりも読み込まれます。もちろん、サイト訪問者はこの処理に気付かないでしょうが、ページの読み込みが速く見えるため、ユーザー体験（UX）の向上につながる可能性があります。
ウェブサイトでjQueryを自動的に遅延させたい場合は、Jetpack Boostを使用できます。
このプラグインは、ウェブサイト全体のパフォーマンスを大幅に向上させます。その結果、ページ速度を犠牲にすることなく、希望するJavaScript機能をすべて維持できるようになります。
重要度の低いJavaScriptの読み込みを遅延させるだけでなく、Jetpack BoostはCSSの読み込みを最適化し、画像の遅延読み込みなど、さまざまなパフォーマンス最適化を適用できます。このツールを使うと、Core Web Vitalsのスコアを改善し、検索結果でのサイトの可視性を高めることができます。
WordPressでのjQueryに関するよくある質問
WordPressでのjQueryに関する疑問の多くを解消できていれば幸いです。それでも、説明できていないことがある場合に備えて、よくある質問を紹介します。
WordPressで使用されているjQueryのバージョンを変更できますか？
テーマやプラグインによって、サイトのjQueryのバージョンが置き換えられたり、追加されたりすることがあります。そのため、使用しているバージョンを常に最新の状態に保つことが重要です。たとえば、jQuery UpdaterやVersion Control for jQueryなどのプラグインを使えば、簡単に更新できます。
WordPressサイトのjQueryのバージョンはどこで確認できますか？
通常、jQueryのバージョンはブラウザーで確認できます。Google Chromeでは、まずフロントエンドでウェブサイトを開きます。次に、以下の項目へ移動します。表示 → デベロッパー → JavaScript Console
jQuery.fn.jqueryと入力すると、コンソールにサイトで現在使用されているバージョンが表示されます。
WordPressからjQueryを完全に削除できますか？
簡単に答えると、はい。サイトでJavaScriptを使用することでパフォーマンスに悪影響が生じている場合は、jQueryを削除、つまり「登録解除」することを検討してもよいでしょう。
これを行うには、単に次のコードをお使いのfunctions.phpファイルに追加してください:
// Remove jQuery
function vpsb_remove_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', false);
}
}
add_action('init', 'vpsb_remove_jquery');jQueryによってページの読み込みが大幅に遅くなっている場合にのみ、サイトからjQueryを完全に削除するようにしてください。ただし、そのようなことはおそらく起こりません。jQueryはすでに、より重いJavaScriptコードを最適化しているからです。
jQueryを追加してからサイトの速度が低下した場合は、Jetpack Boostを使うほうがよいでしょう。これにより、重要度の低いJavaScriptの読み込みを遅延できます。
jQueryをバニラJavaScriptに置き換えられますか？
方法としては、jQueryをバニラJavaScriptに置き換えることも可能です。ただし、開発経験があまりない場合は難しいかもしれません。そのため、この作業が必要な場合は開発者に依頼することを検討してください。
改めて指摘しておく価値があるのは、jQueryをバニラJavaScriptに置き換える必要はおそらくないということです。jQueryはすでに最適なJavaScriptコードを提供しているからです。ほとんどの場合、jQueryによるパフォーマンスへのわずかな影響は、置き換えに伴う手間をかけるだけの価値があり、通常は遅延読み込みのほうが適切です。
この方法を選ぶことにした場合は、こちらのJavaScriptをWordPressに追加するガイドをぜひ確認してください。このプロセスに役立ちます。
WordPressでjQueryを使用する
サイトで魅力的な機能を実現するために複雑なJavaScriptを使用すると、UXを大幅に改善し、目標達成を後押しできます。しかし、こうしたインタラクティブな要素をゼロから作成する時間や開発スキルがない場合もあるでしょう。幸い、jQueryスクリプトを使えば、このプロセスを簡単にできます。
まとめると、WordPressにjQueryを追加する方法は2つあります。まず、互換モードに移行してスクリプトファイルを作成し、手動で追加できます。その後、新しいスクリプトをfunctions.phpファイルに追加します。あるいは、手動でコードを書く必要をなくして作業を効率化するために、Advanced Custom Fieldsのようなプラグインを使うこともできます。
jQueryを使ってウェブサイトに高度なデザイン要素を追加すると、UXを向上させ、訪問者に好印象を与えられます。しかし、インタラクティブな機能が多すぎると、ウェブページのパフォーマンスに悪影響を及ぼす可能性があります。幸いなことに、Jetpack Boostを使えば、サイトの表示速度を最適化できます。
Jetpack 