【応用編】一覧ページ（archiveページ）のアイキャッチ画像取得は背景画像で取得！

2018.03.15

今回は一覧ページの画像取得について書いていきます。ホームページをwordpress（ワードプレス）で制作していると、確実に何かしらの一覧ページの表示をします。

前までは、画像取得を

function.phpに250×150のサムネイルを生成するように記述をしていました。ですが、一番いい方法としてアイキャッチ画像を背景画像で取得するのがいいと判断しました。

アイキャッチ画像を背景画像で取得


 'sample',
	'posts_per_page' => 12,
	'paged' => $paged
	);
	$my_query = new WP_Query( $args );
	if ( $my_query->have_posts() ):
	while ( $my_query->have_posts() ): $my_query->the_post();
	?>
	
		
		 
		
			
		 

		 
		 
		 
		 post_content, 'UTF-8' ) > 30 ) {
			$content = str_replace( '\n', '', mb_substr( strip_tags( $post->post_content ), 0, 30, 'UTF-8' ) );
			echo $content . '……';
			} else {
			echo str_replace( '\n', '', strip_tags( $post->post_content ) );
			}
			?>

このように17行目のspanを使い背景画像を取得します。（divでも問題ありません。） 16行目のclassは削除して頂いても構いません。

記事(content)のちょい見せ

23~29行目は記事をちょい見せするときに使用します。（現在30文字のちょい見せに設定しています。）必要なければ削除もしくは、「30」の部分を編集すれば文字数を変更できます。本題に戻り、spanの中の「wp_get_attachment_url( get_post_thumbnail_id() )」でアイキャッチ画像を取得します。

カスタムフィールドの画像を取得したい時

上記に変更すればカスタムフィールドの画像も取得することが可能です。

span（div）だけでは表示されないので、 cssで表示させます。

.archive-thumbnail-bg span{
    display: block; /*ブロック要素に変更*/
    height: 550px;  /*背景画像の高さを指定*/
    background-size: cover; /*大きさに指定*/
    background-position: left center; /*背景として設定する場所を指定*/
}

以上で表示させることが可能です。一覧ページ（archiveページ）を制作される際はお試しください。