【WordPress】自動で表示されるインデックスページの作り方

WordPressでは親ページに、その子ページの一覧を取得自動で表示させることができます。子ページの変動に合わせて親ページも変動するので、管理しやすくなります。
その機能を実装するには、カスタムテンプレートを作成する方法が一般的です。
今回はこの機能を実装するための手順をご紹介します。

※シンプルにカスタムテンプレートを追加したい方は、こちらの記事をご覧ください。

はじめに

WordPressの固定ページに子ページの一覧を自動表示させると、サイトのナビゲーションが改善され、管理者にとっても使いやすいウェブサイトを構築できます。この機能は、特に階層が多いウェブサイトにおすすめです。

必要なスキルとツール

• 基本的なWordPressの知識
• PHPの基礎知識
• WordPressテーマのファイル構造に対する理解
• テキストエディタ（VS Codeなど）

手順

子ページ一覧を表示するテンプレートファイルの作成

WordPressで子ページの一覧を表示するカスタムテンプレート（今回はparent.phpとします）を作成する過程を、段階的に分けて説明します。

テンプレートファイルの基本構造

WordPressテーマ開発では、テンプレートファイルの先頭にメタ情報をコメントとして記述します。これにより、WordPressはこのファイルが特定のテンプレートであることを識別できます。

<?php
/*
Template Name: Parent page
*/
?>

この部分は、テンプレートファイルをWordPressの管理画面から選択可能にするために必要です。Template Nameの後に続く名称が、WordPressのページ編集画面で選択できるテンプレート名として表示されます。

ヘッダーとフッターの読み込み

テンプレートの次のステップでは、サイトのヘッダーとフッターを読み込みます。必要に応じて読み込むヘッダーは変更してください。

<?php get_header(); ?>
    // テンプレートのコンテンツがここに入ります。
<?php get_footer(); ?>

get_header()とget_footer()は、それぞれテーマのheader.phpとfooter.phpファイルを読み込みます。

子ページのクエリと表示

テンプレートの中心的な機能は、現在のページの子ページをクエリして表示することです。これにはget_children()関数を使用します。

<?php
// 現在のページIDを取得
$parent_id = get_the_ID();

// 子ページのクエリをセットアップ
$args = array(
    'post_parent' => $parent_id,
    'post_type' => 'page',
    'numberposts' => -1,
    'post_status' => 'publish',
);
$children = get_children($args);

// 子ページがあれば一覧表示
if ($children) : ?>
    <ul>
        <?php foreach ($children as $child) : ?>
            <li>
                <a href="<?php echo get_permalink($child->ID); ?>">
                    <?php echo get_the_title($child->ID); ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
<?php else : ?>
    <p>子ページはありません。</p>
<?php endif; ?>

このコードは、現在表示しているページの子ページを検索し、存在する場合はリストとして表示します。各子ページのタイトルはリンクとして表示され、クリックするとその子ページにアクセスできます。

完成したコード

これらの要素を組み合わせて完成したコードがこちらです。
このコードをparent.phpに貼り付け、保存してください。

<?php
/*
Template Name: Parent page
*/
get_header(); ?>

<div id="content_wrap">
    <main>
        <div class="content_area">
            <?php
            // 現在のページIDを取得
            $parent_id = get_the_ID();
    
            // 子ページのクエリをセットアップ
            $args = array(
                'post_parent' => $parent_id,
                'post_type' => 'page',
                'numberposts' => -1,
                'post_status' => 'publish',
            );
            $children = get_children($args);

            // 子ページがあれば一覧表示
            if ($children) : ?>
                <ul>
                    <?php foreach ($children as $child) : ?>
                        <li>
                            <a href="<?php echo get_permalink($child->ID); ?>">
                                <?php echo get_the_title($child->ID); ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php else : ?>
                <p>子ページはありません。</p>
            <?php endif; ?>
        </div>
    </main>
</div>

<?php get_footer(); ?>

このコードを使用したテンプレートファイルは、特定の固定ページに対して「Parent page」テンプレートを適用することで、そのページの子ページを自動で一覧表示します。

この機能を取り入れることで、ページ数や階層が多いサイトのナビゲーションを改善し、ユーザーがコンテンツをより簡単に見つけられるようになります。

テーマディレクトリの特定

FTP上からWordPressのテーマフォルダ（通常はwp-content/themes/your-theme-name）にアクセスします。your-theme-nameは、現在アクティブになっているWordPressテーマのフォルダ名です。
この階層に先ほど保存したparent.phpを追加すると、テンプレートとして有効になります。

テンプレートの適用

• WordPressの管理画面から、「固定ページ」を選択し、子ページを一覧表示したい親ページを編集します。
• 今回のテンプレート内にはthe_content()の記述がないため、固定ページコンテンツとして入力した内容は表示されません。HTML構造をカスタマイズするにはparent-page.phpを編集していきましょう。
• ページ編集画面の「ページ属性」セクションで、「テンプレート」のセレクトボックスから先ほど作成した「Parent page」テンプレートを選択します。

まとめ

この方法により、WordPressで固定ページにそのページの子ページ一覧を自動で表示させることができます。この機能を利用することで、サイトの使いやすさを向上させ、コンテンツへのアクセシビリティを高めることができます。カスタムテンプレートの作成には少し技術的な知識が必要ですが、基本的なPHPとWordPressの知識があれば、誰でも実装することができます。
必要に応じて取り入れて、管理しやすく使いやすいウェブサイトを制作していきましょう。