【WordPress】サイト内検索を自作する方法

WordPressには標準で検索機能が備わっていますが、サイトの特定のニーズに合わせてカスタマイズされた検索機能を作成したい場合もあります。ここでは、WordPressでカスタム検索フォームを作成する方法を解説します。

検索フォームの作成
検索結果ページのカスタマイズ
検索クエリのカスタマイズ
CSSで検索フォームのスタイルをカスタマイズ
まとめ

検索フォームの作成

まずは、カスタム検索フォームを作成します。WordPressのテーマフォルダーに移動し、適切なテンプレートファイル（例えば searchform.php）を作成します。このファイルに以下のコードを追加します。

<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x('Search for:', 'label'); ?></span>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x('Search …', 'placeholder'); ?>" value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit"><?php echo esc_attr_x('Search', 'submit button'); ?></button>
</form>

検索結果ページのカスタマイズ

検索結果の表示方法をカスタマイズするために、search.phpというテンプレートファイルをテーマに作成します。このファイルに以下のコードを追加します。

<?php get_header(); ?>

<main id="main" class="site-main" role="main">

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
                </header><!-- .entry-header -->

                <div class="entry-summary">
                    <?php the_excerpt(); ?>
                </div><!-- .entry-summary -->

            </article><!-- #post-<?php the_ID(); ?> -->

        <?php endwhile; ?>

        <?php the_posts_navigation(); ?>

    <?php else : ?>

        <article class="no-results not-found">
            <header class="entry-header">
                <h1 class="entry-title"><?php _e('Nothing Found', 'textdomain'); ?></h1>
            </header><!-- .entry-header -->

            <div class="entry-content">
                <p><?php _e('Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'textdomain'); ?></p>
                <?php get_search_form(); ?>
            </div><!-- .entry-content -->
        </article><!-- .no-results -->

    <?php endif; ?>

</main><!-- #main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

検索クエリのカスタマイズ

特定のカスタム投稿タイプやカスタムフィールドを検索対象に含めたい場合、pre_get_postsアクションフックを使用して検索クエリをカスタマイズします。テーマの functions.php ファイルに以下のコードを追加します。

function custom_search_query( $query ) {
    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
        // カスタム投稿タイプを検索対象に含める
        $query->set('post_type', array('post', 'custom_post_type'));

        // カスタムフィールドでの検索を有効にする
        $meta_query = array(
            array(
                'key' => 'custom_field_name',
                'value' => $query->query_vars['s'],
                'compare' => 'LIKE'
            )
        );
        $query->set('meta_query', $meta_query);
    }
}
add_action('pre_get_posts', 'custom_search_query');

CSSで検索フォームのスタイルをカスタマイズ

検索フォームや検索結果ページのデザインをカスタマイズするために、テーマのCSSファイルにスタイルを追加します。以下は一例です。

.search-form {
    display: flex;
    margin: 20px 0;
}

.search-field {
    flex: 1;
    padding: 10px;
}

.search-submit {
    padding: 10px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    cursor: pointer;
}

.search-submit:hover {
    background-color: #005177;
}