固定ページをカテゴリー的に使っているサイトを作っていました。
親ページが「魚」で、子ページが「鯛」「鮪」「鮭」というような。
で、親ページに、子ページのリンク付きバナーを表示しようと思いまして、試行錯誤した結果、以下のコードに落ち着きました。
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