WordPressで固定ページの子ページ一覧を出力する方法【プラグインなし】アイキャッチ画像や抜粋分も合わせてに出力！

2022.03.022016.07.08

この記事は約7分で読めます。

ワードプレスで固定ページに、その下の階層の固定ページ（子ページ）一覧を表示させたい事があります。テーマによってはデフォルトで機能が付いていたり、プラグインを使用するという手もありますが、ここではコピペでできる子ページ一覧出力コードを紹介したいと思います。

当サイトで言えば上記のページのようなイメージです。各種案内の子になっているページをアイチャッチ画像や抜粋分とともに一覧出力してCSSでレイアウトを整えています。簡単にできますので皆さんもやって見ましょう。どうしてもテーマをカスタマイズするのに抵抗があるという方はプラグインに頼りましょう。プラグインならChild Pages Shortcodeあたりが使いやすいかと思います。

固定ページの子ページ一覧を出力する
IDを指定した固定ページの子ページ一覧を出力する
タイトルだけでなく子ページのアイチャッチ画像や抜粋文もつける
1. アイキャッチ画像をサムネイルサイズに
2. タイトルに文字数制限を掛ける
まとめ

固定ページの子ページ一覧を出力する

以下のコードを子ページ一覧を出力させたいテンプレートファイルの任意の場所にコピペするだけです。シンプルに子ページのタイトルだけをリスト表示します。

子ページのタイトル
子ページのタイトル
子ページのタイトル

<ul>
<?php 
$parentId = get_the_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(); ?>"><?php the_title(); ?></a></li>
<?php
    $count++;
   endwhile;
endif;
wp_reset_query();
?>
</ul>

IDを指定した固定ページの子ページ一覧を出力する

現在のページの子ページではなく、特定の固定ページの子ページを出力したい場合があると思います。たとえばトップページにサービス一覧を表示させたいとか。以下の例では『ID:886』の固定ページの子ページを出力できるようになります。

ID:886の子ページのタイトル
ID:886の子ページのタイトル
ID:886の子ページのタイトル

<ul>
<?php 
$parentId = 886; // ここで指定した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(); ?>"><?php the_title(); ?></a></li>
<?php
    $count++;
   endwhile;
endif;
wp_reset_query();
?>
</ul>

タイトルだけでなく子ページのアイチャッチ画像や抜粋文もつける

以下のコードでアイチャッチ画像・タイトル・抜粋文（50文字）も表示できます。CSSで見やすいように各自レイアウトしてください。

【アイチャッチ画像（原寸）】
子ページのタイトル
抜粋文（50文字制限）
【アイチャッチ画像（原寸）】
子ページのタイトル
抜粋文（50文字制限）
【アイチャッチ画像（原寸）】
子ページのタイトル
抜粋文（50文字制限）

<ul>
<?php 
$parentId = get_the_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>
<div class="thumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a></div>
<div class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
<div class="excerpt"><?php echo mb_substr(get_the_excerpt(), 0, 50); ?></div>
</li>
<?php
    $count++;
   endwhile;
endif;
wp_reset_query();
?>
</ul>

アイキャッチ画像をサムネイルサイズに

アイチャッチ画像を正方形のサムネイルで出力したい場合は『full』と書かれているところを『thumbnail』に変えましょう。

【アイチャッチ画像（サムネイルサイズ）】
子ページのタイトル
抜粋文（50文字制限）
【アイチャッチ画像（サムネイルサイズ）】
子ページのタイトル
抜粋文（50文字制限）
【アイチャッチ画像（サムネイルサイズ）】
子ページのタイトル

タイトルに文字数制限を掛ける

デザインやレイアウトの都合上、タイトルにも文字数の制限を掛けたいと言う人は、the_titleの代わりに下記のコードを入れましょう。

【アイチャッチ画像】
子ページのタイトル（32文字制限）
抜粋文
【アイチャッチ画像】
子ページのタイトル（32文字制限）
抜粋文
【アイチャッチ画像】
子ページのタイトル（32文字制限）
抜粋文

<?php
if(mb_strlen($post->post_title, 'UTF-8')>32){
	$title= mb_substr($post->post_title, 0, 32, 'UTF-8');
	echo $title.'…';
}else{
	echo $post->post_title;
}
?>

これでタイトルを32文字まで出力します。32と書いてあるところ（2箇所とも）でタイトルの文字数の制限を掛けることができます。制限する文字数を変えたいときは2箇所とも変えてください。

まとめ

いかがでしたでしょうか？使い方によってはカスタムフィールドと組み合わせて価格も表示した商品一覧ページとかも作れます。一度お試しあれ！