ウェルカートでカテゴリー別人気ページをサムネイル付きで表示する方法

ウェルカートで商品画像を一括登録すると、アイキャッチ画像が指定されていない状態になる

WordPressでサムネイル画像付きの人気ページ一覧を表示する際、WordPress Popular Postsプラグインを使って実装することが多いです。

先日、ウェルカートを使っているECサイトで人気記事を表示したく、WordPress Popular Postを設置してみたのですが、なぜか画像が表示されません。

何でかな？と考えたところ、Welcartの機能である商品画像のFTP一括登録を使っていたため（機能について詳しくはこのページ）、アイキャッチ画像が未登録の状態になっており、サムネイル画像が表示されなかったようです。

とはいえ、手動で何百点もの画像をアイキャッチ画像に登録していくのは大変すぎますので、アイキャッチ画像の代わりに、商品のメイン画像が表示されるようにカスタマイズしました。

まずは商品画像をウェルカートの関数ではなく、get_post_metaで取得できるようにする

まずは準備編として、商品画像をウェルカートの関数「usces_the_itemImage」ではなく、WordPressの関数「get_post_meta」で取得できるようにします。
こうすると、一般的なループの中で扱えるようになるので便利です。

次に、WordPress popular postのループ部分の表示をフィルターフックを使って書き換える。

アイキャッチ画像を呼び出す部分を、先ほど用意した商品画像に差し替えるのですが、WordPress popular postsの表示を変えるためには、プラグインに用意されているフィルターフック「wpp_post」を使ってカスタマイズする必要があります。

そうして作ったソースが下記になります。こちらをテーマのfunctions.phpに貼り付ければOKです。

//商品画像を取得してPopular postのアイキャッチ画像にする
function my_custom_single_popular_post( $post_html, $p, $instance ){
	global $usces;
	$post_id = $p->id;
	$code =  get_post_meta($post_id, '_itemCode', true);
	$pictid = (int)$usces->get_mainpictid($code);
	$image_src = wp_get_attachment_image_src($pictid);
	$output = '<li class="wpp_list_item cf"><a href="' . get_the_permalink($p->id) . '" class="my-custom-title-class"><img src="' .$image_src[0]. '"/>' . esc_html( $p->title ) . '</a></li>' ;  
	return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );

あとは、ウィジェット設定画面でWordPress popular postsプラグインを設置して、好きなカテゴリーや表示件数を指定してください。

応用編：関連する商品リストにもサムネイルを表示する

関連ページを表示するなら、「Yet Another Rerated」プラグインが定番ですね！

こちらもデフォルトではアイキャッチ画像が呼び出されるので、ウェルカートで画像を一括登録する場合、そのままではサムネイル画像が表示されません。

このプラグインは、表示する部分のソースをテンプレートでカスタマイズできるので、アイキャッチを呼び出す部分を下記のように書き換えます。

テーマディレクトリの中に「yarpp-template-XXXXX.php」等の名前で表示部分のテンプレートを複製し、下記のようなソースに書き換えます。

<h3 class="related_title">関連商品</h3>
<?php if (have_posts()):?>
<ul class="related_list cf">
	<?php while (have_posts()) : the_post(); ?>
		<?php 
			global $usces;
			$post_id = $post->ID;
			$code =  get_post_meta($post_id, '_itemCode', true);
			$pictid = (int)$usces->get_mainpictid($code);
			$image_src = wp_get_attachment_image_src( $pictid );
		?>
		<?php if ($code):?>
			<li class="related_list_item">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
					<img src="<?php echo $image_src[0]; ?>" /><br><?php the_title(); ?>
				</a>
			</li>
		<?php endif; ?>
	<?php endwhile; ?>
</ul>
<?php else: ?>
	<p>関連する商品はありません。</p>
<?php endif; ?>

こちらの「プロマート」で、サイドバーに表示している人気商品や、個別の商品ページに出している関連商品の部分に使っています。

生鮮卸売市場プロマート