最近、読者の一人から、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では、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でもフォローできます。
Philip
こんにちは、これは機能しますが、親ページも表示されてしまいます。子ページのみを表示するにはどうすればよいですか？よろしくお願いします。
WPBeginnerサポート
あなたが望んでいると思われることに対する最も簡単な方法は、親ページにコンテンツを持たず、子ページにのみコンテンツを持つことです。
管理者
Sachit Shori
本当にありがとうございます。助かりました。
WPBeginnerサポート
You’re welcome
管理者
Emmanuel Husseni
こんにちは、Wpbeginnerさん、
親ページで子ページをアルファベット順に並べ替えるにはどうすればよいですか？すべての手順に従いましたが、サブページが親ページにランダムに表示されます。
返信をお待ちしております。…ありがとうございます。
WPBeginnerサポート
コード内の menu_order の 2 つのインスタンスを post_title に変更します。
管理者
Iyke O.
サイドバーのリストを折りたたみ可能にするにはどうすればよいですか？
WPBeginnerサポート
折りたたみ可能にするには、こちらの記事のいずれかのようなアコーディオンプラグインを使用できます：https://www.wpbeginner.com/showcase/best-wordpress-accordion-plugins/
管理者
Stacie
分かりやすく、うまくいきました。共有していただきありがとうございます！
WPBeginnerサポート
You’re welcome, glad our content could be helpful
管理者
Aaro
この関数にCSSクラスを割り当てることはできますか？そうすれば、ul要素のCSSを変更しても、サイト上の他のulに影響を与えずに済みます。
または、これに対する他の簡単な解決策はありますか？
WPBeginnerサポート
You could add your CSS class in the ul section of the function
管理者
ケシャブ・マーシー
WPBチーム様
このスニペットとチュートリアルを本当にありがとうございます。
それは私の時間を大幅に節約し、私を助けてくれました。
敬具
Keshav Murthy
WPBeginnerサポート
Glad our tutorial could help
管理者
ゲイリー・グラナイ
WordPress 4.9.8にプラグインコードスニペットをインストールしました
https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond からコードをコピーし、Code Snippetsの新しいスニペットに追加しました。
ページを作成し、その後、最初のページを親ページとする属性を持つページを作成しました。
子親の関係は、属性ドロップダウンのページリストに表示されます。
親ページを開くと、子ページを示すものは何も表示されません。
その後、functions.phpページを使用してみました。
https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond からコピーしたコードを、functionsページのコードの末尾に追加しました。
親ページを開くと、表示されません。予期しないコードが表示されるというエラーメッセージが表示されます。
functions.phpページを元の状態に復元しました。
試したことに対してどのような変更を加える必要がありますか？
WPBeginnerサポート
こんにちは、ゲイリーさん、
コードをテストする前に、子ページを発行したことを確認してください。また、数字や予期しない文字をコピーしていないことを確認するために、コードを再度慎重にコピーしてください。
管理者
イチカ
質問があります。親ページにサブページを追加しましたが、モバイルでサイトを開いて親ページをクリックすると、空の親ページが開きます。ドロップダウンのサブページを表示するには、親ページのボタンを長押しする必要があります。これを修正するにはどうすればよいですか。空のページが開くのは望ましくありません。親ページをタッチしたらドロップダウンメニューが開くようにしたいです。
方法を提案してください。
デニス
3レベル目のページ（孫ページ）で、子ページ（親のすべての子リンク）で見られるのと同じメニューを表示したいです。このスニペットでは、孫ページにいると、メニューには他の孫ページしか表示されません。孫ページにいるときでもすべての子リンクを表示するには、このコードをどのように変更する必要がありますか？
ヴィッキー
子ページのIDを取得する方法（孫ページではなく）…お願いします。初心者です
Meredith L
ブログを始めたばかりで、最近Kale Wordpressテーマに切り替えました。レシピ（親ページ）の下にページ属性ページを作成して、前菜、デザートなどのカテゴリを個別に設定したいと考えています。管理画面ではすべて完了しているように見えますが、サイト自体ではレシピカテゴリからページ属性/ドロップダウンが表示されません。何が間違っていますか？すべて公開に設定されているので、問題が何かわかりません。
デイブス
このコードをありがとうございます。しかし、ホームページ（固定ページ）ではなく、親ページにのみ表示させたいです。どうすればできますか？
ありがとうございます。
ボリス・ブデック
Generatepress Themeを使用しています（カスタマイズのために子テーマを作成しました）が、機能しません。ショートコードは出力ページに表示されますが、ショートコードとして認識されていないようです。Elementorウィジェットを使用していますが、テキストウィジェットもショートコードウィジェットも機能しません。
Elementorウィジェットを使用している場合に機能させる方法はありますか？
WPBeginnerサポート
Borisさん、こんにちは
このコードをテーマの functions.php ファイル、または サイト固有のプラグイン に追加してみてください。
add_filter('widget_text', 'do_shortcode');1-click Use in WordPress
管理者
Frederic
素晴らしい投稿です。何時間も探していたまさにそのものです！そして、まるで魔法のように機能します。テーマのfunction.phpにコードを追加し、サブページを表示したいページにショートコードを追加するだけで、うまくいきました！！！
素晴らしい、寛大さに感謝します！！
WPBeginnerサポート
フレデリックさん、こんにちは。
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
管理者
マリアーノ
こんにちは！
コードをありがとうございます。各子ページのアイキャッチ画像を表示するにはどうすればよいですか？
Ron
見つけるスニペットの多くと同様に、機能させるためにはすべてのコメントを読み通す必要があります。書いたものをテストすることに何が問題あるのですか？
アリシア
wordpress.comで親/子ページ用のドロップダウンメニューを作成できますか、それとも.orgバージョンである必要がありますか？
Razvan
子ページではなく、子投稿を表示したい場合はどうすればよいですか？
Rudy
このコードを使用すると、親ページと子ページの両方が表示されてしまい、冗長になります。私の理解では、親ページではなく、子ページのみを表示する必要があります。これを実現できる修正案はありますか？
Michael Feske
Great, but it works not
add_shortcode が正しいのか、それとも add_filter https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ですか？
add_shortcode を使用すると、エラー Fatal error: Uncaught Error: Call to undefined function add_shortcode()
add_filter を使用するとエラーはありませんが、機能しません
Milos
プラグインの更新時に、なぜかいつもエラーが発生します。
Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34
ジェフリー・フライ
子ページの表示日も表示する方法はありますか？
ethann
こんにちは、素晴らしい記事ですね。
親ページに子ページドロップダウンを作成するのを手伝っていただけますか。WordPressプロジェクトでこの機能が必要なのですが、WordPressは全くの初心者です。
Alex
私だけが機能させることができないのですか？
次のような構造になっています
概要
— ページ 1
— ページ 2
— ページ 3
「About」または子ページ（1、2、3）にいるときに、親ページ（About）とすべての子（1、2、3）のリストを表示したいです。誰かそれを機能させた人はいますか？
Thanks!
Kendra
OMG、すみません、これは迷惑です。他の投稿は無視してください。コメントにコードを貼り付けられないことに気づきませんでした。
wpb_list_child_pages(); で動作させることができませんでした。
echo do_shortcode( '[wpb_childpages]') で機能させることができました
親ページのタイトルを取得するために、子ページリストの上にこれを挿入しました：
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);
Jean Bishop
このコードを使用しており、うまく動作しています。ページと一緒にカテゴリもメニューに表示することは可能ですか？
Michelle
こんにちは、
次のことをしたいです
親ページは販売中または賃貸中である必要があります。
次に、子（例：州（ハウテン））が販売中および賃貸中の親にリンクするようにしたいです。
どうすればよいですか？
Michelle
ザハール
パラメータ付きのショートコードを作成するにはどうすればよいですか？例えば、[wpb_childpages id="1"]で、id="1"は親ページのIDです。
Strand
こんにちは、
リンクを特定の数、例えば最大12の子ページに制限することは可能ですか？
ありがとう
Aander
ありがとうございます、
親ページからアクセスできるドロップダウンリストで子ページをどのように整理できますか？（訪問者にブログロール形式で全ての子ページを見せたくありません。）
つまり、親ページでドロップダウンリスト（リストボックス）を作成し、子ページを定義済みの順序（例えばアルファベット順）で追加したいのです。紹介を読んだ後、訪問者はリストから好きなページを選択して進むことができます（子ページには論理的な関連性がないため、いずれにしても正確なページを検索することになります）。
「私の夢」は実現可能ですか？
重ねて感謝いたします。
量子メカ
子ページにページネーションを追加するにはどうすればよいですか？
ありがとうございます！
アストリッド
WPBeginnerスタッフ様
提供されたコードを「ショートコードオプション」で使用したところ、機能しました（子ページへのリンク）。ただし、パーマネントオプションを使用したいのですが、それは機能しませんでした。
このコード [ ] を追加したところ、親ページで 500 エラーが発生し、子ページは一切表示されなくなりました。
何が間違っていますか？
余談ですが、抜粋とその関連画像を一緒に表示したい場合、どうすればよいですか？ありがとうございます！
アストリッド
これを解決できました。
コードスニペットを追加し、子ページを表示したい親ページにこのショートコード [wpb_childpages] を追加しました。素晴らしいです！
現在、抜粋と画像を表示するには、カテゴリの下の投稿と同じクエリを使用しますか？
Thanks in advance
ジェイド
「クエリ」とはどういう意味ですか？抜粋と画像が親ページに表示されるようにするには、具体的にどうすればよいですか？
ありがとうございます！
Mehar
本当に役立ちます。ありがとうございます。
Pradeep
このチュートリアルで使用されている例のページ http://optinmonster.com/how-it-works/ がこの機能を使用しているかどうか、誰か確認してもらえませんか？私には、子ページではなくタブを使用しているように見えます。
私が正しければ、その機能を実装するためのリソースを教えていただけますか？そのページのソリューションのように、流動的なソリューションを必死に探しています。
ありがとうございます。
Pradeep
アンドリュー・ロバーツ
ショートコード以外のオプションの場合、ユーザーに
return $string;をecho $string;に変更するか、ページテンプレートで関数
echo page_list_child_pages();をエコーアウトする必要があることを知らせたい場合があります。上記を指摘してくれたErikに感謝します
Meredith Adams
ありがとうございます！
Gaby
ありがとうございます！コードが機能しなかった理由がわかりました…
ハワード
こんにちは、サブディレクトリ（例：example.com/home）でドメインにアクセスしているときは機能しますが、これなし（example.com）でサイトを表示すると、サブページのリストが表示されません。どこが間違っているか教えていただけますか？
事前に感謝します – WordPressは全くの初心者です。
エミリー・ジェンウェイン
この関数で、子ページと孫ページのリストと一緒に、親ページ自体をリストの一番上に表示するにはどうすればよいですか？子ページでは親ページはリストされません。
マイケル
特定のページの子供ページのみを表示するようにこれをカスタマイズするにはどうすればよいですか？
Yester
現在のページにアクティブクラスを追加するにはどうすればよいですか？
ジェニー
同じことができるプラグインはありますか？
サブメニューページのあるボックスを、ページの上部だけでなく、ページの任意の場所に配置することは可能ですか？プラグインを使用します
WPBeginnerスタッフ
カスタム投稿タイプにも使用できます。このようになります。
function wpb_list_child_pages() {
global $post;
if ( 'movie' == get_post_type() && $post->post_parent )
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( $childpages ) {
$string = '' . $childpages . '';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
Daniela
これは素晴らしいですね！子投稿を持つカスタム投稿タイプでも同様のことを行う方法はありますか？
Caroline
私も知りたいです！
誰か知っている人がいたら、助けてください！
dpc
カスタム投稿タイプの子投稿をカスタム投稿タイプの投稿ページに表示するようにこれを変更する方法はありますか？ありがとうございます、とても便利です！
ソケアラ
私にとって非常に素晴らしいです！とにかく、子ページのタイトルとサムネイルを親ページに表示する方法を知りたいです。
Ashley Bell
こんにちは、私も同じ質問があります。Beginners Blueprint ページのリストのスタイルがとても気に入っていますが、どう始めればよいかわかりません。記事を推薦していただけますか、またはアドバイスをいただけますか、ありがとうございます。
Razvan Zamfir
こんにちは！
素晴らしいスニペットですが、子孫ページのみをリストするにはどうすればよいですか？
ありがとうございます！
amitabha197
子ページがないページにエラーがありますので、少し修正しました。
if( count($childpages) != 0 ) {
$string = ” . $childpages . ”;
}
代わりに
if( $childpages ){
$string = ” . $childpages . ”;
}
WPBeginnerスタッフ
WordPressテンプレートでショートコードを実行するには、次のように追加する必要があります。
マット・ロック
テンプレートコード「wpb_list_child_pages();」は動作しませんでしたが、echoショートコードでうまくいきました。ありがとう！
エリック
「return $string」を「echo $string」に変更するだけです（これによりページが出力されます）。
fariha
ありがとう、うまくいきました
Coen Siebenheller
functions.php にコードを追加し、テキスト内に [wpb_childpages] ショートコードを追加すると機能します。しかし、テンプレートの1つに追加しようとすると何も表示されません。私が間違っていることを知っている人はいますか？
Elena Rapisardi
素晴らしい説明です！！
常に親ページを表示する方法はありますか？
Quin
これは素晴らしいです、ありがとう。
親が子ではなく孫を表示するように適応させる方法はありますか？