Wordpressで指定スラッグのページの子ページを一覧表示する方法

投稿日：2018/09/11
Wordpress
固定ページ

Wordpressではページを階層分けできます。
指定のスラッグのページの子ページを一覧表示する方法を紹介します。

wp_list_pagesを利用する方法

テンプレートタグ「wp_list_pages」は固定ページへのリンクのリストを表示します。

<?php
    $page_ID = get_page_by_path('parent/this/child')->ID; //スラッグを入力
    $children = wp_list_pages('title_li=&child_of='.$page_ID.'&echo=0');
        if($children){
        echo '<ul>';
        echo $children;
        echo '</ul>';
    }
?>

１行目にスラッグを入力してください。
指定したいページに親ページがある場合、「親ページ/指定したいページ」のように親ページのスラッグを「/」で区切って入力してください。

get_postsを利用する方法

wp_list_pagesを利用する方法では単純にリストを生成するだけでしたが、ページタイトル・スラッグ・本文などページのその他の情報も表示させたい場合は、下記のようにします。

<?php
    $page_id = get_page_by_path("parent/this/child");//スラッグを指定

    $args = array(
        'post_parent' => $page_id,
        'post_type' => 'page',
        'order' => 'ASC',
        ); 
    $posts = get_posts($args);
    foreach($posts as $post) {
        $post_id = $post->ID; 
        $page_id = get_page($post_id);

        $html  = '';
        $html  = '<h3>' . the_title() . '</h3>';
        $html .= '<p>' . the_excerpt() . '</p>';
        $html .= '<a href="' . the_permalink() . '">続きを読む</a>';

        echo $html;
    };
?>

get_childrenを利用する方法

get_postsを利用する方法の他に、スラッグ・タイトルなどを表示したい場合は下記のようにもできます。

            <?php
                $page_id = get_page_by_path("parent/this/child");//スラッグを指定
                $page_id = $page_id->ID;

                $args = array(
                    'post_parent' => $page_id ,
                    'post_status' => 'publish',
                    'post_type'   => 'page',
                    'order'       => 'ASC',
                    'orderby'     => 'menu_order'
                );
                $children_array = get_children( $args );
        
                if ( count( $children_array ) > 0 ) {
                    echo '<div>';
                    foreach ( $children_array as $child ) {
                        $url = get_permalink( $child->ID );
        
                        $html  = '<div class="' . $child->post_name . '">';
                        $html .= '<a href="' . esc_url( $url ) . '">';
                        $html .= '<h4>' . esc_html( $child->post_title ) . '</h4>';
                        $html .= '</a>';
                        $html .= '<p>' . esc_html( $child->post_content ) . '</p>';
                        $html .= '</div>';
        
                        echo $html;
                    }
                    echo '</div>';
                }
            ?>

WP_Queryを利用する方法

ループで利用したい場合、WP_Queryを使用することもできます。

<?php
$parent_slug = 'parent'; //親ページのスラッグ
$parent_ID = get_page_by_path($parent_slug)->ID; //親ページのID
$args= array(
    'posts_per_page' => -1, //全件表示
    'post_type'      => 'page', //固定ページのみ
    'post_parent'    => $parent_ID,
);
$query = new WP_Query($args);

if($query -> have_posts()):?>
<ul>
<?php while( $query -> have_posts()):
    $query -> the_post();?>
    <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
    <?php endwhile; ?>
<?php
endif;
wp_reset_postdata();
?>