WordPressでAjaxを使用する方法

公開: 2023-02-12

Web サイトに熱心でアクティブな顧客ベースがある場合、本当にインタラクティブで充実した Web エクスペリエンスを提供するにはどうすればよいか疑問に思うかもしれません。 リアルタイムの双方向性を提供することは、視聴者にとって大きな魅力となる可能性があります。

幸いなことに、Ajax (Asynchronous JavaScript and XML) は、インタラクティブな機能を Web サイトに追加するためのアプローチしやすい方法です。 WordPressに関しては、Ajaxベースのプラグインを使用してプロセスを簡素化することもできます.

この記事では、Ajax とその仕組みについて紹介します。 また、WordPress で Ajax を使い始める方法についても説明します。 さっさと飛び込もう！

Ajax とは何か、どのように機能するのか?

Ajax は、HTML、CSS、JavaScript など、さまざまなプログラミング言語をまとめたものです。 実際には、バックグラウンドで Web ブラウザーから要求を受け取り、それらをサーバーに送信し、結果をブラウザーに転送します。

Web ユーザーは、Ajax が機能していることを知りません。 非常にインタラクティブな体験が得られます。 たとえば、自分のサイトで、Ajax を使用して、ログインしているユーザーからの投稿に対するいいね! を受け入れ、リアルタイムの集計を表示することができます。

Ajax が役立つ理由

Ajax を使用すると、ユーザーは特定の変更を確認するためにページを再読み込みする必要がなくなります。 これは、サイトの高速性が維持され、よりスムーズなユーザー エクスペリエンスが提供されることを意味します。 Ajax は効率的で、必要なデータのみを送受信するため、帯域幅を最大化し、重いデータ転送を回避できます。

Web ユーザーとして、私たちは常に Ajax の恩恵を受けています。 その一例が、Google のオートコンプリート検索機能です。

あなたがよく知っている他の例には、Facebook のコメントや Instagram のいいね! などがあります。 Ajax は、Web ページとやり取りして情報を即座に受け取ることができる場所ならどこでも機能する可能性があります。

WordPress での Ajax 入門

WordPress に関して言えば、Ajax が役立つ方法がいくつかあります。 まず、Ajax URL と、それを WordPress 関数フックと一緒に使用する方法を見ていきます。

WordPress の Ajax URL

WordPress は管理ダッシュボードでデフォルトで Ajax を使用するため、そこに Ajax 機能を追加することは難しくありません。 ただし、サイトのフロント エンドで Ajax を使用する場合は、Ajax URL がどのように機能するかを理解する必要があります。

WordPress では、 admin-ajax.phpファイルに URL があります。 これは、処理のためにデータを送信するために必要な情報を提供し、フロントエンドの Ajax 開発に不可欠です。 WordPress は wp_localize_script() 呼び出しを使用して、Ajax URL を使用して JavaScript と PHP 関数を接続します。これは、PHP が何らかの助けなしにこれらを直接ミラーリングできないためです。

WordPress で Ajax アクションフックを使用する方法

WordPress は、プラグインやテーマが WordPress コアと対話する方法として、プログラミングにフックを採用しています。 フックには、「アクション」と「フィルター」の 2 種類があります。 Ajax では、アクション フックを使用して関数を実行します。

アクションを使用すると、WordPress にデータを追加したり、動作方法を変更したりできます。 Ajax では、アクション wp_ajax_(action) を使用します。 カスタム関数をこれにフックして、Ajax 呼び出し中に実行できます。

たとえば、次の WordPress サンプル コードは、Ajax 呼び出しと JavaScript オブジェクトを同じファイル内で組み合わせてアクションを実行する方法を示しています。

<?php

add_action( 'wp_ajax_my_action', 'my_action' );

関数 my_action() {
グローバル $wpdb; // これは、データベースへのアクセスを取得する方法です

$whatever = intval( $_POST['whatever'] );

$何でも += 10;

$whatever をエコーし​​ます。

wp_die(); // これは、すぐに終了して適切な応答を返すために必要です
}

Ajax アクション用に個別の JavaScript ファイルを作成することもできます。 呼び出しが失われないように、必ず Ajax URL を使用する必要があります。

サンプル プラグインを使用して Ajax を使用する方法 (3 ステップ)

Ajax を試してみたい場合は、Ajax を使用してプラグインを作成するのが最善の方法です。 幸いなことに、そこから開始できる多くのサンプル コードまたは必要最小限のプラグインがあります。 この例では、ダウンロード可能な WordPress プラグイン ボイラープレート サンプル コードを使用します。

ステップ 1: 適切なファイル構造を作成する

まず、プラグインに名前を付け、適切なファイル構造を作成する必要があります。 名前は一意である必要があり、WordPress プラグイン ディレクトリ内の他のツールと競合しないようにしてください。 これは、ユーザーがプラグインをアップロードすると、プラグインがwp-content/plugins/ディレクトリに移動するためです。

名前を決めたら、自分のwp-content/plugins/ディレクトリに少なくとも次の 3 つのファイルを作成する必要があります。

  • プラグイン名.php
  • プラグイン名.js
  • プラグイン名.css

.phpファイルを新しいプラグインのフォルダーに配置し、JavaScript ファイルと CSS ファイルを保存するために別のサブフォルダーを作成します。プラグインが機能するために必要なすべてのファイルは、同じマスター フォルダーに配置する必要があります。

