使用Headance将特色图像作为div中的背景

时间：2015-12-28 作者：Mathieu Bourret

我正在使用Headway主题（生成器），并且我已经为产品创建了静态页面。在页面的顶部是一个包装，我想使用特色图像作为背景。

我读到的所有东西都是我需要使用的

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'full\' );
在我的css中，将以下内容应用于该包装：

background-image: url(\'<?php echo $thumb[\'0\'];?>\')
我想问题是我没有在好的地方应用php。我已经在函数中插入了它。php，它应该在哪里？我读到它应该在循环中，但找不到像这样的东西。。。

1 个回复
SO网友:jgraup

下面是循环内的示例。也许你的看起来有点不同，但本质上你找到了have->posts() 您将看到一个循环。在这个块中，我刚刚创建了一个div，并将样式设置为使用特征图像作为背景。

// WP_Query arguments
$args = array (
    \'numberposts\' => -1
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();

        // get the featured image

        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), \'full\' );

        if( empty( $thumb ) ) continue;

        $thumb_src = $thumb[0];
        $thumb_width = $thumb[1];
        $thumb_height = $thumb[2];

        // apply the background image as a style on a div

        echo "<div style=\\"width: {$thumb_width}px; height:{$thumb_height}px; background-image: url(\'{$thumb_src}\');\\" ></div>";
    }
} else {
    // no posts found
}

// Restore original Post Data
wp_reset_postdata();

标签： post-thumbnails   custom-background   小码农  

相关推荐