WordPressのアイキャッチ画像を背景画像して表示するには、アイキャッチ画像のURLを取得してスタイルシートのバックグラウンドに設定する必要があります。
アイキャッチ画像のURLを取得する方法
アイキャッチ画像のURLを取得して出力する方法にアイキャッチ画像のURL取得方法を書きましたが、以下のコードを使用してURLを取得して出力します。
echo wp_get_attachment_url( get_post_thumbnail_id() );
アイキャッチ画像を背景画像にする方法
アイキャッチ画像を表示する箇所にHTMLタグを挿入し、タグにスタイルシートbackgound-imageを設定してURLに表示するアイキャッチ画像のURLを出力するWordPress関数を設定します。
<span style="background-image: url( <?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span>
上の例では、spanタグを使用していますが、テンプレートの内容に応じて他のタグを使用してもいいと思います。
表示については、仮に上記のコードの場合でCSSを設定するとしたらspanタグに適当なclass設定を追加します。
<span class ="thumbnails-background" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span>
CSSの例
.thumbnails-background { height: 150px; width: 150px; border: solid 1px #ccc; display: inline-block; }
スポンサーリンク
コメント
[…] アイキャッチ画像を背景画像にする方法|WordPressテーマカスタマイズ […]
[…] アイキャッチ画像を背景画像にする方法|WordPressテーマカスタマイズ […]
[…] で、たどり着いたのがこのサイト。これとドットインストールの手順を参考に下の画像のように書いてみましたが、サムネイルに設定した画像は表示されませんでした。 […]