WordPressでサイドバーのカテゴリーの件数を表示して装飾する方法
スポンサーリンク
こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。
今回の記事は、WordPressのテーマを自分でオリジナルで作成している人向けです。無料・有料の既存のテーマを使用している人も、やってみてもいいかもしれませんが、元々どんな構造でコードが書かれているのか分からないので、おすすめしません。 タイトルを見ても、パッと想像つかないかもしれないので、まずはビフォーアフターの画像を載せておきます。
sidebar.phpの編集
最もスタンダードなカテゴリの表示の仕方。カウントなしのカテゴリ一覧を取得するコード。
1 2 3 |
<ul class="category"> <?php wp_list_categories('orderby=count&order=desc&title_li='); ?> </ul> |
1 2 3 4 5 6 7 8 9 10 |
<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> |
該当のCSSファイルにお好きな装飾を追加
今回は僕のサイトで加えた装飾をそのまま書いておきますので、お好きにアレンジして下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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を学ぶことは理想のブログに繋げることへの第一歩目かもしれません。時間があれば勉強してみてください!スポンサーリンク