css - 通过 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;
 }