グローバルメニューとは
グローバルメニューとは、ヘッダメニューやメインメニューなどとも呼ばれ、画面上部に設置されているブログの全ページに共通して表示するメニューのことです。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/Gmenu.png)
THE THORグローバルメニューカスタマイズの手順
- グローバルメニューに必要なページを作成
- お問い合わせページ
- プロフィールページ
- プライバシーポリシーページ
- サイトマップページ
- グローバルメニューを設置できる位置の確認
- ヘッダー
- フッター
- メニューパネル
- グローバルメニューを作成
- 記事が増えてきたらサブメニューを作成
【手順1】グローバルメニューに必要なページを作成
まずは、グローバルメニューに必要な下記の4ページを作成します。
- お問い合わせページ:読者の方からのお問い合わせを受けるためのページ
- プロフィールページ:どんな人がブログを運営していかわかるページ
- プライバシーポリシーページ:個人情報保護の法律で必要とされているページ
- サイトマップページ:ブログのもくじのようなページ・SEO対策のため
お問い合わせページの設置には、必ずプライバシーポリシーページの設置が必要です!
個人情報保護法という法律を守るため、忘れずに設置をお願いします。
必要なページを作成できたら、グローバルメニューのカスタマイズをしましょう。
【手順2】グローバルメニューを設置できる位置の確認
THE THORはグローバルメニューを設置できる位置は下記の3箇所です。位置ごとにおすすめのメニュー項目も合わせてお伝えします。
ヘッダーエリア(ページ上部)
- ブログの運営者情報
- お問い合わせ
- キャンペーン情報
- 見てほしいページ・カテゴリ
![the thor ヘッダー メニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/header01.png)
フッターエリア(ページ下部)
- ブログの運営者情報
- お問い合わせ
- プライバシーポリシー
- サイトマップ
![the thor フッター メニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/footer01-1-1024x608.png)
メニューパネル(クリックで開閉)
- ブログの運営者情報
- お問い合わせ
- キャンペーン情報
- 見てほしいページ・カテゴリ
![the thor メニューパネル メニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/header01-1024x608.png)
【手順3】グローバルメニューを作成
THE THORグローバルメニューは、WordPressのダッシュボード、もしくはカスタマイザーから作成します。今回は、カスタマイザーがからグローバルメニューを作成する手順を紹介します。
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
カスタマイザーの「メニュー」を開く
「メニュー」をクリックします。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorMenu023-1024x573.png)
メニューを新規作成する
「メニューを新規作成」をクリックして、メニューを新規作成します。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorMenu021-1024x573.png)
メニューを新規作成する
- メニュー名を入力
- メニュー設置位置の指定
- 「次」をクリック
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorMenu012-1024x573.png)
メニューに項目を追加する
「 +項目の追加」をクリックします。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorMenu024-1024x572.png)
メニューに項目を追加する2
「 +項目の追加」をクリックするとメニューに追加できる項目(固定ページ・投稿・カテゴリなど)が表示されます。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menu010-1024x567.png)
メニューに項目を追加する3
メニューに追加する項目をクリックします。追加された項目は左側に表示されます。
また、公開済みの投稿・カテゴリの一覧は▼をクリックで表示できます。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menu013-1024x567.png)
グローバルメニューの設置完了
「公開」をクリックするとグローバルメニューの設置は完了です。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thor020-1024x567.png)
メニュー名を変更するには
- 変更したい項目をクリック
- メニュー名を入力
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menuName-1024x573.png)
サブメニューを作成するには
サブメニューにしたい項目をドラッグ&ドロップします。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menuSub-1024x573.png)
【手順4】記事が増えてきたらサブメニューを追加
記事が増えたらサブメニューを追加して、わかりやすくメニューを整理していきましょう。
THE THORのサブメニューは下記画像のようになっています。
![the thor サブメニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/Smenu04.png)
ヘッダーエリアはサブメニューのあるメニュー横に「v」が表示されます。
![the thor サブメニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/Smenu03.png)
サブメニューのあるメニューにカーソルを合わせると、サブメニューが表示されます。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/footerM01-1024x550.png)
フッターはサブメニューが表示されません。
![the thor サブメニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menupanel-1024x550.png)
サブメニューはあらかじめ表示されます。
では、カスタマイザーからサブメニューを追加する手順について紹介します。
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
カスタマイザーのメニューを開く
「メニュー」をクリックします。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorMenu023-1024x573.png)
サブメニューを追加するメニューを選択する
あらかじめ作成してあるサブメニューを追加するメニューを選択してクリックします。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/menu03-1024x572.png)
サブメニューを追加する項目を表示する
「 +項目の追加」をクリックします。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorMenu024-1024x572.png)
サブメニューに項目を追加する
サブメニューに追加する項目をクリックします。追加された項目は左側に表示されます。
また、公開済みの投稿・カテゴリの一覧は▼をクリックで表示できます。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menu013-1024x567.png)
サブメニューの追加が完了
「公開」をクリックするとサブメニューの追加は完了です。
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thor020-1024x567.png)
THE THORグローバルメニューの表示・非表示のカスタマイズ
![the thor PC メニュー表示](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/menu-off.png)
PC メニュー表示
![スマホ メニュー 表示](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/menu-on-sp.png)
スマホ メニュー表示
![the thor PC メニュー非表示](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menu-on.png)
PC メニュー非表示
![スマホ メニュー 非表示](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/menu-off-sp.png)
スマホ メニュー非表示
では、カスタマイザーからグローバルメニュー非表示する手順を紹介します。
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
グローバルメニュー表示・非表示の選択
- 共通エリアの設定
- ヘッダーエリアの設定
- グローバルメニュー設定
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorM01-1024x573.png)
THE THORグローバルメニューを設置する位置のカスタマイズ
![the thor ヘッダー メニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/header01.png)
ヘッダーエリア
![the thor フッター メニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/footer01-1.png)
フッターエリア
![the thor メニューパネル メニュー](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/header01.png)
メニューパネル内エリア
では、カスタマイザーからグローバルメニューに設置する位置のカスタマイズ手順を紹介します。
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
グローバルメニューを設置する位置の選択
- 共通エリアの設定
- ヘッダーエリアの設定
- メニューの位置
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/thorM02-1024x573.png)
THE THORグローバルメニューレイアウトのカスタマイズ
![ロゴ レイアウト シンプル](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/dynamic.png)
シンプル
![PC ロゴを登録する](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/menu-off-1024x213.png)
ダイナミック
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
グローバルメニューのレイアウトの選択
- 共通エリアの設定
- ヘッダーエリアの設定
- ヘッダー設定
![](https://chiharudesign-thethor1.com/wp-content/uploads/2023/06/menuLayout01-1024x573.png)
以上、【THE THORグローバルメニューのカスタマイズ】初心者向に画像付きで解説でした。
お読みいただき、ありがとうございました。