WordPress 新着情報を表示するショートコード

WordPress で新着情報（更新情報）を表示するショートコードです。

最新の固定ページや投稿の日付およびタイトルを表示します。期間を指定して「NEW!」マークを表示することができます。

スクリーンショット

使用例

<h3>更新情報</h3>
[recent_posts post_type="page" new_days="30" count="5"]
<h3>ブログの最近の投稿</h3>
[recent_posts post_type="post" new_days="30" count="5"]

ショートコード オプション

オプション	デフォルト	説明
class	“recent-posts”	クラスです。
count	10	件数です。
post_type	“any”	投稿タイプです。 投稿のみの場合は “post”、固定ページのみの場合は “page” 等を指定します。 カスタム投稿にも対応しています。
category	“”	カテゴリー名（スラッグ名）です。
exclude	“”	除外する投稿の ID です。 複数指定する場合はカンマ (,) で区切りで指定します。
date_format	“”	日付フォーマットです。 省略時（””）は、オプション設定の日付フォーマットとなります。
new_days	30	「NEW!」マーク（recent-posts-new クラス）を付加する期間です。

ショートコードのソースコード

functions.php などに下記のコードを追加します。

/**
 * 最新の固定ページや投稿のタイトルをリスト表示するショートコードです。
 */
function recent_posts_shortcode( $atts ) {
	global $post;

	$atts = shortcode_atts( array(
		'class' => 'recent-posts',
		'count' => '10',
		'post_type' => 'any',
		'category' => '',
		'exclude' => '',
		'date_format' => '',
		'new_days' => '30'
	), $atts, 'recent_posts' );

	$args = array(
		'showposts' => $atts['count'],
		'post_type' => $atts['post_type'],
		'orderby' => 'modified',
		'order' => 'DESC',
		'category_name' => $atts['category'],
		'exclude' => $atts['exclude'],
	);
	$myposts = get_posts( $args );

	$new_days = $atts['new_days'];
	$retour = '<dl' . ( $atts['class'] != '' ? ' class="' . $atts['class'] . '"' : '' ) . '>';
	foreach ( $myposts as $post ) {
		setup_postdata( $post );
		$today = date( 'U' );
		$entry = get_the_modified_date( 'U' );
		$diff = date( 'U', ( $today - $entry ) ) / 86400;
		$retour .= '<dt>' . get_the_modified_date( $atts['date_format'] ) . '</dt>';
		$retour .= '<dd>' . ( $new_days > $diff ? '<span class="recent-posts-new">NEW!</span>' : '' ) . '<a href="' . get_permalink() . '">' . the_title( '', '', false ) . '</a></dd>';
	}
	wp_reset_postdata();
	$retour .= '</dl>' . "\n";

	return $retour;
}

add_shortcode( 'recent_posts', 'recent_posts_shortcode' );

スタイル（CSS）

/*
Recent Posts
*/
dl.recent-posts {
	margin: .1rem 0;
	padding: 0;
	display: block;
}
dl.recent-posts dd,
dl.recent-posts dt {
	font-weight: normal;
	margin: 0;
	padding: 0;
}
dl.recent-posts dt {
	float: left;
	clear: both;
	width: 8.2em;
}
dl.recent-posts dd {
	overflow: hidden;
}
dl.recent-posts span.recent-posts-new {
	padding: 0 2px;
	margin-right: 5px;
	vertical-align: middle;
	font-size: .6rem;
	color: #fff;
	font-weight: bold;
	border-radius: 3px;
	background-color: #f02020;
}