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

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

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

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

Он выводит фоновое изображение, расположенное в папке images внутри папки themes. он нашел изображение здесь: 

C:wampwwwwordpresswp-contentthemestwentyelevenimagesSearch-Button.jpg

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

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

Но он не рендерит изображение успешно, потому что он не ищет изображение в "...wp-contentthemestwentyelevenimagesLogo.png" (тот же каталог, что и кнопка поиска.формат JPG).

Вместо изображения результата src был: C:wampwwwimagesLogo.png

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

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

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

Я бы ... нравится, что это работает, даже когда я переименовываю папку темы.

4 3
html css wordpress wordpress-theming

4 ответа:

Вы должны сделать это вот так; 

<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= " изображения / логотип.png") указывает браузеру на вашу корневую папку, потому что вся cms Wordpress построена из индекса .php в корневой папке.

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

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

Get_template_directory_uri документация

4

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

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

Вот как мне это удается.

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

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

В ваших дочерних темах CSS, как правило, он расположен следующим образом

\themes\mytheme\style.css

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

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

Это так просто:

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

<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 ');

0