WordPressで検索結果ページを作る方法｜WP_Queryとページネーションの実装

独自検索ではsとpagedを入力値へつなぎます

固定ページに独自の検索フォームを置く場合は、検索語を文字列に限定してsanitize_text_field()で処理し、$args[‘s’]へ渡します。ページ番号はget_query_var( ‘paged’ )から取得して、$args[‘paged’]へつなぎます。

標準検索のsearch.phpには検索用のメインクエリがあります。新しいWP_Queryは重ねません。「資料だけ」「事例だけ」と対象を分けるときは、この記事の独自検索が向いています。

標準検索と独自検索のどちらを作るか決める

同じ「検索結果ページ」でも、標準検索を整える作業と、特定用途の検索ページを新設する作業では入口が違います。標準検索は通常の検索フォームから?s=検索語で開くサイト全体の検索です。独自検索は「資料検索」のような固定ページを新しく作り、対象の投稿タイプ、入力欄、URL、0件表示を用途に合わせて用意します。

作りたいページ	使うクエリ	主なファイル・URL
サイト全体の標準検索	既存のメインクエリ	search.php・?s=検索語
標準検索の対象を変更	pre_get_postsでメインクエリを調整	functions.phpまたは機能プラグイン
資料・事例などの専用検索	新しいWP_Query	page-resource-search.php・固定ページURL

この記事は3つ目の独自検索を作る例です。標準検索で別のWP_Queryを作ると、URLのページ番号、総件数、テーマの検索表示と二重管理になりやすいため避けます。

なお、sの標準検索対象はタイトル・抜粋・本文です。タイトルだけに絞りたい場合は、WordPress 6.2以降のsearch_columnsを使います。対象列を先に決めたい場合は、記事のタイトルだけを検索する方法で対応バージョンと指定値を確認してから、この記事の完成例へ戻ってください。

WP Query Builderで検索語・件数・ページ番号を入力する

公開中のWP Query Builderで「詳細設定（全項目）」を選びます。確認用のデータには「ブロックテーマ」を含む通常投稿を6件用意し、1ページ3件の2ページ目を取得しました。

入力欄	値	意味
投稿タイプ	post	通常投稿だけを検索する
公開状態	publish	公開済みだけにする
取得件数	3	1ページ3件
キーワード / s	ブロックテーマ	タイトル・抜粋・本文を検索する
ページ番号 / paged	2	2ページ目を取得する
並び方向 / order	DESC	新しい日付から並べる
並べ替えの基準 / orderby	date	投稿日を基準にする

自動高速化はOFFにしました。ページネーションで総ページ数を使うため、no_found_rows => trueを自動追加しない状態にしておく必要があります。

WP Query Builderの検索欄へブロックテーマを入力し、3件、paged 2、日付降順を含むコードが生成された画面 — 公開中のWP Query Builder検索語と2ページ目を$argsへ反映
固定値で取得結果を確認したあと、検索語とページ番号をリクエスト値へ置き換えます。

次は、WP Query Builderがこの画面で生成したコードです。入力値、配列の順序、書式を変更せずに掲載しています。

引数や処理の一部分だけを示した例です。このまま単独で貼らず、テンプレート内のWP_Queryとループへ組み込んでください。

PHPgenerated-search-page-args.phpブロックテーマを含む通常投稿の2ページ目を3件取得する条件

$args = array(    'post_type' => 'post',    'post_status' => 'publish',    'posts_per_page' => 3,    's' => 'ブロックテーマ',    'paged' => 2,    'order' => 'DESC',    'orderby' => 'date');

$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 3,
    's' => 'ブロックテーマ',
    'paged' => 2,
    'order' => 'DESC',
    'orderby' => 'date'
);

sは検索語、posts_per_pageは1ページの件数、pagedは現在ページです。画面の2ページ目を固定値のまま貼ると、どのURLでも同じ結果になるため、完成例では動的な値へ置き換えます。

page-resource-search.phpへフォームと検索結果を実装する

クラシックテーマの子テーマへpage-resource-search.phpを作り、固定ページ「資料検索」に割り当てます。フォームはqという独自パラメーターを使い、空欄ではWP_Queryを実行しません。

PHPpage-resource-search.php独自検索フォーム、結果一覧、ページネーション、0件表示を実装する

