通过 CSS 加载特色图片？

Question

我博客的当前英雄图片（置顶帖）是静态的，因为图片是通过 CSS 加载的。因此，无论我粘贴哪个帖子，文本都会动态变化。虽然我希望我的图像是动态的，并且想知道以正确的样式将特征图像动态加载到英雄帖子中的最佳方法。

我应该如何处理这个问题？

HTML

    <div class="hero">

                <div class="hero-wrapper">

                    <div class="article-info">

                    <!-- fetch sticky and store in $sticky variable -->
                    <?php $sticky = get_option( 'sticky_posts' ); ?>

                    <!-- create a new query and store first value of the sticky -->
                    <?php $query = new WP_Query( array( 'p' => $sticky[0] ) ); ?>

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

                         <p class="topic"><a href="<?php the_permalink(); ?>"><?php the_category('&nbsp'); ?></a></p> 
                         <h1 class="hero-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

                  <?php endwhile; ?>

                  <?php wp_reset_postdata(); ?> 

                  <?php else : ?>
                   <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                  <?php endif; ?>

                    </div>

                </div>

         </div>

scss

.hero{
  margin: 0 0 30px 0;
  background-image: url("https://placeimg.com/470/310/people");
  background-repeat: none;
  background-size: cover;
  background-position: center center; 
  @include fill-parent;
  position: relative;
  z-index: 0;
}

Answer 1

您可以使用 .hero 的内联样式来完成此操作

<!-- fetch sticky and store in $sticky variable -->
<?php $sticky = get_option( 'sticky_posts' ); ?>
<!-- create a new query and store first value of the sticky -->            
<?php $query = new WP_Query( array( 'p' => $sticky[0]   ) ); ?>
<?php if ( $query->have_posts() ): ?>
  <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="hero" style="background-image: url(<?php echo $path_to_img; ?>)">
      <div class="hero-wrapper">
        <div class="article-info">
          <p class="topic">
            <a href="<?php the_permalink(); ?>">
              <?php the_category('&nbsp'); ?>
            </a>
          </p>
          <h1 class="hero-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        </div>
      </div>
    </div>
    <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>
        <?php else : ?>
          <p>
            <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
          </p>
          <?php endif; ?>

和scss

.hero{
   margin: 0 0 30px 0;
   background-repeat: none;
   background-size: cover;
   background-position: center center; 
   @include fill-parent;
   position: relative;
   z-index: 0;
 }