【WordPress】親ページに子ページの一覧をアイキャッチ付きで表示する

公開日: : 最終更新日:2016/03/24 WordPress

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

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

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

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;
}


関連記事

wordpress

wordpressの投稿ページで、アイキャッチ画像を登録できるようにする

アイキャッチ画像を記事入力画面で有効化する function.phpに以下のコードを追記します。 f...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