【WordPress】wp_list_pages の使い方｜固定ページの一覧・階層メニューを表示する方法

会社概要や利用規約、各種の案内ページなど、WordPress では「投稿」ではなく「固定ページ（page）」で作るコンテンツがあります。こうした固定ページへのリンク一覧を、サイドバーやフッターにまとめて出したいときに便利なのが wp_list_pages() 関数です。この記事では、wp_list_pages() の基本的な使い方から、title_li や depth・child_of などの主要な引数、親子ページ（階層）の表示、現在表示中のページに付くクラス、文字列として受け取る方法、そして似た関数 wp_page_menu() との違いまで、実際のコード例とともに解説します。

wp_list_pages は固定ページのリンク一覧を出力する

wp_list_pages() は、公開されている固定ページへのリンクを <li> 要素の並びとして出力する関数です。親子関係を持つページは自動的に入れ子（ネスト）になり、階層構造がそのままリストに反映されます。まずは最小のコードを見てみましょう。

<ul>
    <?php wp_list_pages(); ?>
</ul>

ここで一つ注意点があります。引数を省略して呼び出すと、初期値の title_li が働き、リスト全体が「Pages」という見出し付きの <li> でくくられて出力されます。具体的には、次のような入れ子構造の HTML になります。

<ul>
    <li class="pagenav">Pages
        <ul>
            <li class="page_item page-item-2"><a href="...">会社概要</a></li>
            <li class="page_item page-item-5"><a href="...">お問い合わせ</a></li>
        </ul>
    </li>
</ul>

この見出し付きの入れ子が不要なら、title_li を空文字にします。そうすると外側の <li> が消え、各ページの <li> だけがフラットに並びます。次の項で詳しく見ていきましょう。

主な引数で表示を調整する

wp_list_pages() には配列の形で引数を渡し、表示するページや並び順を細かく指定できます。よく使う引数を初期値とあわせてまとめました。

たとえば「Pages」という見出しを消し、特定のページを一覧から外して、タイトルの五十音・アルファベット順で並べるなら次のように書きます。

<ul>
    <?php
    wp_list_pages( array(
        'title_li'    => '',            // 見出し項目を出さない
        'exclude'     => '3, 7',        // ID 3 と 7 のページを除外
        'sort_column' => 'post_title',  // タイトル順で並べる
        'sort_order'  => 'ASC',         // 昇順
    ) );
    ?>
</ul>

title_li を空にしたことで、囲みの <li> がなくなり、指定した <ul> の直下に各ページのリンクが並びます。除外したいページがあるときは exclude、逆に「このページだけ出したい」ときは include を使い分けてください。

親子ページの階層をそのまま表示する

固定ページは、編集画面の「ページ属性」で親ページを指定すると階層構造を持てます。wp_list_pages() はこの親子関係を検出し、子ページを <ul> で入れ子にして出力します。特別な指定をしなくても、階層はそのままメニューに反映されるということです。

表示する深さを制限したいときは depth を使います。たとえばトップ階層のページだけを見せたいなら depth に 1 を指定します。

<ul>
    <?php
    wp_list_pages( array(
        'title_li' => '',
        'depth'    => 1,   // トップ階層のページだけ表示（子は出さない）
    ) );
    ?>
</ul>

逆に、特定の親ページに属する子ページだけを一覧にしたいこともあります。その場合は child_of に親ページの ID を渡します。「サービス」ページの下にぶら下がる各サービスのページだけを出す、といった使い方ができます。

現在のページに付くクラスでスタイルを変える

wp_list_pages() が出力する各 <li> には、ページを識別するためのクラスが自動で付きます。すべての項目に共通して付くのが page_item と page-item-{ID}（{ID} はページ ID）です。さらに、いま表示しているページに応じて次のクラスが加わります。

これらのクラスを使えば、閲覧中のページやその親を目立たせるスタイルを CSS だけで実現できます。たとえば現在のページを太字にし、親ページの色を変えるなら次のように書きます。

