独自のプラグインを使用してWordPressサイトでPHPでAJAXを使用する

公開: 2021-07-23

PHPを使用したAjax

この記事では、WordPressWebサイト用のPHPを使用したAJAXについて説明します。

AJAXは、ユーザーがWebサイトでインタラクティブなアプリケーションを開発するのに役立つWeb開発の手法です。これにより、ユーザーはより高速でスムーズなWebエクスペリエンスを利用できます。これにより、ユーザーはページをリロードまたは更新せずに、Webページのコンテンツを変更または更新できます。 AJAXを使用するには、さまざまなプログラミング言語を知っている必要があります。

AJAXとは何ですか？

AJAXは「非同期JavaScriptとXML」の略です。前述のように、これは、面白く、常に変化し、インタラクティブなWebアプリケーションを作成するために使用されます。

AJAXと関連技術の助けを借りて開発されたWebアプリケーションの人気のある例のいくつかは、Googleマップ、さまざまなソーシャルメディア投稿でのGoogleの検索、コメント、いいねのオートコンプリート機能などです。

AJAXの基本

Ajaxは、JavaScript、HTML、CSS、XMLなどのさまざまなプログラミング言語の助けを借りて、より高速で改善されたWebアプリケーションとWebサイトを開発します。これらのプログラミング言語とは別に、Webアプリケーションの開発には、PHPを使用したAJAXやその他のサーバー側言語も使用されています。

コンテンツの表示にはJavaScriptを使用しますが、CSSはプレゼンテーションとドキュメントオブジェクトモデルに役立ちます。さらに、コンテンツにXHTMLを使用します。

従来のWebアプリケーションまたはWebページでは、情報はサーバーと同期的に交換されます。一方、AJAXを使用するように設計されたWebアプリケーションでは、ボタンのクリックやフォームへの入力などのイベントが発生すると、JavaScriptがXMLHTTPリクエストを作成し、それをXML形式でサーバーに送信します。

サーバーはリクエストを処理し、サーバー側でレスポンスを作成してブラウザに送り返します。次にJavaScriptが応答を処理し、現在の表示画面のコンテンツが更新されます。ページのリロードや更新は必要ないため、ユーザーはサーバーに情報を転送することに気付くことはありません。

WordPressでAJAXを操作するために必要なスキル

上記の議論から理解できるように、ユーザーはAJAXを適切に利用するために以下のスキルを必要とします。
•JavaScript、HTML、CSSなどのプログラミング言語の知識
•PHPなどのサーバー側言語に習熟していること
•XMLまたはJSONの基本

AJAXの利点

AJAXのさまざまな利点について以下で説明します
•現在使用されているすべてのブラウザをほぼサポートします
•応答時間が短縮されます。つまり、速度とパフォーマンスの点でユーザーエクスペリエンスが向上します。
•Prototype、jQueryなどのオープンソースJavaScriptライブラリを使用できます
•クライアントとサーバー間の時間が短縮されるため、サーバーだけでなく両方のユーザーの時間が節約されます
•サーバーは大量のデータを処理する必要がないため、帯域幅の使用量を削減し、ネットワーク操作を最適化するのに役立ちます。
•XMLHTTPリクエストはデータの取得に使用されるため、ユーザーは複数のタスクを同時に実行できます。

WordPressのAJAX

AJAXはWordPressのバックエンドで使用されます。その結果、投稿やカテゴリに変更が加えられたとき、または管理者がコメントをモデレートしているときはいつでも、更新は即座に行われます。 AJAXは主にWordPressのJQueryで使用されます。 WordPressがAJAXを使用するプロセスは次のとおりです
•リクエストが行われると、「wp-admin」フォルダーにある「admin-ajax.php」ファイルを通過します。
•これらのリクエストは、「get」または「post」メソッドを使用して、一般に「アクション」とも呼ばれる少なくとも1つのデータを提供する必要があります。
•このアクションは、「admin-ajax.php」ファイルのコードに、「wp_ajax_my_action」と「wp_ajax_nopriv_my_action」の2つのフックを作成するように促します。これらのフックの「my_action」は、「get」または「post」メソッドの変数「action」の値を示します。
•最初のフックはログインしたユーザーが実行するアクションを対象としていますが、2番目のフックはログアウトしたユーザー専用です。
•フックされた関数は、正常に機能を低下させるように計画する必要があります。これにより、ブラウザーでJavaScriptが無効になっている場合でも、コードが機能します。

