• HOME > 
  • WordPress > 
  • ワードプレスのナビゲーションメニューの作り方とカスタマイズ方...

ワードプレスのナビゲーションメニューの作り方とカスタマイズ方法【画像付きで解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2021年09月03日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

ナビゲーションメニューとは?

ナビゲーションメニューとは、WEBサイトにおいてお問い合わせなど主要ページへのリンクをまとめたメニューのことを指します。一般的にサイト内のヘッダー部分やフッター部分などユーザーの目に留まりやすい所に設置することで、サイト内を回遊してもらいやすくします。このページでは、ワードプレスに標準的に備わっている機能を使ってナビゲーションメニューを作成する方法をご説明します。

サイト内でメニューを設置することができる場所(メニューの位置)は使用しているテーマによって異なります。なお今回はワードプレスのバージョンは5.8、テーマはデフォルトの「TwentyTwentyOne」を使用しています。

サイトに新しくメニューを設置する

ワードプレスでは、メニューに加えたいページを選び、サイト内でメニューを表示させたい場所を指定することで簡単に設置することができます。

メニューに追加するためのページをあらかじめ複数作成しておいてください。(固定ページもしくは投稿ページで新規作成してください。)

新規メニューを作成する

ダッシュボードの左側から「外観」の「メニュー」をクリックします。

メニューの編集画面を開く

左に作成済のページが並んでいるので選んで追加するのですが、最初の状態ではページを選択できません。まずはメニュー名を決めて新規メニュー作成します。

メニューの編集画面

メニュー構造の部分のメニュー名のところに表示位置などわかりやすいものをつけます。ここでは「ヘッダーメニュー」とします。

その下にあるメニュー位置は、その名の通りサイト内でメニューを設置する場所です。TwentyTwentyOneにおいては「メインメニュー」を選択するとヘッダー部分に設置されます。

新規メニューの作成

メニュー項目を追加する

左側のページリストから追加させたいページにチェックを入れて「メニューに追加」をクリックします。

メニュー項目を追加する

固定ページや投稿ページなどワードプレスで作成した以外のページや外部サイトへのリンクをメニューに追加したい場合は、「カスタムリンク」を使用します。「URL」にリンク先のURL、「リンク文字列」にメニュー上で表示させる項目名を入力し「メニューに追加」をクリックすれば追加できます。

メニュー項目を追加する

最後に右下の「メニューを保存」をクリックして完了です。サイトを確認するとヘッダー部分にメニューを表示することができました。

「固定ページを自動追加」にチェックを入れておくと、固定ページを新規作成するたびに自動でメニュー項目にも追加されるようになります。楽なようですが、メニューに追加させたくないページまで勝手に加えられてしまうので注意が必要です。

メニューの表示を確認

メニューの設置場所はテーマによって異なります。

今回使用しているテーマ「Twenty Twenty One」では、「メインメニュー(ヘッダー部分)」と「フッターメニュー」の2カ所が選択できるようになっていますが、テーマによっては1カ所だけであったり、もっと多くの場所に設置できるようになっていたりします。

メニューはWEBサイトにおいて重要な機能ですのでテーマを選ぶ際には、メニューの設置箇所がどのように設けられているか確認しておきましょう。

なお後述するテーマファイルの編集を行えば、任意の位置にメニューを追加することも可能です。

作成したメニューを編集する

任意の順番に並べ替える

メニュー構造内では、各ページをドラッグアンドドロップすることで表示する順番を並び替えることが可能です。

メニューの並び替え

メニューの表示に階層を持たせることも簡単

ドラッグアンドドロップする際に下図のように少し右にずらして並べると、上のメニューの副項目にすることができメニューに階層を持たせることができます。

メニューに階層を持たせる

階層を持たせると、マウスオーバーした時にプルダウンで表示させることができます。(テーマによっては表示の仕方が異なったり、対応していない場合があります。)

メニューに階層を持たせる

表示名を変えたり、メニューからページを削除する

追加した各ページの右にある「▼」をクリックすると、「ナビゲーションラベル」や「削除」といった項目が表示されます。

「ナビゲーションラベル」は実際のページタイトルと異なる名前でメニューに表示させたい場合に入力します。メニュー内の表示においてはスペースが限られており、長いページタイトルでは収まりきらない場合などに重宝します。

追加したページをメニューから削除したい場合は「削除」をクリックします。

メニューの編集

各ページ自体を削除してもメニュー内からは削除されません。メニュー編集画面にエラーメッセージが表示されますので、上記の手順で不要なページを削除して下さい。

表示場所によってことなるメニューを表示させる

見栄えや利便性を考え、設置場所ごとにメニューの項目を変えたい場合があります。そういった場合は、別のメニューを新規作成しましょう。

「新しいメニューを作成しましょう」をクリックする

新たなメニューを追加作成する場合は、メニュー編集画面の真ん中あたりにある「新しいメニューを作成しましょう」の文字をクリックします。

新しいメニューを作成しましょう

後はメニューの名前を付けて、先程までと同様の手順で項目を追加していきます。今回のメニュー位置は「フッターメニュー」を選択しました。

実際にサイトを確認すると、ヘッダー部分とフッター部分とで異なるメニューを表示させることができました。

新しいメニューを確認 新しいメニューを確認

メニューの位置をカスタマイズする