/* いま見ているページを強調 */
.current_page_item > a {
    font-weight: bold;
    color: #007bff;
}

/* その親ページを少しだけ強調 */
.current_page_ancestor > a {
    color: #555;
}

子ページを閲覧しているときも、親をたどってクラスが付くため、サイドバーメニューで「いまサイトのどこにいるか」を読者に伝えられます。

出力せず文字列として受け取る

初期状態ではその場に HTML が出力されますが、echo を false にすると、出力せずに文字列として受け取れます。ページが一件もないときは見出しごと隠す、といった制御をしたいときに便利です。

<?php
$pages = wp_list_pages( array(
    'title_li' => '',
    'echo'     => false,   // 出力せず文字列で返す
) );

// 中身があるときだけ見出し付きで表示する
if ( ! empty( $pages ) ) {
    echo '<h3>ページ一覧</h3>';
    echo '<ul>' . $pages . '</ul>';
}
?>

このように echo => false で受け取れば、固定ページが存在するときだけ見出しとリストを出す、といった柔軟な表示ができます。

実践例：サイドバーにサブページ一覧を出す

よくあるのが、あるセクションのページを見ている間、そのセクション内のサブページ一覧をサイドバーに表示する使い方です。たとえば「サービス」ページとその子ページを閲覧しているとき、常に「サービス」以下の一覧を出す、というものです。

ポイントは、表示中のページが親（トップ階層）か子かによって、child_of に渡す ID を切り替えることです。現在のページ情報は $post から取得できます。

<?php
if ( is_page() ) {
    global $post;

    // 親がいればその親 ID、なければ自分の ID を基準にする
    $parent_id = $post->post_parent ? $post->post_parent : $post->ID;

    $children = wp_list_pages( array(
        'title_li' => '',
        'child_of' => $parent_id,  // この親の子ページだけ表示
        'echo'     => false,
    ) );

    // 子ページが存在するときだけメニューを出す
    if ( ! empty( $children ) ) {
        echo '<nav class="subpage-nav">';
        echo '<ul>' . $children . '</ul>';
        echo '</nav>';
    }
}
?>

このコードでは、子ページを見ているときはその親の ID を、親ページ自身を見ているときは自分の ID を child_of に渡しています。これにより、セクション内のどのページにいても同じサブページ一覧が表示され、current_page_item クラスによって現在地も分かるようになります。子ページが一つもないページでは、空チェックのおかげで余計な見出しが出ません。

wp_page_menu との違い

固定ページの一覧を出す関数には、よく似た wp_page_menu() もあります。両者の大きな違いは出力のまとまり方です。wp_list_pages() は <li> の並びしか出力しないため、自分で <ul> や <nav> で囲む必要があります。一方 wp_page_menu() は、全体を <div class="menu"> と <ul> で囲んだ形で出力し、show_home 引数を true にすればトップページ（ホーム）へのリンクも先頭に加えられます。

大まかには、リストの囲みやマークアップを自分で細かく制御したいときは wp_list_pages()、ホームリンク付きの簡易メニューを手早く出したいときは wp_page_menu()、と考えると使い分けやすいでしょう。なお wp_page_menu() は内部で wp_list_pages() を呼び出しているため、depth や exclude など多くの引数は共通で使えます。

まとめ

wp_list_pages() は、固定ページへのリンクを <li> の一覧として出力する関数です。title_li を空文字にすれば見出しの囲みを外せ、depth で階層の深さ、child_of で対象の親、exclude や include で表示するページを調整できます。親子ページは自動で入れ子になり、現在のページには current_page_item などのクラスが付くので、CSS で現在地を強調できます。echo => false で文字列として受け取れば表示制御も柔軟です。囲みごと出したい簡易メニューには wp_page_menu() という選択肢もあるので、目的に合わせて選んでください。

参考ページ

• wp_list_pages() – Function | WordPress Developer Resources
• wp_page_menu() – Function | WordPress Developer Resources
• get_pages() – Function | WordPress Developer Resources