WordPressのカテゴリーとアーカイブの見栄えを少し良くしてみました！

公開日：2014年1月17日
最終更新日: 2016年1月31日

こんにちは！

最近、WordPressのカテゴリーとアーカイブの表示を、CSSなどで見栄えを良くしてるサイトを見掛ける様になったので私もやってみました！

今まではこんな感じでした。

それを以下の様に変更しました。なんかカッコ良くなりましたね！

ロールオーバー時はこんな感じです！

ちょっとだけ嬉しかったので記事にしたいと思います。
WordPressの「sidebar.php」と「CSS」を少し修正すれば簡単にできます。

手順！

「sidebar.php」の修正！

今までの「sidebar.php」のカテゴリーとアーカイブの表示部分はこんな感じでした。

<?php
  $categories = get_categories();
  foreach($categories as $category) :
?>

<h4>カテゴリー</h4>
<ul id="category">
  <li>
    <a href="<?php echo get_category_link($category->cat_ID); ?>"><?php echo get_catname($category->cat_ID); ?></a>&nbsp;(<?php echo get_category($category->cat_ID)->category_count; ?>)
  </li>
</ul>

<h4>過去の記事</h4>
<ul id="archive">
  <?php
    $arc = wp_get_archives('show_post_count=true&limit=12');
    $arc = str_replace(array('(',')'), array('<span class="count">','</span>'), $arc);
    echo $arc;
  ?>
</ul>
<?php endforeach; ?>

それを以下のように変更しました！

<h4>カテゴリー</h4>
<ul id="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>

<h4>過去の記事</h4>
<ul id="archive">
  <?php
    $string = wp_get_archives(array('show_post_count' => 1,'echo' => 0));
    $string = preg_replace('/<\/a>&nbsp;(\([0-9]*\))/', ' $1</a>', $string);
    $string = str_replace(array('(',')'), array('<span class="count">','</span>'), $string);
    echo $string;
  ?>
</ul>

後は「CSS」で装飾すれば完成です！

当サイトの場合は以下の様に「CSS」で装飾しています！

ul#category {
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 8px 0px 10px -9px #999999;
}

ul#category li {
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

ul#category li a {
  display: inline-block;
  width: 311px;
  height: 30px;
  font-size: 116%;
  color: #111111;
  text-decoration: none;
  padding: 10px 10px 0px 15px;
}

ul#category li a:hover {
  color: #ffffff;
  background: url(../img/lower/overflow.png) repeat left top;
}

ul#category li a span.count {
  font-size: 85%;
  color: #111111;
  float: right;
  background: #eeeeee;
  border-radius: 3px;
  padding: 2px 5px 0px 5px;
  min-width: 18px;
  text-align: center;
  font-weight: bold;
  cursor:pointer;
  text-decoration: none;
}

ul#category li a span:hover {
  text-decoration: underline;
}

ul#archive {
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 8px 0px 10px -9px #999999;
}

ul#archive li {
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

ul#archive li a {
  display: inline-block;
  width: 311px;
  height: 30px;
  font-size: 116%;
  color: #111111;
  text-decoration: none;
  padding: 10px 10px 0px 15px;
}

ul#archive li a:hover {
  color: #ffffff;
  background: url(../img/lower/overflow.png) repeat left top;
}

ul#archive li a span.count {
  font-size: 85%;
  color: #111111;
  float: right;
  background: #eeeeee;
  border-radius: 3px;
  padding: 2px 5px 0px 5px;
  min-width: 18px;
  text-align: center;
  font-weight: bold;
  cursor:pointer;
  text-decoration: none;
}

ul#archive li a span:hover {
  text-decoration: underline;
}

コードとして良くない部分もあると思いますが、これで実装はできたのでヨシとしておきます。

最後に！

今回のカスタマイズは自分的には非常に満足です。簡単に実装できますので、サイドバーの見栄えを良くしたい方は、ご参考にして頂ければと思います！

以上、「WordPressのカテゴリーとアーカイブの見栄えを少し良くする方法」でした！

それではまた。

関連記事

新着記事