ワードプレスには非同期でデータを処理するAJAXという仕組みが組み込まれています。この仕組みで、ページを再読み込みすることなしにプログラムの裏側で様々なデータ処理をすることができます。
ワードプレスのAJAX通信の基本
AJAX通信には、ワードプレスのページの裏側で通信を開始するためのJAVASCRIPTコードとそのデータを処理するワードプレス側のPHPコードの2種類がひつようになります。
JAVASCRIPTコード側
jQuery(".mybutton").click( function(e) { e.preventDefault(); //ボタンクリック処理を無視しその下のコードを実行させます jQuery.ajax({ type : "post", dataType : "json", url : '',//ワードプレスのAJAX通信送信先URLを出力します data : {action: "my_ajax_test", mydata:'データも送信できます'},//mydataにPOST値を1つテスト用に追加しました success: function(response) { if(response.type == "success") { alert(response); } else { alert("通信が失敗しました"); } } }); });
このコードはmybuttonというクラスのボタンがクリックされたときに、ワードプレス側のmy_ajax_testというPHP関数を実行して返答をアラート表示します。
PHPコード側
function my_ajax_test(){ $mydata=$_POST['mydata']; echo 'AJAX通信が成功しました'; die(); } add_action( 'wp_ajax_my_ajax_test', 'my_ajax_test' ); add_action( 'wp_ajax_nopriv_my_ajax_test', 'my_ajax_test' );
wp_ajax_とwp_ajax_nopriv_ の後にJAVASCRIPTで定義したmy_ajax_testを記載するとワードプレスが、AJAX通信を受け付けるようになります。
function my_ajax_testの部分がデータを受け取った際の処理する内容です。
ajaxで送ったデータは$_POSTで受け取ることもできます。
この関数では単純に文字列を出力し、この文字列をJAVASCRIPT側のアラート表示をしています。
※wp_ajax_とwp_ajax_nopriv_と2つアクションを作るのはログインユーザーと非ログインユーザーどちらでもこのAJAXが動作するためとなります。
\ 他社の制作したワードプレスサイトもOK ! /
ワードプレスの制作・復旧・修正・カスタマイズのご相談・ご依頼はこちらから
コメントを投稿する