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

SUGOYOKU BLOG

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

前までは、画像取得を

<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('sample_250x150_thumbnail'); ?>

1 2	<?php if ( has_post_thumbnail() ) : ?> <?php the_post_thumbnail('sample_250x150_thumbnail'); ?>

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

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

<ul>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array(
	'post_type' => '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();
	?>
	<li>
		<a href="<?php the_permalink(); ?>">
		 <?php if ( has_post_thumbnail() ) : ?>
		<p class="archive-thumbnail-bg">
			<span style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span>
		 <h3>
		 <?php the_title(); ?>
		 </h3>
		 <p>
		 <?php
			if ( mb_strlen( $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 ) );
			}
			?>
		</p>
		</a>
		<?php endif; ?>
		</li>
		<?php
		endwhile;
		endif;
		?>
</ul>

<ul>

<?php

$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

$args = array(

'post_type' => '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();

<li>

<?php if ( has_post_thumbnail() ) : ?>

<h3>

<?php the_title(); ?>

</h3>

<p>

<?php

if ( mb_strlen( $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 ) );

}

</p>

</a>

<?php endif; ?>

</li>

<?php

endwhile;

endif;

</ul>

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

記事(content)のちょい見せ

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

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

<span style="background-image:url(<?php the_field('カスタムフィールド名'); ?>);"></span>

1	<span style="background-image:url(<?php the_field('カスタムフィールド名'); ?>);"></span>

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

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

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

.archive-thumbnail-bg span{

display: block; /*ブロック要素に変更*/

height: 550px; /*背景画像の高さを指定*/

background-size: cover; /*大きさに指定*/

background-position: left center; /*背景として設定する場所を指定*/

}

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

ちょこっとメンターサービス

HP無料診断

【実践マーケティング手法２２選】無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

SUGOYOKU BLOG