Blog スタッフブログ

2022.10.17

WEB制作

[WordPress]カスタム投稿のフリーワード検索

WEB制作担当の木戸です。

WordPressで特定のカスタム投稿にフリーワード検索を実装する方法をご紹介します。

1.検索バーの表示

<?php get_search_form(); ?>

まず、検索バーを表示したい箇所に追加します。

上記の記述でデフォルトの検索バーが表示されます。

カスタム投稿だけにするためにカスタマイズしていきます。

2.テンプレートファイルの用意

<form method="get" id="search" action="<?php echo home_url('/'); ?>">
  <input type="text" name="s" id="search-input" value="<?php the_search_query(); ?>" placeholder="検索内容を入力してください" />
  <input type="hidden" name="post_type" value="example">
  <button type="submit" accesskey="f" class="search-btn"></button>
</form>

searchform.phpという名前でファイルを用意します。

formのvalue=”example”をカスタム投稿のポストタイプに合わせます。

3.検索結果ページの作成

<h2>検索結果：<?php the_search_query(); ?></h2>
<?php
  $args = array(
    'post_type' => get_query_var( 'post_type', 'example' ), //カスタム投稿ポストタイプ
    'posts_per_page' => 10, //表示数
    'paged' => get_query_var( 'paged', 1 ), //ページングする場合には記載
    'order' => 'DESC', //降順
    'orderby' => 'date', //日付でソート
    's' => get_search_query() //name=”s”
  );
  $wp_query = new WP_Query($args);
  if ( $wp_query->have_posts()): while ( $wp_query->have_posts()): $wp_query->the_post();
?>
<!--
ここに検索結果で表示する内容を記述
-->
<div>
  <a href="<?php the_permalink( $post ); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; ?>
<?php else: ?>
<!--
該当件数が0の場合に表示される内容を記述
-->
<div>
  ”<?php the_search_query(); ?>” キーワードに該当する記事は見つかりませんでした。
</div>
<?php endif; ?>

search.phpもしくはsearch-example(カスタム投稿のポストタイプ).phpという名前でファイルを用意します。

$argsにポストタイプ、表示件数などを設定します。

whileの中はarchive.phpで記事一覧を表示する時と同じようにカスタマイズします。