プラグインなしで固定ページの子ページを表示する方法

はじめに
完成イメージ
実装手順
参考：固定ページの子ページをショートコードで表示する方法
参考：親ページIDを自動判定して子ページを表示する方法
- 使用方法
- 実装手順
さいごに

参考：固定ページの子ページをショートコードで表示する方法

固定ページに親子関係を設定することで、階層構造を作ることができます。

Cocoonのnew_listショートコードでは、固定ページを表示できますが、特定の親ページを指定して、その直下の子ページだけを自動取得する標準機能は用意されていません。
ordered_postsで表示する固定ページのIDを個別に指定することはできますが、親子関係をもとに子ページを自動取得することはできません。

そこで、childrenオプションを拡張し、子カテゴリーだけでなく、「親ページに属する直下の子ページ」も取得・表示できるようにカスタマイズします。

取得対象は、指定した親ページの直下にある子ページのみです。
孫ページなど、さらに下の階層にあるページは含まれません。

完成イメージ

使用方法

以下にショートコードを示します。

[new_list post_type="page" ordered_posts="親ページのID" children="1"]

実装方法

以下のコードをfunctions.phpに追加します。

add_filter('shortcode_atts_new_list', function ($out, $pairs, $atts) {
  // 子ページ一覧の拡張が有効、かつ親ページIDが指定されている場合のみ処理対象
  if (empty($out['children']) || empty($out['ordered_posts'])) {
    return $out;
  }

  // 親ページIDを取得
  $parent_id = (int) $out['ordered_posts'];

  // 親ページIDが0以下の場合は処理対象外
  if ($parent_id <= 0) {
    return $out;
  }

  // 子ページを取得
  $child_pages = get_children(array(
    'post_parent' => $parent_id,
    'post_type' => !empty($out['post_type']) ? $out['post_type'] : 'page',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'ASC',
    'numberposts' => -1,
  ));

  // 子ページがない場合は処理対象外
  if (!$child_pages) {
    $out['ordered_posts'] = '-1';
    return $out;
  }

  // 子ページIDを取得
  $child_ids = wp_list_pluck($child_pages, 'ID');

  // 子ページIDをカンマ区切り文字列に置換
  $out['ordered_posts'] = implode(',', $child_ids);

  return $out;
}, 10, 3);

参考：親ページIDを自動判定して子ページを表示する方法

前回のコードでは、ordered_postsに親ページのIDを指定し、そのIDをもとに子ページを取得していました。

今回のコードでは、現在表示している固定ページの親子関係から親ページIDを自動判定します。
親ページでは自身のIDを、子ページではpost_parentの値を親ページIDとして使用するため、親ページと子ページのどちらでも、同じ系列の子ページ一覧を表示できます。

使用方法

以下にショートコードを示します。

[new_list post_type="page" children="1"]

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードを追加します。

add_filter('shortcode_atts_new_list', function ($out, $pairs, $atts) {
  // 子ページ一覧の拡張が有効な場合のみ処理対象
  if (empty($out['children']) || $out['post_type'] !== 'page') {
    return $out;
  }

  // 固定ページ以外は処理対象外
  if (!is_page()) {
    $out['class'] = trim($out['class'] . ' no-child-pages');
    $out['ordered_posts'] = '-1';
    return $out;
  }

  // 現在の固定ページを取得
  $current_page = get_queried_object();

  // 親ページIDを取得
  $parent_id = $current_page->post_parent ?: $current_page->ID;

  // 親ページ直下の子ページを取得
  $child_pages = get_children(array(
    'post_parent' => $parent_id,
    'post_type' => 'page',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'ASC',
    'numberposts' => -1,
  ));

  // 子ページがない場合は処理対象外
  if (!$child_pages) {
    $out['class'] = trim($out['class'] . ' no-child-pages');
    $out['ordered_posts'] = '-1';
    return $out;
  }

  // 子ページIDを取得
  $child_ids = wp_list_pluck($child_pages, 'ID');

  // 一覧対象のIDと表示件数を設定
  $out['ordered_posts'] = implode(',', $child_ids);
  $out['count'] = count($child_ids);

  return $out;
}, 10, 3);

ラベル
CSSを追加
以下のコードをstyle.cssに追加します。
対象ページ以外は、ウィジェット自体を非表示にします。
```
.widget:has(.no-child-pages),
.no-child-pages {
  display: none;
}
```

さいごに

今回紹介した方法を使えば、プラグインを使わずに、Cocoonの標準機能を活かしたまま固定ページの子ページ一覧を柔軟に表示できるようになります。
サイト構造の整理や回遊性の向上にぜひ役立ててみてください。