こんにちは、あゆりです。
今回は、THE THOR(ザ・トール)でのメニューパネルの設定方法を画像付きで解説します。
・カテゴリーを作成しよう
・THE THORでのメニューパネル設定方法
まず、メニューパネルとはこちらですね。
メニューパネルを設置する目的としては、主にスマートフォン表示時にメニューバーの役割を果たしてくれるためです。
設置する項目は、自分で好きなように選択できるので試してみてくださいね。
ここでは、設置方法を画像付きで解説していきます。
それではさっそく見ていきましょう。
メニューパネルに追加できるウィジェット
メニューパネルに追加できるウィジェットは以下です。
もちろんカスタマイズして好きなように表示することもできますが、ひとまず以下の中からでしたら好きに設定できます。
今回は、この中から当ブログで実際に設定している「ナビゲーションメニュー」と、よく設置されている「カテゴリー」、「[THE]人気記事」の設定方法を紹介します。
カテゴリーを作成しよう
多くの個人ブログでメニューパネルに設置されている項目は、カテゴリーです。
なので、まずはカテゴリーの作成方法から解説していきます。
※すでに作成している方、メニューパネルに設置するつもりないよという方は飛ばしていただいても大丈夫です。
それでは、作成していきましょう。
①「投稿」→「カテゴリー」に進む
②「名前」と「スラッグ」を入力して、「新規カテゴリーを追加」をクリックする
「名前」には、好きなカテゴリー名を入力しましょう。
次に「スラッグ」ですが、スラッグとは記事やカテゴリーなどに付与される名前で、URLのうしろにくっつきます。
例えば、当ブログで「TRAVEL」というカテゴリーをクリックした際のURLが以下です。
赤線が引いている箇所が、スラッグの設定部分です。
日本語のまま設定されている人もいますが、できるだけカテゴリーを意味する半角英数字で入力しましょう。
今回は、親カテゴリーを作成しているので、「親カテゴリー」は、なしのままで「新規カテゴリーを追加」をクリックします。
ちなみに子カテゴリー作成の場合は、事前に作成した親カテゴリーの選択をすればOKです。
上記画像のように作成したカテゴリーが追加されていれば完了です。
スポンサードサーチ
THE THORでのメニューパネル設定方法
それでは、メニューパネルを設定していきましょう。
メニューパネルの設定方法は次の2通りあります。
②「外観」→「カスタマイズ」→「ウィジェット」→「メニューパネル」から設定
ここでは、①の方法で解説していきます。
まずは、「外観」→「ウィジェット」に進みます。
青枠で囲っている場所が、メニューパネルを設定する箇所です。
当ブログでは、ナビゲーションメニューを使用してカテゴリーを表示していますが、普通にカテゴリーを作成して表示させることも可能です。
どちらのやり方も解説するので、カテゴリーを設置する際には、お好きなやり方でやってみてくださいね。
メニューパネルにカテゴリーを表示させる方法
まずは、メニューパネルにカテゴリーを表示させる方法を解説します。
①「利用できるウィジェット」から「カテゴリー」をメニューパネルにドラッグ&ドロップする
赤枠の利用できるウィジェットからカテゴリーを探して、メニューパネルに移動させます。
カテゴリーは、下に少しスクロールすると見つかります。
②「カテゴリー」の設定をする
メニューパネルに移動ができたら、細かい設定をしていきます。
「タイトル」は、何も入力しないとそのまま日本語で表示されるので、英語表記にしたい場合には、「Category」と入力しましょう。
あとは、ひとまず「投稿数を表示」と「階層を表示」にチェックを入れておけば大丈夫です。
最後に、「保存」をクリックして完了です。
ちなみに、このやり方でメニューパネルにカテゴリーを表示するメリットとしては、投稿数を表示できることです。
ただ、カテゴリーの表示順の並び替えは、「Category Order and Taxonomy Terms Order」というプラグインを使用しないといけないです。
メニューパネルにナビゲーションメニューを表示させる方法
次に、メニューパネルにナビゲーションメニューを表示させる方法を解説します。
当ブログでは、カテゴリーはナビゲーションメニューで表示させていますが、上で紹介したやり方でもどちらでも良いと思います。
ナビゲーションメニューでは、他にも下記画像のような項目を設置することが可能です。
それでは、実際に設定してみましょう。
まずは、メニューパネルに表示させるナビゲーションメニューを作成する必要があります。
①「外観」→「メニュー」→「新しいメニューを作成しましょう。」をクリックする
②「メニュー名」を入力して、「メニューを作成」をクリックする
ここでは、メニュー名をメニューパネルとしていますが、なんでも大丈夫です。
③カスタムリンクの作成をする
「URL」の箇所には、あらかじめ「http://」と入力されているので、この後に適当に文字列を入力します。後ほど削除するのでなんでも良いです。
「リンク文字列」には、自分の好きなように入力しましょう。
入力ができたら、「メニューに追加」をクリックします。
④URLを削除し、「メニューを保存」をクリックする
⑤固定ページから表示したいものにチェックを入れて、「メニューに追加」をクリックする
ここでは、「固定ページ」の「あゆりのプロフィール」、「プライバシーポリシー」、「お問い合わせ」の3つを設定していますが、こちらは自分が表示したいものを選んでくださいね。
例えば、「投稿」から好きな投稿を選択して表示したり、カテゴリーから表示したいカテゴリーを選択することも可能です。
ちなみに私は、このやり方でカテゴリーをメニューパネルに表示しています。
さて、メニューに追加ができたら、「親カテゴリー」と「子カテゴリー」に分けます。
ドラッグ&ドロップで親カテゴリーから一段ずらすことで、上記画像のように子カテゴリーにすることができます。
設定ができたら、「メニューを保存」をクリックします。
⑥作成したナビゲーションメニューをメニューパネルに設置する
「外観」→「ウィジェット」に進みます。
利用できるウィジェットから「ナビゲーションメニュー」を探して、メニューパネルにドロップ&ドロップします。
⑦作成したメニューを選んで保存する
先ほど作成したナビゲーションメニューを選択して「保存」をクリックします。
これで、メニューパネルにナビゲーションメニューの設定は完了です。
ちなみにナビゲーションメニューを使用してカテゴリーを表示するメリットとしては、表示順を好きに並べ替えることができるということです。
投稿数などは表示されないので、表示したい場合は上のやり方で設定することをおすすめします。
メニューパネルに[THE]人気記事を表示させる方法
最後に、メニューパネルに[THE]人気記事を表示させる方法を解説します。
①「[THE]人気記事」をメニューパネルにドラッグ&ドロップする
まずは、上記画像の赤枠で囲っている「[THE]人気記事」を青枠のメニューパネルにドラッグ&ドロップします。
メニューパネル内で配置したい順番の箇所に持っていきましょう。
②「[THE]人気記事」の細かい設定をする
移動できたら、[THE]人気記事の「▼」をクリックします。
上記画像のように、人気記事のウィジェットは、設定項目がいくつかあるので一つずつ設定していきましょう。
- タイトル：好きなタイトルを入力
- 表示する投稿数：表示したい投稿数を選択
- 投稿日の表示有無：記事の投稿日を表示したい場合はチェック
- 更新日の表示有無：記事の更新日を表示したい場合はチェック
- 閲覧数の表示有無：記事の閲覧数を表示したい場合はチェック
- ノーマルレイアウト(左画像)に変更：画像の表示を左にしたい場合はチェック
- アイキャッチ上のカテゴリの表示有無：カテゴリを非表示にしたい場合はチェック
- 画像アスペクト比：アイキャッチ画像の縦横の比率を選択
- 本文抜粋文字数：本文を表示した場合は表示したい文字数を入力
上記を参考にして設定してみてくださいね。
一応、「ノーマルレイアウト(左画像)に変更」と「画像アスペクト比」だけ実際にどういう見た目になるか画像で紹介します。
ノーマルレイアウト(左画像)に変更
こちらにチェックをしないと下記画像のように、上にアイキャッチ画像、下にタイトル(+本文抜粋)というレイアウトになります
ちなみにチェックをすると、このように左に画像、右に文字となります。
自分の好きな方で良いと思いますよ。
画像アスペクト比
アイキャッチ画像アスペクト比は、「16:9」「4:3」「1:1」「0(非表示)」から選択できます。
こんな感じですね。
こちらも好きなサイズを選択しましょう。
最後に、「保存」をクリックして完了です。
おわりに
無事にメニューパネルの設定はできましたか？
メニューパネルには、自分の好きなウィジェットを設置できるので、いろいろ試してみてくださいね。
さて、メニューパネルの設定が完了したら、メインビジュアルなどのトップページの設定をしていきましょう。
別記事のTHE THOR(ザ・トール)でトップページの設定方法【画像付き】で詳しく解説しているのでよかったらぜひ。
というわけで今回は以上です。
こんにちは、あゆりです。今回は、THE THOR(ザ・トール)でのトップページの設定方法を画像付きで解説します。トップページで設定できる項目は、以下の「本記事の内容」で記載されている6項目です。・メインビジュアルの設定方法・メインビ[…]