1. Різдвяний лічильник на WordPress
2. Переводимо плагін Santas Christmas Countdown
3. Створюємо новорічний лічильник WordPress
4. підбираємо картинку
5. Підключаємо шрифти від Google
6. Прикраси для сайту до Нового року:

Продовжуємо готувати свої сайти і блоги до Різдва і Нового року. На цей раз я буду рекомендувати вам встановити різдвяний лічильник у вигляді цікавого казкового персонажа.

Він буде показувати скільки залишилося днів до заповітного свята. Втілювати таку казку ми будемо за допомогою плагіна Santas Christmas Countdown для сайтів на CMS WordPress.

Деякі скажуть: «Навіщо мені ця марна іграшка у вигляді новорічного лічильника? Людина і так знає, скільки залишилося днів до Нового року і Різдва. »

Так, він може і знає про це.

Однак суть-то в іншому. Нам потрібно створити новорічну та різдвяну атмосферу на своєму сайті і блозі. Так ми підвищуємо настрій своїх відвідувачів.

А задоволений відвідувач, це вважай, що майбутній клієнт, покупець, передплатник, коментатор або просто друг. Та й так, для себе можна в новорічні свята хоч трішки прикрасити свій проект.

Тому до майбутніх свят свої проекти потрібно привести в належний стан.

Різдвяний лічильник на WordPress

Отже, для установки різдвяного лічильника на сайт WordPress, нам знадобиться плагін Santas Christmas Countdown. Завантажити його можна тут.

Після установки і активації розширення переходимо в меню «Зовнішній вигляд» -> «Віджети«. Там у вас з'явиться новий віджет «Santa's Countdown«.

Просто перетягніть його в потрібну область і збережіть налаштування. Після цього на сайті повинен з'явитися ось такий лічильник з відліком до католицького Різдва.

На вигляд, непогано! Однак тут є пару недоробок.

На жаль, плагін не має ніяких опцій. Тому всі зміни потрібно проводити прямо в файлах самого розширення. Так що заздалегідь зробіть резервну копію свого сайту.

В принципі копії всіх файлів можна і не робити. Можна тільки завантажити до себе на комп'ютер файли встановленого плагіна і копію бази даних. Якщо ви щось напартачили, то потім змінені файли плагіна можна замінити на оригінальні.

Переводимо плагін Santas Christmas Countdown

Отже, давайте спершу переведемо напис на лічильнику. Заходимо на хостинг і робимо такий шлях: «ваш домен» -> «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

Вже краще! Також можна задати орієнтування на яке інше свято. Наприклад, підігнати лічильник до Нового року на сайті 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 просто завантажте на сайт.

Коли фотографія буде завантажена, зайдіть в меню «Медіафайли» -> «Бібліотека«. Там виберіть потрібний файл і в редакторі скачайте посилання на цей файл.

Далі, повертаємося до файлів плагіна, тобто до папки «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);

Посилання обов'язково ставимо свою. Після збереження змін, на вашому сайті з'явиться таке неподобство:

Бачимо, що картинка сплющена, а напис стала практично непомітною. Тому нам потрібно підредагувати css стилі .

Варто сказати, що в залежності від картинки, стилі у вас можуть бути різні. Тому вам потрібно самим підганяти параметри для відображення новорічного лічильника.

Для своєї картинки в файлі «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 відповідає за виведення написи лічильника. Коли слід регулювати стилі, то на сайті картинка прийме наступний вигляд:

Вже непогано. Залишилося відредагувати відлік до Нового року. Рекомендую напис зробити красивим шрифтом. Так буде виглядати набагато краще.

Підключаємо шрифти від Google

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

Коли зайдете, то побачите приклади.

Шукайте шрифт Lobster густо натискайте на кнопку Quick-use (1). Звичайно ж, при бажанні ви можете вибрати щось інше. Мені так сподобався Lobster. Тому я вирішив використовувати цей шрифт від Гугла на своєму блозі.

Коли зайдете, то відразу спускайтеся на другий пункт «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 вашої теми WordPress.

Заходьте на хостинг і проробляти такий шлях: «ваш домен» -> «public_html» -> «wp-content" -> "themes» -> «назва встановленої теми«. Відкриваєте файл «header.php» і там майже в самому верху скопійований код вставляєте після відкриваючого тега <head>.

Для наочності подивіться мій приклад і робіть по аналогії.

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

Тут потрібно скопіювати код і вставити в свій файл стилів.

Коли скопіюйте, то ці стилі потрібно встановити в файл плагіна щоб лічильник був оформлений іншим шрифтом.

На своєму хостингу проробляємо такий шлях: «ваш домен» -> «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; }

У вас же він буде трохи відрізнятися, так як буде інша посилання на зображення і, можливо, інші розміри.

Але це ви самі повинні дивитися і підганяти стилі під свою тему. Коли все налаштуєте, то в підсумку лічильник Нового року на сайті буде таким.

Ось в принципі і все!

Можна так і залишати. Якщо ви захочете вивести відлік часу до Нового року в іншому місці вашої теми, то можна скористатися вставкою спеціального шорткода :

Варто відзначити, що при оновленні плагіна, всі зміни злетять. Тому тут будьте уважні. Під час роботи плагіна його краще не оновлювати.

Виняток становлять лише ті зміни, які спрямовані на поліпшення захисту сайту. Якщо таких нововведень не буде, то оновлювати плагін не варто. Так що перед оновленням завжди читайте зміни в нових версіях плагіна.

Рекомендую їх переглядати на вкладці «Changelog» в офіційному репозиторії плагінів WordPress.

На цьому я закінчую даний пост.

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

Прикраси для сайту до Нового року:

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