<?php/* Template Name: 資料検索 */get_header(); $raw_search_term = isset( $_GET['q'] ) && is_string( $_GET['q'] )    ? wp_unslash( $_GET['q'] )    : '';$search_term = sanitize_text_field( $raw_search_term );$paged = max( 1, (int) get_query_var( 'paged' ) );?> <main id="primary">    <h1><?php echo esc_html( get_the_title() ); ?></h1>     <form method="get" action="<?php echo esc_url( get_permalink() ); ?>" role="search">        <label for="resource-search">記事を検索</label>        <input            id="resource-search"            name="q"            type="search"            value="<?php echo esc_attr( $search_term ); ?>"        >        <button type="submit">検索</button>    </form>     <?php if ( $search_term === '' ) : ?>        <p>検索語を入力してください。</p>    <?php else : ?>        <?php        $args = array(            'post_type' => 'post',            'post_status' => 'publish',            'posts_per_page' => 3,            's' => $search_term,            'paged' => $paged,            'order' => 'DESC',            'orderby' => 'date'        );         $search_query = new WP_Query( $args );        ?>         <h2>「<?php echo esc_html( $search_term ); ?>」の検索結果</h2>         <?php if ( $search_query->have_posts() ) : ?>            <p><?php echo esc_html( number_format_i18n( $search_query->found_posts ) ); ?>件見つかりました。</p>            <ul>                <?php while ( $search_query->have_posts() ) : ?>                    <?php $search_query->the_post(); ?>                    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>                <?php endwhile; ?>            </ul>             <?php            echo wp_kses_post(                paginate_links(                    array(                        'current' => $paged,                        'total'   => (int) $search_query->max_num_pages,                    )                )            );            ?>        <?php else : ?>            <p>一致する記事はありません。別の言葉でも検索してみてください。</p>        <?php endif; ?>         <?php wp_reset_postdata(); ?>    <?php endif; ?></main> <?php get_footer(); ?>

<?php
/* Template Name: 資料検索 */
get_header();

$raw_search_term = isset( $_GET['q'] ) && is_string( $_GET['q'] )
    ? wp_unslash( $_GET['q'] )
    : '';
$search_term = sanitize_text_field( $raw_search_term );
$paged = max( 1, (int) get_query_var( 'paged' ) );
?>

<main id="primary">
    <h1><?php echo esc_html( get_the_title() ); ?></h1>

    <form method="get" action="<?php echo esc_url( get_permalink() ); ?>" role="search">
        <label for="resource-search">記事を検索</label>
        <input
            id="resource-search"
            name="q"
            type="search"
            value="<?php echo esc_attr( $search_term ); ?>"
        >
        <button type="submit">検索</button>
    </form>

    <?php if ( $search_term === '' ) : ?>
        <p>検索語を入力してください。</p>
    <?php else : ?>
        <?php
        $args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => 3,
            's' => $search_term,
            'paged' => $paged,
            'order' => 'DESC',
            'orderby' => 'date'
        );

        $search_query = new WP_Query( $args );
        ?>

        <h2>「<?php echo esc_html( $search_term ); ?>」の検索結果</h2>

        <?php if ( $search_query->have_posts() ) : ?>
            <p><?php echo esc_html( number_format_i18n( $search_query->found_posts ) ); ?>件見つかりました。</p>
            <ul>
                <?php while ( $search_query->have_posts() ) : ?>
                    <?php $search_query->the_post(); ?>
                    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                <?php endwhile; ?>
            </ul>

            <?php
            echo wp_kses_post(
                paginate_links(
                    array(
                        'current' => $paged,
                        'total'   => (int) $search_query->max_num_pages,
                    )
                )
            );
            ?>
        <?php else : ?>
            <p>一致する記事はありません。別の言葉でも検索してみてください。</p>
        <?php endif; ?>

        <?php wp_reset_postdata(); ?>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

qは文字列の場合だけ受け付け、配列など想定外の値は未入力として扱います。検索語をHTMLへ戻す箇所ではesc_attr()またはesc_html()、URLではesc_url()を使っています。SQLを自作して検索語を埋め込む例ではありません。

空文字をsへ渡すと検索条件が付かず、対象投稿を広く取得します。フォームは常に表示し、その下で検索結果を出す前に、検索語が空かどうかを分けてください。

検索結果は入力値、0件、複数ページで挙動が変わります。本番へ置く前にローカルまたはステージングで確認し、検証環境のバックアップとPHP条件も公式情報で確かめてください。