ワードプレスで固定ページに、その下の階層の固定ページ（子ページ）一覧を表示させたい事があります。テーマによってはデフォルトで機能が付いていたり、プラグインを使用するという手もありますが、ここではコピペでできる子ページ一覧出力コードを紹介したいと思います。
当サイトで言えば上記のページのようなイメージです。各種案内の子になっているページをアイチャッチ画像や抜粋分とともに一覧出力してCSSでレイアウトを整えています。簡単にできますので皆さんもやって見ましょう。どうしてもテーマをカスタマイズするのに抵抗があるという方はプラグインに頼りましょう。プラグインならChild Pages Shortcodeあたりが使いやすいかと思います。
固定ページの子ページ一覧を出力する
以下のコードを子ページ一覧を出力させたいテンプレートファイルの任意の場所にコピペするだけです。シンプルに子ページのタイトルだけをリスト表示します。
- 子ページのタイトル
- 子ページのタイトル
- 子ページのタイトル
<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箇所とも変えてください。
まとめ
商品一覧ページの例 いかがでしたでしょうか？使い方によってはカスタムフィールドと組み合わせて価格も表示した商品一覧ページとかも作れます。一度お試しあれ！