WordPress メニューに検索バーを追加する方法

Last Updated:2023年07月16日| | 13のコメント

いくつかの WordPress テーマは検索アイコンを追加するオプションも提供します。 例えば、 Newspaper テーマでは、メインメニューまたはトップバー(Top Bar)に検索ボタンを表示する設定を提供します。 このブログで使用されている GeneratePress テーマにはメニューナビゲーションに検索アイコンを表示するオプションがあります。

Newspaper テーマ検索アイコン
Newspaper テーマ検索アイコン。

検索アイコンの代わりに検索バー(検索ボックス)を表示したい場合があります。 テーマがヘッダーウィジェット領域を提供している場合は、検索ブロックをヘッダーウィジェット領域に追加して検索バーを簡単に表示できます。

この記事では、簡単なコードをテーマ関数ファイルに追加してメニューナビゲーションに検索バーを追加する方法について説明します。

WordPress メニューに検索バーを追加する方法

WordPress メニューに検索バーを追加する方法

上の図では、上部は GeneratePress テーマのメインメニューに検索アイコンを表示したときを表示します。 下のように検索アイコンの代わりに検索バーを表示したい場合は、テーマ関数ファイルに次のコードを追加できます。

// 메뉴에 검색 표시줄 표시하기
// Add Search Bar to WordPress Menu Navigation 

function pagedart_search_menu( $items, $args ) {
	if ($args->theme_location == 'main_navigation') {
    return $items . "<li class='menu-header-search'>".get_search_form(false)."</li>";
  }
}
  add_filter('wp_nav_menu_items','pagedart_search_menu', 10, 2);

チャイルドテーマ(子テーマ)を作成し、チャイルドテーマ内の関数ファイル(functions.php)に追加します。 チャイルドテーマを使用せずに親テーマ関数ファイルに直接コードを追加すると、後でテーマの更新時に追加したコードが消えることになります。 (FTPを使用してWebホスティングサーバーに接続して作業します。)

上記のコードで theme_location部分はテーマに合わせて適切に変更するようにします。 例えば、 Avada テーマの theme_locationは次のようになります。

  • main_navigation - メインナビゲーション)
  • top_navigation - トップナビゲーション)
  • mobile_navigation - モバイルナビゲーション)
  • 404_pages - 404ページ
  • sticky_navigation - 固定ヘッダーナビゲーション

theme_locationはテーマによって異なりますので、正確な値がわからない場合は、以下に使用するテーマを教えてください。theme_location)を確認できる場合はお知らせします。

検索ボックスの検索ボタンの色はCSSで調整できます。 placeholderテキスト(Search ...)を取り除きたい場合は、次の記事で説明する方法を使用できます。

サイトにメニューが XNUMX つだけ使用される場合は、メニュー位置をチェックする条件文を削除してもかまいません。

function pagedart_search_menu( $items, $args ) {
    return $items . "<li class='menu-header-search'>".get_search_form(false)."</li>";
}
  add_filter('wp_nav_menu_items','pagedart_search_menu', 10, 2);

検索バーの位置をメニューの前に配置したい場合は、上記のコードで「 " . get_search_form(false) . " 「部分を適切に前方に移動してください。例:

    return "<li class='menu-header-search'>".get_search_form(false). "</li>" . $items;

最後に、

以上で WordPress メニューに検索ボックスを表示する方法について説明しました。 FTPに接続してコードを追加するのが難しい場合は、適切なプラグインがあるかどうかを確認してください。 見てみる アイボリー検索のようなプラグインを使用すると、メニューに検索バーを追加できるようです。

参照


13のコメント

コメント

  1. しかし、一つの情報提供をすることは GeneratePress テーマですが、本文に提示された最初の関数コードを使用すると、私のような場合はメニュー自体が消えてしまい、2番目の関数コードを使用しています^^;;楽しい一日をお過ごしください^^!

    応答
    • テストしてみると、次のCSSを追加すればいいようです。

      #primary-menu {
      flex-grow: 1;
      }

      デフォルトでは、次のCSSコードを使用すると、特定の要素は左に、他の要素は右に並べ替えることができます。

      .inside-navigation {
      display: flex; /* Makes the container a flexbox container */
      justify-content: space-between; /* Aligns items on the main-axis */
      align-items: center; /* Aligns items on the cross-axis (vertically) */
      }

      .main-nav {
      flex-grow: 1; /* Allows the main nav to take up all available space pushing the menu-bar-items to the right */
      }

      .menu-bar-items {
      margin-left: auto; /* Pushes the menu-bar-items to the right */
      }

      応答
  2. 私のサイトのような場合は、現在のメニューがHomeの1つで、メニューの場所をチェックする条件文を削除するコードを使用しました。検索バーをメニューの右端に配置するには、どのCSSコードを使用できますか?以下のコードが適用されませんでしたㅜㅜ

    .menu-header-search {
       余白左:自動;
    }

    応答
    • こんにちは、本文のコードは検索バーをメニューの最後に追加する機能をします。 iwordpower.comを見てみるとキム・スヒョンさんが提示したコードが使われていますね。
      そのコードではない場合は、次のCSSコードでテストしてください。

      #menu-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      }
      #menu-main > li {
      flex: 1;
      }
      .menu-header-search {
      flex-grow: 0;
      margin-left: auto;
      }

      応答
      • すべて適用できません。 Naver カフェでメモとして私のサイトのアドレスを残しました。

      • こんにちは、見てみると、iwordpower.comと同じように挿入されているようで、CSSも同様のコードが適用されたようですが、検索バーが右揃えではありません。ソートできない正確な理由はわかりません。

      • 正確に言えば..検索バーを右に並べ替えることはできますが、じゃあメニューも一緒に右に並べてくれて方法を探してみてください。.ㅎㅎ答えありがとうございます!

  3. お知らせ - デザイン - メニューからメニューを追加しないでくれたのでしたようです。成功しました^^

    応答
  4. GeneratePress テーマですが。チャイルドテーマ内の関数ファイルに最初のサンプルコードを追加しても、なぜメニューに検索バーを表示できないのですか?

    応答
  5. functions.phpに検索バーコードを追加すると表示されず、メニュー自体が消えるのになぜですか?

    応答
    • こんにちは、キム・スヒョン。 本文に提示されたコードは WordPress 機能を利用したものです。 エレメンタプロを使ってメニューを追加した場合は動作しません。
      コードが正しいか(テーマによって変更しなければならない部分があります)、正しく追加したかどうかチェックしてみてください。

      https://iwordpower.com/ サイトから検索バーを本文の方法で挿入しました。

      応答