固定ページのページャーで2ページ目が表示されない

Question

こちらのサイトを参考にワードプレスの固定ページに自作の絞り込み検索機能を作りました。
検索結果を一覧で表示し、ページネーションさせたいのですが2ページ目を表示できません。

●できていること
検索結果を一覧で表示→1ページに2つの記事を表示→下に”1.2.3>>最後へ”の様なページに飛ぶリンクを表示
と、ここまではできています。

●できないこと
リンクの「2」や「3」や「最後へ」や「>>」などを押してもリンク先のページに移動しません。
また、URLが本来ならば"xxx.com/research/page/2/"などのようになるはずですが、
"xxx.com/wp-admin/admin-ajax.php/page/2/"となっています。
（※researchは一覧を表示する固定ページのスラッグです。）
表示されている画面は真っ白で数字の0のみ表示されています。
その画面のソースを見ると0のみが出力されているようです。
WP-PageNaviというプラグインを使っても同じ結果になります。

●知りたいこと
原因はこのURLがおかしいことにあると思い、いろいろと探っているのですが、
私がPHPやWEB系が初心者のため、どこでどのようにリンクのURLを設定していてるのか理解できていません。

どの様な仕組みで2ページ目以降のリンクを設定しているのか仕組みや、URLがおかしくなる原因を知りたいです。
どなたかご教授の程よろしくお願いいたします。

以下コードです。

custumserch.php

<!-- 1. 検索条件の取得と変数の設定 -->
<?php
// ページ番号を取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
  'paged' => $paged, // ページ番号を設定
    'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 2,
  'orderby' => 'date',
  'order' => 'DESC'
);

if (!empty($_POST['search_category'])) {
  foreach ($_POST['search_category'] as $value) {
    $search_category[] = htmlspecialchars($value, ENT_QUOTES);
  }
  $args += array('category__in' => $search_category);
}

if (!empty($_POST['search_tag'])) {
  foreach ($_POST['search_tag'] as $value) {
    $search_tag[] = htmlspecialchars($value, ENT_QUOTES);
  }
  $args += array('tag__in' => $search_tag);
}

if (!empty($_POST['search_color'])) {
  foreach ($_POST['search_color'] as $value) {
    $search_color[] = htmlspecialchars($value, ENT_QUOTES);
  }
  $tax_query_args[] = array(
    'taxonomy' => 'color',
    'terms' => $search_color,
    'field' => 'slug',
    'operator' => 'IN'
  );
}

if (!empty($_POST['search_image_texture'])) {
  foreach ($_POST['search_image_texture'] as $value) {
    $search_image_texture[] = htmlspecialchars($value, ENT_QUOTES);
  }

  $tax_query_args[] = array(
    'taxonomy' => 'image_texture',
    'terms' => $search_image_texture,
    'field' => 'slug',
    'operator' => 'IN'
  );
}

if (!empty($_POST['search_image_texture']) || !empty($_POST['search_image_texture'])) {
  $args += array('tax_query' => array($tax_query_args));
}
?>

