Question

供参考 http://vvcap.net/db/Bs03ucQSrylV5LBiWduY.htp这里是帖子特色图片的缩略图 http://vvcap.net/db/_45qWkuQwluTrYF51tFn.htp这是一个正方形，我想设置背景图像。小方块由后环（如下所示）制成。在循环内部是检查帖子是否为“特色图像吸引”

CSS：目前这是唯一用于设置div bg样式的css。（这应该被替换）

 section > div { background:#00c8e8;}

编译源HTML 第二部分发布精选图片（在div上）作为示例。第一部分没有特色图片。

<section  class="resource">
   <div> 
        <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />     
 </div>
</section>

HTML / PHP

<?php 

        $args = array(  
        'post_type' => 'custom_type', 
        'posts_per_page' => '-1' 
        );

        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <section  class="resource">
              <div> 
          <a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>">
                <?php the_title(); ?>
                <?php 
            // check if the post has a Post Thumbnail assigned to it. 
        if ( has_post_thumbnail() ) 
            { 
          //run jQuery here (prob replace the_post_thumbnail();)
              the_post_thumbnail();
        } 
        ?>
    </a> </div>
</section>
<?php endwhile; ?>

我对jQuery或php不是很强。幸运的是，这个过程的逻辑是有道理的。

循环帖子（检查）
测试帖子是否有特色图片（支票）
执行jQuery以使用the_post_thumbnail（）;
利润！

我们在另一个警告中遇到的问题是，我们如何区分和分配适当的背景图像？我只有1种形式拟合css风格。如果它每次进入处理过程是有意义的。不幸的是，它不会重写每个条目吗？我知道这是一个很大的问题堆栈，但请我永远爱你，以求帮助！

马修

更新的HTML来源

   <section  class="resource">

      <div> 

            <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />      </div>

    </section>

Answer 1

假设每个img元素只有一个section个元素，并且您希望该图像成为父background-image的{{1}} } div：

img

JS Fiddle demo

参考文献：

Answer 2

通过Codex的外观，您可以将该信息作为第二个参数传递。

<强> CSS

.post-thumbnail {
    background:#00c8e8;
}

<强> PHP

$size = array( 32, 32 );
$attr = array( 'class' => 'post-thumbnail' );
the_post_thumbnail( $size, $attr );

为了使后缩略图成为背景，我会使用get_the_post_thumbnail（）

<?php $bg = wp_get_attachment_image_src( get_post_thumbnail_id($post_id, $size, $attr)); ?>
<div style="background: <?php echo $bg; ?>;">...</div>

您必须传递您想要的参数 - 特定的帖子ID或其他。

使用jQuery将background-image css设置为wordpress中的特色图像

2 个答案: