かじこの備忘録

固定ページにおいて、親ページに、その子ページの「タイトル」「抜粋」「アイキャッチ画像」を一覧表示します。

孫ページがある場合は、子ページに、その孫ページの「タイトル」「抜粋」「アイキャッチ画像」を一覧表示します。

親ページには孫ページの一覧は表示されません。一つ下の階層ページの一覧のみ表示します。

page.phpに記述

<?php while(have_posts()) : the_post(); // メインループ?>
<h1><?php the_title(); ?></h1>
<div id="content">
<?php if(get_pages('child_of=' . $post->ID)) : //下層ページがある(親ページの)場合 ?>
<?php get_template_part('loop-multi','page'); // 「loop-multi-page.php」を読み込んで、アイキャッチと抜粋を表示 ?>
<?php else: // 最下層ページの場合?>
<?php the_content(); //本文を表示 ?>
<?php endif; ?>
<?php endwhile; ?>
</div>

「loop-multi-page.php」に記述

別に「loop-multi-page.php」を用意して記述します。ページ(page.php)で子ページを取得しアイキャッチ画像と抜粋を出力するマルチループです。

<?php query_posts(array(
'posts_per_page' => -1
, 'order' => 'ASC'
, 'orderby' => 'menu_order'
, 'post_type' => 'page'
,'post_parent' => get_the_ID())); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="child_page">
<div class="img_box">
<?php if(has_post_thumbnail()) : // アイキャッチがあるとき ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(200,200)); ?></a>
<?php else: // アイキャッチがないとき ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo('NO IMAGE'); ?></a>
<?php endif; ?>
</div><!--end of .img_box-->
<div class="text_box">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div><!--end of .text_box-->
</div><!--end of .child_page-->
<?php endwhile; else: ?>
<p>現在表示する記事がありません。</p>
<?php endif; ?>
<?php wp_reset_query(); ?>

CSSを整える

最低限のcssはこんな感じ。paddingやmargin、font-sizeなどは任意で付加。

.child_page {
 display: table;
}
.child_page .img_box {
 height: 200px;
 width: 200px;
 text-align: center;
 vertical-align: middle;
 display: table-cell;
}
.child_page .text_box {
 vertical-align: middle;
 display: table-cell;
 padding-left: 30px;
}