最近、あるユーザーから 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はバージョン番号を自動的に更新しません。
最新のURLは、Google hosted librariesのウェブサイトにアクセスすることで確認できます。
そこから、必要に応じてトラブルシューティングに使用できる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 プラグインが古いメソッドを使用している場合、それが原因で問題が発生する可能性があります。
デバッグツールの検証エリアに警告が表示されたり、一部の機能が動作しなくなったりすることがあります。
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
Hello,
中国にサーバーがあり、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を使用してファイルパスに置き換える必要があります。
敬具
Jorge Ortiz
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ファイルで機能します。
Shaurya
CDNがない場合、URLには何を入力すればよいですか？
～する
こんにちは
投稿ありがとうございます。変更を試しましたが、ウェブサイトが2秒遅くなったため、うまくいったかどうかわかりません。
うまくできたかどうか、またGoogleライブラリを使用しているかどうかを確認するにはどうすればよいですか？
イフサン
上記のコードをテストし、動作して改善するために最後の行をこれに置き換えました
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
こんにちは、ヒントをありがとうございます。この関数を使用すると、GoogleのjQueryが2回読み込まれる理由がわかりません。つまり、1回ではなく2回のHTTPリクエストが発生します。テストはこちらです：http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com。
jquery.easingでも同様のことが起こりますが、今回は同じファイルに対して3回のHTTPリクエストが発生します。
何かアイデアはありますか？コードを調べましたが、wp_enqueue_script(”);の重複は見つかりませんでした。
事前に感謝いたします
Alejandro
Googleから読み込まれたjQueryは、ログイン時に一度だけ読み込まれることに気づきました。
マチュー
ありがとう！管理機能の不具合の原因となっていたjQueryが解決しました。
Mitch
どうもありがとうございます。
Joseph Chambers
訪問者が私のページを閲覧しているものに基づいて、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() の何かによってエラー（「Error」という単語が表示される白いページ）が発生します。何か考えや解決策はありますか？
サジド・イクバル
この素晴らしい投稿をありがとう、Syed。時間を大幅に節約できました。
Matt Ogborne
とても参考になりました。ありがとうございます！
Matt
Riversatile
こんにちは、
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) を「最小」の権限に修正する必要があるかどうか、どなたか教えていただけますか？そうすれば、ページで作成されたタブは誰でも表示できるようになりますか？
ありがとうございます！
Melissa Cleaver
コードをありがとうございます。しかし、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タグを読み込まないのか疑問に思っています。それは理にかなっていますか？話題から外れていますか？
皆さん、最高です。
Aamir Rizwan
Googleにより、あなたのウェブサイトは「マルウェア」としてフラグが立てられています。
ジェラルド
//オフタピック
@Swanie
こちらをご覧ください: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
セキュリティレポート（警告あり）:
エラー ブラックリスト登録済み: はい
エラー 侵害の可能性あり: はい
//Ontopic
JQueryスクリプトをすべて「バンドル」することはできませんか？各スクリプトに個別に呼び出す必要がありますか？
WPBeginnerサポート
@Geraldo : 依存関係を解決できます。たとえば、jQuery スクリプトを読み込んでいる場合、明らかに jQuery が必要になるため、それを依存関係として追加すると、WordPress がそれをエンキューしてくれます。