[WordPress.com] サイドバーや固定ページ等にサムネイル画像つきの最近の投稿をカテゴリー毎にタイル状に表示する方法

トップページの左側にカテゴリー毎の最近の投稿を表示させました。その設置方法についての覚書です。

fgsfgf

テキストウィジェットに

afgasgasd

以下のような記述を貼り付け、

<h5>WordPress.com の使い方</h5><h5>テーマの選定</h5>
[display-posts category="02 テーマの選定" image_size="thumbnail" posts_per_page="5"]<h5>記事の投稿方法</h5>
[display-posts category="03 記事の投稿方法" image_size="thumbnail" posts_per_page="5"]<h5>ウェブサイトの構築</h5>
[display-posts category="04 ウェブサイトの構築" image_size="thumbnail" posts_per_page="5"]<h5>CSS カスタマイズ</h5>
[display-posts category="05 CSS カスタマイズ" image_size="thumbnail" posts_per_page="5"]<h5>WordPress.com 周辺</h5>
[display-posts category="06 WordPress.com 周辺" image_size="thumbnail" posts_per_page="5"]

以下の CSS を追加することで、

/* サムネイル画像をタイル状に並べる(「display-posts」ショートコード対応版)*/
ul.display-posts-listing {
	padding-left: 0!important;
	text-align: left;
	margin: 0 0 15px;
}

ul.display-posts-listing li {
	width: 76px;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: normal;
	font-size: 10px;
	line-height: 1.2;
	margin: 0;
	padding: 2px;
}

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

ul.display-posts-listing li img {
	display: block!important;
	border: 1px solid #d0a600!important;
	height: 55px!important;
	width: 72px!important;
	margin: 2px!important;
	padding: 2px!important;
}

サムネイル画像つきの最近の投稿をカテゴリー毎にタイル状に表示させました。

同様にして、固定ページや投稿記事の方へ貼り付けることもできます。

dfgasga

投稿記事のリストの生成には、「display-posts」というショートコードを用いています(2013年3月16日現在、プラグイン「Jetpack by WordPress.com」をインストールした WordPress.org では使用できない模様レンタルサーバ等にインストールして使うタイプの WordPress でショートコード「display-posts」を使う場合には、プラグイン「Display Posts ShortCode」を使えばいいようです(記事「[レンタルサーバ等の WordPress] プラグイン「Display Posts Shortcode」をインストールすれば、WordPress.com のショートコード「Display-posts」を使えるようだ」参照))。このショートコードの設定方法については以下のページに説明があります(英語)。

上の例では、「category」というパラメータでカテゴリーを指定し(日本語も OK)、「image_size」で画像を生成させ、「posts_per_page」で投稿数を設定しています。

その他、「include_date=”true”」で日付を表示したり、「date_format=Y/n/j」といった感じで日付の書式を指定したり(その他の記号については「PHP: date – Manual」をご参照ください。)、「id」で個別の投稿記事を指定したり、「offset=”3″」等で最初の部分を削除したり、「order=”ASC”」(反対は「order=”DESC”」)で上下の順番を入れ替えたり、「order_by=”date”」とか「order_by=”title”」で順番を入れ替える基準を決めたり、といったことができるようです。

2件のコメント

  1. […] [WordPress.com] サイドバーや固定ページ等にサムネイル画像つきの最近の投稿をカテゴリー毎にタイル状に表示する方法 | comemo [レンタルサーバ等の WordPress] プラグイン「Display Posts Shortcode」をインストールすれば、WordPress.com のショートコード「display-posts」を使えるようだ | comemo […]

    いいね

  2. […] [WordPress.com] サイドバーや固定ページ等にサムネイル画像つきの最近の投稿をカテゴリー毎にタイル状に表示する方法 | comemo […]

    いいね

サイドバーや固定ページ等にサムネイル画像つきの最近の投稿をカテゴリー毎にタイル状に表示 | My Tips and Quotes にコメントする コメントをキャンセル

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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