THE THOR ザ・トール 検索窓の設定とカスタマイズ

当サイトでは有料テーマのTHE THOR を使用しています。

今回は、ヘッダー部分に表示される検索窓の設定とカスタマイズ。

ヘッダー部分に検索窓を表示するようようにしてから（以前はサブメニューにのみ表示）検索利用率が上がりました。※厳密な統計はとっていません。PV数の推移を見ての体感です。

より多く検索窓を利用してもらうため、標準では画面いっぱいに広がる検索窓を小さくすることで逆に目立つように変更。特にPC表示だと変化の具合がわかりやすいと思います。

 

 

 

 

検索に関する機能の設置

 

THE THOR には検索機能に関して、検索窓とサーチアイコン、絞込検索ウィジェットがあります。

 

検索窓は文字入力スペースを表示、

サーチアイコンは虫眼鏡アイコンが表示されクリックすると検索用のウインドウが展開、

絞込検索ウィジェットは、サーチアイコンで展開されるウインドウと同じものをウィジェットで好きな場所に設置できます。

 

検索窓を設置

 

検索窓はタイトル、グローバルメニューの下に表示されます。

設定はサイトに合わせお好みでどうぞ。

 

サーチアイコンの設置

 

サーチパネルはヘッダー設定のレイアウトにより左上か右上に表示されます。こちらも設定はサイトに合わせお好みでどうぞ。
※バージョンアップ(2.2.0)でPC/スマホで表示切替ができるようになりました。

 

• ヘッダー設定シンプル(default)だと右上表示
• ヘッダー設定ダイナミックだと左上表示

 

絞込検索ウィジェットの設置

 

ウィジェットなので、サイドバー/サイドメニュー/記事下など好きな場所に検索窓が設置可能です。
こちらも好きな場所へ好みの設定でどうぞ。

関連記事絞込検索を固定ページで表示

 

THE THOR 検索窓のカスタマイズ

 

カスタマイズは追加CSSにコードを記述します。コピペでok

 

コピペするCSSは以下の通り。

/*検索窓*/
/*検索窓の文字消去*/
.searchHead input::placeholder {
	font-size: 0;
}
/*検索窓の上下パディング*/
.searchHead {
	padding:0 0 15px 0;
}
/*検索窓のサイズと位置*/
.container-searchHead {
	justify-content: center;
	width:30%;
	min-width:200px;
	margin-left:auto;
	margin-right:auto;
}
/*検索窓の角丸*/
.searchHead__input {
    border-radius: 20px 0 0 20px;
}
.searchHead__submit {
    border-radius: 0 20px 20px 0;
}
/*検索窓クリック装飾を無くす*/
.searchHead input:focus {
	outline-style: none;
}

以上で完成です。

※カスタマイズは自己責任でお願いします。

 

あとがき

 

冒頭で書いたとおり検索の使用率が上がっています。検索が使われるようになったということは直帰率の改善、PVアップに貢献していると思われるのでカスタマイズは別としても、ヘッダーに検索窓の設置は必須ではないかと個人的には思っています。

閲覧者は思ったよりサブメニューやサイドメニューの検索窓を見ていないようですね。

 

大事なものは冒頭へ。プライスレス。