こゆやつ。
まずWordPressのカテゴリを作るとこから始める。
スラッグ名＝$catslug。$catnameは設定した日本語とかのカテゴリ名が出るよ。
私が作ったやつ。
これを出したいところに入れる。
<div class="pr_area">
<h2>Information</h2>
<div class="pr_content">
<?php
$posts = get_posts(array(
'posts_per_page' => 5, // 表示件数
));
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name; //カテゴリー名
$catslug = $cat[0]->slug; //スラッグ名
?>
<p class="newslist"><span class="time"><?php the_time('Y/m/d') ?></span><span class="news_cat <?php echo $catslug; ?>"><?php echo $catname; ?></span><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p>
<?php endforeach; endif; ?>
<div class="btn_center">
<a class="button" href="<?php echo home_url(); ?>/category/news/">一覧はこちら</a>
</div>
</div>
</div>CSS
取得したカテゴリスラッグ名分だけ、以下のul li span.cat-a を作る。
cat-aのところは適宜スラッグ名を入れる。
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
clear: both;
margin: 0 0 1em;
}
ul li span {
display: block;
float: left;
width: 6em; /*カゴテリー名による*/
margin: 0 10px 10px 0;
padding: 5px;
text-align: center;
font-size: 10px;
}
ul li span.cat-a {
background: #e3efef;
}
ul li span.cat-b {
background: #efe3ec;
}
ul li span.cat-c {
background: #efefe3;
}
ul li span.ymd {
display: inline;
float: none;
padding: 0 5px;
font-size: 13px;
color: #999;
}