WordPressAJAXプラグインを作成する

このセクションでは、「PostLikesCounter」と呼ばれる基本的なWordPressAJAXプラグインの例を見てみましょう。このプラグインには次の機能が含まれています。
•フロントエンドで即座に更新されます
•ログインしたユーザーは投稿を高く評価することができます。
•ログアウトしたユーザーが投稿を高く評価しようとすると、画面にエラーメッセージが表示されます
•このプラグインは、「いいね」の数の合計記録を維持し、それらを表示するのに役立ちます
まず、空のWordPressプラグインを作成してアクティブ化する必要があります。プラグインを作成するには、次の手順を実行する必要があります。

ステップ1 ：プラグインの一意の名前を選択します。プラグインリポジトリをチェックして、提案されたプラグインの名前がすでに使用されていないことを確認できます。通常、プラグイン開発者は、プラグインが実行することになっている機能に基づいてプラグインの名前を選択します。

ステップ2 ：次のステップでは、選択したプラグイン名を使用してPHPファイルを作成する必要があります。このプラグインをインストールするユーザーは、インストールのためにPHPファイルをWordPressプラグインディレクトリ 'wp-content / plugins-'に配置する必要があるため、プラグインはPHPファイルと同じ名前を共有できません。

したがって、リポジトリ内の別のプラグインとの競合を避けるために、プラグインファイル名も一意である必要があります。プレフィックスに自分の名前または会社の名前を使用して、PHPファイルの一意の名前を作成できます。

ステップ3 ：WordPressプラグインには、JavaScript、CSS、言語、画像ファイルに加えて、少なくとも1つのPHPファイルが含まれている必要があることに注意してください。複数のファイルが存在する場合は、ディレクトリの一意の名前とメインのPHPファイルの優先名を選択します。

作成したディレクトリにすべてのプラグインファイルを配置し、プラグインユーザーにこのディレクトリ全体を「wp-content / plugins /」ディレクトリにアップロードするように要求します。

WordPressのインストールは、標準のプラグインディレクトリ「wp-content / plugins /」を変更するように構成できます。したがって、PHPコードではplugin_dir_path（）とplugin_url（）または絶対パスとURLを使用する必要があります。

テーマの投稿テンプレート

プラグインを作成した後、テーマの「single.php」投稿テンプレートを見つける必要があります。アクティブなテーマのルートディレクトリにあります。これは、単一の投稿が照会されるときに使用されます。 'Post LikeCounter'プラグインを配置したい場所。ファイルは編集のために開いたままにしておく必要があります。

AJAX呼び出しの準備ができた投稿テンプレートを準備します

ユーザーが投稿を高く評価できるように、リンクを作成する必要があります。ユーザーがJavaScriptを有効にしている場合は、JavaScriptファイル（後で作成されます）を使用できます。そうでない場合は、リンクを直接たどることができます。この目的のために、次のコードを「single.php」ファイルに挿入します。このコードは、「single.php」ファイルに含まれる任意のテンプレートパーツに追加することもできます。

// 'likes'メタキー値は、特定の投稿のlike countの合計を格納し、空の文字列の場合は0を表示します
ID、「いいね」、true）;
	$ likes =（$ likes == ""）？ 0：$ likes;
？＆gt;

この投稿には<spanid = 'like_counter'> </ span>いいね<br>があります

