Добавить случайную ссылку URL на случайные фоновые изображения

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

Храните ваши ссылки в массиве.

$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 3

Вы можете сделать это с помощью некоторого JavaScript. Попробуйте добавить следующий код в свой HTML-код в теге <script>:

// 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 указаны все правила фонового изображения, которые вы включили в свой вопрос.

Answer 4

Насколько я знаю, вы не можете превратить фоновое изображение в ссылку.Одним из возможных решений было бы включить некоторые JavaScript и jQuery.Приведенный ниже код будет перехватывать все клики, сделанные на странице, и проверять, был ли клик на странице body или нет.

$('body').click(function(evt){ 
    if(evt.target === document.body){
        window.location.href="http://www.example.com";
    }
})

Другое решение - добавить фоновое изображение к какому-либо другому элементу, который может действовать какссылка. Добавить ссылку URL в фоновом изображении CSS? .Подробнее об этом Wordpress форум .