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

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

メニューのつくられかた

まずは、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;
}
  • このエントリーをはてなブックマークに追加

関連記事

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

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

「続きを読む」(moreタグ)をカスタマイズ

WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、

テーマ ブックマーク 2013

2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top

「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう

Google 検索結果をみていたら、Wordpressの投稿のURLが実際のものより異様に長くなっているので何かなと思って調査してみました。 このような感じで http://kwski.net/ca

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

テーマ 「Responsive」 カスタマイズ

デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ

新年早々やらかした

あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

Twenty Fourteen カスタマイズ

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

Comment

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