【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の知識があれば、誰でも実装することができます。
必要に応じて取り入れて、管理しやすく使いやすいウェブサイトを制作していきましょう。
![アバター画像](https://groworks.jp/wp-content/uploads/2024/03/cropped-cropped-AdobeStock_511262491-scaled-1-55x55.jpeg)
r.s
グローワークスのコーダー兼プログラマー。最適なコードでサイトを動かすことに情熱を注いでいます。技術的課題を解決するのが得意です。