煎じすぎてもはや水な話題ですが、自分用に残しておきたかったのでWordPress Ajax記事を書こうと思います。

非同期でタブ切り替えのようにカテゴリー別のコンテンツを取得したいという要望があり、実装しました。

これを応用すればサイト内の色んな所で簡単にajaxでコンテンツを取得できるはず…！

functions.php

functions.phpにはWordPressでAjaxを使用できるようにする記述、実際に表示する投稿ループの内容の記述をしていきます。

/*
 *=========================
 *    functions.php
 *=========================
 */

// ajaxを使用する際に取得するURLをグローバル変数に渡す

function my_ajax_url() {
?>
  <script>var ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';</script>
<?php
}

add_action('wp_head', 'my_ajax_url', 1);



//==============================================================
//  Ajax カテゴリー絞り込み
//___________________________________

function select_category_ajax_php(){

  if ($_POST['cat'] == 'all') { // 全件表示
    $taxqueryArr[] = array(
      'taxonomy' => '好きなタクソノミーを入れてね',
      'field' => 'slug',
      'terms' => array( 'cat-1', 'cat-2' ), // 実際のカテゴリーを入れてね
      'include_children' => true,
      'operator' => 'AND'
    );
    $cat_query = new WP_Query( array(
      'post_type' => '好きな投稿タイプを入れてね'
    ));

  } else { // カテゴリー表示
    $taxqueryArr[] = array(
      'taxonomy' => '好きなタクソノミーを入れてね',
      'field' => 'slug',
      'terms' => $_POST['cat'],
      'include_children' => true,
      'operator' => 'AND'
    );
    $cat_query = new WP_Query( array(
      'post_type' => '好きな投稿タイプを入れてね',
      'tax_query' => $taxqueryArr,
    ));
  }

  // item Loop
  if ( $cat_query->have_posts() ) : while ( $cat_query->have_posts() ) : $cat_query->the_post();
    echo '<li class="list-item"><a href="'.get_the_permalink().'">';
    echo get_the_title();
    echo '</a></li>';
  endwhile; endif;

  die();
} // func select_category_ajax_php
add_action('wp_ajax_select_category_ajax_php', 'select_category_ajax_php');
add_action('wp_ajax_nopriv_select_category_ajax_php', 'select_category_ajax_php');

タクソノミーや投稿タイプはお好みでカスタマイズしてください。

現状カテゴリーは手打ちしていますが、関数やらで自動取得するのもいいと思います。

あと、まさかこのコードを管理画面で使用するなんて方はいないと思うんですが、一応注意として60,61行目

add_action('wp_ajax_select_category_ajax_php', 'select_category_ajax_php');
add_action('wp_ajax_nopriv_select_category_ajax_php', 'select_category_ajax_php');

アクションフックの部分wp_ajax_関数名とwp_ajax_nopriv_関数名でログイン状態の是非によってajaxが使用できる領域が変わってきますので注意です。

フロントエンドでの使用の場合は両方のフックをかけてやれば大丈夫です。

表示したいテンプレートファイルなど（page.phpなど）

全体のコード

<div class="filter_category">
    <label for="check_cat_1" class="cat-all">
        <input id="check_cat_1" class="check_cat" type="radio" name="cat" value="all">ALL</label>
    <label for="check_cat_2">
        <input id="check_cat_2" class="check_cat" type="radio" name="cat" value="cat-1">カテゴリー1</label>
    <label for="check_cat_3">
        <input id="check_cat_3" class="check_cat" type="radio" name="cat" value="cat-2">カテゴリー2</label>
</div>
<ul id="result">
    <!-- ここに投稿を表示 -->
</ul>
<script>
// init AjaxContent
jQuery(document).ready(function(){
    $('.cat-all').addClass('active');
});
//===============================================
// カテゴリー選択
//_________________________________
$('.check_cat').on('click', function() {
    // 選択時 active classを付与
    $('.check_cat').parent('label').removeClass('active');
    $(this).parent('label').addClass('active');
    let cat = this.value;
    // console.log(cat);
    // テスト用 - 何を選択したか確認用
    $.ajax({
        type: 'post',
        url: ajaxUrl, // functions.phpで指定した admin-ajax.php のURLが格納された変数
        cache: false,
        timeout: 3000,
        dataType: 'html',
        data: {
            'action': 'select_category_ajax_php', // 登録したアクション名
            'cat': cat // functions.phpでPOST値として渡す
        },
        success: function(data) {
            // console.log(data); // テスト用 - 送られてきたデータの確認用
            $('#result').html(data);
        }
    });
});
</script>

