メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web クリエイター

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

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

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

しかし、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() ) { ?>
  <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 などの値はサイトに合わせてご変更ください。

フォローする