使用 jQuery 将背景图像 css 设置为 wordpress 中的特色图像

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。幸运的是，这个过程的逻辑是有道理的。

1. 循环发布帖子（检查）
2. 测试帖子是否有特色图片（检查）
3. 执行jQuery，用the_post_thumbnail()替换背景图片；
4. 利润！

我们遇到的另一个问题是我们如何区分和分配正确的背景图像？我只有 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

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

$('section img').each(
    function(){
        var src = this.src,
            h = $(this).height(),
            w = $(this).width();
        $(this).closest('div').css({
            'min-width' : w,
            'min-height' : h,
            'background-image' : 'url(' + src + ')',
            'background-repeat' : 'no-repeat',
            'background-position' : '50% 50%'
        });
    }).remove();​

JS Fiddle demo.

参考资料：

• css()。
• each()。
• height()。
• remove()。
• width()。

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 或其他。