CSSの中でphpコードを使う【アイキャッチ背景画像】

CSSの中でテンプレートタグを使いたい時があります。
ですがテンプレートタグはphpファイルの中でしか使うことができません。（拡張子がphpのファイル）
例えば外部スタイルシートで使用したい場合、CSSファイルなのでテンプレートタグは使えません。
今回は手っ取り早く、確実なphpファイルの中のHTMLタグの中にstyle属性を書いてテンプレートタグと組み合わせる方法をご紹介します。
例としてアイキャッチ画像を背景画像として設定してみます。
アイキャッチ画像は下記のテンプレートタグの

<?php the_post_thumbnail(); ?>

からimgタグが排出されます。
このアイキャッチ画像を背景画像として使用したい場合はimgタグとかsrcとかの属性が邪魔になりURLだけを取り出すことができません。
というわけで<?php the_post_thumbnail(); ?>からURLだけを取り出してみます。

まずはHTMLタグの中にスタイル属性を書いてみます。
figureタグのクラス名をeyecatch-imageにして背景画像のスタイルシートを設定します。

<figure class="eyecatch-image" style="background-image: url();">

</figure>

url()の中にテンプレートタグを置いていきます。
get_post_thumbnail_id()でアイキャッチ画像のIDを取得します。
そしてwp_get_attachment_url( )を使ってURLだけを抽出します。
組み合わせるとwp_get_attachment_url( get_post_thumbnail_id() )になります。
phpコードの中で書くと<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>となります。
さらにCSSのurl()の中に書くと下記になります。

<figure class="eyecatch-image" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);">

</figure>

これで背景画像として設置することができるようになります。
さらにこの背景画像を記事とリンクさせます。
そのためにはaタグを書かないといけないのですがfigureタグの中は空でリンクが張れません。
ですので文字を置いておきます。
リンクを張るための文字なのでなんでもいいのですが記事のタイトルと本文を置いておきます。
下記のコード一式をfigureタグでサンドイッチします。

<a href="<?php the_permalink(); ?>"><?php the_title(); ?>：<?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a>

最終的なfigureはこうなります。

<figure class="eyecatch-image" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?>：<?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a>
          </figure>

index.phpのContentsの部分にこれをセットします。
まとめるとindex.phpの中身は以下になります。

<?php get_header(); ?>

<!-- .eye-catch -->

<div class="eye-catch" style="background-image: url(<?php bloginfo('template_url'); ?>/images/eye-catch.jpg">
  image
</div>

<!-- .eye-catch -->
<!-- main -->

<main class="home clearfix">
  <h2>Contents</h2>

  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

      <div class="box1">
        <div class="box1left">
          <figure class="eyecatch-image" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?>：<?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a>
          </figure>
        </div>
        
        <div class="box1right">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
        </div>
        
      </div>

    <?php endwhile; ?>
    <?php else : ?>

      <div>
        <h6>記事が投稿されていません</h6>
      </div>

    <?php endif; ?>

</main>

<!-- main -->
  
<?php get_footer(); ?>

CSSも以下を追加です。

.box1 .box1left{
  width: calc(20% - 10px);
  height: 100px;
  overflow: hidden;
  float: left;
}
.box1left a{
  color: transparent;
  display: block;
}
.eyecatch-image{
  background-size: cover;
}
.box1 .box1right{
  width: 80%;
  float: right;
}