最近、あるユーザーから WordPress ウェブサイトのパフォーマンスを最適化するためのヒントを求められました。私たちの提案の一つは、デフォルトの WordPress jQuery スクリプトを Google Hosted Libraries の jQuery に置き換えることでした。
WordPress にはデフォルトで jQuery がコアソフトウェアに含まれています。しかし、Google ライブラリの最新バージョンの jQuery に置き換えることで、パフォーマンスを向上させることができることがわかりました。
この記事では、パフォーマンスと速度を向上させるために、デフォルトのWordPress jQueryスクリプトをGoogleライブラリに簡単に置き換える方法を説明します。
デフォルトの WordPress jQuery を置き換える理由と時期
jQueryは、開発者が美しいWebアプリケーションを作成するために使用する人気のJavaScriptライブラリです。WordPressでは、スライダー、ポップアップなどの機能を追加するために非常によく使用されています。
WordPressには、コアWordPressソフトウェアにバンドルされたjQueryライブラリが含まれています。多くのトップWordPressプラグインやほとんどの人気のWordPressテーマは、基本的な機能や機能のためにこのライブラリに依存しています。
しかし、共有ホスティングサーバーでjQueryをロードすることはリソースを大量に消費し、サイトを遅くする可能性があります。特に、WordPressのベストプラクティスに従っていない、コードの悪いWordPressテーマやプラグインを使用している場合はそうです。
WordPressに含まれるjQueryバージョンを使用するもう1つの問題は、WordPressが更新しない限り更新されないことです。パフォーマンスやセキュリティの修正を含むjQueryの新しいバージョンが存在する可能性がありますが、WordPressの更新に含まれるまでアクセスできません。
これを修正するためのいくつかの回避策があります。たとえば、GoogleサーバーまたはjQueryの公式CDN経由でjQueryを読み込むことができます。
Google Hosted Librariesは、サーバーが安定しており、更新されており、速度のために高度に最適化されているため、jQueryがWordPressサイトでより速くロードできるため、良い選択です。
それでは、WordPress のデフォルトの jQuery を Google ライブラリに簡単に置き換える方法を見てみましょう。
デフォルトの WordPress jQuery を Google ライブラリに置き換える
WordPressには、スクリプトとスタイルシートを簡単に追加するための組み込みメソッドが付属しています。これにより、組み込みメソッドを使用してロードされたスクリプトまたはスタイルシートを安全に削除することもできます。
まず、WordPressのデフォルトのjQueryを無効にするためにこの方法を使用します。その後、Googleライブラリ経由でjQueryを読み込むようにWordPressに指示します。
次のコードをテーマのfunctions.phpファイル、サイト固有のプラグイン、またはコードスニペットプラグインに追加する必要があります。
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
このコードをWordPressに追加するには、コードスニペットプラグインである WPCode の使用をお勧めします。無料で使用が簡単で、問題が発生してもウェブサイトを壊しません。
注意: WPCodeのプレミアムバージョンもあり、コードリビジョン、自動変換ピクセル、スケジュールされたスニペット、プライベートクラウドライブラリなどの高度な機能を提供します。
開始するには、WPCodeをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
プラグインを有効にしたら、WordPressダッシュボードからコードスニペット » スニペットの追加 に移動します。
そこから、「カスタムコードを追加（新規スニペット）」オプションを見つけ、その下にある「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。
このチュートリアルでは、「PHPスニペット」を選択します。
次に、コードスニペットのタイトルを追加できます。これは、コードが何のためのものかを覚えておくのに役立つものであれば何でも構いません。
その後、上記のコードを「コードプレビュー」ボックスに貼り付けるだけです。
最後に、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックします。
それだけです！WordPress はデフォルトの jQuery を置き換え、Google ライブラリ経由で読み込むようになります。
注意: この方法では、URLで指定されたjQueryバージョンが引き続きロードされます。将来的に、新しいjQueryバージョンを使用するためにGoogleライブラリのURLを変更する必要がある場合があります。
テーマやプラグインが異なるバージョンに依存している場合、互換性の問題が発生する可能性があるため、Googleはバージョン番号を自動的に更新しません。
Googleホストライブラリのウェブサイトにアクセスすると、最新のURLを見つけることができます。
そこから、必要に応じてトラブルシューティングに使用できるjQueryの古いバージョンのURLも見つけることができます。
その他のデフォルト jQuery ライブラリの置き換え
WordPress は、コアの jQuery ライブラリ apart から、他にも多くの jQuery スクリプトを含んでいます。jQuery Mobile や jQuery UI のようなスクリプトの一部は、Google ライブラリでホストされています。
他のライブラリについては、jQuery独自のCDNサーバーを使用して、より高速に読み込むことができます。次の例では、WordPressのjquery-ui-coreスクリプトを公式のjquery-uiバージョンに置き換えました。
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Googleライブラリと同様に、スクリプトの最新バージョンを使用するには、しばらくするとURLを置き換える必要があります。
WordPressでjQueryを完全に無効にする
幅広い使用状況のため、WordPressウェブサイトでjQueryを完全に無効にすることは推奨しません。WordPressテーマがjQueryを使用していなくても、多くの人気のWordPressプラグインはそれを必要とします。
ただし、ウェブサイトにjQueryが必要ないことが確実な場合は、安全に無効にすることができます。
次のコードをテーマのfunctionsファイル、サイト固有のプラグイン、またはWPCodeのようなコードスニペットプラグインに追加するだけです。
if ( !is_admin() ) wp_deregister_script('jquery');
それだけです。このコードは、WordPress ウェブサイトのフロントエンドで jQuery スクリプトが読み込まれるのを単純に無効にします。
WordPress で jQuery 関連の問題をトラブルシューティングする
jQuery の新しいバージョンでは、古いメソッドや関数が非推奨になったり削除されたりすることがあります。ウェブサイトの WordPress プラグインが古いメソッドを使用している場合、それが原因で問題が発生する可能性があります。
Inspectツールのコンソール領域に警告が表示されるか、一部の機能が機能しなくなったことに気づく場合があります。
WordPressは以前、古いバージョンのjQueryとの互換性を確保するためにjQuery-migrateというスクリプトを使用していました。しかし、WordPress 5.5以降、このスクリプトはWordPressから廃止されました。
jQuery-migrateスクリプトを再度追加したい場合や、異なるjQueryバージョン間でトラブルシューティングしたい場合は、次の方法を試すことができます。
Version Control for jQueryプラグインをインストールしてアクティブ化するだけです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、Settings » jQuery Version Control ページにアクセスする必要があります。ここで、使用したいjQueryのバージョンを選択できます。
プラグインは、公式のjQuery CDNからそのバージョンを自動的にロードします。
プラグインはjQuery移行スクリプトも読み込みます。必要であれば、トラブルシューティング中に無効にすることができます。
変更を保存するには、「変更の保存」ボタンをクリックすることを忘れないでください。
この記事がお使いのWordPressのデフォルトjQueryをGoogleライブラリに置き換える方法を学ぶのに役立ったことを願っています。WordPressユーザー向けの便利なjQueryチュートリアルや、完全なWordPressパフォーマンス最適化ガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Mrteesurez
WordPress の新しいアップデートバージョンがリリースされる際に手動で置き換える場合、すべての必要なアップデートはリリース前に完了しているべきだと思いますが、この点について何かご存知ですか？
また、この記事で指示されているように、Google ライブラリから jQuery を使用する前に、組み込みの jQuery を完全に無効にする必要がありますか？組み込みの jQuery は、特に共有ホスティングでウェブサイトを遅くする可能性があるとのことですが？
WPBeginnerサポート
WordPressもアップデートをリリースする可能性がありますが、jQueryの新しいバージョンが必要かどうかは、個々のニーズによります。
この記事の手順を使用している場合は、jQueryの複数のバージョンが同時に実行されて競合を引き起こすのを防ぐために、古いバージョンを無効にすることをお勧めします。
管理者
Mrteesurez
ありがとうございます。返信とガイダンスに感謝します。競合については考えてもいませんでした。2つの同時実行がサイト全体を遅くしないかどうかを考えていました。実行時には指示に従います。お時間を割いてお答えいただきありがとうございます。
ALEX
こんにちは、
中国にサーバーがあり、Googleからのすべてのリソースが中国政府のファイアウォールによってブロックされています。
しかし、Jqueryとフォントのリソースは現在WordPressではデフォルトでGoogleから読み込まれており、サイトの遅延が深刻化しています。
ですので、JsまたはCSSリソースをローカルサーバーから読み込むように強制する方法はありますか？
ありがとう
WPBeginnerサポート
ローカルサーバー上の jQuery ファイルのウェブアドレスがある場合は、スニペット内の URL を jQuery が配置されている場所を指すように変更します。
管理者
ウィルバー
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
ありがとう
Jorge
こんにちは、
より高度な実装はこちらです。
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
ここで、「cdn.yourdomain.com」は、より良い結果を得るためにCDNを使用してファイルパスに置き換える必要があります。
敬具
ホルヘ・オルティス
Simon
この投稿の解決策も、私のサイトを壊します
Plato39
Jorgeのコードは私には機能しましたが、引用符は置き換える必要があります。これを試してください：
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
OK – このウェブページがFancy Quotesを追加しています。テキストエディタで「検索と置換」を行うか（または手動で引用符をプレーンなものに置き換える）、コードはテーマのfunctions.phpファイルで機能します。
シャウリヤ
CDNがない場合、URLには何を入力すればよいですか？
～する
こんにちは
投稿ありがとうございます。変更を試しましたが、ウェブサイトが2秒遅くなったため、うまくいったかどうかわかりません。
うまくできたかどうか、またGoogleライブラリを使用しているかどうかを確認するにはどうすればよいですか？
イフサン
上記のコードをテストし、動作して改善するために最後の行をこれに置き換えました
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
アレハンドロ
こんにちは、ヒントをありがとうございます。この関数を使用すると、GoogleのjQueryが2回読み込まれる理由がわかりません。つまり、1回ではなく2回のHTTPリクエストが発生します。テストはこちらです：http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com。
jquery.easingでも同様のことが起こりますが、今回は同じファイルに対して3回のHTTPリクエストが発生します。
何かアイデアはありますか？コードを調べましたが、wp_enqueue_script(”);の重複は見つかりませんでした。
事前に感謝いたします
アレハンドロ
Googleから読み込まれたjQueryは、ログイン時に一度だけ読み込まれることに気づきました。
マチュー
ありがとう！管理機能の不具合の原因となっていたjQueryが解決しました。
ミッチ
どうもありがとうございます。
ジョセフ・チェンバーズ
訪問者が私のページを閲覧しているものに基づいて、HTTPまたはHTTPSのいずれかを読み込みたい場合はどうなりますか？
ほとんどの場合、http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js を //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js に変更できます。そうすれば機能します。しかし、wp_register_script() の何かでエラー（「エラー」という単語が表示された白いページ）が発生します。何か考えや解決策はありますか？
サジド・イクバル
この素晴らしい投稿をありがとう、Syed。時間を大幅に節約できました。
マット・オグボーン
とても参考になりました。ありがとうございます！
マット
リバーサイル
こんにちは、
Google API の jQuery ファイルの最新バージョンはこちらです。
上記のコードをコピー/ペーストする際は、jqueryのURLをこれに置き換えるのを忘れないでください：
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
次に「1.4.4」を「1.6.2」に置き換えます
このように：
//Google API jQueryを読み込むfunction modify_jquery() { if (!is_admin()) { // ローカルのjQueryを読み込むには、次の2行をコメントアウトしてください wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);
vnu
プラグインのような thethefly のタブとアコーディオンを使用する場合、(!is_admin) を「最小」の権限に修正する必要があるかどうか、どなたか教えていただけますか？そうすれば、ページで作成されたタブは誰でも表示できるようになりますか？
ありがとうございます！
メリッサ・クレバー
コードをありがとうございます。しかし、functions.phpファイルでコードを使用しようとすると、コードのどこに配置しても致命的なエラーが発生しました。何か間違っていますか？
編集スタッフ
公開したばかりの新しいコードを試してみてください。
管理者
スワニー
質問：Google Library は、メディアライブラリから alt タグの情報を取得するのに良い仕事をしますか？… いくつかのプロフェッショナルテーマにはメインページの jQuery スライダーが使用されていますが、alt タグを取得しません… そのため、ソースコードは次のようになります：alt=”” … もちろん、これは SEO にとって良くありません。Google Library スクリプトは使用したことがありません… どのように機能するか興味があります。あなたの経験は？
編集スタッフ
何のための代替テキストですか？これは単に JavaScript を置き換えているだけです…
管理者
スワニー
OK…具体的にはjQueryスライダーについて話しているのだと思います…プロフェッショナルなテーマをいくつか購入しましたが、メインページにjQueryスライダーがあります…そのうちの1つはこちらです：http://coloradospringsautomechanics.com…ソースを表示すると、画像は読み込まれますが、altタグは読み込まれません…altタグは空です。
この投稿を読むと、このGoogleライブラリのアプローチでそれが解決する可能性があると思います。
他の解決策としては、プラグインファイルを開いてaltタグにを追加することが考えられます。したがって、次のようになります。
img src=”file.jpg” alt=”” title=””
なぜこれらのjQueryスライダーはaltタグを読み込まないのか疑問に思っています。それは理にかなっていますか？話題から外れていますか？
皆さん、最高です。
アミール・リズワン
Googleにより、あなたのウェブサイトは「マルウェア」としてフラグが立てられています。
ジェラルド
//オフタピック
@Swanie
こちらをご覧ください：http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
セキュリティレポート（警告あり）：
error Blacklisted: Yes
error Likely compromised: Yes
//Ontopic
JQueryスクリプトをすべて「バンドル」することはできませんか？各スクリプトに個別に呼び出す必要がありますか？
WPBeginnerサポート
@Geraldo : 依存関係を解決できます。たとえば、jQuery スクリプトを読み込んでいる場合、明らかに jQuery が必要になるため、それを依存関係として追加すると、WordPress がそれをエンキューしてくれます。