サイドバーのカテゴリーリストをボタン表示にする

この記事は約4分で読めます。

2017-08-15WordPressカスタマイズ

本記事は、サイドバーのカテゴリーリストをツリー表示からボタン表示に変更するカスタマイズの方法を紹介するものです。

完成図

元はこんな感じ、非常にシンプルです。

十分に用はなすんですけど……味気ないですよね。
そこで、こんな風に変えます。

参考サイト

本記事はdoop 様の記事を参考にしています。
ショートコード部分はそのまま利用しますので、必要に応じて元サイトを御参照ください。

関数

2つに場合分けします。

1 記事数表示が必要ない場合

特にやることはありません。
カテゴリーウィジェットの「投稿数を表示する」などのチェックが全て外れていることを確認してください。

2 記事数表示が必要な場合

以下のページの関数をfuncitons.phpに記述します。

終わったら、テキストウィジェットをサイドバーに設置して、ショートコードを記述してください。

CSS

以下のCSSをstyle.cssに記述してください。
元のですと文字が小さく感じるので大きくしています。
また色をLuxeritasのSNSボタンのホワイトカラーバージョンに合わせています。
もし気に入らない場合は、横に説明をつけましたので変えて下さい。

/************************************
** カテゴリー一覧
************************************/
.widget_categories ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.widget_categories ul li {
 display: inline-block;
 margin: 0 .5em 0 0 !important;
 padding: 0;
}
.widget_categories ul li a {
 position: relative;
 display: inline-block;
 max-width: 260px;/*ボタンの最大幅、一番長いカテゴリ名に合わせて調整*/
 height: 29px;/*ボタンの縦幅*/
 line-height: 28px;
 padding: 0 4em 0 .6em;/*ボタン内部のパディング幅、最後に調整するといい感じ*/
 background-color: rgb(251, 251, 251);/*ボタンの色*/
 border: 1px solid #ccc;/*ボタンの枠線*/
 border-radius: 3px;/*ボタンの丸み*/
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 color: #333;/*文字の色*/
 font-size: 13px;/*文字の大きさ*/
 text-decoration: none;
 -webkit-transition: .2s;
 transition: .2s;

}
.widget_categories li .cat_count {
 position: absolute;
 top: 3px;
 right: 5px;
 z-index: 2;
 width: 28px;/*カウント部分の幅*/
 height: 21px;/*カウント部分の高さ*/
 line-height: 18px;
 background-color: #fff;/*カウント部分の背景色*/
 border: 1px solid #ccc;/*カウント部分の境界線*/
 border-radius: 100%;
 color: #333;/*カウント部分の文字色*/
 text-align: center;
 -webkit-transition: .2s;
 transition: .2s;
}
.widget_categories ul li a:hover {
 background-color: #c4fdfd;/*ホバーした時の色*/
 border: 1px solid #c4fdfd;/*ホバーした時の境界線*/
 color: #333;/*ホバーした時の文字色*/
}
.widget_categories ul li a:hover .cat_count {
 background-color: #fff;/*ホバーしたときのカウント部分の色*/
 color: #333;/*ホバーしたときのカウント部分の文字色*/
}
#text-【ウィジェットに割り振られた番号】 .widget {
 margin: 0 0 1px 0;
 padding: 5px 5px;

textの番号の調べ方は次の通り。
ChromeでF12をクリックし、右上部分にマウスを当てて下へ下ろしていきます。
すると、次のようになります。

示された番号を記入してください。

まとめ

解答者の写真
利便性だとツリー型の方が優るんだけどね……
当サイトだと正直カテゴリーリスト自体の利用率が高くないのもあるから「ま、いっか」って感じ
ツリー型でお洒落なCSSを紹介したサイトも結構あるから、よかったら探して試してみて