<!-- （追記1）Ajaxの結果を表示する領域を設定 -->
<div id="search-result">
  <div class="search">
  <?php if (!empty($_POST['search'])) : ?>
      <?php
      $the_query = new WP_Query($args);
      if ($the_query->have_posts()) :
      ?>
        <div class="result">
          <?php
          while ($the_query->have_posts()) :
            $the_query->the_post();
          ?>
            <div class="article">
              <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('medium'); ?>
                <div><?php the_title(); ?></div>
              </a>
            </div>
          <?php endwhile;
          wp_reset_postdata(); ?>
        </div>

    <?php
    // ページャーを設置
    echo paginate_links(array(
        'total' => $the_query->max_num_pages,
        'current' => $paged,
        'type' => 'list',
    )); 
    ?>

      <?php else : ?>
        <p>該当する物件はありませんでした。</p>
      <?php endif; ?>
    <?php endif; ?>

    <form method="post" action="<?php echo esc_url(home_url() . $_SERVER['REQUEST_URI']); ?>">
      <div class="checkbox">
        <section class="typeA">

          <!-- カテゴリーを取得 -->
          <input id="TAB-A01" type="radio" name="TAB-A" checked="checked">
          <label class="tabLabel" for="TAB-A01">業種</label>
          <div class="content">
            <ul class="conditions">
              <?php
              $categories = get_categories(array('hide_empty' => false));
              foreach ($categories as $category) :
                $checked = "";
                if (in_array($category->term_id, $search_category)) $checked = " checked";
              ?>
                <li>
                  <label>
                    <input type="checkbox" name="search_category[]" value="<?php echo esc_attr($category->term_id); ?>" <?php echo $checked; ?>>
                    <?php echo esc_html($category->name); ?>
                  </label>
                </li>
              <?php endforeach; ?>
            </ul>
          </div>

          <!-- タグを取得 -->
          <input id="TAB-A02" type="radio" name="TAB-A">
          <label class="tabLabel" for="TAB-A02">形・アルファベット</label>
          <div class="content">
            <ul class="conditions">
              <?php
              $tags = get_tags(array('hide_empty' => false));
              foreach ($tags as $tag) :
                $checked = "";
                if (in_array($tag->term_id, $search_tag)) $checked = " checked";
              ?>
                <li>
                  <label>
                    <input type="checkbox" name="search_tag[]" value="<?php echo esc_attr($tag->term_id); ?>" <?php echo $checked; ?>>
                    <?php echo esc_html($tag->name); ?>
                  </label>
                </li>
              <?php endforeach; ?>
            </ul>
          </div>

          <!-- アルファベット -->
          <input id="TAB-A03" type="radio" name="TAB-A">
          <label class="tabLabel" for="TAB-A03">カラー</label>
          <div class="content">
            <ul class="conditions">
              <?php
              $colors = get_terms('color', array('hide_empty' => false));
              foreach ($colors as $color) :
                $checked = "";
                if (in_array($color->slug, $search_color)) $checked = " checked";
              ?>
                <li>
                  <label>
                    <input type="checkbox" name="search_color[]" value="<?php echo esc_attr($color->slug); ?>" <?php echo $checked; ?>>
                    <?php echo esc_html($color->name); ?>
                  </label>
                </li>
              <?php endforeach; ?>
            </ul>
          </div>

          <!-- 色 -->
          <input id="TAB-A04" type="radio" name="TAB-A">
          <label class="tabLabel" for="TAB-A04">イメージ・質感</label>
          <div class="content">
            <ul class="conditions">
              <?php
              $image_textures = get_terms('image_texture', array('hide_empty' => false, 'orderby' => 'slug'));
              foreach ($image_textures as $image_texture) :
                $checked = "";
                if (in_array($image_texture->slug, $image_texture)) $checked = " checked";
              ?>
                <li>
                  <label>
                    <input type="checkbox" name="image_texture[]" value="<?php echo esc_attr($image_texture->slug); ?>" <?php echo $checked; ?>>
                    <?php echo esc_html($image_texture->name); ?>
                  </label>
                </li>
              <?php endforeach; ?>
            </ul>
          </div>
        </section>
      </div>

      <input type="submit" value="検索" class="submit-button">
      <input type="hidden" name="search" value="1">
      <!-- （追記2）nonceのhiddenタグを生成 -->
      <?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?>
    </form>
  </div>
  <!-- （追記3）Ajaxで使う変数の設定とスクリプトを読み込み -->
  <script>
    var ajaxurl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
  </script>
  <script src="<?php echo esc_url(get_stylesheet_directory_uri() . '/js/main.js'); ?>"></script>

</div>

main.js

jQuery(function($){
    function customSearch(){
        // 1. フォームのデータを生成
        var form = $('#search-result form').get()[0];
        var formData = new FormData(form);
        formData.append('action', 'custom_search');

        // 2. Ajaxを行う
        $.ajax({
          type: 'POST',
          url: ajaxurl,
          data: formData,
          processData: false,
          contentType: false,
          success: function(data){
            $('#search-result').prop('outerHTML', data);
            $('.submit-button').attr('type', 'button');
          }
        });
        return false;
    };

    // 3. クリックイベントの設定
    $('.submit-button').attr('type', 'button');
    $(document).on('click', '.submit-button', function(){
        customSearch();
    });
});
コード

追記いたします。
KazuhiroHatano様にご指示をいただきました変数の内容を記載いたします。

var_dump($paged);
int(1)

var_dump($_REQUEST);
array(5) { ["TAB-A"]=> string(2) "on" ["search"]=> string(1) "1" ["nonce"]=> string(10) "xxxxxxxxxx" ["_wp_http_referer"]=> string(10) "/research/" ["action"]=> string(13) "custom_search" }

var_dump($_SERVER['REQUEST_URI']);
string(24) "/wp-admin/admin-ajax.php"

Answer 1

なんかpjax的なことでもしてるんでしょうかね

paginate_linksでbaseにhome_url('research/%_%')を指定するようにしてみましょう

Comments

[kakeshi]

