Динамичные шаблоны сайтов всё активнее входят в моду веб-дизайна. Если дизайн вашего проекта никогда сам собою не меняется, то его можно значительно оживить – сделать шапку сайта, картинки которой будут сами автоматически изменяться в зависимости от времени года.
Такой необычный приём используется пока ещё мало где, так что у вас есть возможность стать одним из первых в своей области. Создание такого динамичного элемента – это не только украшение. Шапка сайта, картинки которой будут изменяться, сделает оформление более запоминающимся, привлекательным. Хоть поисковик и никак прямо не отреагирует на это, посетителям будет нравиться, и это улучшит поведенческие факторы. И тогда поисковики учтут их.
Итак, чтобы сделать шапку сайта с картинками, которые будут меняться от времени года, необходимо влезть в код шаблона. Не пугайтесь, а просто сделайте резервную копию сайта перед редактированием.
Шапка сайта с сезонными картинками
Итак, сначала в шаблоне сайта находим файл header.php, открываем его и создаём область для шапки сайта с картинкой с помощью следующего кода:
<div id=”season” class=”month-<?php echo date(‘m’); ?>”></div>
- season – это идентификатора области шапки сайта, можно написать что-то другое, своё.
- всё, что написано после «class» – это подключение специального класса CSS, который и будет переключать картинки в шапке сайта. Этот стилевой класс мы сейчас и создадим.
Открываем файл style.css и пишем следующий код:
.month-03, .month-04, .month-05 {
background:url/адрес весенней картинки шапки сайта;
}
.month-06, .month-07, .month-08 {
background:url/адрес летней картинки шапки сайта;
}
.month-09, .month-10, .month-11 {
background:url/адрес осенней картинки шапки сайта;
}
.month-12, .month-01, .month-02 {
background:url/адрес зимней картинки шапки сайта;
}
Как видно, стиль month разделился на четыре части по временам кода. В каждой части по три месяца, а также присутствует строка для ввода адреса изображения. Всё, что нужно сделать – это написать адреса сезонных картинок шапки сайта.
Желательно, чтобы картинки шапки сайта находились на том же сервере, что и весь проект, а не на стороннем ресурсе. При выборе этих изображений следует учесть возможности шаблона – подобрать нужно такой размер, чтобы всё легло ровно и красиво.
При необходимости картинки шапки сайта могут изменяться не по сезонам, а по любым другим месяцам. Например, если у вас интернет-магазин, и только в июле и декабре бывают скидки, то можно сделать так, чтобы в шапке сайта менялась картинка именно в эти месяцы. Нужен будет такой стиль:
.month-07, .month-12 {
background:url/адрес картинки со скидкой;
}
Применений этому приёму найти можно сколько угодно.