Freiheit channel

自由を追い求めるブログ

NEW ARTICLE
WordPressで投稿時にスラッグを自動でつける

wordpressでAjaxを使う方法

NO IMAGE
目次

Ajaxで送信するurlをJavaScriptから取得できるようにする

function my_enqueue() {
    // ここで決めたハンドル名(ajax-script)と下のwp_localiza_scriptのハンドル名を同じにする
    wp_enqueue_script( 'ajax-script', '/path/ajax.js', ['jquery'], false, false );
    // add_urlがグローバル変数になる add_url.ajax_urlで送信先urlを取得できる
    wp_localize_script( 'ajax-script', 'add_url',array( 'ajax_url' => admin_url( 'admin-ajax.php') ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

JavaScriptの作成

$( '#button' ).on( 'click', function(){
    $.ajax({
        type: 'POST',
        url: add_url.ajax_url,
        data: {
            'action' : 'display_template_directory',
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

呼び出される関数を作成する

function display_template_directory(){
    echo get_template_directory_uri();
    die(); 
}
add_action( 'wp_ajax_display_template_directory', 'display_template_directory' );
add_action( 'wp_ajax_nopriv_display_template_directory', 'display_template_directory' );
  • die();は書いておかないと処理が続いて、予期していないバグを生むかもしれないから必ず書く。
  • wp_ajax_と自分で決めた名前を組み合わせてアクションフックを登録する。
  • wp_ajax_xxxとwp_ajax_nopriv_xxxはそれぞれログインユーザーと非ログインユーザー向けのフックの違い。

JSONデータをやり取りする場合

$( '#button' ).on( 'click', function(){

    var message_obj = {
        name : 'hoge',
        text : 'foo',
    };

    var message = JSON.stringify(message_obj);

    $.ajax({
        type: 'POST',
        url: add_url.ajax_url,
        data: {
            action : 'get_time_now',
            message : message,
        },
        success: function( response ){
            console.log(response.time);
        }
    });
    return false;
});
function get_time_now(){
    // JavaScript側でdataに追加したjsonが入っているプロパティ名を指定
    $json = $_POST['message'];

    // stripslashed()をしないとダブルクォートなどがエスケープされてjson_decodeが失敗するため必須
    // JavaScript側の送り方によっては不要だが今回は必要
    $obj = json_decode(stripslashes($json));

    $obj->time = (string) time();
    $send_json = json_encode($obj);

    header( 'Content-Type: application/json; charset=utf-8' ); // jsonをphpから送るときは必要
    echo $send_json;

    die();
}
add_action( 'wp_ajax_get_time_now', 'get_time_now' );
add_action( 'wp_ajax_nopriv_get_time_now', 'get_time_now' );

参考サイト