Simplicityの検索機能をカスタマイズしてサイト回遊率をアップ

Simplicityの検索ボタンをおしゃれで使いやすくするカスタマイズ Simplicity
SponserLink

Simplicityの検索機能をおしゃれで使いやすくカスタマイズしました。

 

Simplicityは非常に優れたテーマですが、デフォルトの検索機能は、検索結果の件数が表示されていなかったり、検索後に検索キーワードが消えていたり、検索アイコンがぼやけていたり、、、

カスタマイズした方が良い点がいくつか存在します。

 

検索フォームをカスタマイズすることで、ユーザが目的のページを見つけやすくなり、サイトの回遊率アップにも繋がると思います。

 

是非検索フォームのカスタマイズにチャレンジしてみてください。参考になれば幸いです。

SponserLink

検索マークをAwesomeアイコンにするカスタマイズ

デフォルトのSimplicityの検索アイコンはPNG画像が使用されています。そのため、輪郭がぼやけており、見栄えがあまり良くないです。

ボケているSimplicityの検索アイコン

 

画像だとどうしてもぼやけてしまうため、これをAwesomeアイコン(Webフォント)に変更します。

輪郭がはっきりしているSimplicityの検索アイコン

すると、アイコンがはっきりしていると思います。

 

このカスタマイズをしたい場合、Simplicityの子テーマにある「Style.css」に以下のソースコードを貼り付けてください。

子テーマって何?という方は、こちらの記事を事前にご確認ください。
参考 Simplicityを使うなら子テーマをインストールしておいた方がいい

 

/* 検索ボタンをPNG画像からAwesomeアイコンに変更する方法*/
#searchsubmit {
  background:none;
}

#searchform:before {
  content: "\f002";
  font: 21px/1 FontAwesome;
  position: absolute;
  right: 8px;
  top: 5px;
}

 

動作確認する時は、ブラウザのキャッシュ削除も忘れないよう、注意してくださいね。キャッシュ削除方法がわからない場合、Firefoxのキャッシュ削除方法Safariのキャッシュ削除方法をご確認ください。

 

検索フォームを下線だけにするカスタマイズ

Simplicityのデフォルトの検索フォームは元々、枠で囲まれています。

simplicityのデフォルトの検索フォーム

 

この外枠について、下線だけ残して消してみました。

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のデフォルトだと、検索した後は検索フォームに検索したキーワード(検索語句)が残りません。

simplicityの検索語句を残すカスタマイズ

このままだと、1文字だけ入力ミスして再検索するという場合などに全て検索キーワードを入力し直す必要があるため、とても面倒です。

 

検索キーワードを残すカスタマイズは、searchform.phpというファイルを修正する必要があります。

ただし、このsearchform.phpというファイルはデフォルトでは子テーマに存在しません。

 

そのため、まずは親テーマの「searchform.php」というファイルをコピーして子テーマのフォルダ直下に格納してください。

searchformファイルの格納場所

 

その後、子テーマにコピーした「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のデフォルトだと、検索した後に検索結果が表示されますが、何の検索キーワードで検索したのか、何件ヒットしたのかが分かりません。

 

そのため、検索した後に検索語句とヒット件数を表示させます。

simplicityの検索結果カスタマイズ

 

このカスタマイズを行うためには、まずは親テーマの「list.php」というファイルをコピーして子テーマに貼り付けてください。

listファイルの格納場所

 

そして、まずは下記のソースコードを探してください。

 

<?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の検索フォームのカスタマイズ方法についてご紹介させていただきました。カスタマイズ後の状態はこんな感じです。

simplicityの検索機能をカスタマイズした結果

 

サイト内検索をした時に使い勝手が悪いと、ユーザもサイトから離れてしまいます。今回のカスタマイズで多少はサイトの回遊率が良くなるかなって思ってます。

 

なお、このカスタマイズの参考にさせていただいたサイトは以下の2サイトです。ありがとうございました。

参考 Firstlayout

参考 aboutlife

Simplicityブログ運営

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin

妻と娘の3人で暮らしています。
「お金、時間、そして家族を大事にしたい」と考えるパパにとって、少しでもプラスになれたらいいなと思って情報発信しています。宜しくお願い致します。

jinをフォローする
ぱぱたす(PaPa+)

コメント