【THE THORグローバルメニューのカスタマイズ】初心者向に画像付きで解説

メニュー
グローバルメニュー右

 

今回は、THE THOR(ザ・トール)グローバルメニューのカスタマイズ方法についてお伝えします。

 

グローバルメニュー以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

THE THORグローバルメニューカスタマイズの流れ

 

  • STEP1
    グローバルメニューに必要なページを作成
    ・お問い合わせページ
    ・プロフィールページ
    ・プライバシーポリシーページ
    ・サイトマップページ
  • STEP2
    グローバルメニューの表示できる位置を確認
  • STEP3-1
    グローバルメニューを作成
  • STEP3-2
    サブメニューを作成
    記事が増えてきたら作成しましょう。
  • STEP4
    グローバルメニューの表示・非表示のカスタマイズ
  • STEP5
    グローバルメニューを表示する位置のカスタマイズ
  • STEP6
    グローバルメニューレイアウトのカスタマイズ

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

【STEP1】グローバルメニューに必要なページを作成

 

まずは、グローバルメニューに必要なページを作成します。

 

最低限必要なページは下記の4ページです。新規固定ページから作成しましょう。

 

お問い合わせページ:読者さんからのお問い合わせを受けるためのページ
プロフィールページ:どんな人がブログを運営していかわかるページ
プライバシーポリシーページ:個人情報保護の法律で必要とされているページ
サイトマップページ:ブログのもくじのようなページ・SEO対策のため

 

個人情報保護に関する法律で必要とされているので、お問い合わせページを設置したら、必ずプライバシーポリシーページも設置するようにしてください。

 

必要なページを作成できたら、グローバルメニューのカスタマイズをしましょう。

 

【STEP2】グローバルメニューの表示できる位置を確認

 

THE THORはグローバルメニューの表示できる位置が3箇所あります。

 

・ヘッダーエリア(ページ上部)
・フッターアリア(ページ下部)
・メニューパネル内エリア(メニューアイコンをクリックして開く)

 

メニュー内容は、3箇所とも同じメニュー内容にカスタマイズすることも、異なるメニュー内容にカスタマイズすることもできます。

 

the thor メニューヘッダーエリア
the thor メニューフッターアリア
the thor メニューメニューパネル内エリア

 

【STEP3-1】グローバルメニューを作成

 

では、THE THORのカスタマイザーを開いてグローバルメニューを作成しましょう。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー メニュー
カスタマイザーから「メニュー」をクリックします。
カスタマイザー メニュー
グローバルメニューを「メニューを新規作成」をクリックして作成します。
カスタマイザー メニュー

メニュー名を決めて入力します。

「グローバルメニュー」や「メインメニュー」など、わかりやすい名前を入力してください。

今回は、メニューと入力しました。

カスタマイザー メニュー
メニュー名を入力して、キーボードの「enter」を押すと、+項目を追加ボタンが表示されますので、「+項目を追加」をクリックします。
カスタマイザー メニュー

「+項目を追加」ボタンをクリックすると固定ページの一覧と項目が表示されます。

カスタマイザー メニュー

投稿ページやカテゴリーのページ一覧は▼や▲をクリックすると表示されます。

しますと、投稿ページの内容やカテゴリーが表示されますので、メニューに必要な項目をクリックして追加します。

カスタマイザー メニュー
例えばカテゴリーを追加するには、カテゴリー隣の▼をクリックします。
カスタマイザー メニュー
カテゴリー一覧が表示されます。
カスタマイザー メニュー
ページ一覧やカテゴリー一覧が表示されたらメニューに追加したいページ・カテゴリーをクリックするとメニューに追加されます。
カスタマイザー メニュー

ページやカテゴリーがメニューに追加されると左側に表示されます。

追加するページやカテゴリーがすべて表示されたらカスタマイザー公開 をクリックして完了です。

 

【STEP3-2】サブメニューを作成

 

THE THORはグローバルメニューだけでなくサブメニューの作成もできるので、記事が増えたらサブメニューを作成してメニューをわかりやすく整理していきましょう。

 

サブメニュー
PCからブログを見ると、サブメニューのあるメニュー名の隣に「∨」が表示されます。

 

サブメニュー
さらに、メニュー名にカーソルを合わせると、サブメニューが表示されるようになっています。

 

サブメニュー
タブレットやスマホからブログを見ると、メニューパネルにメニューが表示されるようになっています。

 

では、THE THORのカスタマイザーを開いてサブメニューを作成しましょう。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー メニュー

あらかじめ作成してあるメニュー名をクリックします。

カスタマイザー メニュー
「+項目を追加ボタン」をクリックして、メニューに追加したいページやカテゴリーをすべてて追加します。
カスタマイザー メニュー
追加が終わったら「並べ替え」をクリックします。
カスタマイザー メニュー

サブメニューにしたいページやカテゴリーを「>」をクリックして右にスライドさせます。

戻すときは「<」をクリック、上下の順番を変えるときは「︿ ﹀ 」をそれぞれクリックします。

順番が整ったら カスタマイザー公開 をクリックして完了です。

 

【STEP4】グローバルメニューの表示・非表示のカスタマイズ

 

THE THORのグローバルメニューは、表示・非表示を選ぶことができます。

 

PCメニュー表示

PC  表示

PCメニュー非表示

PC  非表示

the thor メニュースマホ 表示
the thor メニュースマホ 非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー メニュー

共通エリアの設定>ヘッダーエリアの設定>グローバルメニュー設定

表示・非表示を選択してカスタマイザー公開 をクリック

 

【STEP5】グローバルメニューを表示する位置のカスタマイズ

 

THE THORのグローバルメニューを表示できる位置は、ヘッダーエリア・フッターエリア・メニューパネルの3箇所です。

 

the thor メニューヘッダーエリア
the thor メニューフッターアリア
the thor メニューメニューパネル内エリア

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー メニュー
カスタマイザー メニュー
カスタマイザー メニュー

メニュー>作成したメニュー>メニューの位置

位置を指定してカスタマイザー公開 をクリック

 

【STEP6】グローバルメニューレイアウトのカスタマイズ

 

THE THORのグローバルメニューレイアウトは、シンプル・ダイナミックの2種類から選ぶことができます。

 

ヘッダーレイアウトシンプル

シンプル

ヘッダーレイアウトダイナミック

ダイナミック

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー ヘッダー設定

共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーのレイアウトを選択

レイアウトを選択してカスタマイザー公開 をクリック

 


 

おつかれさまでした。

 

以上、【THE THORグローバルメニューのカスタマイズ】初心者向に画像付きで解説でした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu