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

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

マーケティング手法22選

助成金を使ってホームページを制作しませんか?

スゴヨクでは、小規模事業者持続化補助金を使ったホームページ制作を行っています。
助成額が3分の2、最大50万円まで補助されるので、(要件次第で100万円も可能)
ホームページ制作、広告をお考えの方は一度ご連絡ください。
申請は無料なので、まずはご連絡いただけると幸いです。



補助金 お問い合わせ

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

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

補助金 お問い合わせ

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

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

スゴヨク ロゴ

TOP

//サムネイルを取得