WordPressのアイキャッチ画像はサイト閲覧者の興味を引くために役立ちます。
デザインによってはこのアイキャッチ画像を「CSSで背景画像にしたい」という場合があります。
例えば、こうしたタイトル帯の背景に敷いてある画像にアイキャッチ画像を採用したいときなどです。
今回はWordPressのアイキャッチ画像をCSSのbackground-imageに設定する方法をご紹介します。
アイキャッチ画像のURLが取得さえできれば簡単！
次のPHPコードは背景にするアイキャッチ画像のURLを取得するために、WordPress関数を利用したものです。
1 | wp_get_attachment_url( get_post_thumbnail_id() ); |
このコードを使って、アイキャッチ画像を背景画像にするには次のようなコードを書くと良いでしょう。
1 2 3 4 5 6 7 8 | <?php $title-bg = "style=''"; if ( has_post_thumbnail() ) { $img-url = wp_get_attachment_url( get_post_thumbnail_id() ); $title-bg = "style='background-image:url(".$img-url.");'"; } ?> <div <?php echo $title-bg; ?>></div> |
まず、アイキャッチ画像が使用されている場合は、$img-urlにアイキャッチ画像のパスを保存します。
次にそのパスをbackground-imageに設定したCSSを、任意のHTMLタグにインラインで記述します。
これでアイキャッチ画像が背景に設定できたはずです。
アイキャッチ画像が設定されていなかった場合も考えて、あらかじめデフォルトのbackground-imageをCSSファイルで設定しておくと良いでしょう。
そうすれば、アイキャッチ画像がある場合はインラインのCSSが優先されるようになります。
中小企業のホームページ制作やサイトリニューアルならシンス株式会社まで。
