サポート » 使い方全般 » 特定のカスタム投稿の添付画像を、ランダム表示させる

  • 解決済 mametasu

    (@mametasu)


    【使用しているプラグイン】
    Advanced Custom Fields
    Custom Post Type UI

    【やりたいこと】
    カスタムフィールドを拡張し、カスタム投稿で添付画像を複数入力できるようにしています。
    トップの index.php にて、特定のカスタム投稿の添付画像を複数枚ランダム表示させたいのですが、よい方法が分からず。。

    やり方をご存知のかたがおりましたら教えていただきたいです。
    よろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • 特定のカスタム投稿の添付画像を複数枚ランダム表示させたい

    具体的な部分が分からなかったのですが、以下のようなイメージですか?
    index.php に貼り付け、指定の箇所を変更して試してみて下さい。

    ※Advanced Custom Fields で作成した画像フィールドの返り値は「画像ID」とした場合。

    <?php
    
    // カスタム投稿のID
    $CImages["post_id"] = 18;
    
    // カスタムフィールドの画像フィールド名
    $CImages["meta_name"] = array( 'image_1' , 'image_2' , 'image_3' );
    
    // 表示させる画像の枚数
    $CImages["sheets"] = rand( 1 , count( $CImages["meta_name"] ) );
    
    // 画像IDを全て取得
    $CutomImages = array();
    foreach( $CImages["meta_name"] as $meta_name ) {
    	$CutomImages[] = get_post_meta( $CImages["post_id"] , $meta_name , true );
    }
    
    // 取得した画像IDの順番をシャッフル
    $CImages["randoms"] = $CutomImages;
    shuffle( $CImages["randoms"] );
    
    ?>
    <?php for( $i=0; $i<$CImages["sheets"]; $i++ ) : ?>
    
    	<?php echo wp_get_attachment_link( $CImages["randoms"][$i] ); ?>
    
    <?php endfor; ?>

    このコードでは、

    • カスタム投稿のIDは指定
    • 画像フィールドの順番のランダム
    • 画像枚数をランダム

    としています。
    カスタム投稿のIDを複数にするなら、foreach等で全ての画像フィールドIDを一度取得してから、画像IDをシャッフルすればできると思います。

    トピック投稿者 mametasu

    (@mametasu)

    すみません、書き方が悪かったですね。。
    せっかくコードを教えていただいたのにすみません。

    特定のカスタム投稿の添付画像を複数枚ランダム表示させたい

    「特定のカスタム投稿」=「特定のポストタイプの全記事」
    という意味でした。

    実現したいことは下記のような感じです。
    ・特定のポストタイプ内の記事にあるすべての添付画像から、複数枚をランダム表示
    ・画像には添付されている記事へのリンクをつける

    すみませんが、何か良い方法があれば教えていただきたいです。
    どうぞよろしくお願いします。

    カスタム投稿のIDを複数にするなら、foreach等で全ての画像フィールドIDを一度取得してから、画像IDをシャッフルすればできると思います。

    こちらで対応できるのではと思います。
    具体的は、

    1. 全カスタム投稿タイプを取得
    2. カスタム投稿タイプの数がある分だけ、紐づいた画像IDを取得
    3. 紐づいた画像IDをシャッフル
    4. シャッフルされた画像IDから、複数毎表示
    5. 画像IDの親IDを取得し、パーマリンクをつける

    このようになるのではないかと思います。
    ※全カスタム投稿が対処なので処理が重くなりそうな点が心配ですが。

    コードは、

    <?php
    
    // カスタム投稿タイプ名
    $CImages["post_type"] = "books";
    
    // カスタムフィールドの画像フィールド名
    $CImages["meta_name"] = array( 'image_1' , 'image_2' , 'image_3' );
    
    // 全カスタム投稿タイプを取得
    $CImages["all_posts"] = get_posts( array( "numberposts" => -1 , "post_type" => $CImages["post_type"] ) );
    
    // 画像IDを全て取得
    $CutomImages = array();
    foreach( $CImages["all_posts"] as $custom_post ) {
    	foreach( $CImages["meta_name"] as $meta_name ) {
    		$tmp_img = get_post_meta( $custom_post->ID , $meta_name , true );
    		if( !empty( $tmp_img ) ) {
    			$CImages["all_img_ids"][] = $tmp_img;
    		}
    	}
    }
    
    // 表示させる画像の枚数
    $CImages["sheets"] = rand( 1 , count( $CImages["all_img_ids"] ) );
    
    // 取得した画像IDの順番をシャッフル
    $CImages["randoms"] = $CImages["all_img_ids"];
    shuffle( $CImages["randoms"] );
    
    // 表示させる画像IDを決定
    for( $i=0; $i<$CImages["sheets"]; $i++ ) {
    	$CImages["get_img_ids"][] = $CImages["randoms"][$i];
    }
    
    ?>
    <?php foreach( $CImages["get_img_ids"] as $img_id ) : ?>
    
    	<?php $attachment_post = get_post($img_id); ?>
    	<a href="<?php echo get_permalink( $attachment_post->post_parent ); ?>"><?php echo wp_get_attachment_image( $img_id ); ?></a>
    
    <?php endforeach; ?>
    トピック投稿者 mametasu

    (@mametasu)

    ご丁寧にありがとうございます。
    カスタム投稿タイプと、カスタムフィールドを変えて
    コードを記述してみたのですが、何故かうまくいきませんでした。。

    【実行結果】
    ・指定とは関係のない1記事のみが取得される
    ・「表示させる画像の枚数」を変更するとその数だけ表示されるが、上記記事が複製される
    ・wp_get_attachment_imageで画像が表示されない

    カスタム投稿タイプと、カスタムフィールド以外にも何か変えなければいけないのでしょうか?
    すみませんが、教えていただけると助かります。

    カスタム投稿タイプと、カスタムフィールド以外にも何か変えなければいけないのでしょうか?

    いえ、基本はこの部分だけです。

    【実行結果】
    ・指定とは関係のない1記事のみが取得される
    ・「表示させる画像の枚数」を変更するとその数だけ表示されるが、上記記事が複製される
    ・wp_get_attachment_imageで画像が表示されない

    こちらに関してですが、おそらく全て「カスタム投稿タイプの全記事」が取得できなかった事が原因だと思われます。

    なので、

    $CImages[“post_type”] = “books”;

    $CImages[“all_posts”] = get_posts( array( “numberposts” => -1 , “post_type” => $CImages[“post_type”] ) );

    この部分にて、「投稿タイプ」ではなく「ラベル」を誤って入力していないか等、get_posts()で上手くカスタム投稿タイプの全記事が取得出来るよう試行錯誤してみてください。

    ※mametasuさんが試しているコードを書いてもらえるとより分かりやすいです。

    トピック投稿者 mametasu

    (@mametasu)

    どうもありがとうございます。
    カスタム投稿タイプの全記事取得、画像のランダム表示、ともにできました。

    しかし、表示枚数の制御がうまく動作していない、、?
    「表示させる画像の枚数」を「1」にしていても、
    リロードするたびに違う枚数の画像が表示されてしまいます。

    念のため、コードを書いておきますので、おかしな点がありましたら教えていただきたいです。
    よろしくお願いいたします

    <?php
    	$CImages["post_type"] = "photo"; // カスタム投稿タイプ名
    	$CImages["meta_name"] = array( 'photo_main_image_01' ); // カスタムフィールドの画像フィールド名
    
    	// 全カスタム投稿タイプを取得
    	$CImages["all_posts"] = get_posts( array( "numberposts" => -1 , "post_type" => $CImages["post_type"] ) );
    
    	// 画像IDを全て取得
    	$CutomImages = array();
    	foreach( $CImages["all_posts"] as $custom_post ) {
    		foreach( $CImages["meta_name"] as $meta_name ) {
    			$tmp_img = get_post_meta( $custom_post->ID , $meta_name , true );
    			if( !empty( $tmp_img ) ) {
    				$CImages["all_img_ids"][] = $tmp_img;
    			}
    		}
    	}
    
    	$CImages["sheets"] = rand( 1 , count( $CImages["all_img_ids"] ) ); // 表示させる画像の枚数
    	$CImages["randoms"] = $CImages["all_img_ids"]; // 取得した画像IDの順番をシャッフル
    	shuffle( $CImages["randoms"] );
    
    	// 表示させる画像IDを決定
    	for( $i=0; $i<$CImages["sheets"]; $i++ ) {
    		$CImages["get_img_ids"][] = $CImages["randoms"][$i];
    	}
    	?>
    
    	<?php foreach( $CImages["get_img_ids"] as $img_id ) : ?>
    		<?php $attachment_post = get_post($img_id); ?>
    		<li><a href="<?php echo get_permalink( $attachment_post->post_parent ); ?>"><?php echo wp_get_attachment_image( $img_id, 'list-s-thumbnails' ); ?></a></li>
    	<?php endforeach; ?>

    コード、ありがとうございます。

    しかし、表示枚数の制御がうまく動作していない、、?
    「表示させる画像の枚数」を「1」にしていても、
    リロードするたびに違う枚数の画像が表示されてしまいます。

    試してみましたが、私のほうでは枚数を指定すると、その指定通りの枚数の表示となりました。

    $CImages[“sheets”] = rand( 1 , count( $CImages[“all_img_ids”] ) );

    枚数にあたる部分のこのコードですが、rand( 1 ←この部分の数字を変更していませんか?

    $CImages["sheets"] = 2;

    $CImages["sheets"] = 8;

    のように、指定してみてください。

    それでも指定した枚数が表示されないようであれば、$CImages[“all_img_ids”]$CImages[“get_img_ids”]の配列数(画像IDの数)を確認して、期待通りの画像IDの数が取得出来ているかどうか確かめてみてください。

    トピック投稿者 mametasu

    (@mametasu)

    表示枚数も問題なく表示されるようになりました。

    本当にありがとうございます。
    大変助かりました!

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「特定のカスタム投稿の添付画像を、ランダム表示させる」には新たに返信することはできません。