固定ページをカテゴリー的に使っているサイトを作っていました。

親ページが「魚」で、子ページが「鯛」「鮪」「鮭」というような。

で、親ページに、子ページのリンク付きバナーを表示しようと思いまして、試行錯誤した結果、以下のコードに落ち着きました。

ACFを使用して、子ページに child_banner_url という画像フィールド(戻り値:画像URL)を追加。

親ページ側では、そのバナーを表示します。

バナーは Bootstrap のグリッド内に配置するため、幅や高さは無視しちゃいました。

本当なら画像フィールドの戻り値を画像配列にしておいて、width、height も取り出して設定すべきなのでしょうけどね

<?php
 $args = array(
 'post_parent' => get_the_ID(),
 'post_status' => 'publish',
 'post_type'   => 'page'
 );
 $children_array = get_children( $args );
 if ( count( $children_array ) > 0 ) {
	 echo '<div class="row">';
	 foreach ( $children_array as $child ) {
		 $child_page_url = get_permalink( $child->ID );
		 $child_banner_url = get_field( 'child_banner_url', $child->ID );
		 $html  = '<div class="col-sm-4">';
		 $html .= '<a href="' . esc_url( $child_page_url ) . '">';
		 $html .= '<img src="' . esc_url( $child_banner_url ) . '" alt="' . esc_html( $child->post_title ) . '"/>';
		 $html .= '</a>';
		 $html .= '</div>';
		 echo $html;
		 }
		 echo '</div>';
		 }
 ?>

 

zzz