Как я могу изменить этот код footer.php, чтобы при перезагрузке вызывалось случайное изображение?

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Изменение JavaScript кода
Шаг 2: Изменение подхода к определению пути к изображению
Объяснение изменений:
Заключение

Вопрос или проблема

Это из файла footer.php темы WordPress, которую я хотел бы изменить. Я хочу, чтобы одно из пяти изображений загружалось при обновлении вместо 1.jpg каждый раз.

<script type="text/javascript">

<?php

if((is_archive()) || (is_author()) || (is_category()) || (is_home()) || (is_single()) || (is_tag()) || ($posttype == 'post')  ) {
        $name = "news-and-information";
}else{
        $name = $wp_query->post->post_name;
}

?>

$(document).ready(function(){

        var imgPath="/wp-content/themes/nexus/img/page-headers/<?php echo $name; ?>/1.jpg";

        $('.subheader-wrapper').css('background-image', ('url("'+imgPath+'")'));

});
</script>

Эта тема не должна использовать псевдоним $, так как WordPress загружает jQuery в “Режиме без конфликта”.
Я могу только предположить, что тема загружает свой собственный jQuery, что довольно плохо.
Тема действительно должна регистрировать и добавлять в очередь скрипт правильно, а не просто добавлять код в нижний колонтитул.

Тем не менее, если все остальные вещи равны и если ваши изображения имеют числовые названия, то измените это:

var imgPath="/wp-content/themes/nexus/img/page-headers/<?php echo $name; ?>/1.jpg";

На это:

var imgPath = <?php echo site_url(); ?>/wp-content/themes/nexus/img/page-headers/<?php echo $name; ?>/<?php echo rand(1,5); ?>.jpg';

И это должно случайно выбирать изображения 1.jpg через 5.jpg.

Простой способ. без узлов вообще.

Где-то в вашем шаблоне есть HTML-тег, вероятно, div, с классом ‘subheader-wrapper’.

Итак, назовите изображения численно, как говорит @s_ha_dum, затем измените ваш HTML с

<div class="subheader-wrapper" ....

на:

<?php
if( ! is_singular() || ($posttype == 'post')  ) {
    $name = "news-and-information";
} else {
    global $wp_query;
    $name = $wp_query->post->post_name;
} 
var img = get_template_directory_uri() . '/img/page-headers/' . $name . rand(1,5) . '.jpg';
?>
<div class="subheader-wrapper" style="background-image:url(<?php echo $imgpath; ?>)" ...

Я использовал get_template_directory_uri() вместо относительного URL, как вы делаете, потому что использование жесткого относительного URL с активированными красивыми постоянными ссылками может привести к тому, что изображение не будет найдено.

Ответ или решение

Конечно! Чтобы добиться смены изображений в коде вашего файла footer.php при каждом обновлении страницы, мы можем внести несколько изменений. Вместо того чтобы загружать фиксированное изображение 1.jpg, описание предполагает возможность выбора одного из пяти изображений по случаю обновления.

Вот как вы можете это сделать:

Шаг 1: Изменение JavaScript кода

Замените строку, которая отвечает за путь к изображению, на код, который будет генерировать случайное число от 1 до 5. Это позволит загружать одно из пяти изображений при каждой перезагрузке страницы.

Исходный код:

var imgPath="/wp-content/themes/nexus/img/page-headers/<?php echo $name; ?>/1.jpg";

Измененный код:

var imgPath = "<?php echo site_url(); ?>/wp-content/themes/nexus/img/page-headers/<?php echo $name; ?>/" + Math.floor(Math.random() * 5 + 1) + ".jpg";

Шаг 2: Изменение подхода к определению пути к изображению

Если вы предпочитаете избежать использования JavaScript и хотите сделать все с помощью PHP, вы можете выполнить все нужные операции с помощью сервера. Это будет значительно проще и надежнее.

Шаги для изменения через PHP:

Убедитесь, что вы получили правильное имя изображения через PHP.
Установите стиль фона прямо в атрибут стиля div.

Вот пример полного кода, который вы можете использовать:

<?php
if ((is_archive()) || (is_author()) || (is_category()) || (is_home()) || (is_single()) || (is_tag()) || ($posttype == 'post')) {
    $name = "news-and-information";
} else {
    global $wp_query;
    $name = $wp_query->post->post_name;
}

$randomImageNumber = rand(1, 5);
$imgPath = get_template_directory_uri() . '/img/page-headers/' . $name . '/' . $randomImageNumber . '.jpg';
?>

<div class="subheader-wrapper" style="background-image: url('<?php echo $imgPath; ?>');">
    <!-- Ваш контент здесь -->
</div>

Объяснение изменений:

Использование rand(1, 5): Это позволяет PHP сгенерировать случайное число в пределах от 1 до 5 для выбора соответствующего изображения.
Использование get_template_directory_uri(): Это гарантирует правильное определение пути к вашему сайту, исключая ошибки, связанные с абсолютными и относительными путями.
Прямое указание изображения в атрибуте стиля: Поскольку стили могут быть указаны в тегах div, это избавляет от необходимости загружать jQuery и применять классы, что улучшает производительность и чистоту кода.

Заключение

Составленный код обеспечивает динамическую загрузку случайного изображения при каждом обновлении страницы, что основывается на PHP – языке серверной стороны. Таким образом, вы избавитесь от возможных проблем, связанных с использованием JavaScript и загружаете изображения более эффективно.