サポート » 使い方全般 » メディアのサムネイル画像を一覧表示に出力できません

  • 解決済 atsushi312

    (@atsushi312)


    初歩的な質問ですみません。
    様々なページを参照したもののうまく機能しません。
    どうかご助力いただけませんでしょうか。

    まずサイト制作の方向性は、カメラマンの写真をアルバム表示することです。
    アルバムのサムネイル画像から各原本の写真ページへ飛ばすという流れが目標です。
    分からないポイントは
    「サムネイル画像の取得・一覧表示」と「原本写真へのリンク」

    方法としては下記の2つ考えていますがどちらも機能しません。
    一眼レフで撮影した重い画像を使うので1の方法で効率的に実現したいです。

    1. 「メディア」に直接追加された写真とサムネイルをthe_post_thumbnail()で表示?
      課題A…the_post_thumbnail()が機能しない。(↓資料ア)
      課題B…原本写真へリンクするためのURL取得コードがわからない
    2. 「投稿」に使われた添付写真らをget_children()で取得し、foreachでループ表示。
      課題A…index.phpには適用できた(↓資料イ)が他のファイルでは機能せず。
      課題B…原本写真へのリンクを同一ループ内で共存させることができない。
      (課題C…カテゴリー別に表示するためのコードがわからない)

    上記以外の方法がございましたらご教授下さい。
    コードのコピペ常習者で、PHPの基礎をあまり理解していないことも原因です…。
    すみませんがよろしくお願い致します。

    ※資料ア

    <div id="conteiner">
    <ul id="photo-box">
    	<?php query_posts('post_type=attachment&post_status=inherit&paged='.$paged); ?>
    	<?php while(have_posts()): the_post(); ?>
    		<li class="photo-list">
    		<?php if (has_post_thumbnail()) {the_post_thumbnail();} ?>
    		</li>
    	<?php endwhile; ?>
    </ul>
    </div><!--#conteiner-->

    ※資料イ

    <div id="conteiner">
    <ul id="photo-box">
    	<?php while(have_posts()): the_post(); ?>
    		<?php
    			$images = get_children(array(    //添付メディアファイルを取得
    			    'post_parent' => get_the_ID(),
    			    'post_type' => 'attachment',
    			    'post_mime_type' => 'image',
    			    'order' => 'ASC'));
    		?>
    	<?php if(!empty($images)) : ?>
    	<?php foreach($images as $image) : ?>
    		<li class="photo-list">
    		<?php echo wp_get_attachment_image($image->ID); ?>
    		</li>
    	<?php endforeach; ?>
    	<?php endif; ?>
    	<?php endwhile; ?>
    </ul>
    </div><!--#conteiner-->
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    ※資料ア

    <?php query_posts('post_type=attachment&post_status=inherit&paged='.$paged); ?>


    この1行が話をややこしくしている気がします。一旦消してください。

    そのうえで、完全には構成が理解できてないので、追加の質問をしたいのですが

    ・テーマは完全自作ですか?なにか既存のテーマをベースにしていますか?

    ・現状「※資料ア」のコードのはどのファイルに書いていますか?

    ・「サムネイル画像の取得・一覧表示」をしたいのは、どの画面上ですか?
    (記事詳細?固定ページ?アーカイブ?)それによって触るべきファイルと書くべきコードが変わります。

    原本写真へリンクするためのURL取得コードがわからない

    img要素ではなく画像URLだけ取りたい場合は、wp_get_attachment_image_src関数を使います。

    wp_get_attachment_image_src( $attachment_id, $size, $icon );
    という感じで引数を指定することになっているので、第1引数には画像IDを入れます。
    アイキャッチ画像のIDはget_post_thumbnail_id関数で取れます。

    ここまでのヒントで恐縮ですが、使う関数が分かればもう少しご自身で調べられるのではないかと思います。頑張ってください!(基本的には1つ目の方法で考えていけば良いと思います)

    参考
    関数リファレンス/wp get attachment image src – WordPress Codex 日本語版
    テンプレートタグ/get post thumbnail id – WordPress Codex 日本語版

    mypacecreatorさんご返信ありがとうございます!!

    ※資料アに関して
    ①「この1行が話をややこしくしている気がします。一旦消してください。」
     →消しましたがサムネイルは表示されませんでした。
     

    ②ご質問に対して
    ・完全自作のテーマです。 完成イメージはこのサイトです。
     各カテゴリーを固定ページに分類し、カスタムテンプレート(もしくはpage.php)で
     サムネイル一覧表示をしたいです。

    ・資料アは現状、カスタム固定ページテンプレートに書いています。

    ・「サムネイル画像の取得・一覧表示」をしたいのは
     固定ページ(テンプレート)とトップページのindex.phpです。
     ただしindex.phpにはカテゴリー別+更新順の「サムネイル画像の取得・一覧表示」を
     トップページ1枚にまとめて実装したいと考えています…。
     各サムネイル画像が、カテゴリーの更新順に自動配置されるイメージです。
     

    ※wp_get_attachment_image_src関数について
    目から鱗でした。ありがとうございます!
    貴重なヒントをもとにもう少し自分でやってみようと思います!

    mypacecreaterさんのアドバイスのおかげで解決しました!
    本当にありがとうございます。
     

    前述の

    1.「メディア」に直接追加された写真とサムネイルをthe_post_thumbnail()で表示?
    課題A…the_post_thumbnail()が機能しない。(↓資料ア)
    課題B…原本写真へリンクするためのURL取得コードがわからない

    ではthe_post_thumbnail()を使っていましたが
    それでは「投稿」にある添付写真しか表示できませんでした。
    「メディア」にある全ての画像を表示するには仰るとおり
    wp_get_attachment_image関数を使い、第1引数に$attachment->IDを
    持ってくることですべての画像を表示することができました。

    原本写真へのリンクについても
    $img = wp_get_attachment_image_src( $attachment->ID, ” );で表現できました。

    以下、完成コードです。
     

    <div id="conteiner">
    	<ul id="photo-box">
    	<?php
    		$args = array(
    			'post_type' => 'attachment',
    			'numberposts' => -1,
    			'post_status' => null,
    		);
    
    		$attachments = get_posts( $args );
    		if ( $attachments ) { // 該当する投稿があったら
    			foreach ( $attachments as $attachment ) :
    			$img = wp_get_attachment_image_src( $attachment->ID, '' );
    				echo '<a href="' . $img[0] . '"><li class="photo-list">';
    				echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );;
    				echo '</li></a>';
    			endforeach; // 投稿のループ終わり
    		}
    		wp_reset_postdata();
    	?>
    	</ul>
    </div><!--#conteiner-->
    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    ヒント役立ったようでよかったです!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「メディアのサムネイル画像を一覧表示に出力できません」には新たに返信することはできません。