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

HOME > ブログ > 【応用編】一覧ページ(archiveページ)のアイキャッチ画像取得は背景画像で取得!

SUGOYOKU BLOG

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

今回は一覧ページの画像取得について書いていきます。

ホームページをwordpress(ワードプレス)で制作していると、
確実に何かしらの一覧ページの表示をします。

前までは、画像取得を
function.phpに250×150のサムネイルを生成するように記述をしていました。

ですが、一番いい方法としてアイキャッチ画像を背景画像で取得するのがいいと判断しました。

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

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

記事(content)のちょい見せ

23~29行目は記事をちょい見せするときに使用します。(現在30文字のちょい見せに設定しています。)
必要なければ削除もしくは、「30」の部分を編集すれば文字数を変更できます。

本題に戻り、spanの中の「wp_get_attachment_url( get_post_thumbnail_id() )」でアイキャッチ画像を取得します。

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

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

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

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

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP