WordPress ヘッダーに横並びやプルダウンのサブメニューを追加

以前、 WordPress のフッターに「プライバシーポリシー」のページにリンクするメニューを追加しました。

以前の記事:WordPressCocoonプライバシーポリシーページのリンクのフッター設定 | Compota-Soft-Press

Wordperss メニュー外観→メニューで作成するメニューの名前を入力しフッターメニューをチェックしてメニューを作成ボタンを押します。

今回は、同様にヘッダーにメニューを追加しますが、複数のメニュー項目を使い、横並びに表示したり、プルダウンメニュー・サブメニューを実現する手順を紹介します。

メニュー項目を作成

ヘッダーに追加するメニュー項目は、以下の要素から選択できます。

  • 固定ページ
  • 投稿ページ
  • カスタムリンク
  • カテゴリー

固定ページを 2 つ作成

今回は、固定ページを二つ作って、ヘッダー内にプルダウンメニューを配置します。
固定ページ・投稿ページをメニュー項目に追加すると、そのメニューを選んだ際に、そのページが表示されます。
※ページのタイトルがデフォルトのメニューのラベル名になりますが、変更できます。

WordPress メニュー固定ページから新規追加を選択します.

固定ページの性質上 SEO スコアが低くなってしまう場合は、 noindex を設定してサイト全体の SEO スコアを下げないように対策しても良いでしょう。
参照:SEO対策 WordPressでページごと個別にnoindex設定する手順 | Compota-Soft-Press

メニュー項目の追加とサブメニュー化

作成した固定ページを、ヘッダーのメニュー項目として追加します。

メニュー項目の追加

WordPress 外観のメニューのページを開き、右下のメニューの位置でヘッダーメニューのみを選択して、作成した固定ページ二つを左上で選択してメニューに追加します.

メニュー構造に追加したメニュー項目の名前がメニューに表示されます。
変更するには、メニュー項目枠内の右側の▼ボタンを押して、ナビゲーションラベルの変更画面を開きます。
設定したら、右下の「メニューを保存」ボタンを押しましょう。

WordPress メニュー構造に追加したメニュー項目のメニューで表示する文字列はデフォルトの文字列以外に変えられます.

二つのメニュー項目をメニュー構造に追加すると、ウェブブラウザでは、下図のように指定したメニューの位置に、メニューが2つ並んで表示されます。
ナビゲーションラベルの内容の変更も反映されています。

WordPress メニュー構成にメニュー項目を二つ追加すると、メニューが二つ並んで表示されます.

メニュー項目のサブメニュー化

プルダウンメニューにするには、さらにメニュー構造を変更します。
メニュー構造に追加したメニュー項目の枠は、ドラッグ&ドロップで上下の並び順を変えられます。
また、上側にメニュー項目がある状態で、下側のメニュー項目を右にずらすことで、サブメニュー(階層化)が実現できます。

WordPress メニュー構成のメニュー項目は上側のメニュー項目より右側にずらすことでサブメニュー(階層化)ができます.
WordPress メニュー構造で追加した項目をサブメニューにするには、その項目を右側にホールド&ドラッグします。

変更後、右下の「メニューを保存」ボタンを押してから、サイトを見てみると、上位のメニュー項目 MENU の右側の▼ボタンを押すと、下位のメニュー項目「自作ゲーム等へのリンク」が表示されました。

WordPress メニュー構造でサブメニュー化すると上位メニューにホバーすると下位メニューがプルダウン表示されました

まとめ

今回は、 WordPress のヘッダー内にプルダウンするメニューを追加する手順を紹介しました。
メニューを階層化することで、ジャンル別に整理したり、コンパクトなメニューを実現できます。
その過程で、プルダウンではなく、横並びにメニューを並べる手順や、メニューの表示文字列(ナビゲーションラベル)の変更についても紹介しました。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました