Сегодня будем украшать сайт к Новому Году, а именно: вставим скачущего на оленях Санту, который будет проезжать на санях от правого края вашего сайта до левого!
Скачать исходники для статьи можно ниже
1. Загружаем картинку Санты на свой сайт – кликните правой клавишей мыши по картинке ниже и загрузите к себе на сайт:
2. Необходимо добавить блок с изображением Санты внутрь тега body вашего сайта:
<div class="santa"><img src="https://mnogoblog.ru/wp-content/uploads/2015/12/santasled.gif" alt="" /></div>
3. Добавляем в файл стилей вашего сайта следующий код:
.santa {
position: fixed;
bottom: 10px;
right: -500px;
}
4. Добавить библиотеку jQuery на сайт (игнорировать данный пункт – если она уже есть на вашем сайте):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
5. Добавить следующий скрипт на ваш сайт:
<script type="text/javascript">
$(document).ready(function() {
var windowWidth = $(document).width();
var santa = $('.santa');
santa_right_pos = windowWidth + santa.width();
santa.right = santa_right_pos;
function movesanta(){
santa.animate({right : windowWidth + santa.width()},15000, function(){
santa.css("right","-500px");
setTimeout(function(){
movesanta();
},10000);
});
}
movesanta();
});
</script>
ПРИМЕРЫ:
А теперь давайте рассмотрим как установить данного Санту на сайт wordpress, возьмем стандартную тему Twenty Twelve.
Пример 1. Добавим Санту только для конкретных записей/страниц сайта.
Нам понадобиться установить плагин – “jQuery in Posts, Pages”, сведения о плагине:
Последнее обновление: 7 месяцев назад.
Количество активных загрузок: 300+
Сайт плагина: “wordpress.org/plugins/jquery-in-posts-pages/”
1.1. Добавим блок с изображением Санты внутрь тега body.
Для этого заходим в админку wordpress сайта, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл – header.php – и здесь сразу после тега body, в теме Twenty Twelve он выглядит так:
<body <?php body_class(); ?>>
вставляем сразу после него следующий код:
<div class="santa"><img src="https://mnogoblog.ru/wp-content/uploads/2015/12/santasled.gif" alt="" /></div>
1.2. Заходим в файл стилей – style.css.
Для этого заходим в админку wordpress сайта, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css – вставляем следующий код в самый конец кода данного файла:
.santa {
position: fixed;
bottom: 10px;
right: -500px;
}
1.3. Добавляем скрипт Санты.
Так как мы установили плагин – jQuery in Posts, Pages – то внизу каждой записи/страницы при её редактировании/создании появиться новое окошко:
В него и вписываем скрипт Санты:
$(document).ready(function() {
var windowWidth = $(document).width();
var santa = $('.santa');
santa_right_pos = windowWidth + santa.width();
santa.right = santa_right_pos;
function movesanta(){
santa.animate({right : windowWidth + santa.width()},15000, function(){
santa.css("right","-500px");
setTimeout(function(){
movesanta();
},10000);
});
}
movesanta();
});
Все готово – теперь на данной записи/страницы будет скачущий сайнта – справа налево.
Пример 2. Добавим Санту для всего сайта.
2.1. Добавим блок с изображением Санты внутрь тега body.
Для этого заходим в админку wordpress сайта, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл – header.php – и здесь сразу после тега body, в теме Twenty Twelve он выглядит так:
<body <?php body_class(); ?>>
вставляем сразу после него следующий код:
<div class="santa"><img src="https://mnogoblog.ru/wp-content/uploads/2015/12/santasled.gif" alt="" /></div>
2.2. Заходим в файл стилей – style.css.
Для этого заходим в админку wordpress сайта, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css – вставляем следующий код в самый конец кода данного файла:
.santa {
position: fixed;
bottom: 10px;
right: -500px;
}
2.3. Устанавливаем плагин, который подключает скрипты Санты на сайте.
Скачать плагин Санты – santa.zip
Установить и активировать плагин Санты.