次のステップでは、使用しているサンプル コードに事前に作成されたファイル構造が付属していることがわかります。 ただし、ゼロから始める方法と、ファイルを特定の方法で構造化する必要がある理由を理解することが重要であると考えています。

ステップ 2: 開始するサンプル コードを選択する

最初のプラグインで Ajax を試すときは、サンプル コード ファイルを使用することから始めるのがよいでしょう。 ただし、サンプル コードを再確認して、安全でエラーが含まれていないことを確認する必要があります。

前に述べたように、この例では WordPress Plugin Boilerplate を使用します。 このサンプル コードには、プラグインを完成させるために必要なファイルが同梱されています。

このサンプル プラグインは、WordPress のコーディングおよびドキュメント標準にも準拠しています。 ボイラープレート Web サイトからプラグインの.zipファイルをダウンロードして開始できます。

ステップ 3: アクションをコードにフックする

使用しているプラ​​グイン サンプル コードは、オブジェクト指向プログラミング (OOP) でビルドされています。 これは、プログラマーがコードを整理するのに役立ち、共有と再利用が容易な開発パターンを作成します。

さらに、コードには、プラグインの開発に必要なすべてのファイルがパッケージ化されており、これには/includes/ディレクトリ内のアクティベーション ファイルと非アクティベーション ファイルが含まれます。 また、必要に応じて、一般向けおよび管理者向けのファイルを簡単に見つけることができます。

plugin-name.phpファイルの先頭を表示して、サンプル プラグインを見てみましょう。

<?php

/**
* プラグインのブートストラップ ファイル
*
* このファイルは WordPress によって読み取られ、プラグイン内のプラグイン情報が生成されます
* 管理エリア。 このファイルには、プラグインによって使用されるすべての依存関係も含まれています。
* 活性化関数と非活性化関数を登録し、関数を定義します
* 活性化関数と非活性化関数を登録し、関数を定義します
* プラグインを起動します。
*
* @リンク http://example.com
* @since 1.0.0
* @package Plugin_Name
*
* @ワードプレスプラグイン
* プラグイン名: WordPress Plugin Boilerplate
* プラグイン URI: http://example.com/plugin-name-uri/
* 説明: これは、プラグインの機能の簡単な説明です。 WordPress の管理画面に表示されます。
* バージョン: 1.0.0
* 作成者: あなたの名前またはあなたの会社
* 著者 URI: http://example.com/
* ライセンス: GPL-2.0+
* ライセンス URI: http://www.gnu.org/licenses/gpl-2.0.txt
* テキスト ドメイン: プラグイン名
* ドメイン パス: /languages
*/

コードのこの部分に含まれるすべての情報は、プラグインを WordPress に登録するために重要です。 これは、プラグイン ディレクトリがプラグインの表示内容を認識する方法です。

ここで、すべての点をつなぐために、次のようないくつかのことを行う必要があります。

  • スクリプトで Ajax URL を使用できることを確認してください。 wp_localize_script() を使用してそれを実現できます。
  • plugin -name.phpファイルに class Plugin-Name{} を使用して plugin-name クラスを作成します。 ここで、アクション フックを定義します。
  • plugin-name.jsファイルに対応する JavaScript 関数を作成します。

Ajax アプローチの重要な要素の 1 つは、各関数を使用できるユーザーを定義することです。特に、フロントエンドの対話機能を作成する場合はそうです。 WordPress のサンプル コードを使用して、フロントエンド アクションをフックします。

もし ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// ここに他のバックエンド アクション フックを追加します
} それ以外 {
// ここに非 Ajax フロントエンド アクション フックを追加します
}

この例でいくつかのことに注意してください。 まず、これらのアクションは、アカウントにログインしているかどうかに関係なく、サイト上のすべてのユーザーが利用できます。 これは、「wp_ajax_nonpriv_()」呼び出しによって示されます。 次に、フロントエンドのアクション中にバックエンドの管理アクションがフックされていることもわかります。

この一連のアクションで行われるプロセスを理解するには、my_frontend_action が PHP 関数 my_frontend_action_callback() をトリガーすることを知っておくことも重要です。

ステップ 4: プラグインのテストとデバッグ

必要なすべてのアクション フックと対応する関数を設定したら、プラグインをテストし、必要に応じてデバッグします (問題がある場合)。 Web ホストは、ホスティング パッケージの一部としてデバッグ ツールを提供している場合があります。

ここWP Engineでは、トラブルスポットを見つけるのに役立つWP Engineエラーログを提供しています.

エラー ログには、サイトのコードのエラーと、エラーがサーバーやサイトの他の部分とやり取りする場所が色分けされて表示されます。 これにより、Ajax を使用している場合でも、まったく別のものを使用している場合でも、トラブルシューティングがはるかに簡単になります。

その他の WP エンジンのリソースとツールを調べる

Ajax を使用して素晴らしい WordPress プラグインを作成できるようになったので、他に必要なツールを評価することをお勧めします。 WP Engine は完全なデジタル エクスペリエンス プラットフォーム (DXP) を提供し、WordPress 用の新しいプラグインの作成を支援します。

バグのないプラグインを実行できるように WP Engine Error Log に興味がある場合でも、堅牢で安全な WordPress ホスティングが必要な場合でも、使用できるさまざまなプランとリソースを提供しています!