大きく分けて「カテゴリー選択ボタン＆結果出力」と「javaScript(jQuery使用)でajax処理カキカキ」に分かれています。

カテゴリー選択・投稿表示部

ボタンと表示部分は特に解説することもありませんが、ボタンであるinputタグをlabelで囲んでいます。class付与だったり操作しやすいのでそうしています。（デザインボタンにする場合もcssあてやすいし…）

<div class="filter_category">
    <label for="check_cat_1" class="cat-all">
        <input id="check_cat_1" class="check_cat" type="radio" name="cat" value="all">ALL</label>
    <label for="check_cat_2">
        <input id="check_cat_2" class="check_cat" type="radio" name="cat" value="cat-1">カテゴリー1</label>
    <label for="check_cat_3">
        <input id="check_cat_3" class="check_cat" type="radio" name="cat" value="cat-2">カテゴリー2</label>
</div>


<ul id="result">
    <!-- ここに投稿を表示 -->
</ul>

補足ですが、表示部分である#resultには、初期表示したいテキストとかを記述しておいたりもできます。

初期表示は全カテゴリーを表示しておきたい！という方は通常通りループを書いておけばOKです。

呼び出しjavascript部

// init AjaxContent
jQuery(document).ready(function(){
    $('.cat-all').addClass('active');
});
//===============================================
// カテゴリー選択
//_________________________________
$('.check_cat').on('click', function() {
    // 選択時 active classを付与
    $('.check_cat').parent('label').removeClass('active');
    $(this).parent('label').addClass('active');
    let cat = this.value;
    // console.log(cat);
    // テスト用 - 何を選択したか確認用
    $.ajax({
        type: 'post',
        url: ajaxUrl, // functions.phpで指定した admin-ajax.php のURLが格納された変数
        cache: false,
        timeout: 3000,
        dataType: 'html',
        data: {
            'action': 'select_category_ajax_php', // 登録したアクション名
            'cat': cat // functions.phpでPOST値として渡す
        },
        success: function(data) {
            // console.log(data); // テスト用 - 送られてきたデータの確認用
            $('#result').html(data);
        }
    });
});

1〜4行目

// init AjaxContent
jQuery(document).ready(function(){
    $('.cat-all').addClass('active');
});

初期化と言うほど何かをしてるわけではないんですが、ブラウザロードされたときに全カテゴリーのボタンに.activeというclassを割り振るようにしています。

ここは最初に表示しておきたいコンテンツによって変わってくる部分ですので、今回は初期全カテゴリー表示の場合の初期化処理を書いておきました。

12〜13行目

$('.check_cat').parent('label').removeClass('active');
$(this).parent('label').addClass('active');

今回コードで一番汚い部分な気がするのでもっと良い書き方ありましたらご教授願いたいんですが、ここでは.activeクラスを押したボタンに付与するようにしています。

一度ボタンに付いている.activeクラスを全て外し、押したボタンにつけ直すという汚らしいコードです（）

14行目〜

14行目以降で注意する部分を抜き取ると、24行目の

'action': 'select_category_ajax_php', // 登録したアクション名

これはfunctions.phpで設定したアクション名と連動しているんですが、ここを間違えて「400 Bad Request」とかなりがちなので注意しましょう。

まとめ

少し形は違いますが実際に使用したことのあるコードなので動くはずです。
が、万が一不具合があった場合でも責任は持てませんのでご了承ください。

ただ改善点あれば泣いて喜んで修正しますのでコメント頂ければと思います。

あとまったく関係ないですがアイキャッチはBUROKIさんという方のこちらの記事を参考に作ってみました。デザイン難しすぎて無理…

BUROKIさんのデザイン好き。ではまた次の記事でお会いしましょう。