メニューに検索ボックスを追加して表示するコードと「Search box on Navigation Menu」プラグインのカスタマイズ

以前記事で紹介したプラグインで、ヘッダーにあるメニュー(グローバルナビ)に検索ボックスを追加して表示する「Search box on Navigation Menu」プラグインというのがあります。

この「Search box on Navigation Menu」のコードを見ていて、「なるほど!」と思ったので、検索ボックスをサイトに追加するコードについて書きたいと思います。

プラグインにあるコードを、functions.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;
}

add_filterを使い、wp_nav_menu_itemsフィルターに関数(add_search_box)をフックさせています。

関数では、バッファを使い検索ボックスを一時的に保存しておいて、バッファの内容をob_get_contentsで取得して変数($searchform)に代入、それを$itemsに繋げて検索ボックスをメニューに追加しています。

「Search box on Navigation Menuについて

このプラグインを使用するとメニューに検索ボックスを追加しますが、複数メニューを追加している場合、例えばサイドバーにカスタムメニューを使ってメニューを使用しているときやフッターに別途メニューを追加したときは、全てのメニューに検索ボックスが追加されるので検索ボックスだらけになってしまいます。

そこで、複数メニューがあるときに検索ボックスを1つだけ追加したい場合、コードを下のようにカスタマイズするとできます。

仮にメニュー’primary’(ロケーション)というメニューを追加してあるとします。

register_nav_menu( 'primary', 'フッターメニュー' );

関数にある「$args->theme_location ==  ‘primary’」のprimary(ロケーション名)の所に、検索ボックスを追加したいメニューのロケーション名を入力すると、表示したいメニューにだけ検索ボックスが表示されます。

function add_search_box($items, $args) {
  if($args->theme_location == 'primary') {
    ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();

    $items .= '<li>' . $searchform . '</li>';
  }
return $items;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です