编辑自定义背景CSS

时间:2016-05-31 作者:J. Doe

我添加了add_theme_support( \'custom-background\'); 功能到我的functions.php 但是css 添加到wp_head 这不是我想要的方式。

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url(\'http://localhost/wordpress/wp-content/uploads/2016/05/bg_green_dark.jpg\'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>
我有一个div 作为背景。

<div id="bg"></div>
我想补充一下custom-backgrounddiv 而不是身体。

有什么办法吗?

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

是的,这是可能的。采取行动look at the codex 您将看到,您可以通过add_theme_support( \'custom-background\'). 其中一个是回调函数,它生成<style> 标签:_custom_background_cb. 您可以将自己的函数作为参数传递给add_theme_support.

这是code of the original function (从WP 4.5中检索,请检查是否稍后阅读):

function _custom_background_cb() {
    // $background is the saved custom image, or the default image.
    $background = set_url_scheme( get_background_image() );

    // $color is the saved custom color.
    // A default has to be specified in style.css. It will not be printed here.
    $color = get_background_color();

    if ( $color === get_theme_support( \'custom-background\', \'default-color\' ) ) {
        $color = false;
    }

    if ( ! $background && ! $color )
        return;

    $style = $color ? "background-color: #$color;" : \'\';

    if ( $background ) {
        $image = " background-image: url(\'$background\');";

        $repeat = get_theme_mod( \'background_repeat\', get_theme_support( \'custom-background\', \'default-repeat\' ) );
        if ( ! in_array( $repeat, array( \'no-repeat\', \'repeat-x\', \'repeat-y\', \'repeat\' ) ) )
            $repeat = \'repeat\';
        $repeat = " background-repeat: $repeat;";

        $position = get_theme_mod( \'background_position_x\', get_theme_support( \'custom-background\', \'default-position-x\' ) );
        if ( ! in_array( $position, array( \'center\', \'right\', \'left\' ) ) )
            $position = \'left\';
        $position = " background-position: top $position;";

        $attachment = get_theme_mod( \'background_attachment\', get_theme_support( \'custom-background\', \'default-attachment\' ) );
        if ( ! in_array( $attachment, array( \'fixed\', \'scroll\' ) ) )
            $attachment = \'scroll\';
        $attachment = " background-attachment: $attachment;";

        $style .= $image . $repeat . $position . $attachment;
    }
?>
<style type="text/css" id="custom-background-css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}
复制此,重命名它wpse228339_callback_function (大约),更改打印css的最后几行,并将其作为回调传递,如下所示:

$defaults = array(
    \'default-color\'          => \'\',
    \'default-image\'          => \'\',
    \'default-repeat\'         => \'\',
    \'default-position-x\'     => \'\',
    \'default-attachment\'     => \'\',
    \'wp-head-callback\'       => \'wpse228339_callback_function\',
    \'admin-head-callback\'    => \'\',
    \'admin-preview-callback\' => \'\'
);
add_theme_support( \'custom-background\', $defaults );