Question

我试图让我的wordpress网站每次刷新页面时在主页上加载不同的背景图像。

我想在我的functions.php文件中添加一个函数，或者在我的home.php文件中添加一个脚本。

我正在使用以下css加载主页背景图片

body.home {
    background-image: url("images/home-bg/website-background1.jpg");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    height: 100%;
    width: 100%;
}

我希望网站随机加载的其他图片位于images / home-bg目录中。

谢谢，威廉

Answer 1

add_filter('body_class','random_background_images');
function random_background_images($classes) {

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

    $classes[] = $background_class;

    return $classes;
}

将上面的代码添加到wordpress主题functions.php文件中。

它会将background_1的随机正文类添加到background_10

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

    body.background_1 {
       background-image: url("images/home-bg/website-background1.jpg");
    }
    body.background_2 {
       background-image: url("images/home-bg/website-background2.jpg");
    }
    body.background_3 {
       background-image: url("images/home-bg/website-background3.jpg");
    }

就像这样。希望这能解决你的问题。

Answer 2

您必须获取目录中的所有文件，因此请务必排除。和..他们将由readdir返回。

while (false !== ($filename = readdir("images/home-bg"))) {
    if ($filename != '.' && $filename != '..')    
        $files[] = $filename;
}

然后从files数组中得到一个这样的随机密钥（有可能你连续得到同样的东西）

$rand_keys = array_rand($files, 1);

然后使用您的密钥，您可以从files数组中获取值。

$files[$rand_keys[0]]

当你把它们放在一起时你会得到这个

function getRandomImage(){

    while (false !== ($filename = readdir("images/home-bg"))) {
        if ($filename != '.' && $filename != '..')    
            $files[] = $filename;
    }

    $rand_keys = array_rand($files, 1);

    return $files[$rand_keys[0]]
}

现在您要设置由您决定的实际背景图像。您必须将echo 'background-image: url("images/home-bg/'.getRandomImage().'")';放在某处。

如何设置家庭体类背景图像以从预定目录加载随机图像

2 个答案: