有没有办法注册像标题图像这样的自定义背景图像？

时间：2018-08-16 作者：Bheemsen

我想知道是否有一种快速的方法可以像注册自定义标题一样简单地注册自定义背景图像。

$header_images = array(
  \'ferrari\' => array(
    \'url\'           => get_template_directory_uri() . \'/img/ferrari.jpg\',
    \'thumbnail_url\' => get_template_directory_uri() . \'/img/ferrari.jpg\',
    \'description\'   => \'Ferrari\',
  ),
  \'harley-davidson\' => array(
    \'url\'           => get_template_directory_uri() . \'/img/harley-davidson.jpg\',
    \'thumbnail_url\' => get_template_directory_uri() . \'/img/harley-davidson.jpg\',
    \'description\'   => \'Harley Davidson\',
  ),
);
register_default_headers( $header_images );
谷歌给我带来的只有this, 无法从中获得任何有意义的东西。有人这样做吗？有什么想法？

2 个回复
SO网友:PROGOSTECH

我们可以使用类似于注册默认标题的过程向WordPress中的主题添加自定义背景图像支持。这是你的捷径！

$defaults = array(
    \'default-color\'          => \'\',
    \'default-image\'          => \'%1$s/images/background.jpg\',
    \'default-repeat\'         => \'repeat\',
    \'default-position-x\'     => \'left\',
        \'default-position-y\'     => \'top\',
        \'default-size\'           => \'auto\',
    \'default-attachment\'     => \'scroll\',
    \'wp-head-callback\'       => \'_custom_background_cb\',
    \'admin-head-callback\'    => \'\',
    \'admin-preview-callback\' => \'\'
);
add_theme_support( \'custom-background\', $defaults );
还有两种方法可以实现它：

1-我们可以通过玩一些把戏和加载预设图像来实现这一点。

添加过滤器（\'body\\u class\'，\'random\\u background\\u images\'）；函数random\\u background\\u image（$类）{

// Generate Random number from 1 to 10.  
$background_class = \'background_\' . rand(1,10);

$classes[] = $background_class;

return $classes;
}

将上述代码添加到wordpress主题函数中。php文件。它将从background\\u 1到background\\u 10添加一个随机的body类

现在，您可以根据需要为它们添加css。

身体background\\u 1{背景图片：url（“images/home-bg/website-background1.jpg”）；}身体background\\u 2{背景图片：url（“images/home-bg/website-background2.jpg”）；}身体background\\u 3{背景图片：url（“images/home-bg/website-background3.jpg”）；}

2-jQuery示例：

变量图像=[”http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54b3a45de4b0d7856db8059e/1421059173445/“，”http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54c5f3c8e4b0d7a7fa84acc2/1422274046633/“，”http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54a78e9ae4b00f7c5fb39c4a/1421997719378/“]；

 var imgCount = images.length;

 var randNumber=Math.floor((Math.random() * imgCount) + 1);

 imgURL = "url(\'" + images[randNumber-1] + "\')";

 var body=document.getElementById(\'collection-542ba4a1e4b032a0dde82b31\');
 body.style.backgroundImage=imgURL;
 body.style.backgroundSize="100% auto";
 body.style.backgroundRepeat="no-repeat";
}（））；

如果您需要任何进一步的帮助，请告诉我们！快乐编码

SO网友:Techy solutions

这是它的代码！如Progostech所述

$defaults = array(
    \'default-color\'          => \'\',
    \'default-image\'          => \'\',
    \'default-repeat\'         => \'repeat\',
    \'default-position-x\'     => \'left\',
        \'default-position-y\'     => \'top\',
        \'default-size\'           => \'auto\',
    \'default-attachment\'     => \'scroll\',
    \'wp-head-callback\'       => \'_custom_background_cb\',
    \'admin-head-callback\'    => \'\',
    \'admin-preview-callback\' => \'\'
);
add_theme_support( \'custom-background\', $defaults );

结束
标签： theme-development   theme-customizer   custom-background   小码农  

相关推荐