【2秒】アイキャッチ画像をbackground-imageで出力する【WordPress】

投稿日 2020年11月4日
著者のせっち
カテゴリー WordPress

こんにちは！フリーランスエンジニアののせっち@nosecchi01です。

ワードプレスのサムネイル（アイキャッチ）をbackground-imageで使う方法をご紹介します。
コードをコピペするだけなのなら一瞬で終了します。

というわけで、早速コードを紹介

$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo '<div style="background-image: url('. $url.')"></div>';

the_post_thumbnailは<img>タグを返しますが、どうしてもbackgroundでいきたいときがありますよね。
→urlを取得してあげればOKです。$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo ‘<div style=”background-image: url(‘. $url.’)”></div>’;

こうですね！#wordpress
— のせっち@Webディレクター兼エンジニア (@nosecchi01) November 2, 2020

the_post_thumbnailは<img>タグを返しますが、どうしてもbackgroundでいきたいときがありますよね。 →urlを取得してあげればOKです。
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ‘<div style=”background-image: url(‘. $url.’)”></div>’;

こうですね！

#wordpress

お疲れ様でした！

以下は、簡単な解説と活用例になります。

簡単な解説

コーディングをしていると、imgタグではなく、background-imageを使いたいケースが出てきます。

画像サイズをcssで細かく調整したい。
IE11対応のため、object-fitが使えない。

などなどの理由があるかと思います。

単純に、<?php the_post_thumbnail; ?>とすると、htmlはimgタグを吐き出します。

冒頭のコードでは、一旦wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); でサムネイルのurlを取得してあげているわけですね。

使用例

こんな形で使うといいのではないでしょうか。

<section class="c-single">

  <!-- ループ省略 -->

  <?php 
    $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    $noimage = get_template_directory_uri() . '/dist/img/noimage.png';
  ?>
  <?php if ($url) : ?>
    <div class="c-single__thumb" style="background-image: url( '<?php echo $url; ?>' );"></div>
  <?php else : ?>
    <div class="c-single__thumb" style="background-image: url( '<?php echo $noimage; ?>' );"></div>
  <?php endif; ?>

  <!-- 省略 -->

</section><!-- /.c-single -->

.c-single {
  &__thumb {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 360px;
    position: relative;
    width: 100%;
    @media only screen and (min-width: 768px) {
      height: 440px;
    }
    &::after {
      background: rgba(#000, 0.4);
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}

ポイント