カテゴリーの 一覧表示と Font Awesome アイコンを表示させるCSS｜ルクセリタス

カテゴリーは このサイトで書かれている記事を分類分けしたものなので
サイドバーにカテゴリーを設置するケースが多いと思います。

カテゴリーを表示させる方法は２通りあり、ウィジェット機能のカテゴリーと メニューを使用します。

２つの項目での表示のしかたと それぞれの違いについてまとめていきます。

ウィジェット機能

サイドバーに カテゴリーや 新着記事などを設置する際に利用するのがウィジェット機能です。

ルクセリタスでは ウィジェット項目と設置場所が多く 欲しい場所に簡単に各項目を設置することができます。

今回はこの項目の中にある カテゴリーとメニューの項目を使ってカテゴリーの一覧表示を設置していきます。

ウィジェット項目 – カテゴリーとメニューの違い

カテゴリーの項目を選択して サイドバーにカテゴリーを設置する場合、
投稿の項目にある カテゴリーに登録したカテゴリー名すべてが一覧表示となって簡単に設置されます。

カテゴリーでは ドロップダウンでの表示 などの選択が可能ですが、
表示が５０音順になってしまうのがデメリットにもなってしまいます。

ナビゲーションメニューを利用すると 順序・階層・タイトル を自由に設定し カテゴリを表示することができるのです。

カテゴリーの作成については こちらにまとめてあります。
Luxeritas ( ルクセリタス ) カテゴリー作成のポイントと設定のしかた【WordPress】

メニュー機能で カテゴリーを作成

まず新しいメニューを作成します。 メニュー名を設定したら メニューを保存をクリック

１．メニュー項目を追加 から カテゴリーを選択します。

２．よく使うものに表示されていない場合は すべてを表示 のタブをクリックし カテゴリを表示させます。

３．設定したいカテゴリにチェックを入れて メニューに追加をクリックします。

４・Luxeritas 項目を右にずらして 副項目 にすることでWordPress 属性という風に表示できます。

リストをカスタマイズしよう！

最後に リストにアイコンやアンダーラインなどを装飾するカスタマイズ方法をご紹介します！

カスタマイズのサンプルで使用するデザインはこちらです。

ウィジェット – カテゴリーリストに アイコンを入れる

ルクセリタスの 旧バージョンでは リストとアイコンがズレてしまうので inline-block の追記が必要になります。

リストすべてにアイコンを設定

カテゴリーのリストにだけにアイコンを指定する場合は .widget_categories を使用

カテゴリーの他に リスト表示のウィジェットすべてにアイコンを指定したい場合、すこしコードを変更します。

.widget_categories  li のセレクタ部分を #side .widget  li  に変更します。

リストにアンダーラインを入れる

下線のカスタマイズは別記事にまとめています。
サイドバーのリスト一覧に下線をつける CSSカスタマイズ ｜ルクセリタス

まとめ

サイドバーにカテゴリー一覧を より見やすくするための メニュー機能を使った一覧作成と
リストのデザインを FontAwesome や CSSを使ってカスタマイズする方法をまとめてみました。