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

投稿日：2022年09月22日 10時12分30秒
更新日：2022年09月22日 10時12分44秒

最初に

元々は問合せフォームで製品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に追加してください。

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

ajax通信を実行するjavascriptが書かれたファイルの読み込み
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;
}