【THE THOR】メニューパネルを表示させる設定方法(ザ・トール)

ブログの記事数が増えてきたら、カテゴリー別に分類をしましょう。


分類されたカテゴリーをメニュー表示しておけば、読者は関心のある記事を探しやすく、あなたのブログの滞在時間も伸びると思います。


WordPressテーマのTHE THOR(ザ・トール)にはメニューパネルが標準装備されているので、さっそく設定していきましょう。


✔本記事で出来ること

メニュー表示(ヘッダー)
  • タイトルの下(もしくは横)にメニューを表示させる
  • 画面右の「MENU」ボタンをクリックした時にメニューを表示させる
  • ページの一番下(フッター部分)にメニューを表示させる
  • スマホ限定のメニューパネル内エリアにメニューを表示させる


それでは1つずつ詳しく見ていきましょう。

ヘッダーエリアにメニューを表示させる設定方法

ヘッダーにメニューを表示させる

まずは、赤枠で囲ったヘッダーエリアにメニューを表示させる設定方法です。

いくつかやり方があるんですが、たくさん覚えるのは後回しにしましょう。


WordPressの管理画面から「外観」→「カスタマイズ」→「メニュー」


このやり方を説明します。

表示させるメニューの設定方法

ヘッダーにメニューを表示させる

僕が運営する「のぶちかブログ」を例にすると『筋トレ』とか『ダイエット』に当たる部分ですが、まずは表示させたいメニューの設定をします。

WordPress管理画面から「外観」→「カスタマイズ」を選択

外観→カスタマイズ


少し下にスクロールすると「メニュー」とい項目が出てくるので、それをクリック。

画面下の赤枠「すべての位置を表示」を選択

すべての位置を表示

続いて「新規メニューを作成」を選択

新規メニュー作成

メニュー名と位置を決定し、「次」へ

メニュー名と位置

「項目を追加」で表示させたいものを選択します

項目を追加


「項目を追加」をクリックすると右側に設定できる項目の一覧が現れるので、

メニューに表示したいものを追加していってください。

僕は「カテゴリー」しか選択していませんが、たくさん表示させることが出来ます。


これで、ヘッダーにメニューを表示させることはできるようになりましたね!

同じやり方で、一番下のフッターエリアにメニュー表示させてみてください( ´∀` )

THE THOR(ザ・トール)
5

圧倒的にSEOに強く、抜群に上位表示されやすい上に、おしゃれで美しいデザイナーズサイトが簡単に作れる『THE THOR』ザ・トールでインターネットを活用したビジネスを本格的に始めてみませんか?

画面右の「MENU」ボタンをクリックした時にメニューを表示させる

ハンバーガーメニュー

冒頭でも触れましたが、THE THOR(ザ・トール)には標準でメニューパネルが装備されています。


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

ハンバーガーメニュー真っ白

初期設定ではハンバーガーメニューをクリックしても何も表示されていません。

次はここに、メニューを表示させましょう。

 
ハンバーガーメニューって何?と思って調べたら、アイコンの横棒3本がハンバーガーに似ているからなんだって!

メニューの設定方法

メニューパネル設定

WordPress 管理画面 →外観 →ウィジェット と進みます。


ウィジェット設定画面の右側「メニューパネル」をクリックして、左側にある「利用できるウィジェット」から表示させたいものをドラッグ&ドロップで追加していきます。


とりあえず「カテゴリー」を追加したら、確認してみましょう。

ハンバーガーメニュー完成


バッチリ出てきましたね!これでハンバーガーメニューの設定完了です!

スマホ限定のメニューパネル内エリアにメニューを表示させる

スマホ限定メニュー


スマホのメニューパネルにだけ表示する設定方法があります。

WordPressの管理画面→外観→メニューと進みます。

スマホ限定メニュー手順
  1. 「メニュー項目を追加」から表示させたいものを選択(例ではカテゴリー)
  2. 「メニュー構造」の下、メニュー設定の中から【メニューパネル内エリア(スマホ限定)】にチェックを入れる
  3. 最後に「メニューを保存」を押す


これで、スマホのメニューパネル内エリアにメニューを表示完了です( ´∀` )

ただし、すでにWordPressの管理画面から「外観」→「カスタマイズ」でメニュー表示の設定を済ませているのであれば、この操作は必要ありません。


もし(スマホ限定)も設定するとスマホで2重に表示されるので、注意が必要です。

スマホ限定メニューかぶり

スマホ専用]固定フッターエリアにメニューを設定する方法


最後はモバイル端末から見た時に、画面一番下に固定で表示されている帯メニューの設定方法です。

スマホフッターディフォルト

赤枠で囲った部分。

メニューの設定方法

WordPressの管理画面→外観→カスタマイズ→ 共通エリア設定 と進みます。

共通エリア設定

固定フッターエリア設定[スマホ専用]を選択

固定フッターエリア設定[スマホ専用]


スマホ用のフッター固定メニューには、4つまでアイコンメニューを表示させることができます。

  • 項目1:ホームボタン
  • 項目2:SNS ボタン
  • 項目3:メニューボタン
  • 項目4:電話ボタン

初期設定ではアイコンの並び順は上記のように決まっていますが、

好きなリンクボタン(アイコンも選択可)を選んで表示することもできます。

アイコン一覧

当ブログでは、電話ボタンから僕のTwitterページに飛ぶ設定に変更します。

自由設定リンクボタン


最後に「公開」をクリックすればスマホの固定フッターエリアのメニュー設定は完成です! 実際にスマホで確認してみましょう。

スマホフッターカスタム


バッチリ変更されていましたね!みなさんもこの設定をうまく使って読者の方を誘導してください( ´∀` )

ホントに僕が使っているテーマはあると便利な機能が満載です。

これがプログラミングの知識がほとんどない僕でも出来てしまうので、

もしあなたもプログラミングの知識があまりなければ、THE THOR(ザ・トール)を使うことをおすすめします。

詳しくは「THE THOR(ザ・トール)のインストールから導入までのやり方」で確認してください。

今回は以上です。

ためになった方はこの記事をシェアしてもらえると嬉しいです。

WordPressテーマ『THE THOR』
圧倒的にSEOに強く・抜群に上位表示されやすい究極のSEO最適化テーマ『THE THOR(ザ・トール)』であなたもインターネットビジネスを本格的に始めてみませんか?