目的

メニューに検索窓を追加する

PC

モバイル

↑右上の虫眼鏡マークをタップすると灰色の部分が開く

方法

PC
モバイル

1. function.phpを編集
2. CSSを編集
3. Simplicityの設定を変える
- 検索窓の色
- メニューアイコン

1. function.phpを編集

ナビゲーションメニューの関数をフックする。

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
 ob_start();
 get_search_form();
 $searchform = ob_get_contents();
 ob_end_clean();
  $items .= '<li>' . $searchform . '</li>';
 return $items;
}

2. CSSを編集

div#navi #searchform {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  width: 300px;
}
div#navi #s {
  margin-bottom: 5px;
}

ほんとうはモバイルのときは横100%にした方が良いんだろうけど、めんどいから300px固定。

3. Simplicityの設定を変える

検索窓の色

Simplicity検索ボックスのスタイルいろいろ

Simplicity20140828から、ブログの検索窓のスタイルをテーマカスタマイザーから変更できるようにしました。Wordpress管理画面から「外観→カスタマイズ→レイアウトの設定」から設定できます。それぞれのスタイルはこのようになっ

メニューアイコン

検索がどれくらい使われているのか調べていませんが、
個人的には、サイトの検索窓なんてほとんど使ったことありません。
が、万が一にも使っている方がいた時に困らないように、
メニューバーを、ハンバーガーバーからサーチアイコンに変えました。

Simplicityの「メニューボタン」と「トップへ戻るボタン」のアイコンを変更する方法

Simplicity201401004から、メニューボタンのアイコンと、トップへ戻るボタンのアイコンを変更できるようになりました。今回は、その方法を紹介したいと思います。ボタンはアイコンを変更する方法 Simplicityには

fa-searchに設定。

おまけ:検索窓の虫眼鏡アイコンを綺麗にする

ぼやけた Simplicity の検索アイコンをきれいに表示

Simplicity の検索フォームに、輪郭がきれいな虫眼鏡の検索アイコンを表示するカスタマイズです。 CSS や javascript を 100% コピペで追加できるため、検索アイコンを簡単に変更できます。

検索窓の虫眼鏡マークがぼやっとしていたのが気になったので、
上記サイトのCSSをコピペして対処。

[Simplicity] メニューに検索窓を追加

目的

PC