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

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

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

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

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

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

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

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

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

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

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

これを行う簡単な方法は、親ページを直接編集し、リンクのリストを個別に追加することです。

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

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

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

• 方法1：プラグインを使用して親ページに子ページを表示する
• 方法 2. コードを使用して親ページの子ページを一覧表示する
• 方法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では、WordPressにコードを追加する際には、常にWPCodeプラグインを使用することをお勧めしています。

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のビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。