WordPressでAjaxの使い方

wordpressでajaxを使う必要が出てきたので調べてやってみました。

やり方を調べてみるとどのサイト見てもjQueryを使っていたんですが自分はjQueryをまったく使ったことが無いのでfetchを使ってやってみました。

WordPressではajaxはadmin-ajax.phpというファイルを使って行うようになっているようです。このファイルへのurlは自分の管理画面のurl(https://○○.com/wp-admin/)の後ろにつけて

"https://○○.com/wp-admin/admin-ajax.php"

で使うことができます。記事内ではajaxurlがこのurlを指しています。

次にjavascriptで関数を作ります。

function ajax_test(){
    const params = new URLSearchParams();
    params.append('action', 'test_func');

    const opt = {
        method: 'POST',
        body: params
    }
    
    //ここで取りに行っている
    fetch(ajaxurl, opt).then(
        (response) => response.json()
    ).then((data) => {//成功の時
        console.log(data);//dataがajaxで取得したもの
    }).catch((error) => {//エラーの時
        console.error(error);
    });
}

param.append(‘action’, ‘ajaxで使うphpの関数名’)になっています。

次にfunctions.phpにajaxで実行される関数を追加します。

function test_func(){
    echo json_encode('hello world!');    
    wp_die();
}
add_action('wp_ajax_test_func', 'test_func');
add_action('wp_ajax_nopriv_test_func', 'test_func');

add_action()のwp_ajax_○○とwp_ajax_nopriv_○○の○○部分は作った関数名が入ります。２つあるのはログイン時とログイン無し時で使い分けるためらしいです。

上の二つのプログラムを実行するとコンソールに「hello world!」と表示されます。

WordPressから記事を取得する

実際にwordpressから記事を取得する場合はだいたいこんな感じでやっています(functions.php) 。

function ajax_get_posts(){
  $args = array(
    'posts_per_page' => 10,
  );

  global $post;
  $posts = get_posts($args); 

  if(!empty($posts)){
    $cnt = 0;
    foreach ($posts as $post){
      $data[$cnt]['url'] = get_permalink($post);
      $data[$cnt]['title'] = get_the_title();
      $cnt++;
    }
  }
  echo json_encode($data);    
  wp_die();
}
add_action('wp_ajax_ajax_get_posts', 'ajax_get_posts');
add_action('wp_ajax_nopriv_ajax_get_posts', 'ajax_get_posts');

取得したデータを一度配列に入れておいてそれをjson形式ににして送っています。

javascript側で受け取ったjsonからhtmlを作って表示しています。

//略

fetch(ajaxurl, opt).then( 
  (response) => response.json() 
).then((data) => { 
  if(data){ 
    let html = ""; 
    for(let i = 0; i < data.length; i++){ 
      let d = data[i]; 
      html += '<a href="' + d.url + '">' + d.title + '</a><br>'; 
    }       

    const elm = document.getElementById('test'); 
    elm.innerHTML += html; 
  }
}

カテゴリーなどを指定して記事を取得したい場合は

params.append('category', 'test');

のような感じでparamsにカテゴリーのスラッグを追加で送ればOKです。

if(isset($_POST["category"])) {
  $category = htmlspecialchars($_POST["category"]);
}

functions.phpでpostでクエリを受け取って使うことができます。