サポート » 使い方全般 » カスタム投稿タイプの投稿一覧におけるアイキャッチ表示

  • 解決済 nieyama

    (@nieyama)


    カスタム投稿タイプを利用して製品紹介ページを作っています。
    それぞれの設定は以下になります。

    カスタム投稿タイプ: product
    taxonomy: product_cat
    term: A, B, C

    サイトのトップページに、この製品の一覧表示をしたいと思っています。

    要望は以下の2つです。
    1.termごとに投稿記事を表示させる
    2.記事は、アイキャッチ、記事のタイトル(リンク付き)、記事の抜粋を表示。

    以下のトピックを参考に、「アイキャッチ」以外は要望どおりになりました。
    http://ja.forums.wordpress.org/topic/4823

    function.phpに追加した内容

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100, 9999 );

    トップページのテンプレートに追加した内容

    <?php
    $taxonomy_name = 'product_cat';
    $product_cat_taxonomies = get_terms( $taxonomy_name );
    
    // product_cat タクソノミーが登録されていなければループしない。
    if ( ! is_wp_error( $product_cat_taxonomies ) && count( $product_cat_taxonomies ) ) {
    	foreach ( $product_cat_taxonomies as $product_cat_taxonomy ) {
    		// 投稿タイプがproduct で $taxonomy_name タクソノミーかつ、 カテゴリーが$product_cat_taxonomy->slugの記事を取得
    		$tax_posts = get_posts( array( 'post_type' => 'product', 'taxonomy' => $taxonomy_name, 'term' => $product_cat_taxonomy->slug ) );
    		// 記事があれば、カテゴリーと記事のリストを表示
    		if ( $tax_posts ) {
    ?>
    
    	<h3><a href="<?php echo get_option('home'); ?>/<?php echo $taxonomy_name; ?>/<?php echo $product_cat_taxonomy->slug; ?>"><?php echo $product_cat_taxonomy->name; ?></a></h3>
    
    	<p><?php echo $product_cat_taxonomy->description; ?></p>
    
    	<ul>
    
    	<?php
    	foreach ( $tax_posts as $tax_post ) {
    		$link = get_permalink( $tax_post->ID );
    	?>
    
    		<li>
    			<p><?php the_post_thumbnail(); ?></p>
    			<dl>
    				<dt><a href="<?php echo esc_url( $link ); ?>"><?php echo esc_html( apply_filters( 'the_title', $tax_post->post_title ) ); ?></a></dt>
    				<dd><p><?php echo esc_html( $tax_post->post_excerpt ); ?></p>
    					<p><a href="<?php echo esc_url( $link ); ?>">詳細</a></p>
    				</dd>
    			</dl>
    		</li>
    		<?php
    		}
    		?>
    	</ul>
    <?php
    		}
    	}
    }
    ?>

    アイキャッチを表示させるには、以下をどのように変更すればいいのでしょうか?
    <?php the_post_thumbnail(); ?>

    よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター jim912

    (@jim912)

    nieyamaさん、こんにちは。

    the_post_thumbnail関数は、wp-includes/post-thumbnail-template.phpに記述されていて(ver3.1.2)実際のコードは下記の通りとなっています。

    /**
     * Display Post Thumbnail.
     *
     * @since 2.9.0
     *
     * @param int $size Optional. Image size.  Defaults to 'post-thumbnail', which theme sets using set_post_thumbnail_size( $width, $height, $crop_flag );.
     * @param string|array $attr Optional. Query string or array of attributes.
     */
    function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
    	echo get_the_post_thumbnail( null, $size, $attr );
    }
    
    /**
     * Retrieve Post Thumbnail.
     *
     * @since 2.9.0
     *
     * @param int $post_id Optional. Post ID.
     * @param string $size Optional. Image size.  Defaults to 'thumbnail'.
     * @param string|array $attr Optional. Query string or array of attributes.
     */
    function get_the_post_thumbnail( $post_id = null, $size = 'post-thumbnail', $attr = '' ) {
    	$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
    	$post_thumbnail_id = get_post_thumbnail_id( $post_id );
    	$size = apply_filters( 'post_thumbnail_size', $size );
    	if ( $post_thumbnail_id ) {
    		do_action( 'begin_fetch_post_thumbnail_html', $post_id, $post_thumbnail_id, $size ); // for "Just In Time" filtering of all of wp_get_attachment_image()'s filters
    		$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );
    		do_action( 'end_fetch_post_thumbnail_html', $post_id, $post_thumbnail_id, $size );
    	} else {
    		$html = '';
    	}
    	return apply_filters( 'post_thumbnail_html', $html, $post_id, $post_thumbnail_id, $size, $attr );
    }

    the_post_thumbnail に指定可能なのはサイズと属性の引数で、get_the_post_thumbnail の返値をそのまま表示(echo)させています。

    一方、呼び出される get_the_post_thumbnailは、the_post_thumbnail から呼ばれた場合、第1引数が null となります。そうなると、get_the_post_thumbnail の変数 $post_id は必然的に get_the_ID の返値になり、get_the_ID は、グローバル変数のの $post を参照しています。

    ここで、ご質問のソースでアイキャッチ画像を表示させる方法は2通りあって、

    1. the_post_thumbnail ではなく、get_the_post_thumbnailの第1引数に $tax_postのIDを指定して echoさせる。
    2. 変数名を $tax_post ではなく $post に変更する。

    ※ 2.の方法は、ループ内でそのまま変更すると不具合発生の可能性があります。

    と修正すれば、アイキャッチ画像を表示できるはずです。

    jim912さん、こんばんは。

    ご教授いただいた1番のやり方で、無事表示することができました。
    本当にありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「カスタム投稿タイプの投稿一覧におけるアイキャッチ表示」には新たに返信することはできません。