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