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

今回は、Luxeritas（ルクセリタス）の使い方で、カテゴリー階層分け・分類する方法。

悩む女性１

• サイドバーにカテゴリーを更に階層分けして表示したい。
• でもやり方がわからない。

今回は、サイドバーのカテゴリーを階層分けしていく方法・やり方についてご紹介していきましょう。

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

Luxeritas（ルクセリタス）のサイドバー部分に表示されるカテゴリー分類を階層分けをして表示することで、ユーザーに見やすいカテゴリ分類ごとに階層を作ることができます。

まず下記画面をご覧下さい。画面イメージから確認しておきましょう。下記のように、シンプルにデフォルトの設定のままにすれば、カテゴリーに登録されたものがそのまま表示されます。

＜デフォルト設定＞

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

＜変更後の設定＞

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

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

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

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

style.cssへのCSSの追加設定

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

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

■＜Font Awesome 4 の場合＞

■＜Font Awesome 5 の場合＞

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

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

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

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

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

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

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

悩む女性１

・・・？？？

あれ？？表示されてない！！

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

管理者

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

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

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

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

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

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

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

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

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

今後調整していきます。

完成後の画像

完成後の画像はこちら

まとめ

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

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