目的

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

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の設定を変える

検索窓の色

https://wp-simplicity.com/searchform-style/

wp-simplicity.com

メニューアイコン

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

https://wp-simplicity.com/button-icon-font-change/

wp-simplicity.com

fa-searchに設定。

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

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

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

firstlayout.net

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