WordPressの固定ページで事業内容などの階層を持つページを作った場合、親ページに子ページのリンクを入れたいって時は良く出て来ます。
（親ページ、子ページってなんぞや？って方はお調べください。知ってると便利です）
例：事業内容ページに事業内容A、B、Cのバナー的な入り口を作りたい。
事業内容（親ページ）
-事業内容A（子ページ）
-事業内容B（子ページ）
-事業内容C（子ページ）
このような形で自動で表示したい。
固定ページ用のテンプレートを作成
テンプレートの作り方
pageのテンプレートを複製してリネームします。
page.phpがなければindex.phpとかsingle.phpを複製してリネームしてください。
例：page-example.php
|
1 2 3 4 5 |
<?php /* Template Name:子ページ一覧 */ ?> |
テンプレートに下記を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php $child_posts = query_posts( 'numberposts=-1&order=ASC&post_type=page&post_parent=' . $post->ID ); if ( $child_posts ) { foreach ( $child_posts as $child ) { $child_posttitle = apply_filters( 'the_title', $child->post_title ); $child_permalink = apply_filters( 'the_permalink', get_permalink( $child->ID ) ); $child_image_id = get_post_thumbnail_id($child->ID); $child_image_url = wp_get_attachment_image_src($child_image_id, 'post-titleimg', true); ?> <div class="child-page-box"> <a href="<?php echo $child_permalink; ?>"> <img src="<?php echo $child_image_url[0]; ?>" class="" /></a> <div class="child-page-box-title"><a href="<?php echo $child_permalink; ?>"><?php echo $child_posttitle; ?></a> </div> </div> <?php } } ?> |
記述する場所は投稿のループの下なんかにあると良いかもです。
|
1 |
<?php if (have_posts()) : ?>〜略〜<?php endif; ?> |
※CSSについて
ご自身で記述する必要があります。
Bootstrapベースだと「Col-lg-4」、Foundationベースだと「large-4」とか適用すればうまく並びます。
タイトルの長さの調整も必要になります（高さの問題）。max-height使ってoverflow:hiddenとかで隠しちゃうとかは各自の判断で。あるいはjs使うとか。
※子ページを表示するコードのアイキャッチ画像の部分は独自に定義したアイキャッチ画像が入ってます（8行目の「post-titleimg」）。
functions.phpに下記を記述してます。
|
1 2 3 |
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(400, 400, true); add_image_size( 'post-titleimg', 640, 240,true ); |
固定ページにテンプレートを適用する方法
親ページに自動で適用される訳ではないので、親ページの編集画面のページ属性でテンプレートを選ぶ必要があります。
子ページに「アイキャッチ画像」を指定するのを忘れずに。
ページの抜粋も合わせて表示する場合
タイトルだけではなく、説明的なものも表示したい。
抜粋を使って表示する方法。
デフォルトでは固定ページで抜粋は使えないので、functions.phpに下記する必要があります。
|
1 2 |
//固定ページで抜粋を有効に add_post_type_support( 'page', 'excerpt' ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $child_posts = query_posts( 'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID ); if ( $child_posts ) { foreach ( $child_posts as $child ) { $child_posttitle = apply_filters( 'the_title', $child->post_title ); $child_permalink = apply_filters( 'the_permalink', get_permalink( $child->ID ) ); $child_excerpt = apply_filters( 'the_excerpt', $child->post_excerpt ); $child_image_id = get_post_thumbnail_id($child->ID); $child_image_url = wp_get_attachment_image_src($child_image_id, 'post-titleimg', true); ?> <div class="child-page-box cssanime-appear"> <a href="<?php echo $child_permalink; ?>"> <img src="<?php echo $child_image_url[0]; ?>" class="" /></a> <div class="child-page-box-title"> <a href="<?php echo $child_permalink; ?>"><?php echo $child_posttitle; ?></a> <div class="child-page-excerpt"><?php echo $child_excerpt; ?></div> </div> </div> <?php } } ?> |
Child Pages Shortcode – 子ページの一覧を出力するショートコード | firegoby
脱コピペ！デザイナーにもわかるPHPとWP_Query
WordPressの固定ページを階層化し親ページに子ページ一覧を表示 プラグインを使わない方法 | Salty WordPress
※間違ってたり、もっと良いやり方があれば教えてください。