WordPressで親ページの子ページリストを表示する方法

最近、読者の一人から、WordPress のページの子ページを表示する方法について質問がありました。これは WPBeginner でよく受ける質問であり、ウェブサイトのナビゲーションとユーザーエクスペリエンスを向上させる一般的なニーズを浮き彫りにしています。 

WordPressのウェブサイトを親ページと子ページで構成している場合、親ページに子ページまたはサブページを表示したい場合があります。これにより、ユーザーは特定のセクションで利用可能なすべての情報を簡単に確認でき、関連するサブトピックにすばやく移動できます。

また、簡単なブラウジングのために、各サブページにメインの親ページへのリンクを表示したい場合もあります。これにより、パンくずリストのような効果が生まれます。この合理化されたナビゲーションにより、ユーザーはサイトの奥深くに迷子になるのを防ぎ、全体的なブラウジング体験を向上させます。

この記事では、WordPressで親ページの子ページリストを簡単に表示する方法をご紹介します。

子ページリストを表示する必要があるのはいつですか？

WordPressには、投稿と固定ページという2つのデフォルトの投稿タイプが用意されています。投稿はブログコンテンツであり、通常はカテゴリーとタグで整理されます。

ページは、たとえば「会社概要」ページや「お問い合わせ」ページのような、一度きりのまたはスタンドアロンのコンテンツであり、エバーグリーンです。

WordPressでは、ページは階層構造にすることができ、親ページと子ページで整理できます。例えば、「製品」ページを作成し、その子ページとして「機能」、「価格」、「サポート」を作成したい場合があります。

子ページを作成するには、WordPressで子ページを作成する方法に関するガイドに従ってください。

親ページと子ページを作成したら、メインの親ページに子ページを一覧表示したい場合があります。

これを簡単に行うには、親ページを直接編集して、リンクのリストを追加します。

ただし、子ページを追加または削除するたびに、親ページを手動で編集する必要があります。

子ページを作成したら、それが自動的に親ページにリンクとして表示されるようになれば、もっと便利だと思いませんか？

それでは、WordPressの親ページに子ページのリストをすばやく表示する、その他の動的な方法をいくつか見てみましょう。3つの方法を紹介するので、あなたに最適なものを選ぶことができます。

方法1：プラグインを使用して親ページに子ページを表示する

この方法は、親ページに子ページを表示する最も簡単な方法であり、すべてのユーザーにおすすめです。

まず、Page-listプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

有効化したら、親ページを編集し、子ページのリストを表示したい場所に次のショートコードを追加するだけです。

[サブページ]

これで、ページを保存し、新しいブラウザタブでプレビューできます。すべての子ページの単純な箇条書きリストが表示されることに気付くでしょう。

必要に応じて、リストの外観を変更するためにカスタムCSSを追加することもできます。

以下は、開始点として使用できるCSSのサンプルです。

ul.page-list.subpages-page-list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

カスタムCSSを適用した後、親ページをプレビューできます。

これは、私たちのテストWordPressウェブサイトでの表示例です。

このプラグインは、深さ、除外するページ、アイテム数などを設定できる多くのショートコードパラメータを提供します。

詳細については、詳細なドキュメントについてはプラグインのページを参照してください。

方法 2. コードを使用して親ページの子ページを一覧表示する

この方法は少し高度で、WordPressウェブサイトにコードを追加する必要があります。これを行ったことがない場合は、WordPressでコードをコピー＆ペーストする方法に関するガイドを参照してください。

親ページの下に子ページをリストするには、コードスニペットプラグインまたはテーマのfunctions.phpファイルに次のコードを追加する必要があります。

function wpb_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('wpb_childpages', 'wpb_list_child_pages');

WPBeginnerでは、常にWPCodeプラグインを使用してWordPressにコードを追加することをお勧めしています。

WPCodeを使用すると、テーマファイルを編集せずにカスタムコードを簡単に追加できるため、サイトを壊す心配がありません。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ステップバイステップの説明については、WordPressプラグインのインストール方法に関するこのガイドを参照してください。

プラグインを有効化したら、WordPressダッシュボードから Code Snippets » Add Snippet に移動します。

そこから、「カスタムコードを追加（新規スニペット）」オプションにマウスカーソルを合わせ、「カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードの種類として「PHPスニペット」を選択する必要があります。

次に、コードが何のためのものかを覚えるのに役立つ、スニペットのタイトルを追加します。

次に、上記のコードを「コードプレビュー」ボックスに貼り付けます。

その後、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックするだけです。

このコードは、まずページに親があるかどうか、またはページ自体が親であるかどうかを確認します。

親ページの場合は、それに関連付けられた子ページが表示されます。子ページの場合は、親ページの子ページがすべて表示されます。

最後に、子ページも親ページもない単なるページの場合、コードは何も実行しません。コードの最後の行にショートコードを追加したので、ページテンプレートを変更せずに子ページを簡単に表示できます。

子ページを表示するには、ページまたはサイドバーのテキストウィジェットに次のショートコードを追加するだけです。

[wpb_childpages]

変更を保存し、ブラウザタブでプレビューすることを忘れないでください。テストサイトではこのように表示されます。

カスタムCSSを使用して、このページリストをスタイル設定できます。

開始点として使用できるサンプルCSSコードを次に示します。

ul.wpb_page_list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

方法3. ショートコードなしで子ページを動的に表示する

ショートコードは便利ですが、問題は親ページまたは子ページを持つすべてのページにショートコードを追加する必要があることです。

多くのページにショートコードが表示され、追加し忘れることもあります。

より良いアプローチは、テーマのページテンプレートファイルを編集して、子ページを自動的に表示できるようにすることです。

これを行うには、メインのpage.phpテンプレートを編集するか、テーマにカスタムページテンプレートを作成する必要があります。

メインテーマを編集することはできますが、テーマを変更または更新するとこれらの変更は失われます。そのため、子テーマを作成してから子テーマで変更を行う方が良いでしょう。

ページテンプレートファイルで、子ページを表示したい場所にこのコード行を追加する必要があります。

<?php wpb_list_child_pages(); ?>

これで完了です。テーマは子ページを自動的に検出し、プレーンなリストで表示するようになります。

CSS とフォーマットでスタイルをカスタマイズできます。

これは、OptinMonsterウェブサイトが親ページとサブページをどのように表示するかの例です。

WordPressのページと投稿管理のための追加リソース

この記事が、WordPressで親ページの子ページを一覧表示する方法を理解するのに役立ったことを願っています。

WordPressのページや投稿の管理についてさらに詳しく知りたい場合は、これらのガイドも参照してください。

• ドラッグ＆ドロップでWordPressのページを整理または並べ替える方法
• ワンクリックで WordPress のページまたは投稿を複製する方法
• WordPressでブログ投稿にカスタム投稿ステータスを追加する方法
• Nested Pages で WordPress のページをより効果的に管理する方法
• WordPressでカスタム投稿タイプアーカイブページを作成する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。