Simplicity の検索機能を強化するカスタマイズ

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

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

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

Simplicity の検索機能を強化するカスタマイズの紹介です。

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

検索フォームに入力した検索語句は、検索結果ページに移動後も表示すると利便性が高まります。

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

しかし、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 のデフォルトでは、固定ページも検索結果ページに表示されます。

お問い合わせページやサイトマップ、プライバシーポリシーなどの固定ページは、検索結果には不要です。これらのページは、検索せずとも簡単に見つかるのがベスト。

不要な固定ページを検索結果に表示しないために、下記のページで紹介されているコードを子テーマの functions.php にそのまま追加します。

「【WordPressの「検索結果を投稿だけ」表示させる】「pre_get_posts」を使ってCodexのコードをこう書くと問題を回避できます」アドバイスの内容を理解したところで、このコードを使おう

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

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

検索フォームの検索アイコンは、ボタンの形状にすると検索フォームの利用率が高まる可能性があります。

特に高齢者の訪問率が高いサイトは、ボタンの形状がいいかもしれません。高齢の方は検索語句を入力後にエンターキーを押すのではなく、検索アイコンのボタンをクリックする傾向があるためです。

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

ちなみに、Amazon は、検索フォームの検索アイコンをボタンの形状にしています。

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

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

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

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。