Создаем счетчик до Нового года на сайте WordPress

Продолжаем подготавливать свои сайты и блоги к Рождеству и Новому году. На этот раз я буду рекомендовать вам установить рождественский счетчик в виде интересного сказочного персонажа. Он будет показывать сколько осталось дней до заветного праздника. Воплощать такую сказку мы будем с помощью плагина Santas Christmas Countdown для сайтов на CMS WordPress.

Некоторые скажут: «Зачем мне эта бесполезная игрушка в виде новогоднего счетчика? Человек и так знает, сколько осталось дней до Нового года и Рождества.» Да, он может и знает об этом. Однако суть-то в другом. Нам нужно создать новогоднюю и рождественскую атмосферу на своем сайте и блоге. Так мы повышаем настроение своих посетителей. А довольный посетитель, это считай что будущий клиент, покупатель, подписчик, комментатор или просто друг. Да и так, для себя можно в новогодние праздники хоть чуточку приукрасить свой проект. Поэтому к предстоящим праздникам свои проекты нужно привести в надлежащее состояние.

Создаем рождественский счетчик

Итак, для установки рождественского счетчика на сайт с движком WordPress, нам понадобится плагин Santas Christmas Countdown. После установки и активации расширения переходим в меню «Внешний вид» —> «Виджеты«. Там у вас появится новый виджет «Santa’s Countdown«. Просто перетащите его в нужную область и сохраните настройки. После этого у вас на сайте должен появиться вот такой счетчик с отсчетом до католического Рождества.

Плагин santas christmas countdown для сайта WordPress

С виду, неплохо! Однако здесь есть пару недоделок. К сожалению плагин не имеет никаких опций. Поэтому все изменения нужно проводить прямо в файлах самого расширения. Так что заранее сделайте резервную копию своего сайта. В принципе копии всех файлов можно и не делать, а только скачать к себе на компьютер файлы установленного плагина и копию базы данных. Если вы что-то напортачите, то потом измененные файлы плагина можно заменить на оригинальные.

Переводим надписи

Итак, давайте сперва переведем надпись на счетчике. Заходим на хостинг и проделываем такой путь: «ваш домен» —> «public_html» —> «wp-content» —> «plugins» —> «santas-christmas-countdown«. Здесь лежат все файлы расширения. Теперь заходим в папку «scripts» и там для редактирования открываем папку «scriptfile.js«.

Нас интересуют строки 21, 25 и 28. Там английскую надпись нужно поменять на свою.

document.write("Merry<br>Christmas!")
}
else if (daysLeft == 1 )
{
document.write( ""+daysLeft+" day <BR> til Christmas!");}
else
{
document.write( ""+daysLeft+" days <BR> til Christmas!");}}

В итоге должно получиться так:

document.write("С<br>Рождеством!")
}
else if (daysLeft == 1 )
{
document.write( ""+daysLeft+" день <BR> до Рождества!");}
else
{
document.write( ""+daysLeft+" дней <BR> до Рождества!");}}

Сохраняем изменения и переходим на сайт. Должно получиться вот так:

Счетчик католического рождества на сайт WordPress

Создаем новогодний счетчик

Уже получше! Также можно задать ориентировку на другой праздник. К примеру, подогнать счетчик до Нового года. Я кстати, решил так и сделать. Для этого просто нужно открыть тот же файл «scriptfile.js«. Нас интересует первая половина всего кода в файле.

