スポンサーリンク

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

2020年2月9日WordPress

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

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

スポンサーリンク

アイコンをつける

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

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については下の記事を参考にしてください。

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

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

ul {list-style:none;}

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

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

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

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

li.cat-item- の後にカテゴリーIDを入れます。カテゴリー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」でのカテゴリーウィジェットのカスタマイズ方法を紹介されていますが、こちらの記事の中の「記事数を<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タグの中に入れ、クラス名が付きます。

こちらのコードを使う場合は、クラス名は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;
}

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

きらり

きらり

シンプルだね。

結耶

結耶

未熟ものなので許して!(笑)

最後に

今回はWordPressのカテゴリーウィジェットの見た目をカスタマイズしてみたので私の備忘録も兼ねて書いてみました。

WordPressのカテゴリーウィジェットのデフォルトデザインはとてもシンプルで行間も狭いです。行間をあけるだけでも利用しやすくなりますよね。

ちょっと使いづらいカテゴリーウィジェットを「何とかしたい!」とお考えの方は参考にしてみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM