【WordPress】任意の場所に新着情報を表示させる

Feb 2, 2014

【WordPress】任意の場所に新着情報を表示させる

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

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

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

index.phpやhome.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; ?>

表示件数を指定できます

表示するカテゴリを指定できます（カテゴリIDの調べ方）

各記事タイトルの文字数を指定できます

Newマークを表示する期間を指定できます

スタイルシートで整形

style.cssなど、任意のCSSファイルに以下のコードを追加します。.info_sampleというクラス名はお好きな文字列に改変してください（上記PHPコード内のクラス名も揃えること）。

.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コードを貼る方法

TOPページをエディタだけで編集していてテンプレートファイルなんて触ったこともない、という場合もままあるかと思います。そんな時の禁じ手として、エディタ内でのPHPコード使用を可能にするプラグインがあります。

Exec-PHP

セキュリティ面で問題が指摘されているのでビジネスユースは有り得ないですが、プライベートブログとかならまぁいいかなと。

今回は以下の記事を参考にさせていただきました：

WordPress・Premire・Aftereffects備忘録 : WordPress query_postsで新着情報にNEWを付ける。