KumaTechLab
2020-12-10/2023-05-23

WordPressで非同期処理する方法

WordPressで非同期処理する方法

WordPressでJavascript等を使用し、非同期処理をする方法を紹介します。

通常であれば通信するphpファイルを指定すれば問題ないのですが、WordPressでは直接ファイルを指定する形ではうまく動作してくれません。

そこでWordPressが容易してくれているものを利用し、非同期処理を作成します。

XMLHttpRequestを使用する例で説明していきます。fetchを使用している場合は該当箇所を置き換えて使用してください。

XMLHttpRequestでPOST通信するための通常の記述

function ajax_post() {
      let url = '';
			let send = '';
			
			url = 'ajax.php';
			send = 'PHPに渡す値';
			let request = new XMLHttpRequest();


			request.onreadystatechange = () => {
				if( request.readyState == 4 ) {
					if( request.status == 200 ) {
						console.log( JSON.parse(  request.response ) );
					}
				}
			};


			request.open( 'POST', url, true);
			request.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
			request.send(send);
}

特に処理をしない基本的な形です。

指定したURLに指定した値をPOSTで送信し、レスポンスが返ってきたらコンソールに出力するプログラムです。

WordPressでXMLHttpRequestでPOST通信するための記述

WordPressでは非同期通信、ajax処理をするためのファイルがあらかじめ割り当てられています。

「admin-ajax.php」というファイルです。

なのでこのファイルのパスをJavascriptで使用できる形にしておきます。

方法は「<script>を使用し、ヘッダーまたはフッターに出力する」「wp_locarize_scriptを使用し出力する」の二つがあります。

以下は前者の方法です。

function my_ajaxurl() {
?>
    <script>
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
<?php
}
add_action( 'wp_head', 'my_ajaxurl', 1 );

ヘッダーに「admin-ajax.php」へのファイルパスを出力しています。

次に実際にjavascriptから値を受け取って処理をする部分です。

javascriptから送られてくる「action=○○」に応じて処理を振り分けることができます。

振り分けるためには行いたい処理(関数)を「wp_ajax_○○」にアクションフックしておく必要があります。

下記例ではjavascrpitから送られてきたterm_iidに対してターム名を返却する例です。

function get_term_name(){


    header("Content-Type: application/json; charset=utf-8");
    
    //$typeはjavascript側でタクソノミー名を送っています。
    $type = filter_input( INPUT_POST , 'search_type' );
    //$conditionsはjavascript側でタームIDの配列を送っています。
    $conditions = filter_input( INPUT_POST , 'search_word', FILTER_DEFAULT,FILTER_REQUIRE_ARRAY );


    $result = [];


    foreach ( $conditions as $condition ) {
    	$term = get_term( $condition, $type );
    	if( $term ) {
    		$result[] = $term->name;
    	}
    }


    echo json_encode( $result );


    wp_die();
}
add_action( 'wp_ajax_get_term_name', 'get_term_name' );
add_action( 'wp_ajax_get_term_name', 'get_term_name' );

ここまでの段階でpostで送られた値に対して処理をし、値を返してあげる仕組みが整いました。

最後にjavascriptの手直しです。

actionの指定とurlを指定します。

function ajax_post() {
			const url = ajaxurl; //phpから指定しておいた変数名を指定
			const send = 'action=get_term_name&search_type=category&search_word[]=12&search_word[]=14';
			let request = new XMLHttpRequest();


			request.onreadystatechange = () => {
				if( request.readyState == 4 ) {
					if( request.status == 200 ) {
						console.log( JSON.parse(  request.response ) );
					}
				}
			};


			request.open( 'POST', url, true);
			request.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
			request.send(send);
}

これで非同期処理がうまく動作します。

2020 KumaTechLab.