いくつかの WordPress テーマは検索アイコンを追加するオプションも提供します。 例えば、 Newspaper テーマでは、メインメニューまたはトップバー（Top Bar）に検索ボタンを表示する設定を提供します。 このブログで使用されている GeneratePress テーマにはメニューナビゲーションに検索アイコンを表示するオプションがあります。
検索アイコンの代わりに検索バー（検索ボックス）を表示したい場合があります。 テーマがヘッダーウィジェット領域を提供している場合は、検索ブロックをヘッダーウィジェット領域に追加して検索バーを簡単に表示できます。
この記事では、簡単なコードをテーマ関数ファイルに追加してメニューナビゲーションに検索バーを追加する方法について説明します。
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に接続してコードを追加するのが難しい場合は、適切なプラグインがあるかどうかを確認してください。 見てみる アイボリー検索のようなプラグインを使用すると、メニューに検索バーを追加できるようです。
しかし、一つの情報提供をすることは 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 */
}
本当に簡単に解決しましたㅠㅠ
私のサイトのような場合は、現在のメニューが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も同様のコードが適用されたようですが、検索バーが右揃えではありません。ソートできない正確な理由はわかりません。
正確に言えば..検索バーを右に並べ替えることはできますが、じゃあメニューも一緒に右に並べてくれて方法を探してみてください。.ㅎㅎ答えありがとうございます！
お知らせ - デザイン - メニューからメニューを追加しないでくれたのでしたようです。成功しました^^
GeneratePress テーマですが。チャイルドテーマ内の関数ファイルに最初のサンプルコードを追加しても、なぜメニューに検索バーを表示できないのですか？
functions.phpに検索バーコードを追加すると表示されず、メニュー自体が消えるのになぜですか？
こんにちは、キム・スヒョン。 本文に提示されたコードは WordPress 機能を利用したものです。 エレメンタプロを使ってメニューを追加した場合は動作しません。
コードが正しいか（テーマによって変更しなければならない部分があります）、正しく追加したかどうかチェックしてみてください。
https://iwordpower.com/ サイトから検索バーを本文の方法で挿入しました。