【WordPress(ワードプレス)】メニューバーをカスタマイズする!

【WordPress(ワードプレス)】メニューバーをカスタマイズする!のアイキャッチ

WordPressで作成しているサイトのメニューは初心者でも簡単にカスタマイズすることができます。

メニューバーとは、ウィンドウ上部の操作項目が表示される部分であり、グローバルメニューやフッターメニューを設置することができます。

また、メニューバーを設置するだけでなく、並び替えたり、サブメニューを表示するなどユーザーが使いやすいようなメニューにカスタマイズすることが可能です。

そのため、今回はWordPress(ワードプレス)のメニューバーをカスタマイズする方法について解説していきます。




メニューバーとは

メニューバーとは、コンピューターの操作画面における、ウィンドウ上部の操作項目が表示される部分になります。

簡単にいうとメニュー一覧が表示されている横長のメニューエリアになります。

ヘッダーにメニューバーを設置することでグローバルメニューになったり、フッターにメニューバーを設置することでフッターメニューになったりすることができます。

また、グローバルメニューはユーザーが内部リンクとしてサイト内を走り回ってくれるため、SEO対策としても効果的ですのでブログを作成する場合は必ず設置しましょう。

メニューバーをカスタマイズする方法

[外観]の[メニュー]を開く

まずは、WordPress内の左側メニューにある[外観]の[メニュー]をクリックします。

メニューバーの設定方法1

すると、下記のようなサイトのメニューを設定することができる画面が表示されます。

メニューバーの設定方2

メニューに名前をつける

メニュー画面が表示されましたら、メニューに名前をつけていきましょう。

メニュー構造のメニュー名に名前を入力し[メニューを作成]をクリックします。
(今回は「ヘッダーメニュー」という名前で登録します。)

メニューバーの設定方法3

すると、メニュー名が先ほど登録した「ヘッダーメニュー」が表示されています。

メニューバーの設定方法4

作成したメニューに項目を追加する

メニュー画面が表示されましたら、作成したメニューに項目を追加していきましょう。

メニュー項目を追加に「固定ページ」、「投稿」、「カスタムリンク」、「カテゴリー」があるかと思いますが、それらの項目をメニュー並べることができます。

今回は既にカテゴリーを3つほど設定しているので、それらをヘッダーメニューに追加してみます。

まずは、カテゴリーの下矢印をクリックして、すべて表示をクリックします。

メニューバーの設定方法5

すると、カテゴリーが全て表示されますので、メニューに入れたいカテゴリーにチェックを入れて[メニューに追加]をクリックします。

メニューバーの設定方法6

[メニューに追加]をクリックすると、メニュー構造にチェックを入れたカテゴリーが追加されるので[メニューを保存]をクリックすると完了です。

メニューバーの設定方法7

メニューバーの表示位置を設定する方法

先ほどはメニューを作成しましたが、どこにメニューバーを設置するかは指定していません。

その為、ここではメニューバーの表示位置を設定する方法について紹介していきます。

まずは、先ほどと同じでメニュー画面を開き、[位置を管理]をクリックします。

メニューバーの設定方法8

すると、下記のような画面が表示されますので、「グローバルナビゲーション」の指定されたメニューのドロップダウンメニューから先ほど設定した「ヘッダーメニュー」を選択し、[変更を保存]をクリックします。
(「テーマの位置」の項目名はテーマによって名前が変わるので注意して下さい。)

メニューバーの設定方法9

改めてサイトを表示してみるとヘッダーにメニューが表示されています。

メニューバーの設定方法10

別のメニューバーを設定する方法

ヘッダーにメニューを追加していきましたが、フッターには別のメニューを表示させたいですよね。

そのため、ここでは別のメニューバーを設定する方法についてご紹介していきます。

まずは、[新しいメニューを作成しましょう。]をクリックします。

メニューバーの設定方法11

