Ajax通信でつぶやきを実現する

クライアントサイドからAjaxをつかって、WordPressのデータベースと通信し、つぶやきを実現する方法を紹介する。

サーバーサイドのコード（functions.php)

クライアントから送られてきたデータは$_POST[‘key’]に格納される。つぶやきの内容をクライアント側のフォームでサーバ側にPOSTし、 それを受けとったサーバー側はWordPressに新規投稿する。wp_insert_post()の引数には投稿タイトルや内容、タグなどを指定できる。今回はつぶやき以外にもデータを扱っていたため、タグをtweetにすることで取得するときに他のデータと混同しないようにしている。

やっていることとしては大きく分けて新規投稿と今までの投稿の取得の２つである。

header("Access-Control-Allow-Origin: *");

add_action('wp_ajax_tweet_voice', 'tweet_voice');  // ログイン状態のユーザーからのアクセスで動作する
add_action('wp_ajax_nopriv_tweet_voice', 'tweet_voice'); // 非ログインのユーザーからのアクセスで動作する

function tweet_voice() {

       //***新規投稿***//

    $post_value = array(
          //投稿内容
        'post_title' => $_POST['voice'],
        'post_author' => $_POST['author'],
        'post_content' => '[cft format=0]',
        'tags_input' => ['tweet'] //タグをtweetに設定
    );

    $insert_id = wp_insert_post($post_value);

    if( $insert_id != 0 ){
          //カスタムフィールドテンプレートに情報追加
        update_post_meta($insert_id, 'name',$_POST['name']);
        update_post_meta($insert_id, 'lng', $_POST['lng']);
        update_post_meta($insert_id, 'lat',$_POST['lat']);
        update_post_meta($insert_id, 'voice',$_POST['voice']);
    }

       //***投稿の一覧表示用データを取得***//

    $param = array(
        'posts_per_page' => '20',
        'tag' => ['tweet'] //タグtweetのみを取得
    );
    $the_query = new WP_Query( $param );
    $j = 0;
    while ( $the_query->have_posts() ) : $the_query->the_post();
        $id = get_the_ID();
        $res[$j*4] = get_post_meta($id,'name',true);
        $res[$j*4+1] = get_post_meta($id,'lng',true);
        $res[$j*4+2] = get_post_meta($id,'lat',true);
        $res[$j*4+3] = get_post_meta($id,'voice',true);
        $j++;
    endwhile;

    echo json_encode($res, JSON_UNESCAPED_UNICODE);
    die();
}

クライアントサイドのコード

アプリ側のフレームワークとしてionicを使用しているが今回の目的には影響をあたえないので普通のタグに置き換えて考えてもらって構わない。

    <h1>つぶやく</h1>
    <form name="tweet" class="search_container">
      <input id="tweet-word" name="mytweet" type="text" />
      <button id="tweet" class="btn-square" onclick="addVoice();">つぶやく</button> //addVoice関数を呼び出す
    </form>
    <h3>つぶやきリスト</h3>
    <ion-list id="tweet-list"> //この中にあとでjavascriptから<ion-item>でつぶやきを描画していく
      <ion-list-header>
      </ion-list-header>
    </ion-list>

javascriptでデータを送信、受信する

  <script>
     function addVoice(){
          var voice = document.getElementById('tweet-word'); //入力内容の取得
          alert(voice.value);
          if(voice.value ==""){
            alert("未入力です");
            return  //何も入力されていなかったら終了する。
          }
          var place_json=localStorage.getItem('place');//無視して構わない
          var place = JSON.parse(place_json);//無視して構わない
          $.ajax({
            type: 'POST',
            url: wp_url_admin_ajax,
            crossDomain: true,
            data: { 
            //送りたい内容はここに書く（つぶやきの内容）
              'action' : 'tweet_voice',
              'voice': voice.value, 
              'name' : place.name,
              'author': 'Haruto Takano',
              'lng': place.lng,
              'lat': place.lat
            },
            dataType: 'json',

            success: function (response,text, jqXHR) { //responseにつぶやき一覧の情報が渡されて返ってくる
              element = document.getElementById('tweet-list');
              while (element.firstChild) {
                element.removeChild(element.firstChild); //リストをリフレッシュ
              }
              var tweets = jqXHR.responseJSON; //JSONを配列に変えたデータが格納されている（=JSON.parse(response)
              for (var i = 0; i < tweets.length/4; i++) {
                var name = document.createElement('ion-label');
                var place = document.createElement('ion-item');
                var content = document.createElement('ion-item');
                name.textContent = tweets[i*4];
                place.textContent = ' 緯度:'+tweets[i*4+1]+' 経度:'+tweets[i*3+2];
                content.textContent = tweets[i*4+3];

                //つぶやきを描画する
                element.appendChild(name);
                element.appendChild(place);
                element.appendChild(content);
              }
            }
          });
        }

      </script>