ナビゲーションメニューに検索フォームを追加
メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。
メニューのつくられかた
まずは、WordPressでメニューがつくられる手順を説明します。
- 箱をつくる
register_nav_menuを使用してメニュー(種類)が追加します。下の例では'primary'という箱をつくっています。通常、1つのテーマで最低1つのメニューがつくられているはずです。(テーマのfunctions.phpを参照) ここで追加されたものが管理画面の「外観」→「メニュー」から「位置の管理」タブで確認できます。'Primary Menu'の場合、"メインメニュー"と日本語訳されて表示されているはずです。// functions.php register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
- 表示するものを決める(箱の中身を決める)
管理画面の「外観」→「メニュー」から「メニューを編集」タブでメニューに表示する項目を色々と設定できます。 - 箱に入れる
ここで作成したメニューを「位置の管理」タブで"2"でつくったメニューを設定します。 - メニューを表示
表示させるのがwp_nav_menuになります。メニュー(種類)がtheme_location='primary'を渡すと設定したものがメニュー内に表示されます。// header.php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );
メニューに項目を追加 (「検索フォーム」の場合)
[メニューを編集]タブで追加できないような項目(リスト)を追加するにはwp_nav_menu_itemsをフックします。
'primary'という箱にのみ「検索フォーム(get_search_form)」を追加するようにしています。
// functions.php に追加 add_filter( 'wp_nav_menu_items', 'add_search_box_to_menu', 10, 2); function add_search_box_to_menu( $items, $args ) { if( $args->theme_location == 'primary' ){ return $items . '<li>' . get_search_form(false) . '</li>'; } }
**「位置の管理」へ進み、メインメニュー("Primary Menu")にメニューを選択。「位置の管理」でメニューを選択しないと、上の検索フォーム追加のコードが適用されません。
また。必要に応じて検索フォームをHTML5版に変更します。こちらもテーマ内のfunctions.phpを参照して'search-form'がhtml5対応(add_theme_support)させているか確認して下さい。
// functions.php に追加 function my_theme_setup() { add_theme_support( 'html5', array( 'search-form' )); } add_action( 'after_setup_theme', 'my_theme_setup', 9999);
TwentyThirteenのスタイル
例としてTwenty Twelveのメニュー内にTwenty Thirteenのメニューに表示される検索フォームを追加してみることにします。style.cssから拝借しています。
また、テーマフォルダ内のimagesフォルダをそのままコピー
/* style.css に追加*/ .site-header .search-field { background-color: transparent; background-image: url(images/search-icon.png); background-position: 5px center; background-repeat: no-repeat; background-size: 24px 24px; border: none; cursor: pointer; height: 30px; margin: 3px 0; padding: 0 0 0 34px; position: relative; -webkit-transition: width 400ms ease, background 400ms ease; transition: width 400ms ease, background 400ms ease; width: 0; } .site-header .search-field:focus { background-color: #fff; /* フォーム背景色 */ border: 2px solid #c3c0ab; /* フォーム枠線 */ cursor: text; outline: 0; width: 200px; /* フォーム幅 */ } .search-form .search-submit { display: none; }
関連記事
-
パーマリンク・スラッグなどURL カスタマイズ
管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可
-
ログイン画面・機能をカスタマイズ
CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.
-
titleタグ(wp_title) カスタマイズ
SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが
-
投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点
TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹
-
Twenty Twelve サイトタイトルをテキストから画像に置き換え
ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの
-
コメント欄停止・コメント削除
WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止
-
コメントフォーム・リストのカスタマイズ
コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ
-
多言語化プラグイン「qTranslate」
ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang
-
「Contact Form 7」 メッセージの送信に失敗~
この修正はWordPress 3.5で行われているようです。(~3.4.2) Contact Form 7で以下のエラーメッセージが出る場合は、確認してみて下さい。 「メッセージの送信に失敗
- PREV
- Composer インストール
- NEXT
- Railsの実装~アプリケーションの作成まで
Comment
[…] ナビゲーションメニューに検索フォームを追加 […]
[…] WordPress – ナビゲーションメニューに検索フォームを追加 […]
グローバルナビにだけ設置したい方にとってはちょっと困っちゃいます。以下のサイトを参考にさせていただきました。とても参考になりました。