アイキャッチ画像を背景画像にする方法

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;
}

アイキャッチ画像を背景画像にする方法」への2件のフィードバック

  1. ピンバック: [WordPress] アイキャッチのURLを取得してCSSで背景画像に設定する方法 * prasm

  2. ピンバック: WordPress自作テーマを作る時に参考にしたサイト一覧 | plain

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です