Question

每次重新加载首页时，我都有以下php和CSS代码在首页上生成随机背景图片。

我现在也想为每个图像添加一个特定的URL，所以它们每个都链接到不同的页面。有谁知道我将如何更改此代码？

谢谢

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

Answer 1

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字段。

修正了一些引号，经过测试，对我有效；）

Answer 2

据我所知，您无法将背景图片转换为链接。一种可能的解决方案是包括一些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的更多内容。

Answer 3

将链接存储在数组中。

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

Answer 4

您可以使用一些JavaScript来实现。尝试在<script>标签中向HTML添加以下代码：

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  // The maximum is exclusive and the minimum is inclusive
  return Math.floor(Math.random() * (max - min)) + min;
}

document.querySelector('body').className += ' background_' + parseInt(getRandomArbitrary(1, 12)) + ' ';

此处假设CSS已指定了所有背景图片规则，这些规则已包含在您的问题中。

将随机网址链接添加到随机背景图片

4 个答案: