2016/08/20

カスタムフィールドで投稿した画像を背景画像として使用する

そろそろブログをリニューアルしたいと思っているのですが、
暑い日ってやる気おきないですね。
図書館かカフェ行って作業すべきか・・・

カスタムフィールドで投稿した画像を背景画像として使いたい時ってありますよね。
私も悩んでいましたが、今の私のベストな出し方です。
きっともっとうまいやり方があると思いますが、力量が足りていないのでこんな感じのコードです。
advanced custom fieldを使ってカスタムフィールドを設定しています。

PHP

<ul class="works_list clearfix">
  <?php $args = array('post_type' => 'work', 'showposts' => 4,);
  $customPosts = get_posts($args);
  if ($customPosts) : foreach ($customPosts as $post) : setup_postdata($post); ?>
      <li>
        <a href="<?php the_permalink(); ?>">
          <div class="works_list_inner">
            <div class="sp_works_wrapper">
              <div class="works_list_img">
                <!--backgroundを読み込む-->
                <div class="works_list_img_inner" style="background-image:url(<?php the_field('work_img_1'); ?>);"> </div>
                <!--backgroundを読み込む-->
              </div>
              <div class="works_list_heading">
                <div class="works_list_heading_inner"> <?php the_field('work_type'); ?> </div>
              </div>
            </div>
            <div class="works_textarea">
              <p class="works_list_subheading"><?php echo post_custom('work_heading'); ?></p>
              <p class="works_list_text"><?php echo nl2br(get_post_meta($post->ID, 'work_text', true)); ?></p>
            </div>
          </div>
        </a>
      </li>
    <?php endforeach; ?>
  <?php else : ?>
    <p class="no_post">記事はありません。</p>
  <?php endif;
  wp_reset_postdata(); ?>
</ul>

「backgroundを読み込む」内のdivでカスタムフィールド’work_img_1’をbackground-imageとして出力しています。
カスタムフィールドの値は画像のURLを出させます。