function cw_axmascount() {today = new Date();
thismon = today.getMonth();
thisday = today.getDate();
thisyr = today.getFullYear();
if (thismon == 11 && thisday > 25)
 {
 thisyr = ++thisyr;
 BigDay = new Date("December 25, "+thisyr);
 }
else
 {
 BigDay = new Date("December 25, "+thisyr);
 }

В пятой строке цифру 25 меняем на 01. А в 8 и 12 строке December 25 меняем на January 1. Также незабываем в строках 21, 25 и 28 поменять надпись для отсчета времени до Нового года. В итоге полноценная структура файла должна выглядеть так:

function cw_axmascount() {today = new Date();
thismon = today.getMonth();
thisday = today.getDate();
thisyr = today.getFullYear();
if (thismon == 11 && thisday > 01)
 {
 thisyr = ++thisyr;
 BigDay = new Date("January 1, "+thisyr);
 }
else
 {
 BigDay = new Date("January 1, "+thisyr);
 }

msPerDay = 24 * 60 * 60 * 1000;
timeLeft = (BigDay.getTime() - today.getTime() - 1);
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.ceil(e_daysLeft);
if (daysLeft <= 0 )
{
document.write("С Новым<br>годом!")
}
else if (daysLeft == 1 )
{
document.write( ""+daysLeft+" день <BR> до Нового года!");}
else
{
document.write( ""+daysLeft+" дней <BR> до Нового года!");}}

Когда сохраните изменения и перейдете на сайт, то у вас будет уже работать счетчик до Нового года.

Счетчик до нового года на сайте WordPress

Подбираем картинку

Теперь давайте изменим внешний вид отсчета времени. Не знаю как вам, а мне больше нравятся наши сказочные персонажи. Я предпочитаю увидеть могучего Деда Мороза с красавицей Снегурочкой, чем полного Санта Клауса и его нерадивых гномов. Поэтому первым делом нужно подобрать соответствующую картинку. Я использую ту, что ниже.

Новогодний счетчик Дед Мороз и Снегурочка

Вы также можете использовать эту картинку. Просто скачайте ее к себе на компьютер, а потом через админку WordPress просто загрузите на сайт. Когда фотография будет загружена, зайдите в меню «Медиафайлы» —> «Библиотека«. Там выберите нужный файл и в редакторе скачайте ссылку на этот файл.

ссылка на изображение

Далее, возвращаемся к файлам плагина, то есть к папке «santas-christmas-countdown«. На этот раз заходим в папку «css» и в ней открываем файл «cw xmascount-style.css«. Там нас интересует девятая строка. В нее нужно скопировать ссылку на изображение. В итоге вместо этого:

background-image: url(santas-countdown-background.png);

Должно получиться так:

background-image: url(https://alpha-byte.ru/wp-content/uploads/2015/12/ded-snegurka.png);

Ссылку обязательно ставим свою. После сохранения изменений, на вашем сайте появится такое безобразие:

Новогодний счетчик для сайта WordPress

Видим, что картинка сплющена, а надпись стала практически незаметной. Поэтому нам нужно подредактировать стили. Стоит сказать, что в зависимости от картинки, стили у вас могут быть разные. Поэтому вам нужно самим подгонять параметры для отображения новогоднего счетчика. Для своей картинки в файле «cw xmascount-style.css» я задал такие параметры:

#cw_countdown{
 margin: 0 auto;
 height: 390px;
 width: 291px;
 background-repeat: no-repeat;
 background-size: 222px 386px;
 text-align: center;
 background-image: url(https://alpha-byte.ru/wp-content/uploads/2015/12/ded-snegurka.png); 
 
}
.cw_countdown-text{
 font-weight:normal;
 padding-left:9px; 
 font-size:25px; 
 line-height:30px;
 padding-right: 100px; 
 padding-top:1px; 
 text-align:center;
 font-family: comic sans ms;
 color: #0099CC;
}

Класс #cw_countdown (строка 1) отвечает за вывод картинки. Поэтому чтобы подогнать изображение, вам нужно отредактировать параметры во 2 — 8 строке. Путь к картинке мы уже задали в строке 8. Осталось только подогнать размеры. Класс .cw_countdown-text отвечает за вывод надписи счетчика. Когда подгоните стили, то на сайте картинка примет следующий вид:

Отсчет до нового года на сайте WordPress

Уже неплохо. Осталось отредактировать отсчет до Нового года. Рекомендую надпись сделать красивым шрифтом. Так будет смотреться намного лучше.

Подключаем шрифты от Google

Итак, давайте подключим один шрифт от Google. Для этого заходим в Google Fonts. Рекомендую оттуда брать шрифты, так как они довольно распространены и без проблем могут отображаться на различных устройствах и операционных системах.

Когда зайдете, то увидите примеры. Ищите шрифт Lobster и рядом нажимайте на кнопку Quick-use (1). Конечно же, при желании вы можете выбрать что-то другое. Мне так понравился Lobster. Поэтому я решил использовать этот шрифт от Гугла на своем блоге.

Подключить шрифты google на сайт WordPress

Когда зайдете, то сразу спускайтесь на второй пункт «Choose the character sets you want» и там подключаете кириллицу. Нужно просто отметить галочкой пункт «Cyrillic«. Хоть от этого нагрузка на сайт немного возрастет, зато потом у вас не будет проблем с отображением русских букв на сайте и блоге. Поэтому кириллицу подключаем обязательно!

Выбираем языки для Гугл шрифтов

Далее, спускаемся ниже к третьему пункту «Add this code to your website«. Во вкладке «Standart» нам нужно скопировать полученный код. У меня он такой получился:

<link href='https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Когда скопировали, то вам нужно вставить этот код в файл header.php вашей темы. Заходите на хостинг и проделывайте такой путь: «ваш домен» —> «public_html» —> «wp-content» —> «themes» —> «название установленной темы«. Открываете файл «header.php» и там почти в самом верху скопированный код вставляете после открывающего тега <head>​. Для наглядности посмотрите мой пример и делайте по аналогии.

Подключаем гугл шрифты на сайт WordPress

Когда внесете изменения, то вам нужно опять вернуться на сервис Google Fonts (там, где мы шрифт подбирали). На той же странице спускаемся еще ниже до четвертого пункта «Integrate the fonts into your CSS«. Здесь нужно скопировать код и вставить в свой файл стилей.

Подключаем стили для Google шрифтов

Когда скопируйте, то эти стили вам нужно установить в файл плагина чтобы счетчик был оформлен другим шрифтом. На своем хостинге проделываем такой путь: «ваш домен» —> «public_html» —> «wp-content» —> «plugins» —> «santas-christmas-countdown» —> «css«. Открываем файл «cw xmascount-style.css«. Там находите строчку с другим шрифтом:

font-family: comic sans ms;

И заменяете ее на свой стиль. У меня будет такая строка:

font-family: 'Lobster', cursive;

В итоге у меня получился такой код всех стилей счетчика:

#cw_countdown{
 margin: 0 auto;
 height: 390px;
 width: 291px;
 background-repeat: no-repeat;
 background-size: 222px 386px;
 text-align: center;
 background-image: url(https://alpha-byte.ru/wp-content/uploads/2015/12/ded-snegurka.png); 
 
}
.cw_countdown-text{
 font-weight:normal;
 padding-left:9px; 
 font-size:25px; 
 line-height:30px;
 padding-right: 100px; 
 padding-top:1px; 
 text-align:center;
 font-family: 'Lobster', cursive;
 color: #0099CC;
}

У вас же он будет немного отличаться, так как будет другая ссылка на изображение и, возможно, иные размеры. Но это вы сами должны смотреть и подгонять стили под свою тему. Когда все настроите, то в итоге счетчик Нового года на сайте будет таким (кликните для увеличения):

Устанавливаем счетчик Нового года на сайт

Вот в принципе и все! Можно так и оставлять. Если вы захотите вывести отсчет времени до Нового года в другом месте вашей темы, то можно воспользоваться вставкой специального шорткода:

Шорткод santas-christmas-countdown

Стоит отметить, что при обновлении плагина, все изменения слетят. Поэтому тут будьте внимательны. Во время работы плагина его лучше не обновлять. Исключение составляют лишь те изменения, которые направленны на улучшение защиты сайта. Если таких нововведений не будет, то обновлять плагин не стоит. Так что перед обновлением всегда читайте изменения в новых версиях плагина. Рекомендую их просматривать на вкладке «Changelog» в официальном репозитории плагинов WordPress.

На этом я заканчиваю данный пост. Теперь вы знаете, как с помощью плагина Santas Christmas Countdown можно установить на свой сайт красивый счетчик с отсчетом до Нового года или Рождества. Тут только нужно найти красивые картинки в интернете и подогнать стили чтобы ваш сайт или блог на WordPress еще больше радовал своих посетителей. В общем, изучайте и внедряйте!

Украшения для сайта к Новому году:

  • Помимо счетчика, рекомендую вам дополнительно установить другие новогодние украшения для сайта под управлением ВордПресс.
  • Красивый счетчик до Нового года можно создать еще и плагином Holiday Message. Он не только выведет время до праздника, но и позволит вывести новогоднее поздравление для посетителей на сайте.

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 

Комментарии 4

  • Вот это заморочка (:dash:)
    Неужели нет в интернете готового варианта? На такую процедуру не каждый решиться!

    • Есть. Но это может быть не безопасно. Также частенько все равно приходиться лезть в код чтобы подправить счетчик. Например, поставить другую картинку, сделать отступы или задать другие размеры.

  • Почитала коммент Игоря и смеюсь — у меня тоже первой была такая же мысль: ну и заморочка!
    Но зато — потренироваться можно… (:dash:)

  • У Вас хороший блог, жаль что давно нет новых постов.

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован. Обязательные поля помечены *