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

Last Updated:2023年07月16日| コメントを残す

はじめ

WordPressでは、テーマに応じて複数の場所にメニューを追加するオプションがあります。 ただし、場合によっては、新しいメニュー位置を直接登録して追加したい場合があります。 たとえば、このサイトで使用しているIconic Oneテーマの場合、上部にメニュー(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

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

メモ:


コメントを残す

コメント