Автоматическая смена изображения шапки сайта (header)

Шапка сайта зачастую маленького размера и смена её напоминает обычный слайдер. Зачем делать динамическую шапку? Как минимум это красиво — это поможет добавить вашему сайту индивидуальности.

Сегодня рассмотрим не просто автоматическую смену изображения шапки сайта на Вордпресс, а смену её в зависимости от времени года. То есть — зимой одна шапка, а осенью — другая и так далее в зависимости от месяца. Звучит заманчиво — не так ли?

Автоматическая замена картинки header_а вашего сайта

Звучит это всё не очень просто, но организовывается это довольно легко.

Алгоритм действий такой: сначала для шапки сайта приписываем новый класс “month”. Далее, поле этого класса через функцию date() организовываем вывод текущего месяца. То есть получаем диапазон: month-01 — month-12. Потом открываем таблицу стилей и в ней пишем для каждого сезона ссылку на фоновую картинку — ссылку на изображение шапки сайта.

Усложняя этот метод, можно сделать вывод картинок к праздникам или знаменательным датам.

От слов к делу

Открываем файл шапки вашего сайта ( header.php) и прописываем туда следующее:

<div id="masthead" class="month-<?php echo date('m'); ?>"></div>

Затем открываем таблицу стилей (style.css) и прописываем там следующий код:

#masthead {
 width:300px;
 height:100px;
 }
 /* Зима */
 .month-12, .month-01, .month-02 {
 background:url /images/winter.jpg ;
 }
 /* Весна */
 .month-03, .month-04, .month-05 {
 background:url /images/spring.jpg ;
 }
 /* Лето*/
 .month-06, .month-07, .month-08 {
 background:url /images/summer.jpg ;
 }
 /* Осень*/
 .month-09, .month-10, .month-11 {
 background:url /images/autumn.jpg ;
 }

Ссылки на изображения заменяем на свои ссылки, всё сохраняем и любуемся…. через месяц или два….