JavaScript 2020/10/06 (更新日:2023/01/10)

【Javascript】wordpressでAjaxを使う方法を紹介

今回は素のjavascriptを使って、Wordpressを使ったwebサイト上で、Ajaxを使ってサーバーサイド(sever.php)とのデータのやり取りする方法を紹介します。

Ajaxを行うファイル構成を確認してみよう
WordPressでAjaxを使うために必要な準備
POSTでデータのやり取りをしよう

Ajaxを行うファイル構成を確認してみよう

index.php
script.js
style.css
functions.php
functions/server.php

シンプルに同じ階層にすべてのファイルをおいています。お使いの環境に合わせてurlを変更する必要があります。

HTMLとCSS

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ajax</title>
     <link rel="stylesheet" type="text/css" href="<?= esc_url(get_stylesheet_uri()); ?>">

</head>

<body>

     <div class="container">
          <div class="button">Ajax</div>
     </div>

     <script src="<?php echo esc_url(get_template_directory_uri()); ?>/script.js" defer></script>

</body>

</html>

.container {
     display: flex;
     justify-content: center;
     width: 100%;
     height: 100vh;
     align-items: center;
}

.button {
     padding: 1rem 2rem;
     background: #ccc;
     color: #fff;
     cursor: pointer;
}

WordPressでAjaxを使うために必要な準備

WordPressでAjaxを使用する際には、アクセス先のurlにwp-admin/admin-ajax.phpを指定する必要があります。なので、functions.phpで予め変数ajaxurlへパスを保存させる処理を行います。

<?php
//Ajaxに必要なurlをヘッダーに表示させる
function add_ajaxurl()
{
?>
     <script>
          var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
     </script>
<?php
}
//ヘッダーで関数を実行する
add_action('wp_head', 'add_ajaxurl', 1);


// ファイルを読み込む
get_template_part('functions/server');

16：サーバー側のserver.phpを作成します。JSON形式で送られてきたデータに新たに配列を加えて、再度JSONの型に変換して送り返す内容になっています。

<?php

function push_array() {

     $data = json_decode($_POST['names']);

     $tanaka = array('name' => '田中');
     array_push($data, $tanaka);

     $data = json_encode($data);

     echo $data;
     die();
}

add_action( 'wp_ajax_push_array', 'push_array' );
add_action( 'wp_ajax_nopriv_push_array', 'push_array' );

POSTでデータのやり取りをしよう

const button = document.querySelector('.button');

button.addEventListener('click', function() {

     var req = new XMLHttpRequest();
     req.onreadystatechange = function () {
          if (req.readyState == 4 && req.status == 200) {
               var data = JSON.parse(this.response);
               console.log(data);
          }
     };
     req.open('POST', ajaxurl, true);
     req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');

     var names = [{
          name: '佐藤'
     },{
          name: '鈴木'
     }];

     names = JSON.stringify(names);
     req.send(`action=push_array&names=${names}`);
});

8〜9 通信に成功すると、サーバーサイドから送られてきたJSON型のデータを配列に変換し、ログに出力しています。

12：先程ヘッダーでajaxurl変数にurlを保存しているので、ここで指定します。

13：POSTで送信する場合は、エンティティヘッダーを用意する必要があります。

15~19今回は配列を作成し、21~22 JSON形式の型に変換して、サーバーサイド(server.php)にデータを送信します。

送信する歳には、dataのactionに先程登録した関数名を、送りたいデータの数ごとに&で連結し、データを送信することができます。

実行結果