はじめ
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点満点）で良い方です。
スタイリッシュで特殊な機能のメニューをしたい場合は、一度見て一見メニューです。
コメントを残す