各テーマが用意してあるメニューの設置位置以外の場所にメニューを表示させるには、テーマファイルの編集が必要です。

テーマファイルを編集してカスタマイズを行う場合は子テーマを作成し有効化させるようにしないと、テーマのバージョンアップの際に編集内容が上書きされてしまうので注意して下さい。またテーマファイルの編集は、サイトに重大なエラーを引き起こす可能性があります。必ずバックアップを取り、あくまでも自己責任でお願い致します。

リンク先のサムネイル
ワードプレスでの子テーマの作り方

テーマをカスタマイズする際には元のテーマ(親テーマ)の中身を受け継いだカスタマイズ用のテーマ(子テーマ)を作成して、その子テーマに対してカスタマイズを進めていきます。万が一のエラーの時でも復旧しやすく、親テーマが更新されても子テーマで行ったカスタマイズは上書きされることなく引き継がれます。 ...【もっと読む】

メニュー位置の追加までの大まかな流れは、「新しいメニュー位置を認識させる」から「表示場所にコードを追記」するという手順です。

functions.phpにコード追記する

新たにヘッダーの下にもメニューを設置できるようにします。今回はデフォルトテーマ「TwentyTwentyOne」の子テーマを使用してカスタマイズを行っていきます。「外観」にある「テーマエディター」を開き、右側のファイル一覧から「functions.php」を選択して下さい。

functions.php

functions.php内に以下ようにコードを追記し、「ファイルの更新」をクリックします。

functions.php修正

先程のメニュー編集画面に戻ってみると、メニュー位置のところに新しく「セカンドメニュー」が追加されました。

functionsの修正後

この時点では新しくメニュー位置を用意しただけなのでサイトには表示されません。この後実際に表示させたい場所にコードを追記していきます。

メニューを表示させたいに場所のファイルにコードを追記する

今回はデフォルトテーマにおけるメインメニューの下の部分にもひとつメニューを表示させてみます。先程のテーマエディターで今度は「header.php」を開きます。

コードを追記

header.php内に以下ようにコードを追記し、「ファイルの更新」をクリックします。

コードを追記

追加したコードの役割

PHP

<?php if(has_nav_menu('second_menu')): ?>

上記は条件分岐の開始を意味します。

PHP

<?php wp_nav_menu(array('container'=>'nav','theme_location'=>'second_menu')); ?>

上記は有効化させたメニューを表示させます。

wp_nav_menu」はワードプレスのメニュー機能を使って表示させるコードです。theme_locationの部分でfunctions.phpと連動させています。

PHP

<?php endif;?>

上記は条件分岐の終了を意味します。

メニュー設定で表示させたいメニューを登録する

今回はわかりやすいよう新規メニューを作成して、実際に任意の位置にメニューが表示できるかを確認します。

メニュー名「セカンドメニュー」で新規メニューを作成し、メニュー項目に「サンプルページ」という表示名のカスタムリンクを登録しました。

「メニューの位置」の項目で、今回新しく用意した「セカンドメニュー」を選択し、「メニューの保存」を行います。

新規メニューを作成

サイトを表示させて実際に任意の位置にメニューが表示できるかを確認します。

メニュー位置の追加確認 リンク先のサムネイル
ワードプレスのナビゲーションメニューに説明文を表示する方法【画像付きで解説】

ワードプレスに備わっているメニューの説明文の機能を利用すれば、ホームページでよく目にするメニュー項目の下に、英語表記を表示させるというデザインが簡単に実現できます。ナビゲーションメニュー画面の右上の「表示オプション」から説明文の入力欄を表示させることが出来ます...【もっと読む】

まとめ

ワードプレスであれば直感的な操作でメニューを作ることができ、固定ページ側でページタイトルやスラッグに変更があっても自動でメニューに反映してくれるのでとても簡単です。

広告
広告

関連する記事

サムネイル

WPでカスタム投稿に対してカスタムフィールドを設置する【プラ……

2024年12月06日
WPのカスタム投稿の編集画面にプラグインを使わずにカスタムフィールドを設置する方法について学んだので備忘録として残しておきます。 カスタムフィールドとは? Wo […]
サムネイル

WPのカテゴリー内の項目(ターム)の表示順を変更【プラグイン……

2024年12月03日
WordPressにおいてカテゴリーの項目(ターム)を一覧表示させたときの表示順をプラグインを使わずに変更する方法を学んだので備忘録として残しておきます。 ター […]
サムネイル

WPのカスタム投稿一覧表への列(カラム)の追加と並び替え【プ……

2024年12月03日
最終更新日:2024年12月05日
WPのカスタム投稿タイプを作ってサイトを構築していく中で、管理画面上での一覧ページに任意の列(カラム)を追加したり、表示順を並び替える方法を学んだので備忘録とし […]
サムネイル

WPのカスタム投稿タイプでカテゴリーやタグを設定できるように……

2024年12月03日
WordPressのカスタムタクソノミーを使ってカスタム投稿タイプにカテゴリーを設定する方法について学んだので備忘録としてまとめます。 カスタムタクソノミーとは […]
サムネイル

WPでカスタム投稿タイプを追加してページを分類する方法

2024年12月03日
WordPressのカスタム投稿機能を使ってぺージを分類する方法について学んだので備忘録としてまとめます。 カスタム投稿タイプとは? WordPressでは、標 […]
サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]