Question

我试图让我的主页在每次加载网站时显示随机横幅。

我在functions.php文件中使用了以下代码-

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;
}

，然后在我的custom.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");
}

它似乎有效，但是将图像作为背景图像而不是横幅。谁能帮我更改此代码，以便将其应用于横幅部分？

（当前横幅是从前端设置的，并在“首页”页面设置中上传了图片。

网站是-https://flowersforeveryone.feedmybeta.com/

谢谢！：）

Answer 1

因此，这取决于横幅的html。假设横幅的类别为.page-banner，则可以这样稍微更改CSS：

body.background_1 .page-banner {
   background-image: url("images/home-bg/website-background1.jpg");
}

body.background_2 .page-banner {
   background-image: url("images/home-bg/website-background2.jpg");
}

body.background_3 .page-banner {
   background-image: url("images/home-bg/website-background3.jpg");
}

在CSS中，空格后面的选择器是前一个选择器的子代。

WordPress-随机页面横幅图像

1 个答案: