2018/02/27 2018/03/31

WordPressでサイドバーのカテゴリーの件数を表示して装飾する方法

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

今回の記事は、WordPressのテーマを自分でオリジナルで作成している人向けです。無料・有料の既存のテーマを使用している人も、やってみてもいいかもしれませんが、元々どんな構造でコードが書かれているのか分からないので、おすすめしません。

タイトルを見ても、パッと想像つかないかもしれないので、まずはビフォーアフターの画像を載せておきます。

この画像を見て「あぁ〜これこれ！これを探してました！」という人向けです(笑)

ちゃんと説明すると、WordPressでサイドバーのカテゴリーの件数を表示して、表示した件数の数字をCSSで装飾する方法です。自分のサイトのカテゴリーが見にくいなと思っていたので、CSSでコードを加えて編集しました。その時の覚書を残しておきます。

sidebar.phpの編集

最もスタンダードなカテゴリの表示の仕方。カウントなしのカテゴリ一覧を取得するコード。

<ul class="category">
 <?php wp_list_categories('orderby=count&order=desc&title_li='); ?>
</ul>

<?php wp_list_categories('orderby=count&order=desc&title_li='); ?>

</ul>

今回の本題。カウントのところにspanでclassを指定して、装飾を加えられるようにします。

<ul class="category">
	<?php
	    $cats = wp_list_categories('echo=0&show_count=1&title_li=');
	    $cats = preg_replace('/ title=\"(.*?)\"/','', $cats);
	    $cats = preg_replace('/ class=\"(.*?)\"/','', $cats);
	    $cats = preg_replace('/<\/a> (\([0-9]*\))/', ' $1</a>', $cats);
	    $cats = str_replace(array('(',')'), array('<span class="count">','</span>'), $cats);
	    echo $cats;
	?>
</ul>

<?php

$cats = wp_list_categories('echo=0&show_count=1&title_li=');

$cats = preg_replace('/ title=\"(.*?)\"/','', $cats);

$cats = preg_replace('/ class=\"(.*?)\"/','', $cats);

$cats = preg_replace('/<\/a> ($[0-9]*$)/', ' $1</a>', $cats);

$cats = str_replace(array('(',')'), array('<span class="count">','</span>'), $cats);

echo $cats;

</ul>

sidebar.phpのカテゴリを表示したい位置に、上記のコードをコピペすればOKです。

該当のCSSファイルにお好きな装飾を追加

今回は僕のサイトで加えた装飾をそのまま書いておきますので、お好きにアレンジして下さい。

ul.category li a {
	text-decoration: none;
}

ul.category li a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

ul.category li span {
    padding: 3px 7px;
    border-radius: 10px;
    background: #ececec;
    margin-left: 5px;
}

ul.category li a {

text-decoration: none;

}

ul.category li a:hover {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

}

ul.category li span {

padding: 3px 7px;

border-radius: 10px;

background: #ececec;

margin-left: 5px;

}

最後に

ブログ運営をしていると、あともう少し見栄えが良くなれば！とか思いませんか？僕はいつも思っています(笑) ホームページを作る仕事ををしているということもあり、少し気になれば自分で調べてささっと変更してしまいます。今回の記事の中で説明していることは、PHPが少し入っていますが、ブログ運営を行う上でHTML・CSSぐらいは基本を学んでおいたほうが良いのではないか？と思っています。

HTML・CSSを学ぶことは理想のブログに繋げることへの第一歩目かもしれません。時間があれば勉強してみてください！