グローバルメニュー、使ってますか？
当ブログではPCから閲覧するとメニューにカーソルを合わせるとプルダウンが開くようになっています。
また、スマホから見ると横にスクロールするメニューが表示されます。（テーマ：JIN の標準機能ですが）
でもやり方が分からない！という方のための手順書です。
メニューのプルダウンの様子この記事を読み終えると、プルダウンメニューを実装することが出来ます。（Wordpress、テーマJIN）
また、カテゴリの親・子関係を図式で理解することが出来ます。
目次
グローバルメニューの作成の流れ
ざっくりと、
- メニューの作成
- メニューの編集
- メニューの登録
- 動作の確認！
順に見ていきましょう。
グローバルメニューの新規作成
もともと初期で「グローバルメニュー」という名前で設定されているはずですが、ここでは1から新規作成をしてみようと思います。
WordPressの管理画面より、「外観」＞「メニュー」を選択します。（慣れた人でも意外と触らない箇所かも？）
外観からメニューを選択新規メニューの作成を押すと、メニュー名を記入する欄がありますので「グローバルメニュー」や「トップメニュー」のような適当な名前を付けましょう。（ここでは「新規メニュー」というタイトルにしました）
グローバルメニューの編集・修正
新規作成は名前を決めて作成ボタンを押すだけでした。サーバーやドメインを借りてきた我々にとっては、簡単すぎる作業ですね！
編集・修正は少し手間ですが、要領さえわかれば10分もかかりません。
新規メニューを作成すると、記事やカテゴリなどの選択肢が左側に並んでいるはずです。ここでトップに表示したいメニューを選択します。
カテゴリ一覧にすべてチェックもちろんここでメニューに入れたくないカテゴリは、選択しなくてもＯＫ！
また、固定ページ（サイトマップやお問い合わせフォーム、プライバシーポリシーなど）や特定の記事、任意テキストなども設定できます。自由度が試されています。
※ちなみに私はテキストを追加し、ホーム（トップへ飛ぶリンク）を設定しました。（下の方に設定方法を記載しました）
ここで「カテゴリ」を設置してみましょう。
「すべて表示」タブを押し、「すべて選択」をクリックすると2秒で終わります。
「メニューに追加」を押すと、次のようにカテゴリが並んだ状態になります。
メニューに追加した状態これでは親カテゴリと子カテゴリが分けられていません。（同じ階層の状態です）
このまま登録してしまうと横一列に全部並んでしまうため、修正します。
現在はこのような状態です。
■お役立ち情報
■仕事効率化
■生活スタイル
■マインド・思考法
■ブログノウハウ
■Wordpress
■for ブロガー
■レビュー
■本
■食事
■体験
■ブログ報告と日記 他
■運営記録
つまり現在、すべて親カテゴリのみのパワー全開みたいな状態になっています。これを、親カテゴリと子カテゴリに分けて自然な形にしたい、ということです。
■お役立ち情報（親）
├ 仕事効率化
├ 生活スタイル
└ マインド・思考法
■ブログノウハウ（親）
├ WordPress
└ for ブロガー
■レビュー（親）
├ 本
├ 食事
└ 体験
■ブログ報告と日記 他（親）
└ 運営記録
こんな感じですね。
絶対にしなければならない！という意味ではないですが、子カテゴリがある方が利用者にとって分かりやすいのは確かです。
親子関係を理解しよう！設定の方法と手順
「▼」ボタンを押すとメニューが表示されます。
「○○（親カテゴリ名） 下の階層へ」を押すと親から子へ階層が変更されます。
子カテゴリへの変更同時に名前の編集も出来ます。
（例えば）実際のカテゴリ名は「投資」だけど、メニューバーの表示を「お金にまつわる話」とかにしたい！という場合は「ナビゲーションラベル」を「お金にまつわる話」に変更すればいいだけです。
間違えて孫カテゴリにしちゃった！という場合は「下の階層から外す」という表記になるので選択してあげると、孫から子カテゴリに戻ります。
カテゴリを整理した状態気持ちの良い状態になりました。ブログ内のカテゴリと同じにしてあげると、閲覧者も迷わずにすみますね。
【ワンポイント】
もし親カテゴリが思っている順番と異なる場合、ドラッグアンドドロップでも設定できます。（少し難しいですがドロップ場所を右にずらすことで、子カテゴリも同時に設定可能です。）
カテゴリのドラッグアンドドロップ孫カテゴリがある場合も同様に
子の子（孫）カテゴリがある場合も同様に設定します。
例えばこんなカテゴリ
■ブログノウハウ（親）
├ WordPress
└ for ブロガー
の、「for ブロガー」を孫カテゴリにしてみましょう。
■ブログノウハウ（親）
└ WordPress
└ for ブロガー
こんなイメージです。ブログノウハウの中の、WordPressの中の、for ブロガー カテゴリです。（少しややこしい）
孫カテゴリの設定ここまで設定出来た方なら問題ないですね？子カテゴリの下に来るように図のように設定してあげます。
すると、タイトルでは次のように表示されます。
孫カテゴリの表示子の子の子カテゴリ（ひ孫カテゴリ）も可能です。
おまけ：ホームの追加
メニューバーにカテゴリだけでなくホーム（トップ）画面へのリンクを貼りたい！という方に。
左の欄から「カスタムリンク」を選択し、ホームのURL（当ブログでは https://nyankazu.com/）を入力し、表示したい名前（ここでは ホーム）を入力するだけです。
ホームへのリンクの設定
編集後は必ず保存すること
保存し忘れに注意してください。（Wordpressあるある）
ブログのトップページに設定したい方は「グローバルナビゲーション」にチェックを入れます。
スマホ表示にもスライド表示させたい方は「スマホのスライドメニュー」にチェックを入れます。
両方にチェックを入れると当ブログと一緒になります。
スマホのスライドメニュー画面の外までスライド出来ます。孫カテゴリが多くなるとちょっと煩雑かも知れません。
テーマJINでプルダウンメニューの実装！まとめ
思ったとおりの表示がされましたか？
もしちょっと違うな〜という場合は一度、「外観」＞「カスタマイズ」＞「グローバルメニュー設定」より、フォントサイズを変えてみましょう。
分かりづらいところがあれば、記事のコメント欄やお問い合わせからお願いします。
この記事の次によく読まれる、JINのアイキャッチ画像を揃えるための知識です。
【JIN】テーマの画像写真 アイキャッチ画像の高さを揃える方法【WordPress】
- Amazonでギフト券をチャージ→お買い物の時に使うだけ！
- チャージ額×最大2.5%分のAmazonポイントが貰える！
- ギフト券の詳細やチャージ方法は公式サイトでご確認ください。
- 5,000円からのチャージ対応！
- プライム会員は更に優遇！
→ → → （つまり最大2.5%安く買える！）
これを探してましたー(*ﾟ▽ﾟ*)
さっそく参考にさせてもらいました♪
ありがとうございます！
昨日書いたばかりの記事にコメントが！
お役に立てて嬉しいです(●´ω｀●)
記事ありがとうございます！
プルの背景色はjinでは変更できないのでしょうか？
あとヘッダー画像を設定すると、プルが表示できなくなってしまいます。対応方法ご存知でしたら教えてください><
Kootamental 様
コメント有難うございます。背景色は簡単なカスタマイズでは出来ず、CSS（色や見栄えを操作するプログラム）を少し追加してあげる必要があります。
https://nyankazu.com/jin-globalmenu-tab-background-color/
こちらの記事をご覧ください。
ヘッダー画像が大きすぎることはありませんか？私の環境ではヘッダー画像を設定しても、プルダウンメニューは表示されます。