Cocoonヘッダー検索窓を表示②

メニューに検索窓の設置Cocoon
この記事は約3分で読めます。

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

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

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

https://yusukesakai.com/archives/268
まず、やったこと
  1. functions.phpにコードを追加
  2. 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; }/* モバイルメニュー6番目検索窓の消す */

解説

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

モバイルメニュー検索窓

モバイル検索窓

最後に

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

QOOPY
QOOPY

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

タイトルとURLをコピーしました