Simplicity の検索機能を使いやすくするカスタマイズ

Simplicityの検索機能をカスタマイズ

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

あらゆるサイトで、重要な役目を担っているのが検索機能。

使いやすくスムーズに探しものに導く検索機能は、サイト訪問者の満足度を高めます。

一方、混乱を招く検索機能は、サイト回遊率も再訪率も低下させます。

多くの方が Amazon を利用しているのは、検索機能が非常に使いやすいのが理由の 1 つ。

あなたのサイトも多くの方に愛されるように、検索フォームと検索結果ページを使いやすいものにカスタマイズしましょう。

検索フォームに入力した検索語句を残す

検索フォームに入力した検索語句は、検索結果ページに移動後も表示されなければなりません。

検索語句が残ることで、さらに検索結果を絞りたい時に、すでに入力した検索語句を再度入力する手間が省けます。

しかし、 Simplicity の検索フォームは、検索結果ページで検索語句が残りません。

検索語句が検索結果ページで消える

これでは検索語句を全て入力し直す必要があり、手間がかかります。

検索語句を残すために、 searchform.php に手を加えます。

まず、親テーマ内にある searchform.php を、子テーマ直下にコピペします。

子テーマに設置した searchform.php を開き、コードを以下のものに全て書き換えます。

<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
	<input type="text" placeholder="<?php echo get_theme_text_search_placeholder(); ?>" value="<?php the_search_query(); ?>" name="s" id="s">
	<input type="submit" id="searchsubmit" value="">
</form>

親テーマの searchform.php との違いは、1つ目の inputタグ に value="<?php the_search_query(); ?>" を追加していること。

これで検索フォームに入力した検索語句が、検索結果ページでも表示されます。

検索結果ページに検索語句と件数を表示する

検索結果ページには、検索語句とヒットした件数を表示すると利便性が高まります。

検索語句を表示することで、検索結果ページだと誰もがすぐに認識できます。

また、ヒット件数を表示することは、検索した方の助けになります。

しかし、 Simplicity では、検索語句もヒット件数も表示されません。

検索結果ページに検索語句と件数を表示するには、 list.php を変更します。

親テーマの list.php を子テーマにコピペし、子テーマに設置した list.php から下記のコードを探します。

<?php
////////////////////////////
//アーカイブのタイトル
////////////////////////////
if (!is_home() && !is_search() ) { ?>
  <h1 id="archive-title"><?php echo get_archive_chapter_text(); ?></h1>
<?php } ?>

上記のコードの下に、下記のコードを追加します。

<?php
////////////////////////////
// 検索結果ページの検索結果
////////////////////////////
if( is_search() === true ) { ?>
<h1 class="search-results-title"><?php the_search_query(); ?>」の検索結果:<?php echo $wp_query->found_posts; ?></h1>
<?php } ?>

これで検索結果ページに、検索語句とヒットした件数が表示されます。

検索結果ページに表示される検索語句とヒット件数

検索結果ページから固定ページを除外する

検索結果ページには、余計な情報は表示させてはいけません。

しかし、 WordPress のデフォルトでは、固定ページも検索結果ページに表示されます。

お問い合わせページやサイトマップ、プライバシーポリシーなどの固定ページは、検索結果から除外しましょう。

「【WordPressの「検索結果を投稿だけ」表示させる】「pre_get_posts」を使ってCodexのコードをこう書くと問題を回避できます」アドバイスの内容を理解したところで、このコードを使おうで紹介されているコードを、子テーマの functions.php にそのまま追加します。

これで固定ページが、検索結果ページに表示されることはありません。

検索アイコンはボタンにする

検索フォームにある検索アイコンは、ボタンの形状にするとユーザビリティが向上します。

特に高齢の方は、検索語句を入力後にエンターキーを押すのではなく、検索アイコンのボタンをクリックする傾向があります。

検索アイコンがボタンの形状でなければ、「クリックする場所がない!」と戸惑わせてしまうかもしれません。

下記の CSS を子テーマの style.css に追加すると、検索フォームの検索アイコンをボタンの形状にできます。

#searchsubmit {
  background-color: #f5f5f5;
  border-bottom-left-radius: 0;
  border-left: 1px solid #ccc;
  border-top-left-radius: 0;
  height: 30px;
  right: 1px;
  top: 1px;
  width: 56px;
}

ボタンの形状をした検索アイコン

width などの値はサイトに合わせてご変更ください。

Google AdSense のカスタム検索エンジンは使ってはいけない

サイト訪問者の満足度が高いサイトほど、しっかりと検索機能を作り込んでいます。

検索機能でお手本にしたいのが Amazon 。

使いやすい・分かりやすい・高機能と三拍子揃っているにも関わらず、常に改善を続けています。

また、 Gmail や YouTube などの Google の各種サービスもいいお手本です。

しかし、 Google AdSense で利用できるカスタム検索エンジンだけは、お手本にするどころか使用してはいけません。

PC で検索するとまだいいのですが、スマホで検索するとページネーションが最悪です。

あのページネーションを誤タップすることなく使うのは、すごく難しいゲームをクリアするより難易度が高い…。