KazuhiroHatano様
ご回答ありがとうございます。ご返信遅くなり申し訳ございません。
ご回答いただいたように指定することで、URLは正しく表示されました。
ですが、リンクのページに遷移すると取得した記事が表示されずに元のページと同じ内容が表示されてしまいます。
paginate_linksの位置をwp_reset_postdata()の前や後ろに移動するなど試してみましたが、変わらずでした。
記事数は全部で6つあり、1ページに2記事づつ表示するため全3ページになっておりますので、それぞれのページに記事が正しく割り振り？されているとは思うのですがリンクのページを開くと取得した一覧が無くなっている状態です。
何が問題なのかがまったくわからず困っております。
もし可能でしたら解決のヒントとなることでも結構ですので、ご教授いただけますと幸いでございます。

[KazuhiroHatano]

とりあえず　$paged　がちゃんと意図した値になってるか確認してみましょう。
何ページ目でも1になるなら、このページのURLがページングのパーマリンク生成の対象になっていないとか、ajaxでページのデータを取得する際にそこでページングの変数を拾えていないとか引き継げていないとか辺りが原因じゃないかと思います。

[kakeshi]

KazuhiroHatano様ありがとうございます。
ご指摘の件ですが、URLは2ページ目ならxxx.com/research/page/2/、3ページ目ならxxx.com/research/page/3/という風に正しくページを作成しているようですが、表示内容はxxx.com/research/を開いた時のままの最初の表示にリセット？されている様な状況です。その時のURLはxxx.com/research/page/2/・xxx.com/research/page/3/です。
変数を引き継げていないのでしょうか？

[KazuhiroHatano]

$paged変数を出力してみるなりしてみて、urlからちゃんと変数を取り出せているのかをまず確認しましょう。

[KazuhiroHatano]

あと、ページの取得にajaxを使ってないですかね？
var_dump($_SERVER['REQUEST_URI']);
したらwp-admin/admin-ajax.phpのURLになってたりしませんか？
もしそうであれば、var_dump($_REQUEST);もしてみて
pagedのURLパラメータがちゃんと引き継がれてるのかも確認しましょう

[kakeshi]

ページの作りとして、固定ページにショートコードを記述する形で上記の"custumserch.php"を使い検索結果を表示しております。検索結果の表示には、ご指摘いただきました"ajax"を使用して"custumserch.php"内の<div id="search-result">の中身を置き換えて取得した記事を表示する仕組みとなっております。
ご指示いただきましたvar_dump内の情報を追記させていただきました。
変数内のデータを見たのですが、正直わたくしがPHPやWEB系に関してあまり詳しくなく、ページャーの仕組みを理解できていないため、どの様な情報がページネーションに必要なのかわからないのが現状でございます。
質問時に「●知りたいこと」としても書かせていただいておりますが、
"どの様な仕組みで2ページ目以降のリンクを設定しているのか"をもう少しご教授いただけないでしょうか。
例えばどの部分の関数・変数でページの表示を作っているのか。や、どの部分でリンクを作成してどうやってページ遷移しているのかなどを詳しく知りたいです。
可能でしたらご教授いただけますと幸いでございます。
よろしくお願いいたします。

[KazuhiroHatano]

ajaxの処理にページングの情報が渡ってないですね。
ページ表示時および検索結果表示時に、フォームに現在のページの値を入れるようにするかあるいはajaxで送信するFormDataにpagedの値もappendするようにするとかしましょう。

[kakeshi]

現在のページの値というのは
while ($the_query->have_posts()) :
$the_query->the_post();
のループ内で取得している値ということでしょうか？

[KazuhiroHatano]

pagedの値です。

加えてwp-ajaxの処理ではメインクエリが存在しないので、get_query_varからpagedの値を取得できません、フォームの送信データからpagedの値を取得するようにする変更も必要です。

[kakeshi]

ご質問させていただきます。
ここでのpagedの値は、追記させていただいた
var_dump($paged);
int(1)
のpagedでしょうか？

[KazuhiroHatano]

問題は
ページングはpaginate_linksでページ遷移で、
検索結果表示はajaxでやってること

なのでページ遷移時にはajaxに値を橋渡ししないといけません

やるべきことは、
1. ページ表示時にpagedの値をajaxで一緒に送信するようにする
2. ajaxでのコンテンツ表示時には送信されたpagedの値を利用する
です

[kakeshi]

なるほど。仕組みがなんとなくわかってきました。
そうすると変な話ですが、ページングはpaginate_linksでページ遷移せずにAjaxでページネーションした方がスムーズに実装できるということでしょうか？

[kakeshi]

KazuhiroHatanoさま
色々とありがとうございました。なんとなく兆しが見えました。
ちょっと仕様を変えて実装してみようと思います。
この度は誠にありがとうございました。