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

目的

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

PC

モバイル

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

方法

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管理画面から「外観→カスタマイズ→レイアウトの設定」から設定できます。それぞれのスタイルはこのようになっ

wp-simplicity.com

メニューアイコン

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

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

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

wp-simplicity.com

fa-searchに設定。

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

FirstLayout

Web 制作に役立つ情報をご紹介

firstlayout.net

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