【WordPress】サイト内検索を自作する方法｜検索フォーム・結果ページ・検索対象の拡張

<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>

<?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>

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

        <?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>

            <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>
        </article>

    <?php endif; ?>

</main>

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

function custom_search_query( $query ) {
    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
        $query->set( 'post_type', array( 'post', 'custom_post_type' ) );
    }
}
add_action( 'pre_get_posts', 'custom_search_query' );

.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;
}