AJAXとは何ですか？WordPressでの使用方法（ステップバイステップガイド）

AJAXは、Webサイト開発で使用される一般的なテクノロジーであり、Webページをリロードしなくても、バックエンドからデータを取得してビューを更新できます。 したがって、Webサイトの双方向性、速度、および使いやすさを向上させるのに役立ちます。 AJAXは、コメントを残したり、ツイートを投稿したりするなどのアクションを実行するたびに機能します。

この記事では、AJAXとは何か、WordPress（WP AJAXとも呼ばれます）でAJAXを使用する方法について説明します。 読みましょう！

AJAXとは何ですか？

AJAXはAsynchronousJavaScriptAnd XMLの略で、サーバーに非同期でリクエストを送信し、ページをリロードせずにページに変更を加えることができるテクノロジーです。 AJAXスクリプトは、サーバーにデータを返すように要求し、取得したデータでWebページを変更します。

たとえば、予約日を選択する1つのドロップダウンメニューと、予約可能な時間を動的に表示する別のドロップダウンリストを想像してみてください。 スクリプトを介して、サーバーは治療ドロップダウンの選択に利用できる時間を求められました。

AJAXはどのように機能しますか？

AJAXの使命は、Webサイトとサーバーの間のブリッジとして機能することです。 この非同期テクノロジーの中核は、データ交換を可能にするXMLHttpRequestオブジェクトです。 AJAX呼び出しを行うための基本的な手順は次のとおりです。

–出典：W3Schools

• 送信する情報を指定します
• 通話を設定する
• XMLHttpRequestオブジェクトを使用してデータを送信します
• サーバーからの応答を受信して​​処理します

良い点は、jQueryライブラリを使用してこのプロセスを簡略化できることです。

WordPressでAJAXを使用する方法は？

WordPressはAJAXをネイティブにサポートしています。 wp-adminフォルダー内に「admin-ajax.php」が表示されます。

これは当初、WordPress管理者からAJAXリクエストを行うすべての機能のために作成されました。 また、Webの公開部分にも使用されます。

すべてのWordPressAJAXリクエストはPHPスクリプトを経由する必要があります。 つまり、admin-ajax.phpは、コンテンツを返すアクションが呼び出されるPHPファイルである必要があります。

2013年に、WordPressはWordPress Heartbeat APIを導入しました。これは、自動保存機能、ログインの有効期限、別のユーザーがWordPressの投稿を書いたり編集したりしている間の投稿ロック警告など、いくつかの重要な機能を提供します。

HeartbeatAPIの2つの非常に顕著な機能は次のとおりです。

1.自動保存

投稿の下書きを保存するか、作業を続けると、WordPressは自動的に変更を保存します。 自動保存とドラフトの手動保存には明らかな違いがあります。 両方のタイプの保存を示す次のスクリーンショットを確認してください。

–WordPressで自動保存

2.ポストロック

別のユーザーがすでに作業している投稿を編集しようとすると、状況に関するポップアップ警告が表示されます。 あなたに見える3つのアクションがあります。

–WordPressのポストロック

上記の機能は、適切な通信と応答のためにサーバーとブラウザーの間に接続を作成するWordPressHeartbeatAPIによって可能になります。

WordPress Heartbeat APIは、サーバーとの通信要求を生成し、データ/応答の受信時にイベントをトリガーします。 これは通常、サーバーの負荷を増加させ、最終的にWordPress管理者の速度を低下させます。

実例

WordPressダッシュボードにログインして、投稿の下書きを開始します。 次に、タブを数分間開いたままにして、他のタブの参照を開始します。 ダッシュボードはまだログインしており、admin-ajaxが継続的にリクエストを送信していることがわかります。

–admin-ajax.phpサーバーへのリクエストの送信

上記のチケットによると、WordPressのadmin-ajax.phpは15秒ごとにリクエストを生成します。 要求は、サーバーとの任意の通信にすることができます。

プラグインはadmin-ajax.phpをどのようにオーバーロードしますか？

WordPressのadmin-ajax.phpの問題のほとんどは、インストールされたプラグインによって行われたリクエストに起因する可能性があります。 これらのプラグインは、ポップアップの起動やソーシャル共有カウンターの更新など、特定の機能を実現するためのリクエストを送信することで、WordPress管理者の速度を低下させます。

とはいえ、リクエストによって必ずしもadmin-ajax.phpファイルが急増するわけではありません。 リクエストが適切に処理され、プラグイン開発者がプラグインでAJAX呼び出しを利用する際のベストプラクティスに従っている場合、admin-ajax.phpファイルで問題ありません。 したがって、プラグインを非アクティブ化する前に、プラグインを診断することも重要です。

WordPressでプラグインを診断する方法は？

admin-ajax.phpファイルへの影響を特定するために、プラグインを適切に診断することが重要です。これにより、WordPressの管理が遅くなる可能性があります。 そのために、GTmetrixとWebPageTestの2つのツールを使用します。

GTmetrixの場合、リクエストの完全なリストについては、[ウォーターフォール]タブに移動してください。 リストをよく見ると、admin-ajax.phpファイルによって行われたPOSTリクエストを確認できます。

