検索フォームの基本【WordPress】

検索フォームの基本　【WordPress】

WordPress

2024.03.23

検索フォームの設置
1. フォーム作成：searchform.php
2. フォーム設置
検索結果を表示
1. search.php
複数ワード検索に対応
検索に条件を追加
1. functions.php
参考

検索フォームの設置

フォーム作成：searchform.php

<form method="get" action="<?php echo esc_url(home_url('/')); ?>">
  <input type="search" value="" placeholder="サイト内検索" name="s">
  <button type="submit">検索ボタン</button>
</form>

フォーム設置

任意のテンプレートで下記のコードを利用。

<?php get_search_form(); ?>

検索結果を表示

search.php

<div class="articles-wrapper">
   //検索ワード
   <h2 class="search-word"><?php the_search_query() ?></h2>
   <ul>
   <?php if($wp_query->have_posts()): ?>
   <?php while($wp_query->have_posts()): $wp_query->the_post(); ?>
        <li>
           //記事タイトル
           <h3 class="title">
               <a href="<?php the_permalink();?>"><?php the_title() ?></a>
           </h3>
           //記事本文の抜粋
           <p class="excerpt"><?php the_excerpt()?></p>
        </li>
   <?php endwhile; ?>
   <?php endif; ?>
   <?php wp_reset_postdata(); ?>
   </ul>
</div>

複数ワード検索に対応

デフォルトだと、全角スペースでの複数ワード検索に対応してくれない。
※「ワード１　ワード２」で検索した際に、全角スペースも含めて１単語と認識されてしまう。

下記のプラグインを導入すると、全角スペースでの複数ワード検索が可能になる。

WP Multibyte Patch

MultibytefunctionalityenhancementfortheWordPressJapanesepackage.

検索に条件を追加

functions.php

フィルターフックを設定する。

<?php
function custom_search_query( $query ) {
    if ( !is_admin() && $query->is_search() && $query->is_main_query() ) {
        $query->set( 'posts_per_page', '10' ); // ページあたりの投稿数を10に設定
        $query->set( 'orderby', 'date' ); // 投稿日時順に並び替え
        $query->set( 'order', 'DESC' ); // 降順で表示
    }
}
add_action( 'pre_get_posts', 'custom_search_query' );
?>

↑は「表示件数は10件、投稿日順に表示」という条件を追加している。