[WordPress.com] ショートコード「display-posts」を使って、最新情報の欄を作成する

今回は、ウェブサイトのトップページでよく使われている「新着情報(最新情報)」の欄の作成方法について検討してみました。

sdgsdfgdsf
首相官邸ホームページ

今回試作したものはこんな感じです。

sdgsdfgsfd

外枠の方は、以前、お知らせの欄の作成で使った CSS をほぼそのまま使用しました。

sdfgsdgsdf
テーマ「Twenty Eleven」にお知らせをつけるための CSS

一方、中身の方は、以前、ショートコード「display-posts」を使って最新記事を時刻入りで出力させる方法について検討しましたが、その内容を参考にして、CSS を使って位置の修正などを行いました。

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

日付の部分については、年月日表記のときには「0(ゼロ)」を付けないほうがいいだろう、ということで、ゼロなしで日付や月を出力してくれる「j」や「n」という記号を使うことにしました。

sdfgsdfg
PHP: date – Manual

以上の情報を参考にして、記事の方には以下のような記述をテキストウィジェットの方に貼り、

<div class="boxlist">
[display-posts posts_per_page="5" include_date="true" date_format="Y年n月j日"]
</div>

一方、CSS スタイルシートエディターの方には、以下のような CSS を貼ることで、

/* 新着情報用(id番号の修正が必要) */
#text-28 {
	border: 5px solid #56a3c7;
	border-radius: 7px;
	text-align: center;
}

#text-28 .textwidget {
	text-align: left;
	padding: 10px;
	font-size: 13px;
}

#text-28 h3.widget-title {
	background-color: #56a3c7;
	text-align: center;
	font-size: 14px;
	color: #fff;
	border: none;
	padding: 10px 0;
	margin: -1px;
}

/* 日付つきの新着情報用(id番号の修正が必要。テーマ「Twenty Twelve」 で表示確認。) */
#text-28 .display-posts-listing {
	line-height: 1.2em;
}

#text-28 .boxlist ul.display-posts-listing {
	padding-left: 0!important;
	text-align: left;
	margin: 0!important;
}

#text-28 .boxlist ul.display-posts-listing li {
	width: 70%;
	position: relative;
	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: 17px 0 13px 30%;
	border-bottom: 1px dashed #aaa;
}

#text-28 .boxlist ul.display-posts-listing li:last-child {
	border: none;
	padding-bottom: 0;
}

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

#text-28 .display-posts-listing .date {
	font-size: 12px;
	display: block;
	color: #aaa;
	position: absolute;
	top: 0;
	left: 0;
}

以下のような最新情報の一覧をウィジェットの方に追加することができました。なお、使っているテーマは「Twenty Twelve」です。

sdgsdfgsfd

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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