THE THORのメニューパネルの設定の仕方

当サイトでは、WordPressテーマ「THE THOR」を使用しています。

WordPressテーマ「THE THOR」には標準でメニューパネルが装備されています。

メニューパネルとは、ページ右上の3本の横線で構成されたハンバーガーメニューをクリックすると表示されるメニューのことです。

※ハンバーガーメニューは3本の横線がハンバーガーを横から見た形状に似ていることからネーミングされました。

ハンバーガーメニューとメニューパネル

ここでは、THE THORのメニューパネルのカスタマイズ設定の仕方について解説します。

THE THORのメニューパネルのカスタマイズ設定の仕方

THE THORのメニューパネルの設定は、WordPress管理画面の「外観」-「ウィジェット」に「メニューパネル」が用意されていますので、そこで設定します。

メニューパネルにカテゴリーを表示したい場合

例えば、メニューパネルにカテゴリーを追加したい場合は、「外観」-「ウィジェット」にある「カテゴリー」を選択して「メニューパネル」に登録します。

ウィジェットでメニューパネル設定

カテゴリーは、

  • ドロップダウン表示するか
  • 投稿数を表示するか
  • 階層を表示するか

の設定ができるようになっていますので任意にチェックを入れて保存します。

メニューパネルに任意のメニューを表示したい場合

メニューパネルに任意のメニューを表示したい場合は、

予め「外観」-「メニュー」でメニューを作成、登録しておき、

その後、「外観」-「ウィジェット」で「ナビゲーションメニュー」を選択して「メニューパネル」に登録し、予め作成したメニューを指定して保存します。

メニューパネルに任意のメニューを表示したい場合メニューパネルにカテゴリーとメニューの2つを登録するといったことも可能です。

「外観」-「メニュー」のメニュー設定との関連

「外観」-「メニュー」でメニューを作成すると、「メニュー設定」として、

  • ヘッダーエリア
  • フッターエリア
  • メニューパネル内エリア(スマホ限定)

のいずれにメニューを表示するか設定ができるようになっています。

ここに「メニューパネル内エリア(スマホ限定)」という項目がありますが、これは、スマホのメニューパネルにだけ表示する場合にチェックを入れるものです。

メニューの表示位置設定

例えば、PCとスマホ共通でメニューパネルに表示させるメニューのほかに、スマホにだけ別に表示させたいメニューがある場合などに活用します。

「外観」-「ウィジェット」の「メニューパネル」に登録したメニューを、

「外観」-「メニュー」の「メニュー設定」において「メニューパネル内エリア(スマホ限定)」にチェックしておくとスマホで2重に表示されますので、注意が必要です。

「外観」-「カスタマイズ」-「メニュー」との関連

尚、「外観」-「カスタマイズ」の中にも「メニュー」を管理する場所がありますが、これは、「外観」-「メニュー」と連動しているようですのでどちらか一方の設定でよさそうです。

「外観」-「カスタマイズ」-「メニュー」との関連

まとめ

以上、THE THORのハンバーガーメニューをクリックすると表示されるメニューパネルの設定の仕方を解説してみました。

基本は、「外観」-「ウィジェット」に「メニューパネル」が用意されていますのでそこにメニューを入れ込むことでメニューパネルに表示させることができます。

そして、スマホのメニューパネルにだけ表示する場合は、「外観」-「ウィジェット」の「メニューパネル」に入れ込むのではなく、「外観」-「メニュー」のメニュー設定のメニューの位置指定で「メニューパネル内エリア(スマホ表示)」にチェックを入れて対応します。