ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。

メニューのつくられかた

まずは、WordPressでメニューがつくられる手順を説明します。

  1. 箱をつくる
    register_nav_menuを使用してメニュー(種類)が追加します。下の例では'primary'という箱をつくっています。通常、1つのテーマで最低1つのメニューがつくられているはずです。(テーマのfunctions.phpを参照) ここで追加されたものが管理画面の「外観」→「メニュー」から「位置の管理」タブで確認できます。'Primary Menu'の場合、"メインメニュー"と日本語訳されて表示されているはずです。

    // functions.php
    register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
    
  2. 表示するものを決める(箱の中身を決める)
    管理画面の「外観」→「メニュー」から「メニューを編集」タブでメニューに表示する項目を色々と設定できます。
  3. 箱に入れる
    ここで作成したメニューを「位置の管理」タブで"2"でつくったメニューを設定します。
  4. メニューを表示
    表示させるのが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;
}
  • このエントリーをはてなブックマークに追加

関連記事

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

サイトのキャプチャをショートコードで生成してくれる「Browser Shots」

外部のサイトを紹介する際にそのサイトのキャプチャが添えられているとイメージがつかみやすくなりクリックのモチベーションが上がるような気がします。 今回は、ショートコード一行でサイトのスクリーンショット

Twenty Twelve 投稿日・投稿者を非表示に

TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に

画像マウスオーバーでキャプションを表示

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回

Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示

日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日

投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ

ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手

Twenty Fourteen カスタマイズ

「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent

Twenty Ten カスタマイズ

Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a

ウィジェット関連のカスタマイズ・プラグイン

リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M

Comment

Message

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

*

PAGE TOP ↑