//admin-ajax.phpファイルにリンクします。 セキュリティを強化するためにノンスチェックが含まれています。 JS対応クライアントの「user_like」クラスに注意してください。
ID。 '＆amp; nonce ='。$ nonce）;
	echo '<aclass="user_like"data-nonce="'。$nonce。'">ID。 '"href ="'。 $ link。 '"＆gt;この投稿のように</a>';
？＆gt;

JavaScriptなしでAjax呼び出しに対処する

前の手順で作成したリンクをクリックすると、「admin-ajax.php」スクリプトに転送されます。ただし、アクションを実行するための関数が作成されていないため、有用な結果は見つかりません。プラグインファイルに関数を作成し、WordPressで作成されたフックに追加するには、次のコードを挿入します。


＆lt;？php //ここでは構文の強調表示を有効にするためにのみ使用されます。 プラグインファイルにすでに含まれている場合は、これを省略してください。

//作成された2つのフックのアクションを定義します。最初はログインしたユーザー用で、次はログアウトしたユーザー用です。
add_action（＆quot; wp_ajax_my_user_like＆quot;、＆quot; my_user_like＆quot;）;
add_action（＆quot; wp_ajax_nopriv_my_user_like＆quot;、＆quot; please_login＆quot;）;

//ログインしたユーザーに対して起動される関数を定義します
関数my_user_like（）{
   
   //セキュリティの追加レイヤーをチェックします。失敗すると関数は終了します
   if（！wp_verify_nonce（$ _REQUEST [＆＃039; nonce＆＃039;]、＆quot; my_user_like_nonce＆quot;））{
      exit（＆quot; Woof Woof Woof＆quot;）;
   }   
   
   //投稿のlike_countをフェッチし、空の場合は0に設定し、クリックが登録されると1ずつインクリメントします 
   $ like_count = get_post_meta（$ _ REQUEST [＆quot; post_id＆quot;]、＆quot; likes＆quot;、true）;
   $ like_count =（$ like_count == '）？ 0：$ like_count;
   $ new_like_count = $ like_count + 1;
   
   //＆＃039; likes＆＃039;の値を更新します指定された投稿のメタキー。存在しない場合は、投稿の新しいメタデータを作成します
   $ like = update_post_meta（$ _ REQUEST [＆quot; post_id＆quot;]、＆quot; likes＆quot;、$ new_like_count）;
   
   //上記のアクションが失敗した場合、結果タイプは＆＃039;エラー＆＃039;に設定されますlike_countは古い値に設定され、成功した場合はnew_like_countに更新されます  
   if（$ like === false）{
      $ result [＆＃039; type＆＃039;] =＆quot; error＆quot ;;
      $ result [＆＃039; like_count＆＃039;] = $ like_count;
   }
   それ以外 {
      $ result [＆＃039; type＆＃039;] =＆quot; success＆quot ;;
      $ result [＆＃039; like_count＆＃039;] = $ new_like_count;
   }
   
   //アクションがAjax呼び出しを介して起動されたかどうかを確認します。 はいの場合、JSコードがトリガーされます。そうでない場合、ユーザーは投稿ページにリダイレクトされます
   if（！empty（$ _ SERVER [＆＃039; HTTP_X_REQUESTED_WITH＆＃039;]）＆amp;＆amp; strtolower（$ _ SERVER [＆＃039; HTTP_X_REQUESTED_WITH＆＃039;]）==＆＃039; xmlhttprequest＆＃039;）{
      $ result = json_encode（$ result）;
      エコー$ result;
   }
   それ以外 {
      header（＆quot; Location：＆quot;。$ _ SERVER [＆quot; HTTP_REFERER＆quot;]）;
   }

   //スクリプトをdie（）関数で終了することを忘れないでください-非常に重要です
   die（）;
}

//ログアウトしたユーザーに対して起動される関数を定義します
関数please_login（）{
   echo＆quot;いいね！にログインする必要があります＆quot ;;
   die（）;
}

