【WordPress】カテゴリーウィジェットのデザインをカスタマイズしてみた！

2020年2月9日2021年7月17日WordPress

WordPressのカテゴリーウィジェットってシンプルですよね。それはそれでいいとは思いますが、私はもう少しなんとかしたいと思っていました。

そこで今回はカテゴリーウィジェットのデザインをカスタマイズしたので忘れないようにメモしておきます。

Contents

1. アイコンをつける
- 1.1. カテゴリーごとにアイコンをつける
2. 記事数の表示カスタマイズ
3. こんなデザインも！
4. 最後に

アイコンをつける

サンプル

まずはシンプルに親カテゴリーと子カテゴリーにアイコンをつけて行間を調整してみました。

CSS

/*--------------------
  カテゴリーウィジェット
--------------------*/
.widget_categories ul li {
    margin:0;
    padding:0;
}

.widget_categories ul li a {
    display:block;
    padding:5px 10px;
    text-decoration:none;
}

/*親カテゴリーのアイコン*/
.widget_categories ul li a:before {
    font-family:"Font Awesome 5 Free";
    content:"f07c";
    font-weight:900;
    margin-right:5px;    /*アイコン右側の余白*/
}

/*子カテゴリーのアイコン*/
.widget_categories ul li ul li a:before {
     font-family:"Font Awesome 5 Free";
    content:"f0da";
    font-weight:900;
    margin-right:5px;    /*アイコン右側の余白*/
}

/*マウスホバー時*/
.widget_categories ul li a:hover {
    background:#f68;
    color:#fff;
    transition:0.5s;
}

アイコンはFont Awesomeを使用しています。Font Awesomeについては下の記事を参考にしてください。

Webアイコン(FontAwesome)を使ってみよう！

この記事ではFont Awesome5となっていますが、新バージョン6でも同じように使えます。 >FontAwesome ...

https://kirari-yums.net/post-3228/

リストの黒ポチを消すには

リストの黒ポチ(黒丸)を消すには以下のようにしてください。

ul {list-style:none;}

カテゴリーごとにアイコンをつける

カテゴリーごとに違うアイコンをつけることもできます。

カテゴリー毎にアイコンをつける場合のセレクタを以下のように記述してください。

.widget_categories ul li.cat-item-(カテゴリーID) a::before

li.cat-item- の後にカテゴリーIDを入れます。カテゴリーIDの調べ方については以下の記事に書いています。

【WordPress】投稿IDとカテゴリーなどのIDを調べる方法 | きらり☆彡

WordPressを使っているとプラグインの設定などで投稿IDやカテゴリーIDが必要なときがあります。ですが ...

https://kirari-yums.net/【wordpress】投稿idとカテゴリーなど...

例えばカテゴリーIDが「7」の場合

.widget_categories ul li.cat-item-7 > a::before {
    font-family:"Font Awesome 5 Free";
    content:"f2d2";
    margin-right:5px;
}

このようにカテゴリーごとにアイコンを指定すれば違うアイコンにすることができます。。

きらり

以前結耶が「カテゴリーごとに画像やアイコンをつけられるプラグイン」を紹介してたけどこれならプラグインを使わずに違うアイコンにできるんだね！

結耶

そうだよ～(^-^)

記事数の表示カスタマイズ

カテゴリーの横に記事数を表示させるには、カテゴリーウィジェットの設定で「記事数を表示する」にチェックを入れると表示出来ます。

こんな感じで表示されます。HTMLソースをみると以下のようになっています。

<li class="cat-item cat-item-〇">
<a href="URL">カテゴリーサンプル</a> (12)
</li>

このままだと記事数にはリンクがついておらず、カスタマイズもやりづらい(私にはできなかったです)ので記事数をaタグの中に入れ、カスタマイズできるように(php)コードを追加しました。

phpコードは私ではよくわからないので調べてみました。aタグの中に記事数を入れるコードを紹介している記事はたくさんあります。いくつか試してみました。その中で上手く表示されたのは以下の記事です。

