Simplicityの検索機能をおしゃれで使いやすくカスタマイズしました。
Simplicityは非常に優れたテーマですが、デフォルトの検索機能は、検索結果の件数が表示されていなかったり、検索後に検索キーワードが消えていたり、検索アイコンがぼやけていたり、、、
カスタマイズした方が良い点がいくつか存在します。
検索フォームをカスタマイズすることで、ユーザが目的のページを見つけやすくなり、サイトの回遊率アップにも繋がると思います。
是非検索フォームのカスタマイズにチャレンジしてみてください。参考になれば幸いです。
検索マークをAwesomeアイコンにするカスタマイズ
デフォルトのSimplicityの検索アイコンはPNG画像が使用されています。そのため、輪郭がぼやけており、見栄えがあまり良くないです。
画像だとどうしてもぼやけてしまうため、これをAwesomeアイコン（Webフォント）に変更します。
すると、アイコンがはっきりしていると思います。
このカスタマイズをしたい場合、Simplicityの子テーマにある「Style.css」に以下のソースコードを貼り付けてください。
/* 検索ボタンをPNG画像からAwesomeアイコンに変更する方法*/
#searchsubmit {
background:none;
}
#searchform:before {
content: "\f002";
font: 21px/1 FontAwesome;
position: absolute;
right: 8px;
top: 5px;
}
動作確認する時は、ブラウザのキャッシュ削除も忘れないよう、注意してくださいね。キャッシュ削除方法がわからない場合、Firefoxのキャッシュ削除方法、 Safariのキャッシュ削除方法をご確認ください。
検索フォームを下線だけにするカスタマイズ
Simplicityのデフォルトの検索フォームは元々、枠で囲まれています。
この外枠について、下線だけ残して消してみました。
個人的には気に入っています。笑
このカスタマイズをやりたい場合、以下のソースコードを子テーマのstyle.cssに貼り付けてください。
/* 枠のスタイル*/
#s {
box-shadow: none;
border-top: none;/*上の枠線を削除*/
border-left: none;/*左の枠線を削除*/
border-right: none;/*右の枠線を削除*/
border-radius: 0;
border-bottom: 1px solid #202035;/*下線のみに*/
background: #fff;
}
検索後でも検索フォームに検索キーワードを残すカスタマイズ
Simplicityのデフォルトだと、検索した後は検索フォームに検索したキーワード（検索語句）が残りません。
このままだと、1文字だけ入力ミスして再検索するという場合などに全て検索キーワードを入力し直す必要があるため、とても面倒です。
検索キーワードを残すカスタマイズは、searchform.phpというファイルを修正する必要があります。
ただし、このsearchform.phpというファイルはデフォルトでは子テーマに存在しません。
そのため、まずは親テーマの「searchform.php」というファイルをコピーして子テーマのフォルダ直下に格納してください。
その後、子テーマにコピーした「searchform」ファイルを以下のソースコードに置き換えてください。
<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>
これで検索後でも検索フォームに検索キーワードを残すことができます。
検索結果に検索キーワードと検索件数を表示するカスタマイズ
Simplicityのデフォルトだと、検索した後に検索結果が表示されますが、何の検索キーワードで検索したのか、何件ヒットしたのかが分かりません。
そのため、検索した後に検索語句とヒット件数を表示させます。
このカスタマイズを行うためには、まずは親テーマの「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 } ?>
これで検索結果のページに検索キーワードと検索件数が表示されます。
まとめ
今回はSimplicityの検索フォームのカスタマイズ方法についてご紹介させていただきました。カスタマイズ後の状態はこんな感じです。
サイト内検索をした時に使い勝手が悪いと、ユーザもサイトから離れてしまいます。今回のカスタマイズで多少はサイトの回遊率が良くなるかなって思ってます。
なお、このカスタマイズの参考にさせていただいたサイトは以下の2サイトです。ありがとうございました。
参考 Firstlayout
参考 aboutlife
コメント