ショートコード「display-posts」を使って、サムネイル画像つきの固定ページのリストを id 指定ではなく、固定ページの階層化(ページ属性の項目「親」)を使って表示する

afasdf

以前、「[WordPress.com] サムネイル画像つきの固定ページのリストを表示する」という記事において、固定ページをサムネイル画像つきでリスト表示させる方法について説明しました。

gfsfsfgsfd

上記のリストを生成している部分の記述は以下のとおりですが、

[display-posts id="13725,34312,44012,12490,40237" image_size="thumbnail" post_type="page" ]

記事の指定は、各固定ページの id 番号となっています。

ここでは、リストの生成を id 番号ではなく、固定ページの親子関係によって行う方法についての覚書です。イメージとしては、ある特定のカテゴリーの記事一覧を表示する、といったような要領で、固定ページの記事リストも管理しよう、といったものです。

リストを表示させたい記事の方には以下のような記述をします。

<div class="boxlist w100">
[display-posts post_type="page" post_parent="37577" image_size="thumbnail"]
</div>

CSS は、例えば、以下のようなものを使用します(私のブログの CSS から適当に抜粋し、適宜、修正したもの)。CSS は CSS スタイルシートエディターで追加します。

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

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

.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;
	width: 80px !important;
	max-width: 100% !important;
	height: auto !important;
	float: left !important;
	margin: -2px 4px 4px 2px !important;
	padding: 2px !important;
}

@media (max-width: 767px) {
	.boxlist ul.display-posts-listing li .excerpt {
		width: 93%;
	}
}

.boxlist ul.display-posts-listing li .excerpt a {
	font-size: 11px;
	float: right;
}

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

.boxlist.w50 ul.display-posts-listing > li {
	width: 45.5%;
	margin-left: 1.5% !important;
}

.boxlist.w33 ul.display-posts-listing > li {
	width: 31%;
	margin-left: 1.5% !important;
}

@media screen and (max-width : 980px) {
	.boxlist.w33 ul.display-posts-listing > li {
		width: 45.5%;
		margin-left: 1.5% !important;
	}
}

@media (max-width: 767px) {
	.boxlist.w50 ul.display-posts-listing > li,.boxlist.w33 ul.display-posts-listing > li {
		width: 100%;
	}

	.boxlist.w50 ul.display-posts-listing,.boxlist.w33 ul.display-posts-listing {
		margin: 0 1em 1.625em;
	}
}

リスト表示させたい固定ページでは、「ページ属性」の「親」のところで  post_parent の id 番号に対応している固定ページを指定します。

image

すると、以下のような感じの固定ページの記事リストを作成することができます。

afasdf

2つ、3つの固定ページを記事リストにするときには各固定ページの id 番号指定で問題ないと思いますが、リストの表示数が多いときには、この方法を使ったほうが便利かと思います。

参考

adffadfasd
Display Posts Shortcode — Support — WordPress.com

2件のコメント

  1. 固定ページのリストを作りたくて検索していました。
    参考にさせていただいて取り合えずつくれました。
    ありがとうございました。

    いいね

    1. お役にたてて光栄です。なお、関連記事については以下のページにまとめてあります。参考になれば幸いです。

      いいね

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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