福岡 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ページ)を制作される際はお試しください。

HP無料診断

毎月3社様限定SEO対策無料診断

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

マーケティング手法22選

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

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


補助金 お問い合わせ

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

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

補助金 お問い合わせ

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

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

スゴヨク ロゴ

TOP

//サムネイルを取得