【WordPress】お知らせ一覧パーツのデザインテンプレート（全コピペでOK）

WordPressサイトで、公開日・カテゴリ・タイトルが表示されたシンプルな記事一覧パーツですね。トップページに最新記事を見出し的に３記事程度並べたときなんかに使われたりするデザインです。

見本

このようなデザインですね。良い意味で”よくあるパーツ”なので、けっこう使い回しが効きます。

サンプルコード

PHP

	<div class="topPagePosts">
	<?php
	$args = array(
	'posts_per_page' => 3 // 表示件数の指定
	);
	$posts = get_posts( $args );
	foreach ( $posts as $post ): // ループの開始
	setup_postdata( $post ); // 記事データの取得
	?>
	<dl class="topPagePosts__item">
	<a href="<?php the_permalink(); ?>">
	<dt>
	<?php the_time("Y.n.j"); ?>
	<span class="topPagePosts__category">
	<?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->cat_name";}?>
	</span>
	</dt>
	<dd class="topPagePosts__title">
	<span><?php the_title(); ?></span>
	</dd>
	</a>
	</dl>
	<?php
	endforeach; // ループの終了
	wp_reset_postdata(); // 直前のクエリを復元する
	?>
	</div>

view raw wp-postlist.php hosted with by GitHub

posts_per_pageの数値は何記事分を表示するか？の指定です。こちらはお好みで。

CSS

	.topPagePosts {
	border-top: 1px solid #666; /* 掛け線のスタイル（最上部のみ） */
	margin-bottom: 28px;
	}
	.topPagePosts__item {
	border-bottom: 1px solid #666; /* 掛け線のスタイル */
	padding: 8px;
	position: relative;
	}
	.topPagePosts__category { /* カテゴリ名 */
	background: #999; /* 背景色 */
	color: #fff; /* 文字色 */
	padding: 2px 4px;
	font-size: .8em; /* ちょっと小さめの文字 */
	}
	.topPagePosts__title {
	width: 90%;
	}
	.topPagePosts__title::after { /* 右端の矢印 */
	content: '';
	width: 8px;
	height: 8px;
	border: 1px solid;
	border-color: #666 #666 transparent transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	display: inline-block;
	text-align: right;
	position: absolute;
	top: 45%;
	right: 1%;
	}

view raw wp-postlist.css hosted with by GitHub

コメント添えてある箇所はお好みで。