WordPress.com のショートコード「display-posts」で作成した最近の投稿リストに時刻を入れる

WordPress.com には、さまざまなショートコードが準備されていますが、その中のひとつにサムネイル画像つきの記事のリストを作成することのできる「display-posts」というショートコードがあります。

ここでは、記事のリストに日付だけではなく時刻まで表示する方法についての覚書をしたいと思います。

afadsfads

サムネイル画像つきの記事のリストを時刻入りで表示するためのショートコードの記述は以下のとおりです。

[display-posts image_size="thumbnail" posts_per_page="20" include_date="true" date_format="Y/m/d H:i"]

時刻の出力の部分は、「H:i」で、以下の記事を参考にしました。

sgfsgsd
PHP: date – Manual

ショートコードをテキストウィジェット等に貼っただけでは、以下のような表示になりますので、

fgsdgsf

以下のような感じの CSS をカスタム CSS に追加したりした上で、

/* サムネイル画像をリスト状に並べる(「display-posts」ショートコード対応版)*/
.display-posts-listing {
	line-height: 1.2em;
}

.boxlist ul.display-posts-listing {
	padding-left: 0!important;
	text-align: left;
	margin-top: 20px;
}

.boxlist ul.display-posts-listing li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: normal;
	font-size: 11px;
	line-height: 1.2;
	margin: 0;
	padding: 2px;
}

.boxlist.w100 ul.display-posts-listing li {
	width: 100%;
}

.boxlist.w50 ul.display-posts-listing li {
	width: 47%;
}

.boxlist.w33 ul.display-posts-listing li {
	width: 31%;
}

.boxlist ul.display-posts-listing li a {
	font-weight: bold;
}

#ie7 .boxlist ul.display-posts-listing li {
	display: inline;
	position: relative;
	width: 500px;
}

.boxlist ul.display-posts-listing li img {
	display: block!important;
	border: 1px solid #d0a600!important;
	height: 65px!important;
	width: 80px!important;
	float: left!important;
	margin: -2px 4px 4px 2px!important;
	padding: 2px!important;
}

.display-posts-listing .date {
	font-size: 12px;
	text-align: right;
	display: block;
	color: #aaaaaa;
}

ショートコード以外に以下のような記述を加えます。

dsfadsfads

そうすると、このような感じに体裁が整えられます。

fgsdfgsfd

例えば、特定のカテゴリーのみの記事のリストを作成することもできます。

sgfsgsd-1
カテゴリー「テーマの選定」の投稿記事一覧

投稿者: comemo

mac & iPad で情報をインテグレートする

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。