【WordPress】子ページ一覧を表示する方法

「固定ページ」には、親ページと子ページという概念があり、親ページの中に子ページが入っている、というイメージで特に問題ないかと思います。

さて今回は、「親ページにアクセスした際に、その親に属する子ページ一覧を表示する方法」を備忘録的に記しておきます。

親ページにアクセスした際に、その親に属する子ページ一覧を表示する方法

まず、親ページのファイル名を「page-（スラッグ名）.php」としておきます。こうしておくことで、このファイルが親ページのテンプレートとして読み込まれます。

（スラッグとは、WordPress管理画面で設定できるそのページ特有のURLのことです。）

コード記述

ファイルが作成できたら、下記のコードを記述していきます。

少々長いですが、一つずつ見ていけば単純な作りになっています。

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

$common_pages = new WP_Query( $args );
if( $common_pages->have_posts() ):
    while( $common_pages->have_posts() ): $common_pages->the_post();
?>

    
    <a href="<?php the_permalink(); ?>">
        <div><?php the_post_thumbnail(); ?></div>
        <p><?php the_title(); ?></p>
        <p><?php echo get_the_excerpt(); ?></p>

<?php
    endwhile;
    wp_reset_postdata();
endif;
?>

さて、長かったですが、ここから一つづつどんな働きをしているのか解説に入ります。

ざっくり流れとしては、「子ページの取得」→「WordPressループでブラウザ上に表示」これだけです。

ここを理解すると上記のコードがめっちゃ単純ということが分かるのですが、

「子ページの取得」をしているのが真ん中辺にある「new WP_Query( $args );」の記述です。

「WP_Query」は、投稿やページの情報を取得することができるクラスです。（クラスがわからない人は、ここはPHPの領域になりますのでググってみてください。そんな難しくはないはずです！）

今回のケースでは、WP_Queryによって()の中にある「$args」というデータを取得します。

この「$args」は何か？というと、これが「今表示している親ページに属する子ページのデータ」というわけです。

ちょっと説明がグダグダしてきてしまいました。

要はWP_Queryで子ページを取得して、その後の記述でその取ってきたデータを表示させているということです。

コード解説

それでは、コードを一つずつ見ていきます。

$parent_id = get_the_ID)();

→"get_the_ID()"によって、今表示されている親ページのIDを取得して"$parent_id"という変数に入れておきます。後で使うので。

このIDによって、コンピュータが「どの親ページか？」というのを判別することができます。

'posts_per_page' => -1,

→取得してくる記事数を指定しています。

'posts_per_page' => 3,とすれば、3件の子ページのデータ取得してきます。

そして「-1」というのは、「全部取得」という意味になりますので、これで「親ページに属する全ての子ページを取ってきて！」という記述というわけです。

'post_type' => 'page',

→取得したい投稿タイプを指定しています。

「page」とすると、「固定ページ」を取得できます。

'orderby' => 'menu_order',
'order' => 'ASC',

→この二行で、取得してきたデータを「どのように並べて表示するか」を記しています。

'orderby' => 'menu_order',は、WordPress管理画面で設定した並び順をもとに表示することを意味しています。

'order' => 'ASC',は、「昇順」で表示するという意味です。

ちなみに逆の意味である「降順」に場合は、「DESC」と記述します。

'post_parent' => $parent_id,

→この記述で、「どの親からデータを取得してくるか？」を指定しています。

「$parent_id」には、現在表示している親ページのIDを最初に入れておきましたね。

これで、WP_Query( $args ）でどんなデータを取得してくるか？まで実装できました。

あとは、取得してきたデータをWordPressループを使ってブラウザ上に表示していきます。

if( $common_pages->have_posts() ):
    while( $common_pages->have_posts() ): $common_pages->the_post();

→「投稿」を取ってくるときの記述と基本的には同じですが、今回は現在表示しているページのデータではなく、指定した子ページのデータを取ってくるので、「$common_pages->have_posts() 」といった少し変な書き方をしています。

「投稿」の取得、表示方法が分からないという方は下の記事も合わせてお読みください。

the_permalink();

→子ページのURLを取得しています。

クリックすると、該当のページに飛ぶことができます。

the_post_thumbnail();

→記事に紐付いた画像を取得することができます。WordPress管理画面にて設定できるアイキャッチ画像をこの記述で取得して表示することができます。

the_title();

→記事のタイトルを取得しています。

get_the_excerpt();

→記事の抜粋データを取得できます。（抜粋文は管理画面にて設定することができるその記事の説明文的な文のことです。）

抜粋データがない場合には、記事の本文を出力します。

wp_reset_postdata();

→この記述は、サブクエリを実行した後に記述しなければならないコードで、これを書かないと後で意図しない挙動をしてしまったりするそうです。

ここで出てきた「サブクエリ」というのは、「メインクエリ」と対の意味を持っていて、メインクエリは今回のケースで言えば親ページのデータのことです。

そのURLにアクセスされて、「本来取得されるデータ」という認識ですかね。

今回のケースで言えば、子ページのデータというのはWP_Queryによって無理やり呼び出したデータです。

ちょっと説明が下手で申し訳ないのですが、ユーザーからのリクエストによって自動的に呼び出されるデータが「メインクエリ」で、テンプレート内で指定することで無理やり呼び出したデータが「サブクエリ」となります。

この最後のコードは、「今はサブクエリのデータを参照しているけど、参照をメインクエリに戻して！」という意味になります。

ちょっとややこしいのですが、ここはいちいち書かないとダメみたいです。

以上です！