人生を楽しくする「まちゅブログ」はここをクリック

STORK19(ストーク)でグローバルメニューを作成して設定する方法

スポンサーリンク

みんなの声
サイトのヘッダーあたりのナビメニューってどうすれば作れる?

 

今回はこのような疑問を解決します。

 

>>本記事でわかること
  • グローバルメニューの設定方法
  • 副項目メニューの設定方法

 

まちゅ
どうも、まちゅです!

 

まちゅ
この記事では、WordPressサイトでグローバルメニューを作成する方法を解説していくよ!

本記事ではSTORK19テーマでのグローバルメニュー設定方法を解説しますが、どのテーマでもさほど変わらないと思いますので他テーマの方もぜひ参考にしてください!

 

そもそもグローバルメニューとは何なのかと言うと、

 

言わばサイトの構成を分かりやすくするための案内リンクです。

 

まちゅ
まちゅラボで言うとこんな感じ!

 

PCのグローバルメニュー

 

このようにグローバルメニューを設定しておく事は、

 

サイトの構成を分かりやすくするだけでなく、訪問者が目的のコンテンツにたどり着きやすくするという役割も持っています。

 

まちゅ
それと、グローバルメニューは基本的にサイト内の全てのページに表示されるよ!

 

グローバルメニューを設定すると、

訪問者がサイト内のどのページにいても、他の記事へ飛びやすいという事ですね!

 

それではグローバルメニューが何なのか理解したところで、

 

実際に作成して設定してみましょう!

 

スポンサーリンク

グローバルメニューを作成する

グローバルメニューを作成する

グローバルメニューを作成するには、

WordPress管理画面にて、

【外観】→【メニュー】の順にクリックします。

 

wordpress管理画面

 

そしたら、メニューの作成画面が開くので、

【新しいメニューを作成しましょう。】をクリックします。

 

新しいメニューの作成

 

メニュー名の入力

次に、メニュー名を入力します。

 

任意の名称でOKですが、ここでは分かりやすく、

「グローバルメニュー」と入力します。

 

メニュー名を入力したら、

【メニューを作成】をクリックしましょう。

 

メニューを作成

 

そしたらメニュー構造を作成できるようになるので、実際にメニューを作成していきます。

 

メニュー構造の作成

基本的に、

「メニュー項目を追加」の欄から

「メニュー構造」に、表示したいページを追加していく流れとなります。

 

メニュー構造

 

メニュー項目を追加の欄からは、

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

から追加したいページを選択することが出来ます。

 

カスタムリンクというのは、

メニューに表示したいページが、固定ページにも投稿にもカテゴリーにも無い時に、追加したいページのURLを直接入力する時に使います。

 

まちゅ
僕のサイトのメニュー構造はこんな感じ!

 

メニュー構造完成

 

これでメニュー構造が完成しましたね!

 

あとはメニュー設定欄から、

作成したメニューをどの位置に設定するか選択します。

 

メニューの位置

 

STORK19の場合、

  1. グローバルナビ(PC用)
  2. グローバルナビ(モバイル用)
  3. フッターナビ

の3か所のメニュー位置を選択できます。

 

今回はグローバルメニューの設定なので、

 

グローバルナビ(PC用)とグローバルナビ(モバイル用)を選択します。

 

まちゅ
もちろん、PCとモバイルのグローバルメニューを別々に設定する事も出来るよ!

 

これでメニューの設定が全て完了しました!

 

最後に忘れず、

【メニューを保存】をクリック!

これでサイトにメニューが反映されます!

 

ちなみにSTORK19でモバイルのグローバルメニューを設定した場合は、こんな感じに表示されます。

モバイルのグローバルメニュー

 

メニュー項目は1列で表示され、モバイル画面では全てのメニュー項目が表示できない場合は、グローバルメニューを左右にスクロール出来る仕組みなっています。

 

※この仕様はSTORK19のデフォルト仕様であり、テーマによって異なります。

 

まちゅ
何はともあれ、これでメニューが完成した!やったー!

 

皆さんお疲れさまでした。

ですがもう1つだけ説明したい事があるので、

時間に余裕があれば、次も合わせてお読みください。

 

グローバルメニューの副項目の設定

副項目を作成する

メニューに副項目を設定して階層化させる事が可能です。

 

副項目は、

副項目を設定したメニューをマウスオーバーした際に表示されます。

 

副項目

 

 

まちゅ
メニューを階層化して、更にユーザビリティを向上させようという事ですね!

 

この副項目の設定は全然難しくありませんのでご安心を。

 

副項目の設定

 

メニューの編集画面にて、

 

副項目を設定したい項目の下に、副項目を並べます。

 

メニュー項目の並び替えは、ドラッグして簡単に可能です。

 

そして副項目に設定したい項目を少し右にずらすくらいの感じでドラッグしてみてください。

 

すると副項目として設定されます。

 

これで終わりです!

最後に忘れず、【メニューを保存】してくださいね!

 

まとめ:STORK19でグローバルメニューを作成して設定する方法

まとめ

お疲れさまでした。

 

グローバルメニューはブログやサイトにとって必須と言っても過言ではありません。

 

サイト内の記事数が増えれば増えるほど、グローバルメニューの設定は重要になってきます。

 

記事が少ないうちは、訪問者が迷うことも無いかもしれませんが、早めに作っておいて損は無さそうですね。

 

 

それでは今回はこれで!

 

バイチャ(^^)/

 

 

STORK19(ストーク)をインストールして子テーマを有効化する方法

 

スポンサーリンク