Posted on: 2014/08/22

WordPressでAjaxを使う方法の解説

基本の解説

STEP1. リクエスト送信先のパス

WordPress で Ajax を使う場合 /wp-admin/admin-ajax.php にリクエストを送ることに決まっている。
JavaScript ファイル内で動的にパスを指定することはできないので、wp_head にフックしてリクエスト送信先のURLをグローバル変数として出力しておく。

> functions.php

1
2
3
4
5
6
7
8
function add_my_ajaxurl() {
?>
    <script>
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

wp_head アクションにフックすることで head 要素内に JavaScript のグローバル変数としてパスが出力される。
これで、以後実行される JavaScript 内でこの変数が使える。

※ JavaScript ファイルを body要素最下部に配置するのは基本なので、wp_footer にフックしてもいい。
wp_enqueue_script を使う場合は、第5引数を true にすること。

STEP2. 呼び出すPHP関数の作成

JavaScript から呼び出す PHP 関数を定義する。
まずは簡単に get_bloginfo( ‘name’ ) で取得される”サイト名”を返すだけの関数とする。

> functions.php

1
2
3
4
5
6
function view_sitename(){
    echo get_bloginfo( 'name' );
    die();
}
add_action( 'wp_ajax_view_sitename', 'view_sitename' );
add_action( 'wp_ajax_nopriv_view_sitename', 'view_sitename' );

wp_ajax_{action} で独自のアクションフックを登録することができる。
wp_ajax_{action} はログインユーザ、wp_ajax_nopriv_{action} は未ログインユーザ用なので、フロントでAjaxを使いたい場合は両方にアクションフックを登録しておくこと。

STEP3. JavaScripの作成

> template

1
<button id="submit">View Sitename</button>

jQuery の $.ajaxメソッドを使うパターンで解説。

> JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
$( '#submit' ).on( 'click', function(){
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'view_sitename',
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

url に指定するリクエスト送信先のパスは、STEP1 でグローバル変数 ajaxurl を指定する。
action に指定するのは STEP2 で登録したアクションフック。
これで STEP2 の view_sitename PHP関数が実行され、echo された値が response に戻ってくるので、それをまた JavaScript 側で処理すればオケ。

応用

変数を渡す

> JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$( '#submit' ).on( 'click', function(){
     
    var mes = 'Hello World!!';
         
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'view_mes',
            'mes' : mes,
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

> functions.php

1
2
3
4
5
6
7
function view_mes(){
    $mes = $_POST['mes'];
    echo $mes;
    die();
}
add_action( 'wp_ajax_view_mes', 'view_mes' );
add_action( 'wp_ajax_nopriv_view_mes', 'view_mes' );

結果は「Hello World!!」

配列データをJSON形式でやりとりする

post type = post のコンテンツの、記事タイトルとパーマリンクURLを取得するサンプル。

> JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function($){
 
    $( '#submit' ).on( 'click', function(){
         
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                'action' : 'my_ajax_get_posts',
            },
            success: function( response ){
                jsonData = JSON.parse( response );
                $.each( jsonData, function( i, val ){
                    alert( val['post_title'] );
                    alert( val['permalink'] );
                });
            }
        });
        return false;
    });
 
})(jQuery)

> functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function my_ajax_get_posts(){
     
    $returnObj = array();
     
    $args = array(
        'post_type' => 'post',
        'numberposts' => 5,
    );
     
    $posts = get_posts( $args );
     
    foreach( $posts as $key => $post ) {
        $returnObj[$key] = array(
            'post_title' => $post->post_title,
            'permalink' => get_permalink( $post->ID ),
        );
    }
     
    echo json_encode( $returnObj );
     
    die();
}
add_action( 'wp_ajax_my_ajax_get_posts', 'my_ajax_get_posts' );
add_action( 'wp_ajax_nopriv_my_ajax_get_posts', 'my_ajax_get_posts' );

参考:
Plugin API/Action Reference/wp ajax (action)
Wp Ajax – WordPress Hook to Handle Ajax Request

LINE はてブ Pocket +1

Comments

santoso へ返信するコメントをキャンセル