Относительные ссылки на изображения в Wordpress темы

Question

Я понимаю, что CSS извлекает изображения по отношению к своему собственному местоположению, но как я могу сделать это одинаково для темы Wordpress?

Сценарий: У меня есть окно поиска справа от моего заголовка. Окно поиска пришло с темой Twentyeleven Wordpress и имеет следующий CSS:

background: url(images/Search-Button.jpg) no-repeat; 

Это делает из фонового изображения находится в папке изображений в папке тем. он нашел изображение здесь:

C:\wamp\www\wordpress\wp-content\themes\twentyeleven\images\Search-Button.jpg 

Теперь я хотел бы добавить логотип где-то рядом с ним, поэтому я добавил это к header.php Тематической в:

<div id="Title_logo"> 
    <img src="images/Logo.png" /> 
</div> 

но это не делает изображение успешно, потому что оно не ищет изображение по адресу "...\wp-content\themes\twentyeleven\images\Logo.png" (тот же каталог, что и Search-Button.jpg).

вместо результат изображения ЦСИ был: C: \ WAMP \ WWW \ Images \ Logo.png

и сообщил, что изображение не было найдено.

Как работает фоновое изображение?

или может кто-нибудь хотя бы показать мне правильный путь и объяснить, почему это не работает?

Я бы хотел, чтобы он работал даже при переименовании папки темы.

Answer 1

Вам нужно сделать это следующим образом:

<div id="Title_logo"> 
    <img src="<?php echo get_template_directory_uri(); ?>/images/Logo.png" /> 
</div> 

Тогда он также будет работать, если вы установите тему на другом сервере. См: http://codex.wordpress.org/Function_Reference/get_template_directory_uri#bodyContent

так, как вы это делали в вас, например (SRC = «Images/logo.png») указывает браузер на корневую папку, потому что весь Wordpress CMS построен из index.php в вашей корневой папке.

Значит, вы должны сообщить своему браузеру (через php), что изображение находится в каталоге изображений в каталоге темы.

Файл css также загружен таким образом, но называет его рефералы связанными файлами с того места, где он существует. (тема-каталог). Таким образом, в CSS вы можете обратиться к файлам, как вы обычно должны, но от тематических докторантов (PHP) вы должны использовать специальные функции Wordpress в вашем пути, следовательно, функция: get_template_directory_uri();

get_template_directory_uri documentation

Answer 2

background-image работал, потому что он находится в файле таблицы стилей. Поэтому для поиска изображения потребовалось основание папки шаблона.

Но когда вы использовали <img src="images/Logo.png" />, он смотрел на базу сайта.Veelen объяснил, что вам нужно будет использовать get_template_directory_uri(), чтобы получить путь к папке динамической текущей темы.

Answer 3

Вот как я управляю им.

Изображение находится здесь

\themes\twentyeleven\images\Search-Button.jpg 

В вашем дочерние темы CSS в целом, его расположенный так

\themes\mytheme\style.css 

Тогда фоновое изображение станет

background: url(../twentyeleven/images/Search-Button.jpg) no-repeat; 

Answer 4

Это так легко:

Просто замените:

<div id="Title_logo"> 
    <img src="images/Logo.png" /> 
</div> 

С:

<div id="Title_logo"> 
    <img src="<?php echo get_theme_file_uri('images/Logo.png'); ?>" /> 
</div> 

Примечание: echo get_theme_file_uri('path to your assets ');