すべてがうまくいった場合、ログインしたユーザーが「この投稿のように」リンクをクリックすると、いいねの数が自動的に更新されます。一方、JavaScriptが無効になっている場合は、ページが更新され、「like」の更新されたカウントが表示されます。

JavaScriptのサポートを追加する

JavaScriptのサポートを追加すると、作業が簡単になります。 WordPressでPHPでAJAXを使用するには、プラグインのカスタムJavaScriptファイルとともにjQueryライブラリをエンキューする必要があります。この目的のために、プラグインに次のコードを記述します。

 admin_url（ 'admin-ajax.php'）））;        
   
   // jQueryライブラリと上記で登録したスクリプトをキューに入れます
   wp_enqueue_script（ 'jquery'）;
   wp_enqueue_script（ 'liker_script'）;
}

次に、Javascriptファイル「liker_script.js」を作成する必要があります。このファイルは、プラグインのルートフォルダにさらにアップロードされます。次のコードは、「liker_script.js」ファイルの作成に使用されます。

jQuery（document）.ready（function（）{
   jQuery（ "。user_like"）。click（function（e）{
      e.preventDefault（）; 
      post_id = jQuery（this）.attr（ "data-post_id"）;
      nonce = jQuery（this）.attr（ "data-nonce"）;
      jQuery.ajax（{
         タイプ：「投稿」、
         dataType： "json"、
         url：myAjax.ajaxurl、
         データ：{アクション： "my_user_like"、post_id：post_id、nonce：nonce}、
         成功：function（response）{
            if（response.type == "success"）{
               jQuery（ "＃like_counter"）。html（response.like_count）;
            }
            それ以外 {
               alert（ "あなたのいいねを追加できませんでした"）;
            }
         }
      }）;
   }）;
}）;

WordPressテーマにAJAXを実装する方法

次の手順は、WordPressテーマでPHPを使用してAJAXを実装するのに役立ちます。たとえば、ドロップダウンメニューにカテゴリを表示し、[親カテゴリ]をクリックすると、サブカテゴリが別のドロップダウンボックスに表示されると仮定します。このタスクは、次の手順を使用して実行されます

ステップ1 ：ダッシュボードの左側にある[categories]を選択し、右側に表示されるボックスにカテゴリの名前を挿入し、その下にカテゴリスラッグを挿入します。親カテゴリを作成する場合は「なし」を選択し、サブカテゴリを作成する場合はオプションから親カテゴリを選択します。

ステップ2 ：このステップでは、AJAX機能が実装されるWordPressテンプレートが作成されます。新しいPHPファイルを開いて保存します。作成したページに次のコードを挿入します。

上記のコードでは、「テンプレート名：Ajaxの実装」はWordPressテンプレートの名前であり、「get_header（）」および「get_footer（）」関数はページのヘッダーとフッターのコンテンツを表示するために使用されます。

まず、jQueryライブラリファイルをページに含める必要があります。これは、AJAXのものを追加するのに役立ちます。 PHPを使用したAJAXは、任意のJavaScriptライブラリを使用することも、生のJavaScriptを使用してAJAXを呼び出すこともできます。次の例では、jQueryJavaScriptライブラリを使用してAJAXを実装しています。

ステップ3 ：テンプレートにjQueryファイルを追加し、「wp_dropdown_categories」関数を呼び出して、ドロップダウンメニューの親カテゴリを取得できるようにします。





#content {width：auto; 高さ：400px; margin：50px;}

<div>


</ div>
＆lt;？php

ステップ4 ：jQueryコードを挿入して、選択されているメインカテゴリのIDを取得します。これを「functions.php」ファイルに送信して、選択した親カテゴリIDの下のサブカテゴリを取得します。結果は、更新せずにページに送り返すことができます。