すると、メニューを作成する画面になりますので、最初と同様にメニュー名を登録し、[メニューを作成]をクリックします。
(こちらは「ヘッダーメニュー」という名前で登録します。)

メニューバーの設定方法12

すると、名前の登録が完了しますので「フッターメニュー」に追加したいメニューの項目を追加していきます。

今回はフッターのメニューバーとして表示させるため、「プライパシポリシー」と「運営者情報」をメニューに追加し、[メニューを保存]をクリックします。

メニューバーの設定方法13

メニューの保存が完了したら[位置を管理]をクリックし、フッターの項目のドロップダウンメニューから「フッタメニュー」を選択し、[変更を保存]をクリックします。

メニューバーの設定方法14

すると、フッターにはヘッダーとは違うメニューバーが表示されます。

メニューバーの設定方法15

様々なメニューバーのカスタマイズ方法

他にも様々なメニューバーのカスタマイズ方法がありますのでご紹介していきます。

メニューにTOPを追加する方法

まずは、メニューが編集したいメニュー名になっているかを確認します。

メニューバーの設定方法16

編集したいメニュー名になっていない場合

1.「編集するメニューを選択」の横に編集したいメニュー名になっているか確認しましょう。

2. もし、なっていなければメニュー名の横の下矢印を押すとドロップダウンメニューでメニュー名が一覧で表示されるのでそこからメニューを選択し、[選択]をクリックします。

メニュー項目を追加にある「カスタムリンク」の下矢印をクリックします。

メニューバーの設定方法17

すると、「URL」と「リンク文字列」という項目が表示されますので、URLにはTOP画面のURL(httpsのやつ)を、リンク文字列には「TOPへ戻る」を入力します。

入力できましたら[メニューに追加]をクリックしてメニューを追加しましょう。

メニューバーの設定方法18

メニュー構造に「TOPへ戻る」が追加されますので、[メニューを保存]をクリックしてメニューを保存します。

メニューバーの設定方法19

改めてサイトを見ると、ヘッダーメニューに「TOPへ戻る」が表示されています。

メニューバーの設定方法20

メニューを並び替える方法

メニューを並び替えるには、表示されているメニューをドラックして表示させたい位置に持っていきドロップします。

メニューバーの設定方法21

[]改めてサイトを見ると、「TOPへ戻る」が一番左に表示されています。

メニューバーの設定方法22

メニューの下にサブメニューを表示する方法

メニューの下にサブメニューを表示するには、メインメニューにしたいメニューから少し右にドラックしてドロップします。

メニューバーの設定方法23

[]改めてサイトを見ると、「TOPへ戻る」が一番左に表示されています。

メニューバーの設定方法24

[外観]の[メニュー]が見当たらない場合の対処法

メニューを編集しようと思ったけど、[外観]の[メニュー]が見当たらないということもあります。

メニューバーの設定方法25

WordPressではテーマによってメニューの設定機能が備えられていないこともあるため、その場合は自らメニュー機能を追加させてあげる必要があります。

まず、[外観]の[テーマエディタ]を開きます。

メニューバーの設定方法25-2

そして、右にファイルの一覧が表示されますので「functions.php」をクリックします。

「functions.php」をクリックしましたら、コードの一番下まで移動し、下記のコードを入力します。

メニューバーの設定方法26

コードを入力しましたら[保存]をクリックしてください。

すると、外観に「メニュー」が追加されるようになります。

メニューバーの設定方法27

まとめ

⚫︎ メニューバーとは、コンピューターの操作画面における、ウィンドウ上部の操作項目が表示される部分

⚫︎ メニューバーをカスタマイズするには、[外観]の[メニュー]を開く

⚫︎ メニューバーの表示位置を設定するには

⚫︎ 別のメニューバーを設定するには

⚫︎ 外観]の[メニュー]が見当たらない場合は「functions.php」を編集する必要がある

コメントを残す

メールアドレスが公開されることはありません。