Как динамически изменить с помощью jquery фон div на сайте, сделанном в WordPress?

Question

У меня есть сайт в WordPressКаждая страница сайта имеет динамический заголовок, в котором фон div меняется каждые шесть секунд с эффектом затухания

Код, который я создал, отлично работает на домашней странице, но на других страницах есть ошибки.

Я получаю URL-адрес веб-сайта, чтобы объединить две строки: URL-адрес веб-сайта и имя изображения.Так что с помощью jquery меняйте фоновое изображение каждые шесть секунд.

Проблема в том, что по внутренним страницам URL берется весь путь.Пример:

На домашней странице URL работает отлично, дает мне такой результат: "localhost / sitepage" + "wp-content / uploads / 2019/05 / slider_1.1.png" = "localhost / sitepage /wp-content / uploads / 2019/05 / slider_1.1.png "

На остальных страницах я получаю следующий результат:" localhost / sitepage / about / localhost / sitepage / wp-content / uploads/2019/05/slider_1.1.png"

Будучи «localhost / sitepage / about /», текущая страница согласуется с результатом, я хочу localhost / sitepage / wp-content / uploads / 2019/05 /slider_1.1.png

это мой код:

var pageURL = jQuery(location).attr("href");

var img = pageURL+"wp-content/uploads/2019/05/slider_1.1.png";
var img2 = pageURL+"wp-content/uploads/2019/05/slider_1.1.png"; 

var interval = setInterval(function() { 

if(img == img2){


img=pageURL+"wp-content/uploads/2019/05/slider_1.png";

}else{

img=pageURL+"wp-content/uploads/2019/05/slider_1.1.png";

}

console.log(img);
jQuery('#headerhome').fadeTo('slow', 0.3, function()
{
   jQuery(this).css('background-image', 'url(' + img + ')');
}).delay(2500).fadeTo('slow', 1);   

Когда функция console.log печатает значение внутри переменной img, показывает URL-адрес идеально, как я хочу:

localhost / sitepage / wp-content / uploads / 2019/05 / slider_1.1.png

Но в консоли браузера появляется следующая ошибка

ошибка 404 get localhost / sitepage / about /localhost / sitepage / wp-content / uploads / 2019/05 / slider_1.1.png

Что я могу сделать?

Answer 1

В настоящее время ваш pageURL показывает весь URL, который будет содержать постоянную ссылку about. Поскольку файлы изображений Wordpress находятся вне папки «wp-content» домена, вам нужно статическое доменное имя без постоянной ссылки (например, «about»).

Я предполагаю, что вы хотите, чтобы pageURL показывал «localhost / sitepage» при тестировании на localhost и «www.example.com» на производственном сайте.

Если так, попробуйте это?

var url = window.location.href; 
var hostname = (new URL(url)).hostname; //returns either 'localhost' or 'www.example.com';
var pageURL = (hostname === 'localhost')? 'localhost/sitepage':'www.example.com';

...

Answer 2

Измените свой pageURL на следующее:

var pageURL = jQuery(location).attr("href");

на

var pageURL = document.location.href;