Luxeritasの使い方!サイドバーのカテゴリーを階層分けしてみよう!

今回は、Luxeritas(ルクセリタス)の使い方でカテゴリーを更に階層分けして表示するやり方をご紹介していきましょう。カテゴリーを更に階層分けするには、大きく分けて2つの設定が必要です。

 

Luxeritas(ルクセリタス)のカテゴリーの階層分けの画面イメージ

Luxeritas(ルクセリタス)のサイドバー部分に表示されるカテゴリー分類を階層分けができるようにしていきましょう。

まず画面イメージから確認しておきましょう。

下記のように、シンプルにデフォルトの設定のままにすれば、カテゴリーに登録されたものがそのまま表示されます。

<デフォルト設定>

このように、通常の設定では、蒸気のように全て親カテゴリなので、全て同じ上位階層に表示されています。

<変更後の設定>

このように、変更した後で、さらに細かく細分化した分類に分けることができます。

 

カテゴリーの階層分けを行うには2つの設定が必要

このカテゴリーの階層分けを行うためには2つの設定が必要になります。その設定は下記になります。

<カテゴリー分類をさらに階層分けするための2つの設定について>

・style.cssへのプログラム追加

・カテゴリーの親分類の設定

 

まずは、カテゴリーの分類を設定する前に、style.cssの設定から行っていきましょう。

style.cssへのCSSの追加設定

 

CSSの設定は、ウィジェットのカテゴリー分けしている部分にフォルダと階層分けを行う画面を表示します。

下記をCSSにコピーして貼り付けましょう。これによって、カテゴリーの階層分けする設定を行うことができます。

■<Font Awesome 4 の場合>

 

■<Font Awesome 5 の場合>

 

また、この際、重要なことが、Font Awesome 4もしくは、Font Awesome 5の設定によっても、そのCSSの表示が異なりますので、きちんと設定を確認しておきましょう。

Font Awesome 4 or 5の確認箇所はこちら

 

style.css(スタイルシート)の貼り付け箇所

続いて、style.cssにプログラムを貼り付けてみましょう!

■Luxeritas ⇒ 子テーマの編集 ⇒ 「style.css」シートを選択する

この中に、先ほどコピーしたCSSを貼り付けましょう。これで、CSSの設定は終了です。

 

カテゴリーの親分類と子分類に階層分けする設定方法について

CSSの設定ができましたら、よしこれで表示を確認してみよう!・・

・・・???

あれ??表示されてない!!

そう。。これだけでは、ダメでした。実は、もう一つ必要な設定があります。

それが、正式に「子のカテゴリー」を設定とするためのカテゴリーを決定するための設定をする必要性があります。これは、Luxeritasの設定で持っていますので、設定画面から変更していきましょう。

1.まずカテゴリータブを開いて、最も大きな分類とする設定を見ておきましょう。

 

2.親カテゴリーを作る際には、下記のように子となるカテゴリーから親カテゴリーを指定します。

 

Luxeritasというカテゴリーを親カテゴリーとする場合を例にとって、解説すると、その階層分けしたい子カテゴリーの「プラグイン」や「使い方」等のカテゴリー分類から設定を行うことができます。

ここから親のカテゴリを設定しておきましょう。

親と子のカテゴリー数の設定ズレについて

但し、親のカテゴリーの設定数に対して、子のカテゴリーの設定がきちんと一致していないと、数値が合わなくなる可能性がありますので、そこは、しっかり調整するようにしましょう。

親の数が多いということは、子の設定がされていないということになりますので、覚えておきましょう。

ちなみに、私のサイトもまだその設定を未確認済みです。

今後調整していきます。

 

完成後の画像

完成後の画像はこちら☟

 

まとめ

このように、案外カテゴリーの階層分けは、後からの見栄えの問題等が気になるようになります。

そこで、ちょっとしたカテゴリーの階層分けの仕方を覚えておくだけで、便利に利用することができることもありますので、ぜひ一度設定を試して見て下さいね。