新着記事の表示方法

logw_title_wordpress_logo

WordPressメモになります。今回は「新着記事」の表示方法を書いていきます。今回参考にしたのは[WordPress] プラグインを使わずに、サイドバーの最新記事に日付を加えて表示する方法さんの記事になります。

記事タイトル+更新日を表示する

logwではサイドバーに表示しています。表示するのは「記事タイトル+更新日」とします。最大表示件数は5件にしたいと思います。

<section id="newarticle">
<h2>新着記事</h2>
<?php query_posts('showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><span><?php the_time(' (Y年m月d日)'); ?></span></li>
<?php endwhile;?>
</ul>
</section>

これで設定できます。CSSは以下のように設定しました。

/*----------------------------------------
	新着記事
----------------------------------------*/
section#newarticle{
width:306px;
margin-right:15px;
margin-bottom:1em;
border-top-style:solid;
border-bottom-style:solid;
border-width:1px;
padding-top:15px;
}

section#newarticle h2{
text-indent:15px;
padding:10px 0;
margin-bottom:15px;
background-color:#dcdcdc;
text-shadow:1px 1px #fff;
}

section#newarticle ul li{
font-size:11pt;
margin-left:15px;
border-bottom-style:dashed;
border-width:1px;
}

section#newarticle ul li a{
display:block;
}

section#newarticle ul li span{
font-size:9pt;
}

CSSは簡単にかいています。こんな感じで表示させていただきました。