Индивидуальные изображения на каждой странице в шапке сайта WordPress

Индивидуальные изображения на каждой странице в шапке сайта WordPressИногда появляется необходимость иметь несколько изображений в шапке сайта, таким образом, чтобы они выводились в соответствии с определенной страницей. То есть, на одной странице у вас одна картинка в хедере, при переходе на другую - другая и так далее.

Как обычно, мы разбираем возможность подобной реализации на сайтах WordPress. Самим движком подобных опций не предусмотрено. Существуют некоторые шаблоны, в которых подобный функционал реализован, но у подавляющего количества он отсутствует.

Однако мы рассмотрим универсальный метод, который подойдет для большинства шаблонов, при этом мы не будем использовать дополнительные плагины и вообще с плагинами, в данном контексте, работать не будем.

Для начала необходимо в папке images вашего шаблона создать новую папку, назвать ее вы можете как угодно, мне удобно называть ее headers. Если вы назовете ее иначе, поправьте код, приведенный ниже, в соответствии с наименованием вашей папки.

Для некоторых шаблонов будет достаточно вставить header.php, после селектора <div class="art-Header"> следующий скрипт:

    <img src="<?php bloginfo('template_url'); ?>/images/headers/RISUNOK.jpg" />
<?php } elseif (is_page('265')) { ?>
    <img src="<?php bloginfo('template_url'); ?>/images/headers/RISUNOK1.jpg" />
<?php } elseif (is_page('268')) { ?>
    <img src="<?php bloginfo('template_url'); ?>/images/headers/RISUNOK2.jpg" />
<?php } else { ?>
    <img src="<?php bloginfo('template_url'); ?>/images/headers/RISUNOK3.jpg" />
<?php } ?>

Давайте его немного разберем:

is_page('29') - вместо числа 29, вам необходимо указать ID необходимой страницы, его можно узнать, зайдя в страницу для редактирования. Обратите внимание на ссылку в адресной строке, особенно на ее часть: post=29, где 29 и есть ID страницы.

/images/headers/RISUNOK.jpg - эту часть вам необходимо переименовать в соответствии со своими названиями папок и изображения.

<?php } elseif (is_page('265')) { ?>

<img src="<?php bloginfo('template_url'); ?>/images/headers/RISUNOK1.jpg"  /> - для того, чтобы присвоить индивидуальные изображения нужному количеству страниц, просто копируйте эту часть кода несколько раз, изменяя, соответственно, ID страницы и имя рисунка.

<?php } else { ?>

<img src="<?php bloginfo('template_url'); ?>/images/headers/RISUNOK3.jpg" /> - данная часть отвечает за вывод изображения по умолчанию, на страницах, для которых другая картинка не определена, в том числе и на главной.

Вполне возможно, что после данных манипуляций, изображение в шапке встало не так, как вы того хотели. В этом случае нам поможет метод, который был описан подробно в ЭТОЙ статье.

Если коротко, то нам необходимо создать новый селектор непосредственно перед вашим кодом, по следующему принципу:

<div class="headers"><div>
Ваш код
 </div>

После этого, в самом конце файла style.css, создаем новый класс:

.headers {
 float: right;
 margin-top: 11px;
 margin-right: -50px;
 }

Изменяя параметры данного кода, можно выставить изображения в шапке вашего сайта оптимальным для вас образом. Не забывайте сохранять произведенные изменения. Аналогичным способом эта проблему можно решить для страниц записей, категорий и меток сайта на WordPress.

Если после прочтения у вас остались вопросы, задавайте их в комментариях.

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий

Яндекс.Метрика