
キーワード検索でカスタマイズした検索機能を実装する
WordPressサイトで便利なキーワード検索ですが、コードをカスタマイズすることで検索条件などもコントロールすることができます。また合わせて検索結果にもユーザーにわかりやすい表示サンプルを見ていきたいと思います。
このようにクエリを変更することで検索結果もコントロールすることができます。また検索件数などの表示など、細かいところもユーザビリティ向上のポイントになるのではないでしょうか。
検索外対象のページを指定する
検索結果に表示させたくない投稿ページがある場合には下記のような関数をfunctions.phpに追記することで実装できます。 【functions.php】function SearchFilter($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( 'post__not_in', array(****,****,****) ); // 検索対象外とするページのIDを入力
}
}
add_action( 'pre_get_posts','SearchFilter' );
検索結果と合わせて検索時のキーワードと件数を表示させる
検索結果に加えて検索時に入力したキーワードと、トータルの検索結果件数も合わせて表示させることでユーザビリティが向上します。検索結果を表示させるページテンプレートであるsearch.phpのクエリに下記のように追記します。 【search.php】※ループ部分のみ<?php
$allsearch = new WP_Query("s=$s");
$key = esc_html($s, 1);
$count = $allsearch->found_posts;
$countSum = $wp_query->found_posts;
if($count!=0){
// 検索結果を表示:該当記事あり
echo '<p>「<strong>'.$key.'</strong>」で検索した結果、<strong>'.$countSum.'</strong>件の記事が見つかりました。</p>';
} else {
// 検索結果を表示:該当記事なし
echo '<p>「<strong>'.$key.'</strong>」で検索した結果、関連する記事は見つかりませんでした。</p>';
}
?>
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">この記事を見る</a>
</div>
<?php endwhile; endif; ?>
このようにクエリを変更することで検索結果もコントロールすることができます。また検索件数などの表示など、細かいところもユーザビリティ向上のポイントになるのではないでしょうか。
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)