Как указать путь к изображению в редакторе страниц WordPress?
У меня есть файл изображения, хранящийся в директории темы под названием site.
На моей главной странице, используя редактор страниц WordPress, я добавил следующий код, но изображение не отображается, похоже, указан неверный путь.
<img src="site/images/footLogo.png" style="padding: 0px!important; color:white">
Подскажите, в чем проблема?

Абсолютные URL-адреса
Как уже сказали другие, вам нужно использовать полный URL для атрибута src
вашего изображения, иначе браузер не сможет его найти.
WordPress предоставляет функцию get_template_directory_uri()
, которая возвращает полный URL к пути вашей темы.
Таким образом, выполнив:
<?php
$img_src = get_template_directory_uri() . '/site/images/footLogo.png';
?>
<img src="<?php echo $img_src ?>" style="padding: 0px!important; color:white">
ваше изображение будет отображаться, при условии, что путь указан верно и файл существует.
Вспомогательная функция
Если у вас несколько изображений и вы хотите упростить процесс их вывода в шаблонах, можно создать пользовательскую функцию, оборачивающую get_template_directory_uri()
.
Например:
function theme_image( $image ) {
return get_template_directory_uri() . '/site/images/' . $image;
}
а затем в шаблонах использовать:
<img src="<?php echo theme_image('footLogo.png') ?>"
style="padding: 0px!important; color:white">
WordPress 4.7+ и "резервная родительская тема"
Если вы используете код WP 4.7+, у вас будет доступ к новой функции get_theme_file_uri()
.
Преимущество этой функции перед get_template_directory_uri()
заключается в том, что она автоматически загружает файл из дочерней темы, если он там доступен.
Так, например, если изменить функцию theme_image()
на:
function theme_image( $image ) {
return get_theme_file_uri( '/site/images/' . $image );
}
при вызове theme_image('footLogo.png')
изображение 'footLogo.png'
будет загружено из дочерней темы, если она используется и файл существует, в противном случае — из родительской темы.
Эта новая возможность предоставляет "резервную родительскую тему", которая работает аналогично механизму "fallback" шаблонов от родительской к дочерним темам, существующему с версии WP 3.0 через функции типа get_template_part()
.

Вы можете определить константу в файле функций темы следующим образом:
if( !defined(THEME_IMG_PATH)){
define( 'THEME_IMG_PATH', get_stylesheet_directory_uri() . '/site/images' );
}
Затем вы можете использовать тег img следующим образом:
<img src="<?php echo THEME_IMG_PATH; ?>/footLogo.png" style="padding: 0px!important; color:white">
