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

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

wp_side_photo_01

こんにちは!

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

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

wp_side_photo_02

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

wp_side_photo_03

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

wp_side_photo_04

ちょっとだけ嬉しかったので記事にしたいと思います。
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のカテゴリーとアーカイブの見栄えを少し良くする方法」でした!

それではまた。

公開日:2014/01/17
最終更新日: 2016年1月31日
カテゴリー:WordPress

関連記事

新着記事

コメント/トラックバック (3件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS

  1. […] WordPressのカテゴリーとアーカイブの見栄えを少し良くしてみました! […]

  2. […] WordPressのカテゴリーとアーカイブの見栄えを少し良くしてみました! […]

  3. […] WordPressのカテゴリーとアーカイブの見栄えを少し良くしてみました! […]




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly