【2秒】アイキャッチ画像をbackground-imageで出力する【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

お疲れ様でした!

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

簡単な解説

コーディングをしていると、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%;
    }
  }
}

ポイント

  • 先に変数に代入してから、使用しています。
  • アイキャッチ画像が設定されないケースも見越して、noimageも用意しておいてあげましょう。
  • scssに記載しているafterはフィルターをかけている部分です。こちらはお好みで。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。