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

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

メニューのつくられかた

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

関連記事

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

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

Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止

TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの

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

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

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

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

no image

投稿タイトル(entry-title)を非表示にする

表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー

ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ

プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill

「最近のコメント」ウィジェットをカスタマイズ

「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除

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

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

no image

アップグレードで「更新を展開しています... 」のままになった場合の対処のひとつ

久々に出会ったような気がするのでメモです。 ローカルのテスト環境でWordPressを3.7から3.8にアップグレードしようとしたところ、「更新を展開しています... 」で止まってしまい更新処理がす

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

Comment

Message

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

*

PAGE TOP ↑