ダッシュボードで登録した画像をbackground-imageで出力する(<img>タグではなく)

やりたいこと

　WordPressで、background-imageを使ってパララックス効果を実現したい。「WordPressで」ということは、ここでの画像はクライアントやユーザーがダッシュボード(主に固定ページの管理画面)から簡単に変更できるようにする必要もあるということを意味する。

ぶつかる壁

　単純なパララックス効果は、CSSのbackground-imageなどのCSSプロパティを使って、

style.css

.parallax-area {
    background-image: url('hoge.jpg');
    background-attachment:fixed;
    background-size: cover;
    background-position: 56% 56%;
    width:100%;
    height: 450px;
    position: relative;
 	
}

という風にすれば、簡単に書くことができます。
　ですが、この画像のリソースの部分はどうしてもパスを直に書くしか無い。クライアントが画像を変える場合、CSSファイルを直接書き換えることは困難でしょうから、これでは困ります。

解決方法

　インラインで出力します。言われてみれば当たり前ですね。和英問わずググっても解決策が出てこなかったのは、もしかしたら当たり前すぎたかもしれません。そうだったらごめんさない。
　気を取り直して、実際のコードをみていきます。実はやり方は少なくとも2つあり、それぞれで少しやり方が異なります。また、あたりまえですが、CSSファイルのbackground-image:の一行をここで消しておきます。

A. Advanced Custom Fieldsで保存した画像を出力する

page.php

<div class="parallax-area" style="background-image:url(<?php the_field('parallax_image1'); ?>);"></div>

　これは、ワンページレイアウトで複数の画像を使用するときによく使います。

B. アイキャッチ(サムネイル)として保存した画像を出力する

page.php

<?php 
   $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
?>
<div class="parallax-area" style="background-image:url(<?php echo $image[0]; ?>);">
   <h2 class="page-heading"><?php the_title(); ?></h2>
</div>

　これは、固定ページでそれに対するイメージを使用するときによく使います。

備考

　アイキャッチ出力の方は、前回の投稿サムネイルがlightbox系のプラグインで拡大されない時にを借用しています。
　なお、インラインCSSはあまり推奨されていませんが、サーバーからの出力を実現することを優先して、ここではまったく気にしていません。
　ビジュアルエディタで登録したメディアについては、the_content();に含まれる画像はbackground(背景)ではなくコンテンツの一部なので、ユーザビリティやSEOの観点から、元々background-image:として出力されることを想定していません。