CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress 検索結果画面を作る方法

search results

WordPressの記事検索結果画面を作ってみたので紹介します。検索キーワードと検索件数を表示しました。ユーザにとって分かりやすくなったと思います。

方法

WordPressは記事の検索機能が用意されてます。
しかし検索しても一致する記事を表示するだけで、検索キーワードや検索件数を表示してくれません。
そこでタイトルを追加し、検索キーワードと検索件数を表示するようにしました。

検索機能の追加については以下の記事にあります。
WordPress 検索ボタンをFont Awesomeのアイコンに変える方法 | CrystalSnowman.com

index.phpの修正

記事一覧を表示するindex.phpに検索結果用のタイトルを追加します。

7行目の「is_search()」で検索結果ページだったらの条件を加えています。

9行目で「$searchResults」という変数を宣言して、「WP_Query()」でqueryした投稿の結果を代入しています。
「WP_Query()」については以下が参考になります。

関数リファレンス/WP Query – WordPress Codex 日本語版

今回は記事検索した投稿を取り出すので「WP_Query()」のパラメータの「s=$s」で記事検索の結果を指定します。
「showposts」で取り出す投稿数を指定します。「-1」を指定したので、すべての投稿を取り出します。

10行目で「$key」という変数を宣言して、検索キーワード($s)を代入します。代入する前に「wp_specialchars()」で特殊記号などを変換します。

11行目で「$count」という変数を宣言して、「$searchResults」オブジェクトの「post_count」プロパティを代入します。記事件数のことですね。

15行目でh1見出しに検索キーワード($key)と検索件数($count)を表示します。

style.cssの修正

h1見出しのデザインを整えます。

完成

このようになります。

search results

今回の記事の参考資料

参考にさせていただいたサイト

WordPressの検索機能をもっと使いやすくする | Webクリエイターボックス

とても役に立つサイトです。今回はほぼこのサイトの通りに書いています。
このサイトでは「new WP_Query()」で参照代入演算子である「=&」を使用しています。別に「WP_Query()」を参照する変数が複数あるわけではないので、私のサイトではこれを使用しませんでした。

参考図書

パーフェクトPHP (PERFECT SERIES 3)
パーフェクトPHP (PERFECT SERIES 3)

PHPの文法を調べるために使いました。クラスとオブジェクトに触れるのなら必要になる本です。フレームワークの概念も解説していて、リファレンスとして一冊持っておくべき本です。

まとめ

「WP_Query()」を使用して検索結果ページを分かりやすくしました。記事検索はそんなに使われる機能ではないのですが、ユーザインターフェース向上は重要です。
簡単にできるのであなたもチャレンジしてみてはいかがでしょうか。


Top