ワードプレスでナビゲーションメニューをカスタマイズ(作成)！。ナビゲーションとは、何を意味するのか学んでいきましょう。今回は、ワードプレスでナビゲーションメニューをカスタマイズ(作成)！について書いていきます。
ワードプレスには、固定ページやリンクなどをナビゲーションメニューとして登録し、それをヘッダーやフッターに表示させる機能があります。またウィジェット機能を使って、サイドバーやフッターエリアにもメニューの配置が可能。
| 結論を先に話ししておきます |
| 事前に言っておきますが、メニューの配置場所は、各テーマによって異なっています。またメニューの配置と言うのは、Webサイトにとって重要なデザイン要素です。まずは作成した固定ページをメニューの項目として考えてみましょう。
それらをナビゲーションメニューとしてまとめた場合、Webページのヘッダーやフッターに配置します。またメニューの変更をしたのなら自動的に保存されませんので、変更した後は「メニューを保存」を押さなければいけません。
仮に保存せず、ページの切り替えをしようとすると別ページが開き、その中に「このサイトを離れますか？」と記載されてますのでしっかり確認した後、実行するかしないかを決めて下さい。 |
目次はコチラ
【ナビゲーションメニューの作成(動画付き)】
メニューは、Webサイトを構成するコンテンツを案内する為に、非常に重要なページ構成の要素と言えます。メニューそのものが適切にできていないと、Webサイト内に於いて、迷子になってしまう恐れがあります。
反対に、Webサイト構成がしっかりできていて、更にメニューが適切にナビゲートするのであれば、Webサイト作成者の意図通りに、利用者を商品販売ページへ誘導することも可能となるでしょう。
その際、メニューの項目と、そのリンク先を指定したナビゲーションメニューを作成してみます。メニューに登録する固定ページや投稿の「カテゴリ」「タグ」「外部リンク」の内容は、任意に設定可能となります。
| メニューを設置するページや基となっているレイアウトに於いて、どの位置に、どのナビゲーションメニューを配置するのかを設定します。 |
ではここで動画を視聴してみて下さい。題して「【WordPress】ナビゲーションメニュー(カスタムメニュー)の基本的な使い方」です。
【ナビゲーションメニューの位置】
ワードプレスにおけるデフォルトでのメインメニューは、各ページの最上段付近やヘッダー画像の下に表示させることが可能となります。当ブログ(miブログ)のトップページを参考にしてみて下さい。
これらの位置におけるメニューは、汎用性が非常に高く、利用者も慣れているユーザーが多いと言えます。ちなみにですが、ここではワードプレステーマの「DIVER」を使ってブログの作成をしています。
「DIVER」のテーマを使わなくても、普通にメニューを作成することはできます。また当ブログ(miブログ)では、設定している場所が3ヶ所あります。その位置は「ヘッダー」「ミニヘッダー」「フッター」の3ヶ所です。
| サイドバーの場合、ナビゲーションメニューとは言わず「ウィジェット」と言います。サイドバーは「ウィジェット」を使って、ナビゲーションメニューとして作成していく形になります。そのことも覚えておきましょう。
下記に当ブログ(miブログ)で作成しているメニューがどこに配置しているのかを図解を用いて説明していきますので参考にしてみて下さい。一応その場所は「ヘッダー」「ミニヘッダー」「フッター」の3ヶ所です。 |
- 下記の図解は、ヘッダー部分です。トップページのヘッダーがある直ぐ下のところに「緑色枠」で囲まれている「ホーム」「お問い合わせ」「サイトマップ」が、ナビゲーションメニューとして作成したものです。
- 次が、ミニヘッダー部分です。それがトップページ右上部に表示されている「赤色枠」で囲まれている「「miブログ」のテーマ」「サイトマップ」「プライバシーポリシー」です。
- 最後に、フッター部分です。トップページの左下部に表示されている「オレンジ色枠」で囲まれている「「miブログ」のテーマ」「サイトマップ」「プライバシーポリシー」です。ここは、ミニヘッダー部分と同じ内容です。
| それぞれ「ヘッダー」「ミニヘッダー」「フッター」と配置しています。このメニューの数を増やすも減らすもあなた次第です。 |
【ナビゲーションメニューを作成、配置してみよう】
実際に、サイドメニューの中の「外観」→「メニュー」を開いて、メニューの作成をしてみたいと思います。その際、分かりやすく図解を用いて説明していきます。メニューの作り方が分からない方は参考にしてみて下さい。
先にメニューを開くと「メニュー項目を追加」と言う項目があります。その中には「固定ページ」「投稿」「カスタムリンク」「カテゴリ」と4つの項目に分かれています。それではやっていきましょう。
- まずは下記の図解を見て下さい。上段「水色枠」、中段「黄色枠」、下段「赤色枠」、それぞれに於いて、まだ何もない状態です。取りあえずこの光景を覚えておいて下さい。これからメニューの作成をしていきます。
| 最初に話ししておきますが、メニューを作成する上で「投稿ページから記事の公開」もしくは「固定ページからページの作成(公開)」をしているものがないと、メニューを作成することはできません。
メインとしては「固定ページからページの作成(公開)」がある方が良いです。私もそうですが、他のWebサイトやブログを運営されている方々も「固定ページからページの作成(公開)」をしているものを優先にメニュー表示しています。 |
- それではメニューの作成をしていきましょう。サイドバーにある「黄色枠」上にマウスを移動すると、プルダウンメニューが表示されます。その後「オレンジ色枠」で囲まれている「メニュー」を押して下さい。
- 初めてメニューを開くと、何もないまっさらな状態です。メニューの作成はここから進めていきます。
- それでは初めに「桃色枠」で囲まれているボックス内に、メニュー名を入力しましょう。例では、ヘッダーにメニューを入れたいので「ヘッダー」と入力しています。次に「緑色枠」で囲まれている「メニューを作成」を押しましょう。
- するとメニュー項目を追加のところに「赤色枠」で囲まれている固定ページの中の「オレンジ色枠」で「最近」が最初に選択されている状態で表示されます。
- 次に「緑色枠」で囲まれている「すべて表示」側に選択し直して下さい。表示させたら、全て「水色枠」で囲まれているボックス内にチェックを入れ「紫色枠」で囲まれている「メニューに追加」を押しましょう。
一応ここでは「ホーム」「お問い合わせはコチラ」「サイトマップ」の3つにチェックを入れてますが、こちらに合わせる必要はありません。
| 冒頭でも説明してますが、メニューを作成する上で「投稿ページから記事の公開」もしくは「固定ページからページの作成(公開)」がないと選択できるものがないのでメニューを作成することはできません。 |
- すると「水色枠」で囲まれている3つの内容それぞれが、メニュー構造側へ移動しました。この内容をヘッダーに表示させたいので「紫色枠」で囲まれている「ヘッダーのナビゲーション」にチェックを入れましょう。
この状態で良ければ最後に「緑色枠」で囲まれている「メニューを保存」を押して下さい。
- 上記の画面で、メニューを保存を実行すると「紫色枠」で囲まれているように「「ヘッダー」を更新しました」と表示されます。これで保存は完了です。
- 保存後、一度、トップページを開いて確認してみましょう。こちらでは、ヘッダー画像の下「水色枠」で囲まれているところに表示させることができました。表示させたメニューには、それぞれリンクが貼られています。
| 「ホーム」＝トップページへ移動。「お問い合わせ」＝メールフォームへ移動。「サイトマップ」＝当ブログ(miブログ)のページが構成されているページへ移動。 |
| 以上で、ヘッダーにカスタムメニューを表示させることができました。では次に、同じヘッダーでも、トップページの右上部に「ミニヘッダー」の表示と「フッター」にも表示させてみたいと思います。 |
- 今度は「赤色枠」で囲まれている「新しいメニューを作成しましょう。」を押して下さい。
- 次に「オレンジ色枠」で囲まれているボックス内に「フッター」「ミニヘッダー」と入力します。この設定は、あくまでもコチラ側の設定なので真似する必要はありません。
それで良ければ「緑色枠」で囲まれている「メニューを作成」を押しましょう。
- ここでは2つの項目を使います。「固定ページ」と「カスタムリンク」です。まずは「水色枠」で囲まれている「固定ページ」から「オレンジ色枠」で囲まれていてチェックが付いている2つを選択します。
そして「紫色枠」で囲まれている「メニューに追加」を押します。そのまま次いきましょう。
- 次に「桃色枠」で囲まれている「カスタムリンク」を開きましょう。そして「水色枠」で囲まれている2箇所「URL」と「文字列」を埋めて下さい。そして最後に「黄色枠」で囲まれている「メニューに追加」を押しましょう。
- すると「固定ページ」と「カスタムリンク」から設定した内容が「オレンジ色枠」内に表示することができました。次に「紫色枠」で囲まれている「ミニヘッダーのメニュー」と「フッターのメニュー」にチェックを入れましょう。
では最後に「水色枠」で囲まれている「メニューを保存」を押して保存しましょう。
- では最後にトップページを開いて下さい。右上部の方に「黄色枠」で囲まれている「ミニヘッダー」のメニューが確認できるかと思います。
- そして左下部には「緑色枠」で囲まれている「フッター」のメニューも確認できます。
| 「ヘッダー」「ミニヘッダー」「フッター」は、誰でも簡単に設定することは可能です。ただ冒頭で何度も伝えている通り「投稿ページから記事の公開」もしくは「固定ページからページの作成(公開)」がなければメニューを作成することはできません。 |
【パンくずリストとは(動画付き)】
Webページのナビゲーション機能の一つで、非常に良く使われているものの中に「パンくずリスト」と言うものがあります。Webサイトの構成は、トップページから階層的になっていることが多いです。
またそのような基点となるページからの構成を順に表示したものが「パンくずリスト」です。ところで「パンくずリスト」と言うのは、どこから来た名前か分かりますか？私も数年前に知った訳ですが。それは。
「パンくずリスト」は、グリム童話の中の「ヘンゼルとグレーテル」に出てきます。思いの外、驚きませんか？「パンくずリスト」に関係した部分のあらすじを簡単に説明すると次のようなことです。
| 森に貧しい家族がいて、ある日のこと、両親はまだ小さな兄のヘンゼルと妹のグレーテルを口減らしの為に森の奥に捨ててきたと言う物語です。 |
ではここで動画を視聴してみて下さい。題して「パンくずリストの正しい使い方」です。
今回は、以上となります。ワードプレスでナビゲーションメニューをカスタマイズ(作成)！について理解して頂けたでしょうか。まずは何でも触ってみることが大事です。そして焦らないこと。頑張っていきましょう。
