将PostQuery中的特色图像显示为背景图像

时间：2016-04-28 作者：Paubab

下面的代码获取图像，但我希望它是背景图像。我认为我需要先将图像保存为变量，然后以某种方式将其回显出来。我的PHP不是很好，所以请给出一个使用代码的示例。没有深奥的答案，谢谢。

<div class="main-slider" class="flexslider">
    <ul class="slides">
      <?php 
        // Get all posts in \'slider\' category
        $post_categories = wp_get_post_categories( $post_id );
        $args = array( 
            \'post_type\' => array( \'Interaction\', \'Print\', \'Motion\', \'Image\', \'Sound\' ),
            \'numberposts\' => 6,
            \'category_name\' => \'slider\'
        );
        $postQuery = get_posts( $args );

        foreach( $postQuery as $post ) :
            setup_postdata($post);
            if ( has_post_thumbnail() ) { ?>
                <li class="frontSlider"><?php the_post_thumbnail(\'feature-slider\'); ?>
                    <a href="<?php echo get_permalink(); ?>" title="Go to <?php echo the_title(); ?>" rel="bookmark">
                        <div class="flex-captionWrap">
                            <p class="flex-caption"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p><!-- Retrieves text string from Captions field in Media -->
                        </div>
                    </a>
                </li>
              <?php 
            }
        endforeach; ?>
    </ul><!-- .flexslider -->
</div><!-- .flexslider -->

2 个回复
最合适的回答,由SO网友:mread1208 整理而成

如果您是正确的，您将需要获取图像URL并将其设置为变量，以便您可以在HTML中以内联样式对其进行回显。我已经更新了下面的foreach循环，并将图像设置为<li> 要素：

foreach( $postQuery as $post ) : setup_postdata($post);
    if ( has_post_thumbnail() ) { ?>
        /* Get the post thumbnail source so we can get the exact URL of the image.  This returns an array of stuff for us */
        $thumbImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'feature-slider\' );
        /* Since we want the URL, let\'s get the first value from our new array and set it as $thumbImgUrl */
        $thumbImgUrl = $thumbImg[\'0\']; ?>
        <li class="frontSlider" style="background-image: url(\'<?php echo $thumbImgUrl; ?>\');">
            <a href="<?php echo get_permalink(); ?>" title="Go to <?php echo the_title(); ?>" rel="bookmark">
                <div class="flex-captionWrap">
                    <p class="flex-caption"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p><!-- Retrieves text string from Captions field in Media -->
                </div>
            </a>
        </li>
    <?php 
    }
endforeach; ?>
希望有帮助！我在发布之前没有测试过这个，但我已经做过几次了，所以应该可以正常工作。

SO网友:Howdy_McGee

你需要做几件事来获取URL——你可以把它们组合成一个长句，但我会把它分解。

WordPress将缩略图ID存储在Posteta表中，如下所示_thumbnail_id 所以我们需要使用get_post_meta():

$thumb_id = get_post_meta( $post->ID, \'_thumbnail_id\', true );
现在我们有了ID，我们需要获取URL。由于我们需要实际的文件URLcannot 使用get_permalink() 因为这将返回一个附件页，所以我们需要使用wp_get_attachment_image_src() 它返回一个值数组。

$img_arr = wp_get_attachment_image_src( $thumb_id, \'feature-slider\' );
看看法典我们知道索引0 保存实际的图像URL，因此我们可以将其放在列表项中：

<li class="frontSlider" style="background-image: url( \'<?php echo $img_arr[0]; ?>\' );">
然后在我们的CSS中，我们可以应用我们需要的任何其他样式。

标签： query   post-thumbnails   小码农  

相关推荐

将wp_Query替换为wp_User_Query

我在插件中制作了一些订阅者档案和单曲（个人资料页），其中我还包括了一个“用户单曲”模板，通过template_include. 不过，我正在尝试从插件中删除一些模板，以使其使用主题模板。我用了locate_template( \'single.php\' ) 从活动主题中选择单个模板。我没有使用全局wp_query 在本例中显示我的内容，但页面显示了基于查询默认值的循环（十篇帖子）。我想知道的是，我是否可以完全放弃默认查询，用wp_user_query 我可以将查询到的用户ID输入其中。然后我想筛选the