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

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

投稿日:

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

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

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

ナビゲーションメニューとは、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から送信したメールがGmailに届かない時の対応【WP ……

2024年08月01日
WordPressのCF7で作ったメールフォームから送信されたメールがGmailだと受信できなくなっていることに気づきました。WP側の送信方法を見直す必要があり、WP Mail SMTPというプラグインを導入することで解決できたので、そのとき学んだ内容を備忘録として残します。
サムネイル

ContactForm7でreCAPTCHAを設定する【安全……

2024年04月12日
ContactForm7で「安全でないメール設定が十分な防御策なく使われている」というエラーを解消するためにreCAPTCHAを設定した手順を紹介します。
サムネイル

WordPressでサイトマップページを作るプラグイン【WP……

2024年03月07日
サイトマップページを手作業で作ろとすると非常に手間が掛かりますが、WordPressの場合は専用のプラグインが存在するので、あっという間に実装することができます。
サムネイル

【無料レンタルサーバー】XREA FreeでWordPres……

2024年02月01日
「XREA Free」は複数のレンタルサーバーを提供しているGMOグループのひとつであるGMOデジロックが提供するXREA(エクセリア)というレンタルサーバーの無料プランです。
サムネイル

WordPressが使える無料レンタルサーバーおすすめ3選【……

2024年02月01日
最終更新日:2024年04月12日
無料レンタルサーバーはコストを掛けずにWebサイトを運用できるのという点でとても魅力的ですが、デメリットもあるので注意が必要です。
サムネイル

レンタルサーバー不要!WordPress.comの無料プラン……

2024年02月01日
WordPress.comの無料プランを使ってWebサイトを公開する方法をご紹介します。レンタルサーバーなしでWordPress使ったWebサイトを制作・公開・運用できるという手軽さが大きな魅力のサービスです。
サムネイル

WooCommerceとは?特徴やインストール方法を解説【W……

2024年01月05日
WooCommerceはWordPress用のECサイト構築プラグインです。WordPressで作成されたWebサイトにインストールすれば、誰でも簡単にECサイト開設・運営することができます。