STINGER7：サイドバーのカテゴリーをカスタマイズする方法【ウィジェット】

STINGER7を使っているほとんどの方はサイドバーにカテゴリーの一覧を表示していると思います。ウィジェ ...

https://web-ashibi.net/archives/670

こちらではテーマ「STINGER7」でのカテゴリーウィジェットのカスタマイズ方法を紹介されていますが、こちらの記事の中の「記事数を<a>タグの中に入れる」章のコードを使わせてもらったら上手く表示されました。

注意！

コードはfunction.phpを編集します。編集する前にファイルのバックアップをとっておくことをオススメします。

コードはfunction.phpに追加してください。(子テーマをお使いの方は子テーマのfunction.phpに追加してください。)

Luxeritasをお使いの方テーマLuxeritasをお使いの方は［Luxeritas］［こテーマの編集］［function.php］に追加してください。

コードを追加するとHTMLは以下のように置き換えられます。

<li class="cat-item cat-item-〇">
<a href="URL">カテゴリーサンプル<span class="count"> 12</span></a>
</li>

記事数がaタグの中に入り、クラス「count」がついたspanで囲われ、記事数を囲っていた( )がなくなります。

きらり

へえ～。HTMLが置き換えられるんだぁ。それでつけられたクラス名を使って記事数の表示のカスタマイズをするんだね。

結耶

そういうことになりますね。でこのブログのカテゴリーをこんな風にしてみたよ！

結耶

記事数を右端に表示しています(^-^)CSSは以下の通りです。

CSS

/*--------------------
  カテゴリーウィジェット
--------------------*/
.widget_categories ul li a {
    display:block;
    border-bottom:1px dotted #f69;
    padding:5px 10px;
}

/*親カテゴリーのアイコン*/
.widget_categories ul li a:before {
    font-family:"Font Awesome 5 Free";
    content:"f07c";
    font-weight:900;
    margin-right:5px;    /*アイコン右側の余白*/
}

/*子カテゴリーのアイコン*/
.widget_categories ul li ul li a:before {
    font-family:"Font Awesome 5 Free";
    content:"f0da";
    font-weight:900;
    margin-right:5px;    /*アイコン右側の余白*/
}

/*マウスホバー(乗った時)*/
.widget_categories ul li a:hover {
    background:#f69;
    color:#fff;
    transition:0.5s;
}

/*記事数の表示位置*/
.widget_categories ul li a .count {
    display:block;
    float:right;
    padding:0 8px;
    background:#f69;
    color:#fff;
    width:50px;
    text-align:center;
    font-size:14px;
    border-radius:5px;
}

アーカイブウィジェットの投稿数

以下の記事のコードを使用するとカテゴリーウィジェットとアーカイブウィジェットの記事数もaタグの中に入れ、クラス名が付きます。

WordPressのカテゴリー・アーカイブウィジェットの投稿数に付加されるカッコを除去す

Wordpressのウィジェット機能に「カテゴリー」と「アーカイブ」ウィジェットがあります。それぞれのウ ...

https://nelog.jp/remove-post-count-parentheses

こちらのコードを使う場合は、クラス名はpost-countになっていますので、CSSの中の記事数部分のクラス名を変更してください。

こんなデザインも！

CSS

/*--------------------
  カテゴリーウィジェット
--------------------*/
.widget_categories ul li a {
    display:block;
    border-bottom:1px dotted #00c;
    color:#00c;
    padding:5px 10px;
    position:relative;
}

/*カテゴリー右端のアイコン*/
.widget_categories ul li a:after {
    font-family:"Font Awesome 5 Free";
    content:"f054";
    font-weight:900;
    position:absolute;
    right:10px;          /*右端からの位置*/
}

/*マウスホバー(乗った時)*/
.widget_categories ul li a:hover {
    background:#00c;
    color:#fff;
    transition:0.5s;
}

アイコンを右端につけています。(記事数の表示はオフ)

きらり

シンプルだね。

結耶

未熟ものなので許して！（笑）