–WordPressでのプラグイン診断

私の場合、これらのリクエストは主にソーシャル共有プラグインによって行われました。 この特定のプラグインは、更新された共有カウントを取得するために、15秒ごとにAPIを介してソーシャルメディアアカウントにajaxリクエストを送信します。

詳細については、タブを展開してください。 [応答]タブには、これらの要求をトリガーする正確なスポットが表示されます。

Chromeには、さまざまなプラグインからのリクエストの分析に役立つデベロッパーツールが付属しています。 これを確認するには、Chromeでウェブサイトを開き、CTRL + Shift + Iをクリックして、[ネットワーク]タブをクリックします。

–Chromeでのadmix-ajax.phpリクエスト

ページをリロードして、更新されたリクエストがリストに入力されていることを確認します。 フィルタボックスに「ajax」または「admin-ajax」と入力して、必要なファイルをフィルタリングします。 これにより、リクエストの数、頻度、およびリクエストのソースについての洞察が得られます。

次に、ファイルをクリックして詳細情報を表示します。 [応答]タブでは、このリクエストを引き起こしているプラ​​グインのヒントが表示されます。 私の場合、今回はWP Popularプラグイン（WPP）によってトリガーされました。これは、特定の期間で最も人気のある投稿を強調表示するプラグインです。

これを回避するには、使用しているプラ​​グインが更新されていることを確認してください。 そうでない場合は、開発者が問題を修正できるように、サポートチケットを開いてみてください。 可能であれば、admin-ajax.phpファイルをオーバーロードしない更新された別のプラグインに置き換えることもできます。

一部のプラグインはWordPressサイトにとって重要であるため、プラグインを削除する前に徹底的な診断を実行することが重要です。 これらのツールは、根本原因を見つけて、それを修正するための最良の解決策を選択するのに役立ちます。

次のセクションでは、これらのリクエストを減らし、admin-ajax.phpファイルが過負荷になるのを防ぐ方法を説明します。

WordPressダッシュボードをスピードアップ

WordPressバックエンドを高速化するためのベストプラクティスは、Heartbeat APIを無効にするか、少なくとも数秒ごとにサーバーにヒットしないように、より長い時間間隔を設定することです。

HeartbeatAPIプラグインをインストールします

WordPress管理ダッシュボードにログインします。 プラグイン→新規追加→Breezeの検索→インストールしてアクティブ化に移動します。

–WordPressにBreezeをインストールする

Breezeプラグインを構成する

[設定]→[Breeze]→[HeartbeatAPI]に移動します。 そこには、ハートビートを構成するための4つの異なるオプションがあります。

1. ハートビートの制御：ボタンを切り替えて、バックエンド、ポストエディター、およびフロントエンドのハートビートAPIをオンまたはオフにできます。
2. ハートビートフロントエンド：これにより、フロントエンドの動作を変更したり、完全に無効にしたりできます。
3. Heartbeat Post Editor：これにより、WP Post Editorの動作を変更したり、完全に無効にしたりできます。
4. ハートビートバックエンド：これにより、バックエンドの動作を変更したり、完全に無効にしたりできます。

–BreezeのハートビートAPI設定

複数のルールを作成する

デフォルトでは、WordPress Heartbeat APIのデフォルトの頻度を取得しますが、要件に基づいて複数のルールを作成できます。 たとえば、WordPressバックエンド（ダッシュボード）を2分（120秒）でトリガーし、Post Editorを3分（180秒）でトリガーしたい場合があります。 これを行うには、2つのルールを作成する必要があります。1つはWordPressダッシュボード用で、もう1つは投稿エディター用です。 それらの頻度をそれぞれ2分と3分に設定します。

HeartbeatAPIを使用するプラグインを検出する

すべての設定が完了したので、次は、どのプラグインがadmin-ajax.phpファイルを使用していて、Webサイトの速度を低下させているかを確認します。

GTmetrixに移動し、サイトのURLを入力します。 サイトの分析には少し時間がかかります。 完了したら、[ウォーターフォール]タブに移動すると、ファイルが接続して応答するのにかかる時間が表示されます。 少し下にスクロールして、POSTadmin-ajax.phpのエントリがあるかどうかを確認します。 はいの場合は、それを展開して[投稿]タブに移動します。 ここから、原因のプラグインを特定できます。

私の場合、プラグイン「デスクトップスイッチ」はadmin-ajax.phpファイルを使用しており、サーバーにリクエストを継続的に送信しています。 これは決定を下す時です。 別のプラグインと交換するか、指を交差させてください。

– POST admin-ajax.php

概要

その機能セットを考慮すると、HeartbeatAPIはWordPressWebサイトで非常に役立ちます。 ただし、正しく使用しないと、WordPress Ajaxリクエストを送受信することで、WordPressバックエンドとフロントエンドの読み込み時間が長くなる可能性があります。

この問題に対する解決策は2つだけです。 Heartbeat APIを無効にするか、いくつかの場所でのみ有効にすることができます。または、リクエストの負荷を処理し、サーバーの応答時間を短縮できるマネージドホスティングにアップグレードできます。

よくある質問