WordPress自作テーマ制作⑦│検索結果ページの作成

2021.02.272024.03.04

WordPressの自作テーマ第7弾！

今回は検索まわりのテンプレートを作成します。

スターターテーマを使わずに
WordPress自作テーマを制作する

検索フォームの設置

まずは検索できるようにしましょう。

最初から用意されている検索のウィジェットを設置してもよいのですが、専用の検索フォームも作っておきます。

検索フォームの作成

searchform.phpというファイルを作成して下記のコードを挿入します。

<form role="search" method="get" class="searchForm" action="<?php echo home_url('/'); ?>" role="search">
    <input type="text" value="" name="s" placeholder="キーワードを入力">
    <button type="submit" value="search">
        <div>検索</div>
    </button>
</form>

action属性にはトップページのURLを挿入します。

name="s"というname属性の記述が重要なので、忘れずにいれましょう。

ヘッダーの検索フォームを設置

header.phpに先ほどの検索フォームを設置します。

get_search_form();の関数を使って、グローバルメニューの後にコードを挿入します。

    <?php
    wp_nav_menu([
        'container' => '',
        'theme_location' => 'global_menu',
    ]);
    get_search_form();
    ?>

下記のような表示になりました。

検索結果ページを作成

search.phpというファイルを作成して下記のコードを挿入します。

<?php get_header(); ?>
<div class="wrap">
    <main>
        <?php
        echo '<h1 class="title">' . esc_html($_GET['s']) . 'の検索結果：' . $wp_query->found_posts . '件</h1>';
        if (have_posts()) :
            if (!$_GET['s']) :
                echo '<p>検索キーワードが未入力です</p>';
            else :
                while (have_posts()) : the_post();
        ?>
                    <a href="<?php the_permalink(); ?>">
                        <h2 class="title"><?php the_title(); ?></h2>
                        <div class="date">
                            <div>Release date. <?php the_time('Y/m/d'); ?></div>
                        </div>
                        <?php
                        if (has_post_thumbnail()) {
                            echo '<figure class="thumbnail">' . get_the_post_thumbnail() . '</figure>';
                        }
                        ?>
                    </a>
        <?php
                endwhile;
                $pagination = get_the_posts_pagination(array(
                    'prev_text' => 'Prev',
                    'next_text' => 'Next'
                ));
                echo preg_replace('/<h2 class="screen-reader-text">[^<]*<\/h2>/ui', '', $pagination);
            endif;
        else :
            echo '<p>記事が見つかりませんでした。</p>';
        endif;
        ?>
    </main>
</div>
<?php get_footer(); ?>

以下の条件で、分岐しています。

キーワードが未入力かどうか？
キーワードに合致する記事があるどうか？

検索対象を投稿ページだけに

検索対象に固定記事も含まれてしまうので制限します。

functions.phpに下記のコードを追加します。

function search_filter($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
}
add_filter('pre_get_posts', 'search_filter');

404ページの作成

ついでに削除された記事がに表示される404の表示も作成します。

404.phpというファイルを作成して、下記のコードを挿入します。

<?php get_header(); ?>
<main id="main_content">
    <h1 class="title">ページが見つかりませんでした。</h1>
    <div class="content">
        <p>お探しのページは移動または削除された可能性があります。</p>
        <p>以下より キーワード を入力して検索してみてください。</p>
        <?php get_search_form(); ?>
    </div>
</main>
<?php get_footer(); ?>

get_search_form();の関数もいれて、検索フォームを設置しています。