Ｃocoonヘッダーメニューに追加して検索窓を表示する

Index

ナビゲーションメニューに検索窓を設置する
1. さっそく設置してみる
  1. 解説
    1. 最後に

ナビゲーションメニューに検索窓を設置する

1カラムサイトにおいて検索窓の表示位置が一定の場所に限られます、そこでヘッダーに検索窓することが一番しっくりくるので、Yusuke Sakaiさんのサイトを参考に設置しました。

https://yusukesakai.com/archives/268

まず、やったこと

functions.phpにコードを追加
Cocoonの子テーマにCSS追加（モバイル時に非表示）

さっそく設置してみる

functions.phpに追加したコード・Cocoon　Ver2.1.2以上

/ヘッダーに検索ボックスを追加
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;
}

子テーマに追加したCSS・フッターやモバイルの時には非表示

/* メニューの何番目・検索窓の消す */
.navi-footer-in>.menu-footer>li:nth-child(n+4) { display: none; }/* フッターメニュー4番目検索窓の消す */
.mobile-menu-buttons> li:nth-child(n+6) { display: none; }/* モバイルメニュー６番目検索窓の消す */

解説

素人なりの解説です。
wp_nav_menu_items を使っているのですべてのナビゲーションメニューに反映されます。
モバイルの時は別に検索アイコンを設置しているので不要なんですね、
そこでfunctions.phpに記述した $items .= <li>としてリストで囲っているのでモバイルメニューの6番目 li:nth-child(n+6)に表示されてた検索窓をdisplay: noneで非表示しました。該当するメニュー (n+6) 数字部分を書き換えればOK！です。

最後に

いろいろと検索窓に関しては模索していましたが、やっと落ち着きました。
方法論としては関数のフックを使ってどこでも設置できるかと思うのですが、やはり一番目につきやすい場所に設置することが読者さんに親切かと思います。

QOOPY

2カラムだとサイドバーの上位が定位置だと思うのですが、1カラムだと定位置はヘッダーに検索窓かなと・・・上記のカスタマイズが参考になれば幸いです。