個別ページに子ページ(サブページ)の一覧を表示したい

CMSでは親子関係のあるページをお互いにリンクすることがよくあるのですが、WordPressの個別ページにはそのような機能はないようですね。
function.phpやpluginを作って個別にショートコードを定義する必要があるようです。

目次

一覧表示関数

とりあえずul liでリストとして表示するには

function list_child_pages_shortcode() {
    global $post;

    // 子ページを取得
    $child_pages = new WP_Query( array(
        'post_type'      => 'page',
        'orderby'        => 'menu_order',
        'order'          => 'ASC',
        'post_parent'    => $post->ID,
        'posts_per_page' => -1,
    ) );

    // 子ページが存在しない場合は何も表示しない
    if ( !$child_pages->have_posts() ) return '';

    // 子ページが存在する場合はリストを生成
    $output = '<ul>';
    while ( $child_pages->have_posts() ) : $child_pages->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    endwhile;
    $output .= '</ul>';

    wp_reset_postdata();

    return $output;
}
add_shortcode('list_child_pages', 'list_child_pages_shortcode');

こちらを定義して、親となるページに

[list_child_pages]

記述すればOKみたいです。




プラグインを作成

上記関数は テーマファイルのあるフォルダのfunction.phpに追記すればいいのですが、テーマは将来的に自作するので切り替えても影響ないようにプラグインファイルとして登録したいと思います。

プラグインフォルダ配下にnecosukeとうフォルダを作成し necosuke.phpを新規に作成しました。

ファイルの先頭に下記を記述して上記の関数を追記します。

/*
Plugin Name: Necosuke Plugin
Description: 個別カスタマイズ 
Version: 1.0
Author: Necosuke
*/


プラグインを有効化

ダッシュボードからプラグイン一覧で追加したプラグインを確認して有効化します。
問題なければリンクが「無効化」に変わります。

ショートコードで貼り付け

サービスページにショートコードを記述します。

編集画面

公開ページ

一覧表示が完成です。

機能的には問題ないのですが、なんか、条件やHTMLをこのように記述するのはかなり抵抗がありますね。 せめてHTMLはもっと編集しやすいようにしたいと思いました。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

株式会社ねこすけの代表をしています。
2005年に創業しWebマーケティングを実践するためのコンサルティング、サイト構築、サイト運用、システム開発を行っています。
会員・顧客属性を利用したコンテンツ管理を得意としており、協会サイト、多ブランドのECサイト、会員向けコンテンツサイトなどを構築運営しています。Webマーケティングを進めてるのにパートナーがほしいと感じている方、ご相談ください。
月に1度のミーティングから細かなサイト保守まで必要な部分での対応が可能です。 問い合わせ

目次