将随机URL链接添加到随机背景图像
将随机URL链接添加到随机背景图像
提问于 2019-06-10 18:40:21
我有下面的php和CSS代码在我的主页上生成一个随机的背景图像，每次主页重新加载。
我想添加一个具体的网址，现在每个图像以及请，所以他们每个链接到一个不同的页面。有人知道我会怎么修改这段代码吗？
谢谢
// random background image
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 11.
$background_class = 'background_' . rand(1,11);
$classes[] = $background_class;
return $classes;
}
/* random image background
*/
body.background_1 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/red_roses.jpg")!important;
}
body.background_2 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/pink_tulips.jpg")!important;
}
body.background_3 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/pink_roses.jpg")!important;
}
body.background_4 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/peach_roses.jpg")!important;
}
body.background_5 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/orange_tulips.jpg")!important;
}
body.background_6 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/orange_lilies.jpg")!important;
}
body.background_7 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/mixed2.jpg")!important;
}
body.background_8 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/mixed.jpg")!important;
}
body.background_9 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/burst_of_sunshine.jpg")!important;
}
body.background_10 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/white_tulips.jpg")!important;
}
body.background_11 .page-banner-image {
background-image: url("/wp-content/uploads/2018/11/red_tulips.jpg")!important;
}回答 4
Stack Overflow用户
发布于 2019-06-10 19:43:32
add_action('wp_head', 'set_random_bg');
function set_random_bg(){
if(is_home()) {
$backgrounds = array('img1.jpg', 'img2.jpg', 'imgN.jpg');
$links = array('link1', 'link2', 'linkN');
$rand_key = array_rand($backgrounds, 1);
echo '<style> .page-banner-image {background-image: url('.$backgrounds[$rand_key].');}</style>';
echo '<script> (function( $ ) { $(function() { $(".page-banner-image").on("click", function(){ window.location.href="'.$links[$rand_key].'";}) });})(jQuery); </script>';
}
}$backgrounds可以从选项、元字段或acf字段中选择。
修复了一些报价，经过测试，在我这一端工作;)
Stack Overflow用户
发布于 2019-06-10 19:00:02
据我所知，你不能把背景图片变成链接。一种可能的解决方案是包含一些JavaScript和jQuery。下面的代码将捕获页面上的所有点击，并检查点击是否在页面body上。
$('body').click(function(evt){
if(evt.target === document.body){
window.location.href="http://www.example.com";
}
})另一种解决方案是将背景图像添加到其他元素中，这些元素可以充当链接。Add URL link in CSS Background Image?。有关这方面的更多信息，请参阅Wordpress forum。
Stack Overflow用户
发布于 2019-06-10 19:17:33
将链接存储在数组中。
$links_array[0] = "/wp-content/uploads/2018/11/red_roses.jpg";
$links_array[1] = "/wp-content/uploads/2018/11/pink_tulips.jpg";
.
.
.编写另一个函数来获取链接
function random_background_images($classes) {
$background_class = 'background_' . rand(1,11);
$classes[] = $background_class;
return $classes;
}
function getLink($background_class)
{
$link = $links_array[substr($background_class,11)];
return $link;
}调用以随机background_image字符串作为参数的函数，例如已经生成的background_1或background_9等。
body.background_1 .page-banner-image {
background-image: url(getLink("background_1"))!important;
}
body.background_2 .page-banner-image {
background-image: url(getLink("background_2"))!important;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56524813
复制相关文章
相似问题
腾讯云开发者
