amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ p.acss346a5{padding-left:30px;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Шапка сайта – картинки, которые меняются в зависимости от времени года

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

Такой необычный приём используется пока ещё мало где, так что у вас есть возможность стать одним из первых в своей области. Создание такого динамичного элемента – это не только украшение. Шапка сайта, картинки которой будут изменяться, сделает оформление более запоминающимся, привлекательным. Хоть поисковик и никак прямо не отреагирует на это, посетителям будет нравиться, и это улучшит поведенческие факторы. И тогда поисковики учтут их.

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

Шапка сайта с сезонными картинками

Итак, сначала в шаблоне сайта находим файл 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/адрес картинки со скидкой;

}

Применений этому приёму найти можно сколько угодно.

Адель Гадельшин

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

10 месяцев ago

Как сделать запуск инфопродукта

Инфопродукт - это любой продукт, который содержит информацию, полезную для потенциальных клиентов. Это может быть…

11 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

11 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

11 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

11 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

12 месяцев ago