【WordPress】トップページから特定の親を持つ子ページ一覧を表示する方法

想定している状況としては、「front-page.php（トップページ）に『A』という親を持つ子ページ一覧を表示させたい」という状況です。

早速コードを書いていきます。

まずは前半です。

//<front-page.php
<?php
$shop_obj = get_page_by_path( 'A' );
$post = $shop_obj;
setup_postdata( $post );
?>
    
    <h2><?php the_title(); ?></h2>
    <p><?php echo get_excerpt(); ?></p>

<?php wp_reset_postdata(); ?>

ここまでで、「A」という親ページのタイトルと抜粋文の表示ができました。

$shop_obj = get_page_by_path( 'A' );

→引数に固定ページのスラッグ（固有のURL)を指定することで、そのページのオブジェクトを取得できます。

get_page_by_path('A')としたので、Aという固定ページのオブジェクトをこれで取得できました。このオブジェクトが入った$shop_objを、さらに$postという変数に入れておきます。

setup_postdata( $post );
wp_reset_postdata();​

→setup_post( $post )とすることで、引数の投稿情報をセットし、wp_reset_postdata()の間でセットした投稿情報をもとにテンプレートタグを実行しています。

setup_post()はサブクエリでの処理なので、メインクエリに戻すときwp_reset_postdata()を記述する必要があります。

 <h2><?php the_title(); ?></h2>
 <p><?php echo get_excerpt(); ?></p>

→setup_postdata( $post )でセットされた投稿の情報をもとに、タイトルと抜粋文の中身を表示しています。

ここでは、「$post」つまり、固定ページ「A」のタイトルと抜粋文を表示しています。

さて、ここから、「A」の子ページ一覧を取得して表示します。

まずは子ページ取得の関数、名前を「get_child_pages」として、function.phpに作成していきます。

//function.php
//子ページ一覧の抽出

function get_child_pages( $number = -1, $parent_id = null ) {
    array(
        'posts_per_page' => $number,
        'post_type' => 'page,
        'orderby' => 'menu_order',
        'post_parent' => $parent_id,
);

$child_pages = new WP_Query( $args );
return $child_pages;
}

簡単に一行づつコードを見ていきましょう。

'posts_per_page' => $number,

→「何件のデータを取得するか」を指定しています。ここでは、$numberに「−１」が当てられている為、これは全件取得するという意味になります。

'post_type' => 'page,

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

「page」は、「固定ページ」を表しています。

'orderby' => 'menu_order',

→データの並び順を指定しています。ここでは、WordPress管理画面にて指定した並び順に従うという記述をしています。

'post_parent' => $parent_id,

→どの親ページを参照するか？を指定しています。ここでは「$parent_id」として、引数で受け取った親ページのIDを渡しています。

この後、front_page_.php(トップページ）で、この関数を呼び出す際に参照したい親ページのID情報を引数として割り当てれば、良いわけです。

$child_pages = new WP_Query( $args );

→WP_Queryを使えば、引数に指定したデータを取得してくることができます。ここでは引数に先ほど作成した「$args」が指定してありますので、特定の親に属する子ページを、取得することができます。

return $child_pages;

→最後に、それらの処理を変数に入れ、returnで返しています。

では、front_page.phpを編集して、子ページ一覧の表示を完成させていきましょう。

//front_page.php

<?php
$child_page = get_child_page();
if( $child_page->have_posts() ):
    while( $child_page->have_posts() ): $child_page->the_post();
?>

    <a href"<?php the_permalink(); ?>
    <div><?php the_post_thumbnail(); ?>
    <p><?php the_title(); ?>

<?php
    endwhile;
endif;
?>

これで、トップページにて子ページ一覧の表示が完成しました。

それぞれのページには、クリックすると飛べるようにリンクが割り振られています。

$child_page = get_child_page();

→先ほど「function.php」に作った子ページを取得する関数を呼び出して、変数に入れています。

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

→「have_posts()」で、処理すべき記事があるかどうか判断しています。どこを見て判断しているかというと、「the_post()」の値を見て判断しています。「the_post()」では、投稿等の情報を取ってきてセットしています。

トップページにてそのまま「have_posts()」などとしてしまうと、トップページの投稿の情報を参照してしまう為、「$child_page->have_posts()」このように記述して、どこからデータを取ってきてセットするか、を定めています。

    <a href"<?php the_permalink(); ?>
    <div><?php the_post_thumbnail(); ?>
    <p><?php the_title(); ?>

→取得した子ページのパーマリンク、サムネイル、タイトルを表示しています。

whille文で繰り返しているので、処理すべき記事が有る限り、ループし続けます。

これで、トップページから特定の親を持つ子ページ一覧を表示することができました。

お疲れ様でした。