WordPressの固定ページには親子関係をつけることができますが、あんまり使ってませんでした。
たとえば、あるクライアントさんのサービス一覧とか、商品一覧をサムネイル付きで一覧表示したい時、カスタム投稿を使ってやることが多かったのですが、ふと子ページを使えば簡単にできるんじゃないかと思いつきました。
商品がどんどん増える場合には、カスタム投稿を使ったほうがいいと思いますが、 いくつかの商品カテゴリがあって、あとはその商品カテゴリの概要だけを掲載するパターンがおおいので、それなら固定ページで十分なわけです。
子ページの一覧を表示するには、自前でコードを書かないとだめみたいで、WP_Queryなんかでコードを書くことになるわけですが、もしかして便利なプラグインをどなたか作ってくれてないかな?なんて調べてみるとありました!超便利なプラグインが。
Child Pages Shortcode WordPress › Child Pages Shortcode « WordPress Plugins
何が便利って、ショートコード [child_pages] ←[]は半角になおしてね。 を親ページに貼り付けるだけで、その子ページの一覧がサラッと表示されるところ。
これだけで、その子ページの一覧が表示されます。
もう、ほんと便利。
たとえば、トップページなど、親ページ以外に表示させたければ、
[child_pages id=127]←[]は半角になおしてね。
と、親ページのIDを指定すればOK。
ほかにも、
[child_pages width=”33%”]←[]は半角になおしてね。
とすれば、一行に3つづつ表示できるようになるし、
[child_pages disabled_excerpt_filters=1]←[]は半角になおしてね。
とすれば、抜粋を非表示にもできます。
このプラグインを導入するだけで、見栄えのよいデザインになってくれるわけですが、自分でCSSを組みたい場合はフックを使ってやる必要があります。
たとえば、以下をfunction.phpに書き加えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_filter("child-pages-shortcode-template", "cps_template_filter"); function cps_template_filter($template) { $template = " <div id="child_page-%post_id%" class="child_page" style="width:%width%;"> <div class="child_page-container"> <div class="post_thumb"><a href="%post_url%">%post_thumb%</a></div> <div class="post_content"> <h4><a href="%post_url%">%post_title%</a></h4> <div class="post_excerpt">%post_excerpt%</div> </div> </div> </div> "; return $template; } |
$templateの内容を書き換えればオリジナルのテンプレートにできます。(上記の例は、デフォルトのテンプレートです。)
デフォルトでは、CSS と JQuery でデザインされているので、無効化するには、以下を追加。
1 2 3 4 5 |
function cps_style_disable() { return ""; } add_filter("child-pages-shortcode-js", "cps_style_disable"); add_filter("child-pages-shortcode-stylesheet", "cps_style_disable"); |