こんにちは、テンテンです。
今回は、THE THOR(ザ・トール)で見やすいメニューパネルを作る方法を解説します。
【THE THORメニューパネルの完成イメージ】
①親カテゴリーと子カテゴリーの背景を色分けする
②各カテゴリーの記事数を表示する
この形を目標に解説をしていきます。
では早速解説に進みます。
WordPressで親カテゴリーと子カテゴリーを作ろう！
メニューパネルのカテゴリーを色分けをする為には、親カテゴリーと子カテゴリーの設定をする必要があります。
まずは下記画像をご覧ください。
上記画像では、「THE・THOR」、「WordPress」が色づけされていますが、この箇所が親カテゴリーとなります。
一方で、「プラグイン」は、子カテゴリーの設定としています。
【事例】
・「親カテゴリー」→THE THOR WordPress
・「子カテゴリー」→プラグイン
もし、全てのカテゴリーが色付けされてしまっている場合は、全てが親カテゴリーになっていることが原因です。
これを解決する為には、「親カテゴリー」と「子カテゴリー」にしっかり分けましょう。
親カテゴリーと子カテゴリーに分ける方法は、下記の記事で触れていますのでご参考にしてください。
こんにちは、テンテンです。 今回は、ワードプレスでカテゴリーの設定・削除方法と階層化していく方法について解説していきます。 完成のイメージ図はこちらです。 […]
では次のステップに進みます。
THE THOR(ザ・トール)でメニューパネルを作成する方法
これでメニューパネルを作成する準備が整ったので、次に移っていきます。
THE THORでメニューパネルを作成する方法は主に2つあります。
【メニューパネルを作成する方法は2つ】
①「外観」→「カスタマイズ」→「ウィジェット」→「メニューパネル」から設定する方法
②「外観」→「ウィジェット」から設定する方法(※下記画像参考）
ここでは②の方法で解説をしていきます。
まず、「外観」→「ウィジェット」に進んでください。
上記画像で、右側のオレンジ枠で囲っている場所がメニューパネルの設定箇所です。
メニューパネルには「カテゴリー」、「ナビゲーションメニュー」、「カレンダー」を設定しています。
今回は、まず操作に慣れる為にも同じように設定してみましょう！慣れてきたら自由に設定してみてください。
メニューパネルにカテゴリーを設定する方法
まず、メニューパネルにカテゴリーを設定していきます。
【メニューパネルのカテゴリー完成例】
①「利用できるウィジェット」から「カテゴリー」をメニューパネルにドラッグ＆ドロップします。
「カテゴリー」は、「利用できるウィジェット」を少しスクロールするとあります。
②「カテゴリー」の細かい設定を行います。
「投稿数を表示」と「階層を表示」にチェックを入れます。
ちなみに、カテゴリーを英語表記にしたい場合は、「タイトル」に「Category」と入力しましょう。
最後に保存して完了です。
これでメニューパネルのカテゴリー欄は完成です。一応、確認してみてください。
カテゴリーの順番の並び替えをしたい方は、下記の記事をご参考に設定してみてください。
こんにちは、テンテンです。 Tenten 先日、「俺のブログ運営」といてテーマに路線を変更しました。 それにあたって、今まであったカテゴリーなどを削除していたのですが、カテゴリーの順番も変更[…]
メニューパネルにナビゲーションメニューを設定する方法
次に、メニューパネルにナビゲーションメニューを設定していきます。
【メニューパネルのナビゲーションメニューの作成事例】
当ブログでは、ナビゲーションメニューを使って、上記のように作成しています。
この設定を行っていきます。
①「外観」→「メニュー」→「新規メニュー作成」をクリックしてください。
②「メニュー名」を入力して、「メニューを作成」に進んでください。
今回は、「メニュー名」にテストと入力しています。
③カスタムリンクの設定を行います。
URLの箇所に(http://)が予め入っていますので、この後に適当な文字を入れます。
※画像では「a」を入力しています。
「リンク文字列」には、「このブログについて」と入力しています。
※ここは、自分が好きなように入力してください。
そして、「メニュー追加」をクリックします。
④URLの部分（http://a）をすべて削除して、「メニューを保存」します。
⑤固定ページから必要なモノにチェックして「メニューに追加」をします。
ここでは、「特定商取引法に基づく表記」、「プライバシーポリシー」、「お問い合わせ」の3つをナビゲーションメニューとして設定しています。
また、ここで「親カテゴリー」と「子カテゴリー」に分ける設定をしています。
ドラッグ＆ドロップにより、親カテゴリーから一段ずらすことによって、子カテゴリーにすることが可能です。
上記画像をご覧の通り、一段ずらされているのが確認できますよね！
※青丸で囲っている場所のことです。
・このブログについて→「親カテゴリー」
・特定商取引法に基づく表記→「子カテゴリー」
・プライバシーポリシー→「子カテゴリー」
・お問い合わせ→「子カテゴリー」
最後に「メニュー保存」をクリックします。
⑥「利用できるウィジェット」から「ナビゲーションメニュー」をメニューパネルに移します。
再度、「外観」→「ウィジェット」に戻ります。
⑦「メニューを選択」という箇所から先ほど作成したメニューを選んで保存します。
これで、ナビゲーションメニューの設定はすべて完了です。念の為、確認をしましょう！
メニューパネルにカレンダーを設定する方法
メニューパネルにカレンダーを設定する方法はかなり簡単です。
先ほどと同じように「利用できるウィジェット」から「カレンダー」をメニューパネルに移すだけです。
THE THORの仕様により、カレンダーは「タイトル」を入力しないと見出しが表記されません。
なので、当ブログでは、「タイトル」に「カレンダー」と入力しています。
最後に保存して完了です。
さいごに
「見やすいメニューパネル」の作成はできましたでしょうか？
メニューパネルには、カレンダーの他にもアーカイブなど様々なウィジェットをカスタマイズすることができます。
操作に慣れてきたら、色々と試してみて自分なりにカスタマイズしてみましょう。
最後まで読んでいただきありがとうございました。