在 Wordpress 中创建随机背景颜色

Question

我已经检查了我能找到的所有相关问题，但仍然无法解决这个问题，所以我想联系你们这些可爱的人！

我希望我的网站在每次有人访问时都有一个随机颜色背景（多种预选颜色之一）。

人们多次要求它调用随机图像，但我只是希望有一个块颜色，假设使用粗体背景。

我见过以类似方式使用但无济于事的两个选项是：

jQuery（link：取自 Tumblr 查询）：

1) 在 /js/ 中创建一个新的 'background.js' 文件，代码如下：

    <script>
    var bgcolorlist=new Array("background: #ff871b", "background: #15efa1", "background: #51ddff", "background: #ff1b6c", "background: #000000");
    var color = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
    $('body').css('backgroundColor', color);
</script>

2) 添加到function.php：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

& PHP 和 CSS (link)：

我将整个字符串放在 style.css 文件中：

<?php
$input = array("#000080", "#00CED1", "#191970");
$rand_keys = array_rand($input, 2);
echo $input[$rand_keys[0]] . "\n";
echo $input[$rand_keys[1]] . "\n";
?>
body {
background: <?php echo  $color; ?>;
}

不幸的是，这些解决方案似乎都不适合我，而且两个线程都已过时，因此无法获得进一步的答案，因此开始了一个新线程。

1. 对于我可能会出错的地方有什么想法吗？
2. 您认为还有什么其他方法可以更好地解决问题？

更多信息：我正在使用超级简单的Less theme，它只附带 3 个文件：functions.php、index.php 和 style.css - 我将其用作基本主题来完全自定义我的自己的主题。

非常感谢！

Answer 1

你的 JavaScript 实现的问题是你的数组索引中有整个 CSS 声明。此外，由于您将脚本包含在头部，您需要将代码包装在 document.ready 处理程序中，并注意 noConflict mode WordPress puts jQuery in。

试试这样的：

jQuery(function($) {
    var bgcolorlist=["#ff871b", "#15efa1", "#51ddff", "#ff1b6c", "#000000"];
    var color = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
    $('body').css('backgroundColor', color);
});

您的 PHP 在 CSS 文件中不起作用的原因是 .css 文件通常不能运行 PHP 代码。您需要将其放在单独的 .php 文件中并将其加入队列，或者将代码与 header.php 或操作一起放入 head。

<style>
<?php
$input = array("#000080", "#00CED1", "#191970");
$rand_key = array_rand($input);
$color = $input[$rand_key];
?>
body {
    background: <?php echo $color; ?>;
}
?>
</style>

Answer 2

您不能将 PHP 放在 CSS 文件中，因此如果您想使用 PHP 方法，您需要在标题中回显一个本地 CSS 块。

例如，在您的 functions.php 文件中：

function getBgColor() {
    $input = array("#000080", "#00CED1", "#191970");
    return $input[rand(0, count($input) - 1)];
}

然后在你的 header.php 中：

<style>
    body {
        background: <?php echo getBgColor(); ?>;
    }
</style>