Ваш код должен работать, но есть несколько вещей, которые могут быть неправильными. Чтобы упростить отладку, вы можете изменить код следующим образом. И обратите внимание на то, что консоль выходит из системы.
<script>
var images = [ 'shelbysquare1.png', 'test1.png', 'test2.png', 'lake.jpg', 'fields.png' ],
randomImage = images[ Math.floor( Math.random() * images.length ) ],
themePath = '<?php echo get_template_directory_uri(); ?>',
fullPath = themePath + '/images/banners/' + randomImage;
var $img = $('<img/>', {
src: fullPath
});
$img.appendTo('#banner');
console.log($img);
</script>
С помощью error.logging (или используя точки останова в инструментах разработчика вашего браузера) вы можете проверить значение любой объявленной вами переменной.
В приведенном выше сценарии я выхожу из DOM-объекта, который мы только что создали. Если вы используете Chrome, ожидаемый вывод в вашей консоли должен выглядеть следующим образом:
a.fn.init [img, selector: "<img/>", context: {…}]
0: img
context: {src: "http://hostname.domain/wp-
content/themes/themename/images/banners/test2.png"}
length: 1
selector: "<img/>"
__proto__: Object(0)
Убедитесь, что значение src правильно указывает на папку вашей темы. Как упомянуто TobiasM в комментариях, get_template_directory_uri () возвращает родительскую тему.
Если значение верное, но вы не видите изображения. Убедитесь, что при запуске скрипта доступен div с идентификатором #banner.
Например, если вы запустите свой скрипт в head-теге, он запустится до того, как div окажется в DOM, поэтому при запуске .appendTo () цель не будет найдена.
Чтобы решить эту проблему, запустите Javascript после добавления DOM (непосредственно перед закрытием тега BODY) или добавьте следующий обратный вызов, который будет выполняться после загрузки всего содержимого DOM.
$(document).on('ready', function() {
// code here
});