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

はじめ

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

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

メニューを登録する

まず、次のようにメニューを登録します。 テーマの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'          => ''

メニュー項目を追加する

今 ルックス>メニューにアクセスすると、追加した新しいメニューの位置が登録されていることを確認することができます。

（上のサンプル画像では、二つ出ていますが、これは Polylangという多言語翻訳プラグインからです。 通常は、XNUMXつ追加されていることです。）

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

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

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

#custom_header {
float: right;
}

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

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

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

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

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

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

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

メモ：

• メニューに「戻る」の項目を追加する