AJAX通信とはブラウザーの画面遷移を行わずにサーバーとユーザー間でデータをやり取りする通信のことです。ワードプレスでボタンをクリックしたときに背後でAJAX通信するJAVASCRIPTとPHPのサンプルコードを解説いたします。
データの受け取り側の実装
データの受け取り側のプログラムの実装は下記のようになります。このコードは作成中のプラグインやテーマのfunctions.phpに記載します。
function testajaxFunc(){
$test = trim($_POST["test"]);
$pageid = trim($_POST["pageid"]);
echo "送信されたデータ ".$test."\nページID ".$pageid;
die();
}
add_action( 'wp_ajax_nopriv_testajax', 'testajaxFunc' );
このコードはAJAXでフォームから送信されたtestというデータとpageid(フォームが埋め込まれているページや投稿のID)を受け取り多少加工して出力を返すプログラムとなります。
testajax の部分は次の送信側のactionと一致している必要がございます。
データの送信側の実装
データを送信する側の実装は下記のようになります。
こちらはテーマのPHPファイルに直接記載する形もしくは必要に応じてショートコード化して任意の場所に埋め込む形になるかと存じます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> //①
<input name="test" type="text" id="test" value="">
<button id="testsubmit">送信</button> //③
<script>
jQuery(function($){
var sending=false; //②
$( "#testsubmit" ).on("click", function(event){
if(sending==false){
event.preventDefault();
var fd = new FormData();
fd.append("action" , "testajax" ); //⑤
fd.append("test" , $( "#test" ).val()); //③
fd.append("pageid" , "<?php echo get_the_ID();?>" ); //④
sending=true;
$( "#testsubmit" ).html("...送信しています"); //⑥
$.ajax({
type: "POST",
url: "<?php echo admin_url( 'admin-ajax.php');?>", //⑨
data: fd,
processData: false,
contentType: false,
success: function( response ){
alert( "通信成功"+response ); //⑦
sending=false;
$( "#testsubmit" ).html("送信");
},
error: function( response ){
alert( "通信失敗" ); //⑧
sending=false;
$( "#testsubmit" ).html("送信");
}
});
return false;
}
});
});
</script>
① でJQUERYというAJAX通信の為のライブラリを読み込みます。テーマによってはすでに読み込まれている場合もありますのでこの行が不要になる可能性もあります。
② はボタンを何度も押されて複数回の通信が発生しないようにするためのフラグです(通信中はボタンが利かないようにします)
③ でフォームの入力欄に入力されたデータを送信するフォームデータに格納しています
④ はページのIDをついでに格納しています
⑤ は受信側の wp_ajax_nopriv_ の後に続く文字列に一致している必要がございます。
⑥ で送信中はボタンのテキストを「送信中です」に変更しています。
⑦⑧ 通信成功の場合⑦通信失敗の場合は⑧側の処理に移ります。
⑨ はデータを送り出すURLを指定します。ワードプレスのAJAX通信を送信するURLはadmin_url( ‘admin-ajax.php’) で取得できます。
ワードプレスのAJAX通信はadd_action( ‘wp_ajax_nopriv_
ワードプレスのAJAX通信はこの組み込み関数で一般的には実装されることが多いです。
関数の書式は下記のようになっています
add_action( 'wp_ajax_nopriv_JAVASCRIPT側から送信されるaction名', 'データを処理する関数' );
function データを処理する関数(){
//ajax送信されたデータを処理
}
WordPress ワードプレスのテーマやプラグインの作成、カスタマイズ、修正のご依頼・ご相談はWPドクターまでお気軽にお送りください
