WordPressのカテゴリーリストをボタン表示にするPHPコードとCSSの解説イメージ。通常のカテゴリー一覧とボタン化後のデザインを比較し、記事数表示付きカテゴリーボタンの実装例を紹介している。

WordPressのカテゴリーリストと記事数をボタン表示にするPHPコードとCSS

by
WordPressカスタマイズ#css#Luxeritas#PHP#カスタマイズ
（更新: ）

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

他サイトと一味違ったデザインのカテゴリーリストを実装してみたい！という方におすすめです！

ライトテーマ、特に白色が基調のデザインであれば、そのまま使えるCSSを組んでます。
（私が記事執筆当時に使っていたWordPressテーマLuxeritasのデザインにあわせたものです）

天満川鈴 WRITTEN BY 天満川鈴
INDEX2,679 chars / 5 min
スポンサーリンク

完成図

元はこんな感じの味気ないリストです。

よく言えばシンプルなんですけど、味気ないですよね。
そこで、こんな風に変えます。

実装方法

以下に紹介するPHPコードをfunctions.phpに記述。
CSSをstyle.cssに記述。
実装したい場所にショートコード［category_buttons］を記述します（[]は半角に変更してください）。

PHP

// カテゴリーボタン一覧ショートコード
// [category_buttons]
function my_category_buttons_shortcode() {
$categories = get_categories(array(
'hide_empty' => false,
'orderby' => 'name',
'order' => 'ASC',
));

if (empty($categories)) {
return '';
}

$html = '<div class="category-button-list widget_categories"><ul>';

foreach ($categories as $cat) {
$url = esc_url(get_category_link($cat->term_id));
$name = esc_html($cat->name);
$count = intval($cat->count);

$html .= '<li>';
$html .= '<a href="' . $url . '">';
$html .= $name;
$html .= '<span class="cat_count">' . $count . '</span>';
$html .= '</a>';
$html .= '</li>';
}

$html .= '</ul></div>';

return $html;
}
add_shortcode('category_buttons', 'my_category_buttons_shortcode');

CSS

/************************************ **　カテゴリー一覧 ************************************/

.category-button-list {
margin: 0 0 1px 0;
padding: 5px 5px;
}

.category-button-list ul {
margin: 0;
padding: 0;
list-style: none;
}

.category-button-list ul li {
display: inline-block;
margin: 0 .5em .5em 0 !important;
padding: 0;
}

.category-button-list 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;
transition: .2s;
}

.category-button-list 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;
transition: .2s;
}

.category-button-list ul li a:hover {
background-color: #c4fdfd;
border-color: #c4fdfd;
color: #333;
}

.category-button-list ul li a:hover .cat_count {
background-color: #fff;
color: #333;
}

まとめ

利便性だけでみればツリー型の方が一般には優るとは思います。
1行1カテゴリの方が認知負荷を軽減させますので。

ただ大量コンテンツを抱えるサイトですと、逆に情報を集約して把握できるメリットがあります。
タグクラウドと同系統とみなすなら、こうしたデザインにも一理あります。

選択肢の一つとして候補に入れてみてはいかがでしょうか？

 

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。

詳しいプロフィールはこちら

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる