在WordPress中将特色图像设置为背景图像

时间:2014-04-30 12:48:25

标签: css wordpress

我一直在尝试将精选图片设置为我博客上的背景图片。这是我正在开发的单一圆柱定制WordPress主题。

我的想法类似于medium.com和blog.pickcrew.com

你能帮助我帮助我吗?

非常感谢!

2 个答案:

答案 0 :(得分:3)

您可以尝试以下代码段。

将其保存到文件/wp-content/plugins/featured-image-background/featured-image-background.php并激活它:

<?php
/**
 * Plugin Name:        Featured Image Background 
 * Description:        Featured image as background for single posts
 * Plugin URI:         http://stackoverflow.com/q/23388561/2078474   
 */

function so_23388561_wp_head()
{
    if ( is_single() )
    {
        if ( has_post_thumbnail( get_the_ID() ) )
        {
            $image = array_shift( 
                        wp_get_attachment_image_src( 
                            get_post_thumbnail_id( get_the_ID() ),
                            'full' 
                        ) 
                    );
            printf( '<style>
                        body { 
                            background-image: url("%s") !important;
                            background-size: cover;
                        }
                     </style>', 
                     $image 
            );
        }
    }
}

add_action( 'wp_head', 'so_23388561_wp_head' );

你可能想要使用另一个CSS选择器而不是body,也许是div#background

一般情况下,我使用get_queried_object_id()来获取循环外的帖子ID,但get_the_ID()应该适用于这种情况。

我们正在使用wp_head挂钩,因此请确保您的主题具有wp_head()功能。

希望您可以根据自己的需要进行修改。

答案 1 :(得分:1)

您可以尝试以下代码

  <?php  $body_background = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
    <body style="background-image: url(<?php echo $body_background['0'];?>)">
    ....
    </body>