いろいろなものをSwiper.jsを使ってカルーセル表示してみるシリーズの、第４弾です(笑)

固定ページの子ページ一覧を、「アイキャッチ画像・タイトル・本文（抜粋）」を取得してカルーセル表示にしてみます。スライド要素に背景色を入れて、見た目インパクトあるようにしてみました。

サイドバーなしのワンカラム画面で見ると結構迫力があります。

子ページ一覧をカルーセル表示する（親ページ）

上記固定ページの設定例では、タイトル部分を画像に重ね、さらにパララックス効果を追加して、メインに表示されるスライド要素のみにタイトルのテキストが表示されるようにしてみました。ビジネスサイトやショップサイト等で、商品一覧なんかを表示するのに使ったらいいのではないかと思っています。



 

カルーセルを表示したい親ページ（固定ページ）で、phpファイルをショートコードで呼び出します。コードの主要部分は以下のようにしています。

<?php
 $args = array(
 'post_parent' => get_the_ID(),
 'post_status' => 'publish',
 'post_type'   => 'page',
 'order'       => 'ASC',
 'orderby'     => 'menu_order'
 );

 $children_array = get_children( $args );
 
 if ( count( $children_array ) > 0 ) {

 foreach ( $children_array as $child ) {
 $url = get_permalink( $child->ID ); // 子ページのパーマリンク取得
 $thumbnail = get_the_post_thumbnail( $child->ID, 'large' ); // 子ページのアイキャッチ画像

 $contentStr = strip_tags($child->post_content); // 本文取得
 $contentStr = preg_replace("/(\015\012)|(\015)|(\012)/", "", $contentStr); // 改行を削除
 $len_c = mb_strlen($contentStr); // コンテンツ文字数
 $len_c_max = 100; // 上限文字数
 $extention = '･･･'; // 末尾に付ける文字
 if($len_c>$len_c_max) {
    $contentStr = mb_substr($contentStr,0,$len_c_max); // 文字抜き出し
    $contentStr = $contentStr.$extention; // 末尾に付与
 };

 echo '<div class="swiper-slide" style="border:1px solid #ccc; padding: 20px; border-radius: 8px; background-color:#800000">';

 echo  '<a href="' . esc_url( $url ) . '">';
 echo $thumbnail;
 echo '</a>';
 echo '<p style="color:#fff; font-weight:bold; text-align:center;">' . $child->post_title . '</p>';
 echo '<p style="color:#fff">' . $contentStr . '</p>';

 echo '</div>';
 
 }
 }
?>

親ページで呼び出す場合は上記のコードで大丈夫ですが、親ページ以外のページや投稿で呼び出す場合には、「’post_parent’ => get_the_ID(),」の「get_the_ID()」のところに、親ページのページIDを直接代入してやりましょう。