カスタム投稿タイプの投稿一覧におけるアイキャッチ表示

解決済

nieyama

(@nieyama)

12年、 11ヶ月前

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

カスタム投稿タイプ: 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)

12年、 10ヶ月前
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 から呼ばれた場合、第１引数が null となります。そうなると、get_the_post_thumbnail の変数 $post_id は必然的に get_the_ID の返値になり、get_the_ID は、グローバル変数のの $post を参照しています。

ここで、ご質問のソースでアイキャッチ画像を表示させる方法は２通りあって、
1. the_post_thumbnail ではなく、get_the_post_thumbnailの第１引数に $tax_postのIDを指定して echoさせる。
2. 変数名を $tax_post ではなく $post に変更する。
※ ２．の方法は、ループ内でそのまま変更すると不具合発生の可能性があります。

と修正すれば、アイキャッチ画像を表示できるはずです。
トピック投稿者 nieyama
(@nieyama)

12年、 10ヶ月前

jim912さん、こんばんは。

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

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「カスタム投稿タイプの投稿一覧におけるアイキャッチ表示」には新たに返信することはできません。

トピックタグ

表示