大阪市西区　Wild Cards ワイルドカーズ

WordPressをコーポレートサイトで利用する場合、新着情報はTOPページの要素として不可欠ですよね。こんな感じ▼




これをそのまま再現するPHPとCSSのコードをご紹介します。

テンプレートファイルにPHPコードを貼り付け

<?php
global $post; $lastposts = get_posts('numberposts=5&cat=0'); //表示件数とカテゴリID
foreach($lastposts as $post) :
setup_postdata($post);
$post_title = $post->post_title;
if(mb_strlen($post_title)>40) { //記事タイトルの文字数
	$post_title = mb_substr($post_title,0,40).'...';
}
?>
<dl class="info_sample">
<dt><?php echo date("Y.m.d  ", strtotime($post->post_date)); ?></dt>
<dd>
<?php
      $days=30; //Newをつける日数
      $today=date_i18n('U'); $entry=get_the_time('U');
      $diff1=date('U',($today - $entry))/86400;
      if ($days > $diff1){
        echo'<font color="ff0000">New!</font>';
         }
?>
<a href="<?php echo get_permalink( get_the_ID() ); ?>" id="post-<?php the_ID(); ?>"> <?php echo $post_title; ?></a></dd>
</dl>
<?php endforeach; ?>

スタイルシートで整形

.info_sample {
	width: 480px;
	line-height: 150%;
	font-size: 11px;
	clear: left;
}

.info_sample dt {
	width: 70px;
	background: #eaeaea;
	padding-left: 5px;
	margin: 0 5px 5px 0;
	float: left;
	font-weight: bold;
}

.info_sample dd {
	width: 393px;
	background: #e;
	padding-left: 5px;
	float: left;
	color: #42b5d2;
}

.info_sample dd a {
	color: #1a83a1;
	text-decoration: none;
}

エディタ（記事編集画面）に直接PHPコードを貼る方法