テクニカルノート

WordPressの固定ページには親子関係をつけることができますが、あんまり使ってませんでした。

たとえば、あるクライアントさんのサービス一覧とか、商品一覧をサムネイル付きで一覧表示したい時、カスタム投稿を使ってやることが多かったのですが、ふと子ページを使えば簡単にできるんじゃないかと思いつきました。

商品がどんどん増える場合には、カスタム投稿を使ったほうがいいと思いますが、 いくつかの商品カテゴリがあって、あとはその商品カテゴリの概要だけを掲載するパターンがおおいので、それなら固定ページで十分なわけです。

子ページの一覧を表示するには、自前でコードを書かないとだめみたいで、WP_Queryなんかでコードを書くことになるわけですが、もしかして便利なプラグインをどなたか作ってくれてないかな？なんて調べてみるとありました！超便利なプラグインが。

Child Pages Shortcode WordPress › Child Pages Shortcode « WordPress Plugins

何が便利って、ショートコード ［child_pages］ ←［］は半角になおしてね。 を親ページに貼り付けるだけで、その子ページの一覧がサラッと表示されるところ。
これだけで、その子ページの一覧が表示されます。

もう、ほんと便利。
たとえば、トップページなど、親ページ以外に表示させたければ、

［child_pages id=127］←［］は半角になおしてね。

と、親ページのIDを指定すればOK。
ほかにも、

［child_pages width=”33%”］←［］は半角になおしてね。

とすれば、一行に３つづつ表示できるようになるし、

［child_pages disabled_excerpt_filters=1］←［］は半角になおしてね。

とすれば、抜粋を非表示にもできます。
このプラグインを導入するだけで、見栄えのよいデザインになってくれるわけですが、自分でCSSを組みたい場合はフックを使ってやる必要があります。

たとえば、以下をfunction.phpに書き加えます。

add_filter("child-pages-shortcode-template", "cps_template_filter");
function cps_template_filter($template) {
	$template = "

	

		
%post_thumb%
		

			
%post_title%
			
%post_excerpt%
		
	

";
	return $template;
}

$templateの内容を書き換えればオリジナルのテンプレートにできます。（上記の例は、デフォルトのテンプレートです。）

デフォルトでは、CSS と　JQuery　でデザインされているので、無効化するには、以下を追加。

function cps_style_disable() {
return "";
}
add_filter("child-pages-shortcode-js", "cps_style_disable");
add_filter("child-pages-shortcode-stylesheet", "cps_style_disable");