WordPressでサイトを運営していると、
- 固定ページの一覧を記事内に表示したい
- 親ページと子ページを階層構造のまま見せたい
- プラグインを使わず、軽量に実装したい
と感じる場面は多いのではないでしょうか。
本記事では、固定ページの「親＋子」をすべて表示できるショートコードを、記事の好きな位置（記事の後ろなど）に正しく表示する方法まで含めて、実務レベルでわかりやすく解説します。
WordPress標準では固定ページ一覧のショートコードは存在しない
まず前提として、WordPressには固定ページ一覧を表示する標準ショートコードは存在しません。
そのため、以下いずれかの方法を取る必要があります。
- プラグインを使う
- functions.php にショートコードを自作する
本記事では、軽量・高速・自由度が高い「自作ショートコード」を採用します。
固定ページ一覧を表示する基本のショートコード
①functions.php に追加するコード。
function shortcode_page_list() {
$args = array(
'post_type' => 'page',
'posts_per_page' => -1,
'post_status' => 'publish',
'orderby' => 'menu_order',
'order' => 'ASC',
);
$pages = get_posts($args);
if (empty($pages)) return '';
$output = '<ul class="page-list">';
foreach ($pages as $page) {
$output .= '<li>';
$output .= '<a href="' . get_permalink($page->ID) . '">';
$output .= esc_html($page->post_title);
$output .= '</a>';
$output .= '</li>';
}
$output .= '</ul>';
return $output;
}
add_shortcode('page_list', 'shortcode_page_list');
②記事・固定ページ内でのショートコードの使い方。
[page_list]
親＋子をすべて表示するショートコード
function shortcode_all_pages_tree() {
$args = array(
'title_li' => '',
'sort_column' => 'menu_order',
);
return '<ul class="page-tree">' . wp_list_pages($args) . '</ul>';
}
add_shortcode('all_pages', 'shortcode_all_pages_tree');
記事・固定ページ内でのショートコードの使い方。
[all_pages]
以下出力イメージ。
<ul class="page-tree">
<li>
<a href="/parent/">親ページ</a>
<ul class="children">
<li><a href="/parent/child1/">子ページ1</a></li>
<li><a href="/parent/child2/">子ページ2</a></li>
</ul>
</li>
</ul>
書いた記事の後ろに固定ページの一覧を表示させたい
上記に場合、記事本文の上に一覧が表示されると思います。
記事の下に固定ページ一覧を挿入したい場合は以下です。
function shortcode_all_pages_tree() {
$args = array(
'title_li' => '',
'sort_column' => 'menu_order',
'echo' => 0,
);
$html = wp_list_pages($args);
if (empty($html)) return '';
return '<ul class="page-tree">' . $html . '</ul>';
}
add_shortcode('all_pages', 'shortcode_all_pages_tree');
記事や固定ページの表示したい場所に、次のショートコードを書きます。
本文の最後テスト
[all_pages]
記事の上に勝手に表示される原因と対処法
「記事の後ろに書いたのに、なぜか記事の上に表示される」というトラブルは、非常によく起きます。
原因は、wp_list_pages() は、デフォルトでは 直接出力（echo） する関数です。
そのまま使うと、the_content の処理順より前に表示されてしまうことがあります。
解決策は以下の指定が入っていることを必ず確認してください。
'echo' => 0
これにより直接出力されず、ショートコードの「書いた位置」に正しく表示されるはずです。
それでも上に出る場合は「自動挿入」系が原因
- テーマ機能で「ページ一覧」「目次」「関連記事」などを自動で上部挿入
- ブロックエディタで、実は [all_pages] ブロックが上に残っている
- 同名ショートコード [all_pages] が別の場所でも登録されている（重複）
スポンサーリンク
記事の「最後に強制追加」したい場合
「毎回記事末に自動で付けたい」なら、このコードも可能です。
function append_all_pages_to_content($content) {
if (is_singular('post') && in_the_loop() && is_main_query()) {
$content .= "\n\n" . do_shortcode('[all_pages]');
}
return $content;
}
add_filter('the_content', 'append_all_pages_to_content');
記事・固定ページ内でのショートコードの使い方。
[page_list]
CTAやインフィード広告、ランキング表示などアフィリエイトに特化した機能！
初心者でも使いやすいカスタマイズ性！
SEO・表示速度・モバイル対応の先進設計！
初心者でも使いやすいカスタマイズ性！
SEO・表示速度・モバイル対応の先進設計！
行動心理学に基づくレイアウト設計で、滞在時間と回遊率を高める！
国内最高峰「SEOに強い内部構造」！
息を飲むほど美しい「洗練されたデザイン」！
国内最高峰「SEOに強い内部構造」！
息を飲むほど美しい「洗練されたデザイン」！
