• 投稿日:2022年09月22日 10時12分30秒
  • 更新日:2022年09月22日 10時12分44秒
ajax通信でWordPressの記事情報を取得する

ajax通信でWordPressの記事情報を取得する

最初に

元々は問合せフォームで製品ID(記事タイトル)を入力すると製品名(ACFで作成したカスタムフィールド)を取得し表示するをしたくて開発。
最初は「get_stylesheet_directory().’/ajax.php’」ファイルを作って、それを「get_stylesheet_directory_uri().’/ajax.php’」みたいな感じで呼べばいいかなって思っていたけど、これだと404になった。

調べてみたらWordPressではajax処理専用のファイルがあり、それを使う宣言とそのときに実行する関数を紐づけてあげることで出来るみたい。
あんまりやることはないと思うけど、欲しいって人は絶対な機能だと思うので備忘録。

ここでは以下ファイルに対して追記を行います。

  • functions.php

また以下ファイルがあることまたは作ります。

  • get_stylesheet_directory_uri().’/assets/js/ajax_getAcfField.js’

my_enqueue()

function my_enqueue() {

  if ( is_page( 'contact' ) ) {
    // Ajaxの処理を書いたjsの読み込み
    wp_enqueue_script( 'ajax-script', get_stylesheet_directory_uri().'/assets/js/ajax_getAcfField.js', array('jquery'), null, true );
    // 「ad_url.ajax_url」のようにしてURLを指定できるようになる
    wp_localize_script( 'ajax-script', 'ad_url',array( 'ajax_url' => admin_url( 'admin-ajax.php') ) );
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

説明

functions.phpに追加してください。

この関数で行うことは以下2点です。

  1. ajax通信を実行するjavascriptが書かれたファイルの読み込み
  2. WordPressが用意しているajax送信先URLを変数化

注意としては、WordPressではajaxリクエスト送信先は「/wp-admin/admin-ajax.php  」と決まっています。
これをWordPress関数で作ると「admin_url( ‘admin-ajax.php’)」となります

今回開発したサイトではcontactスラッグのページのみで動作すれば良いのでif文で判定を入れています。
判定条件やjavascriptファイルパスは自由に変えてください。

get_acf_field()

function get_acf_field() {

	try{

	    // $_POSTで渡ってくる値を取得
		$post_tittle    = isset( $_POST['post_tittle'] )  ? $_POST['post_tittle'] : null;

		// 記事タイトルから記事情報を取得
		$page_type = array('post', 'page',);
		$post = get_page_by_title($post_tittle, OBJECT, $page_type);

		echo json_encode(array("status"=>"OK", 'post'=>$post));

	} catch ( Exception $ex ) {
		echo json_encode(array("status"=>"NG", 'msg'=>$ex->Message()));

	}finally{
		wp_die();

	}

}
// ログインしているユーザー向け関数
add_action( 'wp_ajax_get_acf_field', 'get_acf_field' );
// 非ログインユーザー用関数
add_action( 'wp_ajax_nopriv_get_acf_field', 'get_acf_field' );

引数

※ajaxで送られてきたPOSTまたはGET値

説明

functions.phpに追加してください。

この関数では記事のタイトルから記事情報を取得し、statusとしてOKまたはNGを返しています。
もちろん実際にさせたい処理に変更してください。

 

window.addEventListener('load', () => {}

window.addEventListener('load', () => {
    
    let inputID = document.querySelector('input[name="id"]'); // 製品ID入力input
    
	// 製品IDチェンジイベントを作成
	inputID.addEventListener('input', () =>{
    
		let ary_inputValue = {};
		ary_inputValue['action'] = 'get_acf_field';
		ary_inputValue['post_tittle'] = inputID.value;

		let rtn_ajax = proc_ajax(ad_url.ajax_url,  ary_inputValue  );

		if(rtn_ajax.status == 'NG' ){
		    alert('失敗');
		}else{
		    alert('成功');
		}
    });
    
    let e = new Event('input');
    inputID.dispatchEvent( e );

    }

});

説明

my_enqueue()関数で指定したjavascriptファイルに記載して下さい。

input[name=”id”]タグに入力があるたびに記事の存在をチェックして、あるなら取得という機能を実装したかったのでその名残が残っています。

ここで注意は、「ary_inputValue[‘action’] = ‘get_acf_field’;」についてです。
ary_inputValue変数は後にajaxでPOST送信する値の連装配列なのですが、ここにactionというkeyで実行したいアクションを指定する必要があります。
このおかげで同じURLにajaxリクエストを受け取ったあと、何をするかをWordPressは判断しています。

指定する値はadd_action()関数で実行した処理を追加したときのkeyの「wp_ajax_XXXX」の「XXXX」の部分です。
これがなかったり間違っていると400エラーになったりするので注意してください。

 

proc_ajax(string, arraya)

function proc_ajax(val_url, ary_postValue){

    var rtn;

    try {
		jQuery.ajax({
			type: 'post',
			url: val_url,
			dataType : 'json',
			data: ary_postValue,
			async : false,   // ← asyncをfalseに設定する
			timeout: 30,
        })
        .done(( data, textStatus, jqXHR ) => {
            
            console.log("ajax通信に成功しました[url:" + val_url + "]");
            rtn = data;

        })
        .fail(( jqXHR, textStatus, errorThrown ) => {
            
            console.log("ajax通信に失敗しました[url:" + val_url + "]");
            console.log("jqXHR : " + jqXHR);
            console.log(jqXHR);
            console.log("textStatus     : " + textStatus);
            console.log("errorThrown    : " + errorThrown.message);

            rtn = false;
        })
        .always(( jqXHR, textStatus ) => {
        
        });
    } catch (error) {
        console.log(error);
        rtn = false;
    }
    return rtn;
}

引数

  1. ajax通信先URL
  2. 引数。今回はPOST送信

説明

my_enqueue()関数で指定したjavascriptファイルに記載して下さい。

最後はなんてことはない、ajaxリクエストを送る関数です。
asyncなどの設定は不要であれば消してください。

最後に

以上、WordPressでajax通信を実行する方法でした。
WordPressが用意してくれていたとは知らなかったです。便利な奴です。

wp_localize_script()関数とかも知らなかった。便利な機能だな。
別のAPI連携では無理矢理グローバルに変数を宣言して埋め込むってことをしたけど、これでよかったんだな。

SPECIAL THANKS

  1. [WordPress]Ajaxを使ってカスタムフィールドを更新する -increment Log-
  2. WordPressでAjaxを使う方法 -AgoHack-
【Laravel】configファイルについて
WEB AR開発 A-Frame AR.js
Laravelを使って開発したものを本番環境へ
Laravelをインストールし開発環境を整備する
Laravelのコマンドを色々まとめ
UbuntuにApacheをインストール
UbuntuにNginx, MySQL, php をインストールする
Ubuntuに古いphp7.1をインストールする