Cocoonのヘッダーメニューに検索ボタンを追加。検索してもまともな情報が出てこない。グーグルさんどうなってるんでしょうか？結局オリジナルの方法でヘッダメニューに検索ボタンを追加しました。
wp_nav_menu_itemsフィルターフックを使う
function add_header_searchform($navi, $args) {
ob_start();
get_template_part('searchform');
$searchform = ob_get_contents();
ob_end_clean();
if( $args->theme_location == NAV_MENU_HEADER ){
$navi .= '<li class="header-search">' . $searchform . '</li>';
}
return $navi;
}
add_filter('wp_nav_menu_items','add_header_searchform', 10, 2);wp_nav_menu_itemsというフックを使うとヘッダーメニューに要素を追加できる。このコードはfunctions.phpに記述します。なにをしているかというと、get_template_part()を使ってsearchform.phpを呼び出しているだけです。$argsはどこからきたのかとか疑問はあるんですがとりあえずこれで動きます。
しかしこの場合はメニューに検索欄（フォーム）を追加するので、見た目が不自然になります。（少なくともわたしは不自然に感じた）次に紹介する方法でフォームではなく「検索ボタン」を追加します。
Cocoonに実装されている「mobile-search-button.php」を使う
mobile-search-button.phpとはCocoonテーマでウインドウ幅が1023px以下になったときに表示されるヘッダーモバイルボタンにある検索ボタンのテンプレートです。ようはこれをメニューに追加すればいいだけです。
function add_header_searchform($navi, $args) {
ob_start();
get_template_part( 'tmp/mobile-search-button' );
$searchform = ob_get_contents();
ob_end_clean();
if( $args->theme_location == NAV_MENU_HEADER ){
$navi .= $searchform;
}
return $navi;
}
add_filter('wp_nav_menu_items','add_header_searchform', 10, 2);get_template_part()で「tmp/mobile-search-button」を指定しています。こうすることによって検索ボタンをメニューに簡単に追加することができます。ちなみにWordPressのメニュー管理画面でカスタムリンクのURLを「#search」と指定すると検索ボタンを追加できる機能があるのですが、こちらはPCのヘッダーメニューでは動作しません。そのため今回はfunctions.phpを使っています。この検索ボタンはクリックするとモーダルでフォームがあらわれます。
次にCSSで見た目を調整します。
#navi .search-menu-button{
color: #fff;
padding: 0px 12px;
}
#navi .search-menu-caption{
margin-left: 5px;
}CSSに関しては自分のサイトに合うように調整してください。
まとめ
Cocoonのヘッダーメニューに検索ボタンを追加する場合は、functions.phpでmobile-search-buttonを追加する方法が楽だと思います。Cocoonで実装されているテンプレートなので自分でフロントの実装をしなくてもモーダルでフォームが表示されます。一般的には検索フォームはサイドバーに設置するのが普通だと思いますがサイトの構成によってはサイドバーに検索フォームを設置すると邪魔な場合があります。このようなときにヘッダーメニューに検索ボタンを追加します。
コメント