SWELL│条件を好きな場所に配置する絞り込み検索

// Code Snippets の PHP スニペットに、開始タグなしで登録します。
class Waza_Category_Filter_2026 {
    private static $used = false;
    public static function results($category = 0, $page = 1) {
        $args = array('post_type' => 'post', 'post_status' => 'publish', 'has_password' => false,
            'posts_per_page' => 6, 'paged' => $page, 'ignore_sticky_posts' => true,
            'orderby' => array('date' => 'DESC', 'ID' => 'DESC'));
        if ($category) $args['cat'] = $category;
        $previous_post = $GLOBALS['post'] ?? null;
        $q = new WP_Query($args);
        // 記事が減って現在のページがなくなった場合は、最後のページへ戻します。
        if ($page > 1 && !$q->have_posts()) {
            // 範囲外ページでは総件数が得られないため、1ページ目で取り直します。
            $args['paged'] = 1;
            $q = new WP_Query($args);
            $page = max(1, (int) $q->max_num_pages);
            if ($page > 1) {
                $args['paged'] = $page;
                $q = new WP_Query($args);
            }
        }
        ob_start();
        echo '<p>' . esc_html($q->found_posts) . '件の公開記事</p>';
        if ($q->have_posts()) {
            echo '<ul class="p-postList -type-card -pc-col2 -sp-col1">';
            while ($q->have_posts()) {
                $q->the_post();
                echo '<li class="p-postList__item"><a class="p-postList__link" href="' . esc_url(get_permalink()) . '">';
                if (has_post_thumbnail()) echo '<div class="p-postList__thumb">' . get_the_post_thumbnail(get_the_ID(), 'medium', array('loading' => 'lazy')) . '</div>';
                echo '<div class="p-postList__body"><span class="p-postList__title">' . esc_html(get_the_title()) . '</span></div></a></li>';
            }
            echo '</ul>';
        } else echo '<p>該当する記事がありません。「すべて」に戻してお試しください。</p>';
        wp_reset_postdata();
        if ($previous_post instanceof WP_Post) {
            $GLOBALS['post'] = $previous_post;
            setup_postdata($previous_post);
        } else {
            $GLOBALS['post'] = $previous_post;
        }
        echo '<nav aria-label="検索結果のページ"><button type="button" data-waza-page="' . max(1, $page - 1) . '" ' . disabled($page <= 1, true, false) . '>前へ</button> ';
        echo '<span>' . esc_html($page) . ' / ' . esc_html(max(1, $q->max_num_pages)) . '</span> ';
        echo '<button type="button" data-waza-page="' . ($page + 1) . '" ' . disabled($page >= $q->max_num_pages, true, false) . '>次へ</button></nav>';
        return ob_get_clean();
    }
    public static function menu() {
        $terms = get_terms(array('taxonomy' => 'category', 'hide_empty' => true));
        $out = '<div class="waza-category-menu" aria-label="カテゴリーの絞り込み"><button type="button" data-waza-cat="0" aria-pressed="true">すべて</button> ';
        if (!is_wp_error($terms)) foreach ($terms as $term) {
            $out .= '<button type="button" data-waza-cat="' . absint($term->term_id) . '" aria-pressed="false">' . esc_html($term->name) . '</button> ';
        }
        return $out . '</div>';
    }
    public static function listing() {
        self::$used = true;
        return '<div id="waza-category-results" data-endpoint="' . esc_url(admin_url('admin-ajax.php')) . '"><p class="waza-category-status" role="status"></p><div class="waza-category-output">' . self::results() . '</div><noscript><p>カテゴリーの切り替えにはJavaScriptを有効にしてください。</p></noscript></div>';
    }
    public static function ajax() {
        // 公開記事の読み取り専用。管理操作・非公開記事の取得には使いません。
        $category = isset($_POST['category']) && is_scalar($_POST['category']) ? absint($_POST['category']) : 0;
        $page = isset($_POST['page']) && is_scalar($_POST['page']) ? absint($_POST['page']) : 1;
        if ($page < 1 || $page > 1000 || ($category && !term_exists($category, 'category'))) {
            wp_send_json_error(array('message' => '条件が正しくありません。すべてに戻してください。'), 400);
        }
        wp_send_json_success(array('html' => self::results($category, $page)));
    }
    public static function script() { if (!self::$used) return; ?>
<script>
(() => {
const initialize = () => {
  const root = document.getElementById('waza-category-results');
  if (!root) return;
  const output = root.querySelector('.waza-category-output');
  const status = root.querySelector('.waza-category-status');
  let category = '0', sequence = 0, controller;
  async function load(nextCategory, page) {
    const request = ++sequence;
    if (controller) controller.abort();
    controller = new AbortController();
    root.setAttribute('aria-busy', 'true');
    status.textContent = '記事を読み込んでいます…';
    try {
      const response = await fetch(root.dataset.endpoint, {method: 'POST', signal: controller.signal,
        body: new URLSearchParams({action:'waza_category_filter_2026', category:nextCategory, page:String(page)})});
      const data = await response.json();
      if (!response.ok || !data.success) throw new Error('request');
      if (request !== sequence) return;
      category = nextCategory;
      output.innerHTML = data.data.html;
      document.querySelectorAll('[data-waza-cat]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.wazaCat === category)));
      status.textContent = '検索結果を更新しました。' + output.querySelector('p').textContent;
      // ページ切り替えで消えたボタンから、結果の先頭へフォーカスを移します。
      output.setAttribute('tabindex', '-1');
      output.focus({preventScroll:true});
    } catch (error) {
      if (request === sequence && error.name !== 'AbortError') status.textContent = '読み込めませんでした。表示中の結果は前の条件です。条件を選び直して再試行してください。';
    } finally {
      if (request === sequence) root.removeAttribute('aria-busy');
    }
  }
  document.querySelectorAll('[data-waza-cat]').forEach(button => button.addEventListener('click', () => load(button.dataset.wazaCat, 1)));
  root.addEventListener('click', event => {
    const button = event.target.closest('[data-waza-page]');
    if (button && !button.disabled) load(category, button.dataset.wazaPage);
  });
};
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initialize, {once: true});
} else {
  initialize();
}
})();
</script>
<?php }
}
add_shortcode('waza_category_menu', array('Waza_Category_Filter_2026', 'menu'));
add_shortcode('waza_category_results', array('Waza_Category_Filter_2026', 'listing'));
add_action('wp_ajax_waza_category_filter_2026', array('Waza_Category_Filter_2026', 'ajax'));
add_action('wp_ajax_nopriv_waza_category_filter_2026', array('Waza_Category_Filter_2026', 'ajax'));
add_action('wp_footer', array('Waza_Category_Filter_2026', 'script'));

.waza-category-menu button, #waza-category-results nav button { min-height:44px; padding:.5em .8em; margin:4px; border:1px solid currentColor; border-radius:4px; background:#fff; color:#222; cursor:pointer; }
.waza-category-menu button[aria-pressed="true"] { background:#222; color:#fff; }
#waza-category-results button:disabled { opacity:.45; cursor:default; }
.waza-category-menu button:focus-visible, #waza-category-results button:focus-visible { outline:3px solid #0969da; outline-offset:2px; }
#waza-category-results .p-postList__thumb img { width:100%; height:auto; }
#waza-category-results[aria-busy="true"] .waza-category-output { opacity:.6; }