ベストセラー人気 WordPress テーマTop 30 詳細

ヘッダーに新しいカスタムメニューを追加する(WordPress)

Last Updated:2016年9月17日| | コメントを残す

はじめ

WordPressでテーマに沿って複数の場所にメニューを追加するためのオプションが提供されます。 しかし、場合によっては、直接、新しいメニューの位置を登録して、追加したいことがあります。 たとえば、このサイトで使用されているIconic Oneテーマの場合の上部にメニュー(Top Navigation)がありません。 だから図のように新しいメニューを追加みました。 (この方法を使用して、ヘッダーの上部位置だけでなく、別の場所にも適用が可能です。)
Custom top navigation

この作業のために、まず WordPress Codexページを訪問してNavigationを追加する方法を見てみましょう。 ナビゲーションメニュー ページを訪問してみると、私たちが望む情報が記載されています。
Adding new navigation menu in WordPress

メニューを登録する

まず、次のようにメニューを登録します。 テーマのfunctions.phpに以下のようなコードを挿入します。

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

(header-menu、Header Menu、register_my_menuなどは勝手に指定が可能です。)

ヘッダファイルにコードを追加する

今メニューを任意の場所に追加する必要があります。 以下のコードをheader.phpのヘッダ部分に追加します。

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

私すぐ上に追加しました。
この時、上記のコードの前後にdiv要素を追加してもされ、arrayの次のような要素を直接追加することも可能です。

'theme_location'  => '',
'menu'            => '',
'container'       => 'div',
'container_class' => '',
'container_id'    => '',
'menu_class'      => 'menu',
'menu_id'         => '',
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => '',
'after'           => '',
'link_before'     => '',
'link_after'      => '',
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth'           => 0,
'walker'          => ''

 

メニュー項目を追加する

ルックス>メニューにアクセスすると、追加した新しいメニューの位置が登録されていることを確認することができます。
Header Menu added
(上のサンプル画像では、二つ出ていますが、これは Polylangという多言語翻訳プラグインからです。 通常は、XNUMXつ追加されていることです。)

新しいメニューを作成した後、「メニュー位置」に少し前に、新しいヘッダーメニューを指定してくれれば、ヘッダー部分にメニューが表示されます。 しかし、メニューが、私たちが好きなように表示されないことです。 今最後のステップでCSSコードを使用して、メニューの場所と書式を指定する必要があります。

CSSを使用して、メニューの書式を指定する

まず、次のようなコードをテーマのスタイルシートに追加します(CSSコードをスタイルシートに追加する方法は、 ここを参照してしてください。)

#custom_header {
float: right;
}

(もちろん、要素の名前は、実際の状況に合わせて変更してください。数を適切に調整して位置を調整してみます。)

その後、位置が右上に位置するようになります。 (場合によってはmarginを適当に適用する必要があります。)

今メニューの外観になるようにCSSを適用させてこそです。 ドロップダウンCSSコードは アーカイブを参照してください。 またはインターネットを検索して、目的の形状の適切なコードをスタイルシートに追加するだけです。

今の上にログイン/会員登録のためのメニューが追加されました。 この方法を応用して、目的の場所(フッターなど)に新しいメニューを追加することもできます。


インターネットを閲覧してみると広がるメニューとか、特殊な効果を示すメニューがあります。 このような機能を WordPressで実装する場合 UberMenuのようなメガメニューを使用してみることができます。

特にこのUberMenuは、メニューと呼ばれる制限された機能に使用されます53,000個以上販売され、評価も4.66(5点満点)で良い方です。

Uber Mega Menu for WordPress

スタイリッシュで特殊な機能のメニューをしたい場合は、一度見て一見メニューです。

メモ:


コメントを残す

コメント

?

WordPress Naver カフェを訪れる

ありがとうございます!