なぜ固定ページの親子関係を意識する必要があるのか？
Webデザイナーの皆さん、WordPressでサイト構築をする際、固定ページの階層構造を活かしたデザインやナビゲーションの組み込みに悩むことはありませんか？特に企業サイトやサービス紹介ページなど、構造が複雑になりがちなサイトでは、「親ページ（サービス概要）の下に、子ページ（各サービス詳細）をぶら下げる」といった親子関係の設定が頻繁に求められます。
この親子関係をプログラムで自在に取得し、意図した場所に出力できるかどうかが、WordPressテーマの柔軟性とメンテナンス性を大きく左右するのです。本記事では、特定のIDだけでなく、現在のページ情報に基づいた汎用的な方法を含め、固定ページの親子情報を取得・表示する実践的なコードスニペットをご紹介します。
固定ページIDを指定した情報取得は保守性が低い？
たとえば、特定のID（例：34）を直接指定して情報を取得する方法は以下の通りです。|
1 2 3 |
$page_id = 34; // IDを直書き $content = get_page($page_id); // ... |
特定のページIDを直接指定する方法は、その時だけを見れば確かに確実ですね。
でも、サイトの改修やリニューアルでIDが変わってしまうリスクや、テンプレートを他のサイトに転用する際にIDの書き換えが発生する手間を考えると、保守性が高いとは言えません。
テンプレートファイルは、できる限り「どのページで使われても正しく動く」ように、汎用的に設計すべきなので、なるべく特定のIDに依存せず、任意の固定ページや現在の固定ページの情報を柔軟に取得・出力する方法から解説しましょう。
親ページ情報を汎用的に取得・出力する（特定のIDの場合も対応）
特定の固定ページ情報を取得し、そのタイトルや本文を抜き出す最もシンプルで確実な方法は、get_post() 関数または get_page() 関数を利用することです。get_page() は get_post() のエイリアス（別名）なので、現代のコーディングでは汎用性の高い get_post()を使うのが主流でしょう。投稿オブジェクトを取得する
以下のコードは、指定したページID（ここでは例として34）の親ページとしての情報（タイトル、本文など）を取得し、表示するロジックです。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/ * 固定ページの親情報（タイトル・本文抜粋）を取得し、出力する * * @param int $parent_page_id 表示したい親ページのID * @return void */ function display_parent_page_info($parent_page_id) { // get_post() で投稿オブジェクトを取得 $parent_post = get_post($parent_page_id); // 投稿が存在するかチェック if ($parent_post instanceof WP_Post && $parent_post->post_type === 'page') { // タイトルと本文抜粋を表示 echo '<div class="parent-content-box">'; echo '<h3>' . esc_html($parent_post->post_title) . '</h3>'; // タイトルをエスケープして表示 // 本文を50文字に抜粋し、HTMLタグを除去して表示 $excerpt_content = wp_strip_all_tags($parent_post->post_content); echo '<p class="text">' . mb_substr($excerpt_content, 0, 50) . '...</p>'; echo '</div>'; } else { // ページが見つからない場合や固定ページではない場合の処理 echo '<p>指定されたページIDの情報が見つかりませんでした。</p>'; } } // 例: ID 34 の情報を出力する場合 display_parent_page_info(34); |
子ページ情報を一覧表示する（リスト出力の最適化）
親ページにぶら下がる子ページ（階層構造の下位にあるページ）を一覧で取得し、タイトル、抜粋、アイキャッチ画像をリスト表示する要件は、まさにWordPressのカスタムテンプレートで多用されるテクニックです。get_posts() `関数を使うことで、特定の親を持つ子ページを簡単に取得可能です。get_posts() で子ページをリストアップ
以下のコードは、指定した親ID（例：34）を持つ全ての子固定ページをループ処理し、必要な情報を取得・出力する、より最適化されたバージョンです。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/ * 特定の親ページに紐づく子ページを一覧で出力する * * @param int $parent_id 親ページのID * @return void */ function display_child_pages_list($parent_id) { $args = array( 'post_parent' => $parent_id, // このIDを持つページを親とする 'post_type' => 'page', // 投稿タイプは 'page'（固定ページ）に限定 'posts_per_page' => -1, // すべての子ページを取得 'order' => 'ASC', // 昇順（ID順やメニュー順など） 'orderby' => 'menu_order title', // 表示順はメニュー順を優先し、その後タイトル順 ); $child_posts = get_posts($args); // 子ページが存在するかチェック if ($child_posts) { echo '<div class="child-pages-list-container">'; foreach ($child_posts as $post) { setup_postdata($post); // ループ内でテンプレートタグを使えるように設定 // アイキャッチ画像のURLを取得 $thumb_id = get_post_thumbnail_id($post->ID); $thumb_url = wp_get_attachment_image_url($thumb_id, 'medium'); // サイズを 'medium' など指定 // 子ページごとの出力を開始 echo '<div class="business-list">'; echo '<a href="' . esc_url(get_permalink()) . '">'; // URLをエスケープして出力 // アイキャッチ画像を出力 if ($thumb_url) { echo '<p class="images"><img src="' . esc_url($thumb_url) . '" alt="' . esc_attr(get_the_title()) . 'のアイキャッチ"></p>'; } else { echo '<p class="images no-image">No Image</p>'; } echo '<h3>' . esc_html(get_the_title()) . '</h3>'; // タイトルを出力 // 本文抜粋（抜粋がない場合は本文から生成） if (has_excerpt()) { $excerpt_text = get_the_excerpt(); // 抜粋があればそれを使用 } else { // 抜粋がなければ本文から50文字を生成（タグ除去済み） $content_text = wp_strip_all_tags(get_the_content()); $excerpt_text = mb_substr($content_text, 0, 50) . '...'; } echo '<p class="text">' . esc_html($excerpt_text) . '</p>'; echo '</a></div>'; } echo '</div>'; // .child-pages-list-container 終了 wp_reset_postdata(); // グローバル変数 $post を元に戻す } else { echo '<p>現在、この親ページに紐づく子ページはありません。</p>'; } } // 例: ID 34 の子ページを出力する場合 display_child_pages_list(34); |
現在表示中の固定ページの情報を取得する
IDを直書きせず、今見ている固定ページの親や子を取得したいというニーズも多いでしょう。この場合、WordPressのグローバル変数の力を借りるのが最もスマートなやり方です。
①現在のページIDと親IDを取得する
現在表示している固定ページのIDは、グローバル変数 $post から簡単に取得できます。| 情報 | PHPコード | 取得できる値 |
|---|---|---|
| 現在のページID | get_the_ID()または$post->ID | 102など |
| 現在のページの親ID | $post->post_parent | 親がなければ0 |
②現在のページの兄弟・子ページ一覧を取得する
現在のページIDを親IDとして渡せば、その直下の子ページ一覧が取得できます。逆に、現在のページの親IDを取得し、それを post_parent に渡すと、兄弟ページを含む一覧が取得できます。
| 取得したい対象 | get_posts()への引数 |
|---|---|
| 現在表示中の子ページ一覧 | 'post_parent'=>get_the_ID() |
| 現在表示中の兄弟ページ一覧 | 'post_parent'=>$post->post_parent |
これらのコードを組み合わせれば、より柔軟で、どのサイトにも転用できる「生きている」テンプレートが完成するでしょう。この汎用的なテクニックは、今後のコーディングの効率を爆発的に高めるはずです。
【まとめ】固定ページの親子関係をマスターして制作を加速する！
| 機能 | 採用すべき関数 | メリット |
|---|---|---|
| 単一情報取得 | get_post() | タイトル、本文など特定の情報にアクセスが容易 |
| 一覧情報取得 | get_posts() | 複数の記事をまとめて条件分岐・取得・出力が可能 |
| テンプレートタグ有効化 | setup_postdata() | the_title()などお馴染みのタグが使えるようになる |
固定ページ構造は、サイトの「骨格」です。この骨格をプログラムで自在に操ることで、クライアントの細かな要望にも即座に対応できるようになるでしょう！
コメント