$（function（）{
			$（ '＃main_cat'）。change（function（）{
					var $ mainCat = $（ '＃main_cat'）。val（）;

					// ajaxを呼び出す
					 $（ "＃sub_cat"）。empty（）;
						$ .ajax（{
							url： "/ wp-admin / admin-ajax.php"、
							タイプ：「POST」、
														データ： 'action = my_special_action＆amp; main_catid =' + $ mainCat、

							 成功：関数（結果）
								 {{
								// alert（results）;
				$（ "＃sub_cat"）。removeAttr（ "disabled"）;
				$（ "＃sub_cat"）。append（results）;
										}
								   }）;
						  }
									）;
}）;

上記のコードでは、コードはメインカテゴリの変更イベントでID '＃main_cat'でドロップダウンに追加されます。

var $ mainCat = $（ '＃main_cat'）。val（）;

.val（）関数は、ドロップダウンから選択したオプション値を取得し、変数 '$ mainCat'に格納するのに役立ちます。

$（ "＃sub_cat"）。empty（）;

サブカテゴリのドロップダウン「#sub_cat」に以前の値が含まれている場合は、AJAXを呼び出す前に空にする必要があります。

次のjQuery行は、AJAXjQuery関数の呼び出しに役立ちます。以下のセクションに記載されているAJAX関数のパラメーターを確認してください。

url： "bloginfo（ 'wpurl'）;？＆gt; /wp-admin/admin-ajax.php"、
タイプ：「POST」、

WordPressでAJAXを機能させるために、「URL」パラメーターが使用されます。したがって、リクエストは「admin-ajax.php」ファイルに送信されます。次に、「functions.php」ファイルのフックが呼び出され、URLに送信された投稿データが取得されます：「/ wp-admin /admin-ajax.php」

リクエストと一緒に値を送信するには、「data」パラメータを使用します。この例では、dataパラメーターを持つ2つの引数（actionとmain_catid）が使用されています。

ステップ5 ： 'functions.php'ファイルで、次のコードを使用してアクションをフックします。

add_action（ 'wp_ajax_my_special_action'、 'my_action_callback'）;

上記のアクションでは、フックに2つの引数があります。最初の引数「wp_ajax_my_special_action」では、「wp_ajax_」はデータパラメータ「action」とともに送信される値です。 2番目の引数 'my_action_callback'では、データが処理され、結果が返送されます。

上記のアクションフックは、ログインしているユーザー向けです。ログアウトしたユーザーの場合、次のアクションをフックできます

add_action（ 'wp_ajax_nopriv_my_special_action'、 'my_action_callback'）;

ユーザーとコールバック関数の両方のフックを追加した後の最終的なコードは次のとおりです

関数implement_ajax（）{
if（isset（$ _ POST ['main_catid']））
			{{
			$ category = get_categories（ 'child_of ='。$ _ POST ['main_catid']。 '＆amp; hidden_empty = 0'）;
			  foreach（$ category as $ cat）{
				$ option。= 'term_id。' "＆gt; ';
				$ option。= $ cat-＆gt; cat_name;
				$ option。= '（'。$ cat-＆gt; category_count。 '）';
				$ option。= '';
			  }

			  echo'Scegli ... '。$ option;
			die（）;
			} //終了if
}
add_action（ 'wp_ajax_my_special_ajax_call'、 'implement_ajax'）;
add_action（ 'wp_ajax_nopriv_my_special_ajax_call'、 'implement_ajax'）; //ログインしていないユーザーの場合。

ステップ6 ：このステップでは、ダッシュボードに新しいページを作成し、それにテンプレートを割り当てます。ページがブラウザに読み込まれると、親カテゴリを含む最初のドロップダウンが読み込まれます。

2番目のドロップダウンは空なので、最初のドロップダウンのオプションを選択して、どのように機能するかを確認します。

したがって、PHPを使用したAJAXは、新しく作成されたプラグインを使用してWordPressサイトで使用できます。