みなさんこんばんは。
今回は結構使う頻度が高い、固定ページの子ページ一覧を表示させる方法をご紹介します。
今回私がしたかったのは、親ページにその下にぶら下がる子ページの「サムネイル」「子ページへのリンク」「抜粋文」の表示です。
ではさっそくコードのご紹介!
ちなみに、ワードプレスのテーマをカスタマイズするのに抵抗がある方は、『Child Pages Shortcode』というプラグインでも実装できたりするので
ぜひおためしください。
個人的にはカスタマイズしたほうが、ごりごり触れて楽しいし柔軟性あっていいと思いますけどね♪
<section id="lineup">
<div class="inner">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<ul class="flexbox fw">
<?php $parentId = 10046; //親固定ページのID
$args = 'posts_per_page=-1&post_type=page&orderby=menu_order&order=asc&post_parent='.$parentId;
query_posts($args);
if (have_posts()) :
$count = 1;
while (have_posts()) :
the_post();
if ( ( $count % 2 ) > 0 ) {
$layout = 'odd';
} else {
$layout = 'even';
} ?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<figcaption>
<?php the_post_thumbnail('full'); ?>//サムネイルはフルで表示する(largeやsmall、mediumでもOK)
<h4><?php the_title(); ?></h4>//固定ページのタイトル
<p><?php echo mb_substr(get_the_excerpt(), 0, 50); ?></p>//抜粋を50文字だけ表示
<div class="more_btn">
<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">詳しく見る</a></p>
</div>
</figcaption>
</a>
</li>
<?php
$count++;
endwhile;
endif;
wp_reset_query();
?>
</ul>
<?php endwhile; ?>
<?php else: ?>
<p>現在、固定ページは表示できません。</p>
<?php endif; ?>
</div>
</section> <!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
もちろんデザインは自分のテンプレに当てはめて変えてくださいね~。
ちなみに通常固定ページには抜粋分文が入力できないようになっているんですが
抜粋分を固定ページにも表示させたいという方は以下の方法でさくっと表示できます。
function.phpに以下を追加してください。
/* ------------------------------------------------------------- */ // // 固定ページでも抜粋を表示 // /* ------------------------------------------------------------- */ add_post_type_support( 'page', 'excerpt' );
みなさんも試してみてくださいね♪