TentenのBlogに来て下さり、ありがとうございます!こちらのBlogでは、主に副業での収入アップ術や実体験に基づく投資の実績、フリーランスの生き方などについて発信しております^ ^

THE THOR(ザ・トール)で見やすいメニューパネルの設定方法

こんにちは、テンテンです。

 

今回はTHE THOR(ザ・トール)で見やすいメニューパネルを作る方法を解説します。

 

下記画像は、メニューパネルの完成系のイメージです。

 

 

【今回やること】

①親カテゴリーと子カテゴリーの背景を色分けする


②各カテゴリーに記事数を表示する

 

今回、この形を目標に解説をしていきます。

 

ワードプレスで親カテゴリーと子カテゴリーを作ろう!

 

上記、画像のようにカテゴリーの色分けをする為には、親カテゴリーと子カテゴリーに分ける必要があります。

 

 

具体的に言うとこの部分です。

 

この画像では、副業が色づけされてますが、この箇所が親カテゴリーとなっております。

 

一方で、ブログと副業基礎知識編は子カテゴリーに設定しております。

 

現在、THE THOR(ザ・トール)を使ったテンプレートで全てのカテゴリーが色付けされてしまっている場合は、全てが親カテゴリーになっていることが原因です。

 

ワードプレスでのカテゴリー設定・削除方法や階層化については、下記の記事で解説しております。

 

ブログ初心者の方でもわかりやすいように、画像付きで丁寧に説明しています。

 

あわせて読みたい

こんにちは、テンテンです。   今回は、ワードプレスでカテゴリーの設定・削除方法と階層化していく方法について解説していきます。   完成のイメージ図はこちらです。   […]

 

 

THE THOR(ザ・トール)でメニューパネルを作成する方法

 

これでTHE THOR(ザ・トール)でメニューパネルを作成する準備が整ったので、次に移っていきます。

 

THE THOR(ザ・トール)でメニューパネルを作成する方法は主に2つあります。

 

①「外観」→「カスタマイズ」→「ウィジェット」→「メニューパネル」から設定する方法

「外観」→「ウィジェット」から設定する方法(※下記画像参考)

 

ここでは②の方法で解説をしていきます。

 

まず、「外観」→「ウィジェット」に進んでください。

 

 

上記、画像の赤枠で囲っているメニューパネルの箇所で設定することが可能です。

 

①「利用できるウィジェット」から「カテゴリー」をメニューパネルに移します

 

②「カテゴリー」の設定を行います。

 

 

「投稿数を表示」と「階層を表示」にチェックを入れます。

 

最後に保存して完了です。

 

これでメニューパネルのカテゴリー欄は完成です。一応、確認してみてください。

 

次に、ナビゲーションメニューについて解説します。

 

僕のブログのメニューパネルにあるこの部分は、ナビゲーションメニューを使って設定をしております。

 

↓この部分です。

メニューパネルの2段目にナビゲーションメニューを確認することができますね。

 

 

では、この設定を行っていきます。

 

 

①「外観」→「メニュー」→「新規メニュー作成」をクリックしてください。

 

 

②「メニュー名」を入力して「メニュー保存」をしてください。

 

 

③カスタムリンクの設定を行います。

 

 

URLの箇所に(http://)が予め入っていますが、この後に適当な文字を入れます。

※画像では「a」を入力しています。

 

「リンク文字列」には、このブログについてを入力しています。

※ここは、自分が好きなように入力してください。

 

 

最後に「メニュー追加」をクリックします。

 

 

次にURLの部分(http://a)をすべて削除して、「メニューを保存」します。

 

 

最後に固定ページから、必要なモノにチェックして「メニュー追加」をします。

 

「このブログについて」→親カテゴリー

 

その他は子カテゴリーに設定しております。

 

最後に「メニュー保存」をクリックして完了です。

 

再び、「外観」→「ウィジェット」に戻ります。

 

「利用できるウィジェット」からナビゲーションメニューをメニューパネルに移します。

 

 

「メニューを選択」という箇所から先ほど保存したメニューを選んで保存します。

 

これですべて設定は完了です。

 

一応、確認してみてください。

 

最後になりますが、メニューパネルには、その他にカレンダーやアーカイブなど様々なモノをカスタマイズすることができます。

 

この辺りはお好みだと思いますので、好きなようにカスタマイズしてみてください。

 

最後まで読んでいただきありがとうございました。

最新情報をチェックしよう!
>Tenten Blog

Tenten Blog