Продолжаем украшать сайты на Новый Год! Давайте разместим снеговика и сугроб в самом низу сайта на wordpress.

Скачать исходники для статьи можно ниже

Нам понадобятся следующие картинки:

Снеговик – скачать.

Сугроб – скачать.

Открываем файл footer.php (для этого входим в админку, выбираем пункт “Внешний вид”, подпункт “Редактор темы”, справа в списке шаблонов ищем и выбираем файл footer.php и спускаемся в его коде в самый низ) вашего шаблона, и прямо перед закрывающим тегом:

 </body>

вставляем следующий код:

<span class="snowman"></span>
<span class="snow-layer"></span>

Осталось добавить стили оформления в ваш файл style.css.
Для добавления css кода рекомендую установить бесплатный плагин (устанавливаем через админку wordpress: пункт “Плагины”, подпункт “Добавить новый”, в строку поиска вводим название плагина) – Simple Custom CSS, сведения о плагине:
Количество активных установок:
Автор плагина:
Сайт плагина:

После установки и активации плагина переходим в пункт “Внешний вид”, подпункт “Пользовательский CSS” и вводим следующий код:

.snowman {
background: transparent url('/wp-content/uploads/2020/12/snowman.png') no-repeat scroll right top / 80px auto;
    bottom: 0;
    display: block;
    height: 110px;
    position: fixed;
    right: 2%;
    width: 100px;
    z-index: 3;
}
.snow-layer {
background: transparent url("/wp-content/uploads/2020/12/snow-layer.png") repeat-x scroll center top / auto 20px;
    bottom: 0;
    display: block;
    height: 20px;
    position: fixed;
    width: 100%;
    z-index: 1;
}

При помощи параметра @media screen and можно задать следующее условие: если разрешение экрана меньше 1024px по ширине – не показывать эти украшения. Чтобы на мобилах не мешало смотреть. Можете задать свою цифру вместо 1024.

Тогда в CSS-код нужно добавить следующий код:

@media screen and (max-width: 1024px){
 .snowman, .snow-layer {display: none;}
}

Всё готово!