よつば手帖

メニュー
よつば手帖 よつばデザイン後藤の日々の記録

WordPressで親ページに子ページの一覧を表示する方法

LINEで送る
Pocket

【2014/05/10 15:20】
アイキャッチ画像が指定されてない時用のコードを加えました。(菱川さんありがとうございます)
大串さんと菱川さんに参考アドレスいただきました。
もう少しいじってみたい方は参考にどうぞ。記事の最下部にあります。

WordPressの固定ページで事業内容などの階層を持つページを作った場合、親ページに子ページのリンクを入れたいって時は良く出て来ます。
(親ページ、子ページってなんぞや?って方はお調べください。知ってると便利です)

例:事業内容ページに事業内容A、B、Cのバナー的な入り口を作りたい。
事業内容(親ページ)
-事業内容A(子ページ)
-事業内容B(子ページ)
-事業内容C(子ページ)

このような形で自動で表示したい。
事業内容

固定ページ用のテンプレートを作成

テンプレートの作り方
pageのテンプレートを複製してリネームします。
page.phpがなければindex.phpとかsingle.phpを複製してリネームしてください。
例:page-example.php

テンプレートに下記を追記します。

記述する場所は投稿のループの下なんかにあると良いかもです。

※CSSについて
ご自身で記述する必要があります。
Bootstrapベースだと「Col-lg-4」、Foundationベースだと「large-4」とか適用すればうまく並びます。
タイトルの長さの調整も必要になります(高さの問題)。max-height使ってoverflow:hiddenとかで隠しちゃうとかは各自の判断で。あるいはjs使うとか。
jsのほうがサラっと出来るのでオススメです。
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.js – URIN HACK

※子ページを表示するコードのアイキャッチ画像の部分は独自に定義したアイキャッチ画像が入ってます(8行目の「post-titleimg」)。
functions.phpに下記を記述してます。

※アイキャッチ画像がない場合の画像も用意する必要があります。

固定ページにテンプレートを適用する方法

親ページに自動で適用される訳ではないので、親ページの編集画面のページ属性でテンプレートを選ぶ必要があります。
子ページに「アイキャッチ画像」を指定するのを忘れずに。
固定ページを編集

ページの抜粋も合わせて表示する場合

タイトルだけではなく、説明的なものも表示したい。
抜粋を使って表示する方法。

デフォルトでは固定ページで抜粋は使えないので、functions.phpに下記する必要があります。

固定ページのテンプレートに下記を記述。

テーマのカスタマイズはちょっと難しいよ…って方には宮内さんのプラグインがオススメです。
Child Pages Shortcode – 子ページの一覧を出力するショートコード | firegoby

※間違ってたり、もっと良いやり方があれば教えてください。

この記事を書いた人
後藤賢司 よつばデザイン 代表
Webディレクター・デザイナー 日本, 東京&大分
著書
WordPressプロフェッショナル養成読本 [Webサイト運用の現場で役立つ知識が満載! ] (Software Design plus)
WordPressプロフェッショナル養成読本 2014年10月のすごいコンピュータ書で1位
現場でかならず使われているWordPressデザインのメソッド
現場でかならず使われているWordPressデザインのメソッド AmazonのWebデザイン、デザイン、デザイン・グラフィックスで1位