サポート » 使い方全般 » 特定のカテゴリーを複数含む記事一覧のページネーション

  • shinc

    (@shinc)


    category.phpに以下の方法で記事一覧を出力しています。

    ① 最初にデフォルトで通常の「while (have_posts()) : the_post();」でカテゴリー一覧を表示。
    category.php内に、その他のカテゴリーを選択できるセレクトボックスを設置。

    <select id="js--filter__select">
     <option value="">選択してください</option>
     <option value="{カテゴリーid}">カテゴリー1</option>
     <option value="{カテゴリーid}">カテゴリー2</option>
    </select>
    <button id="js--filter__button" type="button">検索</button>

    ② カテゴリーを選択して、検索ボタンをクリックすると、カテゴリーidを渡して、現在のカテゴリーと選択したカテゴリーを含む記事一覧に差し替える

    js▼

    jQuery(document).ready(function($) {
          $('#js--filter__button').click(function(e) {
            e.preventDefault();
    
            const categoryId = $('#js--filter__select').val();
    
            $.ajax({
              url: '<?php echo admin_url('admin-ajax.php'); ?>',
              type: 'POST',
              data: {
                'action': 'my_ajax',
                'category_id': categoryId,
                'current_category_id': <?php echo get_query_var('cat'); ?>,
                'paged': <?php echo get_query_var('paged') ? get_query_var('paged') : 1 ?>
              },
              success: function(response) {
                const result = JSON.parse(response);
    
                $('#js--postList').html(result.html); // 一覧記事の内容を差し替え
                $('#js--pagination').html(result.pagination); // ページネーションを差し替え
              },
              error: function(xhr, status, error) {
                console.error(xhr);
              }
            });
          });
        });

    functions.php▼

    function filter_posts_by_category_callback() {
        $current_category_id = $_POST['current_category_id'];
        $category_id = isset($_POST['category_id']) ? $_POST['category_id']: null;
        $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
    
    $args = array(
            'post_type' => 'post',
            'posts_per_page' => 10,
            'paged' => $paged,
            'orderby' => 'date',
            'order' => 'DESC',
            'category__and' => array($current_category_id, $category_id)
          );
    $query = new WP_Query($args);
    
          if ($query->have_posts()) {
     while ($query->have_posts()) {
              $query->the_post();
              // 投稿の表示処理を行う
    $html .= 'ここに記事表示のhtmlコードを記述';
    }
    // ページネーション
     ob_start();
            echo paginate_links(
              array(
                'base' => get_pagenum_link(1) . '%_%',
                'format' => 'page/%#%/',
                'current' => max(1, $paged),
                'end_size' => 2,
                'mid_size' => 2,
                'total' => $query->max_num_pages
              )
            );
            $pagination = ob_get_clean();
    
            wp_reset_postdata();
    
    $response = array(
          'html' => $html,
          'pagination' => $pagination
        );
    
        echo json_encode($response);
    
        wp_die();
    }
    add_action('wp_ajax_my_ajax', 'filter_posts_by_category_callback');
    add_action('wp_ajax_nopriv_my_ajax', 'filter_posts_by_category_callback');

    記事一覧は正しく取得・表示できています。

    ページネーションのリンクが、上記の状態だと
    ドメイン/wp/wp-admin/admin-ajax.phppage/2/ となってしまいます。

    すでにあったカテゴリーと、選択したカテゴリーの両方を含む記事一覧の2ページ目以降をページ送りさせる方法を知りたいです。

    • このトピックはshincが1ヶ月前に変更しました。
  • このトピックに返信するにはログインが必要です。