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

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

メニューのつくられかた

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

関連記事

no image

スライダー・ギャラリー プラグイン

WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

Twenty Fourteen カスタマイズ

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

head内に出力される要素を整理

Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

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

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

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

Twenty Twelve 投稿者情報を表示/非表示に

TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

Comment

Message

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

*

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

    PAGE TOP ↑