[WordPress.com] ショートコード「display-posts」を使ってサイドバー等にサムネイル画像つき最新記事リストを表示する

ショートコード「display-posts 」を使ってサイドバー等にサムネイル画像つきの最新記事リストを表示する方法についての覚書です。

fgsfgsdf

まず、以下の記述をテキストウィジェットに追加します。

<div class="boxlist">
[display-posts size="medium" posts_per_page="5" include_excerpt="true" author="asazuki508" image_size="medium" include_date="true" date_format="Y/m/d H:i"]
 </div>

「author」のところにはユーザー名を入力します。

自分のプロフィール ‹ t demo — WordPress

次に以下の CSS を CSS スタイルシートエディターに追加します。

/* サイドバー等に任意のカテゴリーのサムネイル画像つき記事リストを表示する */
.boxlist ul.display-posts-listing {
	padding-left: 0 !important;
	text-align: left;
	margin-top: 20px;
	margin-left: 0;
}

.boxlist ul.display-posts-listing > li {
	width: 100%;
	list-style: none;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: break-word;
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
	padding: 7px 2px;
	border-bottom: 1px dashed #ccc;
}

.boxlist ul.display-posts-listing li > a > img {
	display: block !important;
	border: 1px solid #d0a600 !important;
	height: 40px !important;
	width: 50px !important;
	float: left !important;
	margin: -2px 8px 4px 2px !important;
	padding: 2px !important;
	background-color: rgba(230,230,230,0.4) !important;
	border-radius: 3px;
}

すると、以下のような感じでサムネイル画像つきの最新記事リストが表示されます。

fgsfgsdf

上記のものはテーマ「Twenty Twelve 」での例ですが、他のテーマでも、たぶん、同じような感じで表示できます。

adfafad
テーマ「Zoren」での表示

dfsdfsd
テーマ「Twenty Ten 」での表示

dfsadfsd
テーマ「Twenty Eleven 」での表示

sdfsfasda
テーマ「Wu Wei 」での表示

sadgsfsgd
テーマ「Titan 」での表示

#2013, #nodisplay-49667

#ccc, #d0a600