TOPページに登録した画像をランダムで表示する（その２）

昨日の記事からの続きです。

TOPページに登録した画像をランダムで表示する – うぇぶ屋さん.こむ
WordPress のサポートフォーラムに、アイキャッチ画像を複数枚設定して、アクセスの度にランダムに表示したいという質問が上がっていたので、その対応方法です。 アイキャ…
web-ya3.com

画像を表示するコード

サポートフォーラムの質問で使用されているテーマが Twenty Fifteen の子テーマなので、 Twenty Fifteen で子テーマを使用する場合のコードです。

「設定」 > 「表示設定」 > 「 ホームページの表示 」は、「固定ページ」を選択。
「ホームページ」に固定ページを設定しているものとします。

ホームページの表示設定

フロントページで使用されているテンプレートを確認する

コードを追加する場合、表示されているページにどのテンプレートファイルが使用されているのかを確認する必要があります。

Show Current Template プラグインを使用すると、プラグインをインストールして有効化するだけで、どのテンプレートファイルを使用しているのか、簡単に確認することができます。

使用しているテンプレートは、page.php ですが、中身を確認するとコンテンツ部分の表示には themes/twentyfifteen/content-page.php が読み込まれていることがわかります。
上の画像は子テーマを使用していませんが、子テーマを使用している場合でも子テーマの方にテンプレートファイルが無ければ、親テーマのテンプレートがそのまま読み込まれます。

子テーマに content-page.php をコピーしてカスタマイズする

themes/twentyfifteen/content-page.php を子テーマにそのままコピーして、コードを編集します。

Twenty Fifteen は、アイキャッチの表示に独自の関数 twentyfifteen_post_thumbnail(); を使用していますので、この部分を書き換えます。

元のアイキャッチ画像を表示するコード

<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>

編集後のコード

<?php
if ( is_front_page() ) :
$img_group = SCF::get( 'img_group' );
if( !empty( $img_group[0]['thumbnail_img'] ) ):
$count     = count( $img_group );
$random    = mt_rand( 0, $count - 1 );
$image     = $img_group[$random]['thumbnail_img'];
$imageItem = wp_get_attachment_image_src( $image, 'large' );
?>
<div>
	<p><img src="<?php echo ( $imageItem[0] ) ; ?>"></p>
</div>
<?php
endif;
else :
// Post thumbnail.
twentyfifteen_post_thumbnail();
endif;
?>

コードの解説

  1. フロントページのみに適用するので、if ( is_front_page() ) : で条件分岐
  2. $img_group = SCF::get( 'img_group' ); で、繰り返しフィールドのデータを取得
  3. if( !empty( $img_group[0]['thumbnail_img'] ) ): 取得したデータが空で無いか確認
    繰り返しフィールドのデータ（ $img_group ）は配列になっているので、配列の０番目（ $img_group[0] ）の フィールド’thumbnail_img’（ [‘thumbnail_img’] ）にデータがあるかどうかを確認しています。
  4. count( $img_group ); 取得したデータから要素の配列の数をカウントする（画像が何枚登録されているか数える）
  5. mt_rand( 0, $count - 1 ); 登録した画像の中から１枚をアクセスの度にランダムに表示するので、配列のn番目の画像を表示させるために、配列の数（ $count ）を元にして乱数ｎ（ $random ）を生成
  6. $img_group[$random]['thumbnail_img']; 配列のn番目の画像IDを取得
  7. wp_get_attachment_image_src( $image, 'large' ); 画像ファイルの表示用データを取得

編集後のコード （コメント付き）

<?php
// 条件分岐 フロントページ
if ( is_front_page() ) :
// 繰り返しフィールドのデータを取得
$img_group = SCF::get( 'img_group' );
// 取得したデータが空でなければ
if( !empty( $img_group[0]['thumbnail_img'] ) ):
// 取得したデータから要素の配列の数をカウントする
$count     = count( $img_group );
// 配列のn番目の画像を表示させるため、配列の数を元にして乱数を生成
$random    = mt_rand( 0, $count - 1 );
// 配列のn番目の画像IDを取得
$image     = $img_group[$random]['thumbnail_img'];
// 画像ファイルの表示用データを取得
$imageItem = wp_get_attachment_image_src( $image, 'large' );
?>
<div>
	<p><img src="<?php echo ( $imageItem[0] ) ; ?>"></p>
</div>
<?php
endif;
else :
// Post thumbnail.
twentyfifteen_post_thumbnail();
endif;
?>