Загрузка...Счетчик до Нового года и Рождества на сайте WordPress
Счетчик до Нового года и Рождества на сайте WordPress
Продолжаем подготавливать свои сайты и блоги к Рождеству и Новому году. На этот раз я буду рекомендовать вам установить рождественский счетчик в виде интересного сказочного персонажа.
Он будет показывать сколько осталось дней до заветного праздника. Воплощать такую сказку мы будем с помощью плагина Santas Christmas Countdown для сайтов на CMS WordPress.
Некоторые скажут: «Зачем мне эта бесполезная игрушка в виде новогоднего счетчика? Человек и так знает, сколько осталось дней до Нового года и Рождества.»
Да, он может и знает об этом.
Однако суть-то в другом. Нам нужно создать новогоднюю и рождественскую атмосферу на своем сайте и блоге. Так мы повышаем настроение своих посетителей.
А довольный посетитель, это считай, что будущий клиент, покупатель, подписчик, комментатор или просто друг. Да и так, для себя можно в новогодние праздники хоть чуточку приукрасить свой проект.
Поэтому к предстоящим праздникам свои проекты нужно привести в надлежащее состояние.
ЧАВО по продвижению сайта
Индексация производится в порядке очередности для новых сайтов. Время индексирования может быть от нескольких дней до месяца.
Чтобы сайт начал отображаться в поисковых выдачах Яндекса и Гугла его надо «насытить» ключевыми фразами, создать оптимальное семантическое ядро для сайта и для его отдельных страниц, сделав их «посадочными».
SEO-оптимизация и создание семантического ядра производятся в процессе создания сайта.
“Песочница” известный фильтр от Google накладывается на молодые сайты и со временем автоматически снимается, если сайт не стоит на месте (обновление контента, полезность для посетителя)
“Минусинск” от Яндекса опускает в поиске сайты с некачественными внешними SEO-ссылками. Выход — подбирать только качественные внешние ссылки на ресурс.
Повышение количества ЛИДОВ с сайта соответственно повышает конверсию сайта.
Семантическое ядро сайта – это список целевых запросов, запрашиваемых пользователями в поисковой строке Yandex, Google, MailRu. Эти запросы, по сути, и определяют тематику сайта.
Продвижение сайта начинается с формирования семантического ядра — это основное условие продвижение сайта в поисковых системах по требуемым запросам.
Большинство CSS-свойств плохо подходят для анимирования, так как их изменение вызывает перерисовку страницы. Но есть два «безопасных» свойства, которыми мы можем воспользоваться: transform и opacity .
Подробнее об анимации в вебе можно прочитать в замечательном руководстве High Performance Animations.
Для оживления таймера возьмём надёжное свойство translateY . Оно обеспечит перемещение блока только по y -оси.
Можно воспользоваться и полным свойством translate , но помните, что его первый аргумент соответствует x -координате. Если хотите перемещать элемент только по вертикали, то передайте первым параметром 0 .
Чтобы лучше понять функции трансформации, загляните в спецификацию CSS Transforms Module Level 1. Там всё разобрано на подробных примерах, так что вы разберётесь, даже если не очень любите математику.
6. Вывод таймера
Теперь, когда у вас есть все данные в правильном формате, вы можете вывести таймер на экран. Метод getElementById() объекта документа позволяет нацеливать элементы HTML, созданные на шаге 1, соответственно на #timer-days , #timer-hours , #timer-mins и #timer-secs . Вы можете поместить контент в целевые элементы HTML с помощью свойства innerHTML.
Добавьте следующий код в блок if (t> = 0) под вычислениями преобразования времени:
Приведенный выше код добавляет символ «0» к часам, минутам и секундам, когда их значения меньше 10. Хотя в этом нет необходимости, таймер выглядит лучше, когда количество цифр не меняется все время на экране.
Это может быть достигнуто с помощью метода форматирования, который использует метод slice() , который можно использовать для возврата части набора данных. Например, slice(1) вырезает первый символ строки и возвращает оставшуюся часть строки. Аналогично, slice(2) удаляет первые два символа и возвращает остальные. Отрицательное значение возвращает целевые символы, а не вырезает их. Итак, slice(-2) возвращает последние два символа строки.
В коде вам нужно добавить каждую цифру к «0» и вернуть два последних символа с помощью slice(-2) . Таким образом, JavaScript будет добавлять начальный ноль к каждому однозначному числу, но оставит двузначные числа без изменений. Например:
- (’05’).slice(-2) = ’05’;
- (‘018′).slice(-2) = ’18’;
Таймер: инструмент оптимизации конверсии, который почти никто не использует
Как считаете, может ли одна крошечная строчка текста на странице вашего товарного лендинга привести к существенному увеличению числа продаж? Возможно, это кажется несколько фантастичным и невероятным, но согласно результатам сплит-теста, которыми поделился сервис WhichTestWon, это вполне реальный вариант развития событий.
Фраза, которая позволила повысить коэффициент конверсии на 9%, оказалась простым таймером, показывавшим, сколько времени есть у посетителя для совершения заказа, чтобы его покупку доставили уже завтра:
«Закажите в течении 07 часов 42 минут, и получите товар на следующий день»
На первый взгляд, 9% — не такой высокий показатель, но ведь это рост только по одной товарной позиции, и если подобную строку вписать во все разделы сайта, влияние этого оптимизатора конверсии будет значительным.
В еще одном исследовании подобный таймер в три раза увеличил число заполненных лид-форм. Правда фраза была несколько иной — она сообщала, через какое время предложение перестанет действовать.
Психология срочности, дефицит и FoMO
Таймер создает у посетителей ощущение срочности. Срочность же ведет к известным психологическим явлениям: чувству дефицита и страху упустить нечто важное, или FoMO (fear of missing out).
Создание чувства дефицита — это один из 6 принципов убеждения д-ра Чалдини (Robert B. Cialdini), который так или иначе используется большинством коммерческих ресурсов. Его суть заключается в том, что как только продукт становится дефицитным, спрос на него увеличивается в несколько раз.
FoMo же выражается в страхе упустить какую-либо возможность или социальное взаимодействие. Часто этим объясняется стремление людей проверять свою электронную почту или страницу в социальных сетях каждые 5 минут. Маркетологи стараются всячески использовать этот страх, например, в виде заголовков «Не упустите свой шанс …» и т. д.
Собственно, таймеры — это разновидность триггера, который усиливает ощущение срочности. Он особенно хорош тем, что, во-первых, максимально конкретен. По сравнению с общей фразой типа «Предложение ограничено по времени», таймер выглядит вполне реально и даже несколько пугающе.
Кроме того, в отличие от прочих элементов веб-сайта, таймер не статичен. Наш мозг перманентно находится в состоянии поиска возможностей и представляющих опасность факторов, и те стороны действительности, которые не изменились со временем, автоматически маркируются как второстепенные. А вот все, что движется и как-то меняется, привлекает наше внимание в первую очередь.
По стопам Джека Бауэра (Jack Bauer) и его друзей
Таймер обратного отсчета широко используется в кинолентах и телевизионных шоу.
Нет такого шоу, которое бы использовало таймер чаще, чем популярный американский драматический сериал «24 часа». Все идея сериала основана на времени: каждый эпизод охватывает один час из предельно насыщенного событиями дня главного героя, Джека Бауэра. Таймеры появлялись каждый раз, когда ему необходимо было срочно обезвредить ядерную бомбу или предотвратить распространение смертельно опасного вируса. Кроме того, даже логотип сериала был исполнен в формате таймера и служил как бы напоминанием, что времени у протагониста всегда в обрез.
Callbacks (функции обратного вызова)
- destroy (уничтожить) — инициируется, когда таймер будет уничтожен
- create (создать) — инициируется, когда циферблат будет создан
- init (инициализировать) — вызывается, когда объект FlipClock инициализирован
- interval (интервал) — инициируется с каждым интервалом таймера
- start (начало) — инициируется, когда часы запускают
- stop (стоп) — инициируется, когда часы остановлены
- reset (сброс) — инициируется, когда таймер сбрасывается
Обратный отсчет на WordPress — Uji Countdown
Не текстом единым жив сайт. Хотя Google и матерые вебмастера недолюбливают всякую веселую и бесполезную мишуру, но так хочется залепить на сайт что-нибудь. Часто, таковое желание возникает у заказчика и остановить его от подобного безрассудства практически невозможно.
Если вам захотелось добавить эффектный таймер обратного отсчета, то можно воспользоваться плагином Uji Countdown. Таймер добавляется в виде короткого кода в записи и страницы, а при поддержке шот-кодов в виджетах, то и туда. Имеется виджет для сайтбаров.
После установки обнаружить его настройки можно в разделе «Параметры». Удобная настройка css счетчиков и галочка добавления счетчика секунд. Задать дату наступления события можно при помощи календарика. Есть возможность создавать неограниченное количество таймеров с индивидуальными настройками. Выглядит таймер вот так (цвет можно менять):
Кроме бесплатной версии существует расширенная с большими возможностями кастомизации таймеров.
Что плохого замечено Uji Countdown
Размер плагина довольно большой почти 1Мб, значительную часть составляют библиотеки (500Кб).
При сохранении таймера не забудьте ввести его название.
Лично не сталкивался, но ходят слухи, что не переходит по ссылке при наступлении события.
Нет перевода, поэтому придется немного подправить языковой файл, благо там только время да дату перевести. Если вы не планируете выводить текстовые подписи счетчиков, то и перевод не потребуется.
Иногда, не выводит счетчик в страницах, причина такого поведения не найдена, закономерность — не обнаружена. При том, что не выводится по шоткоду в страницах и записях, в области виджетов обратный отсчет ведется.
01.02.2015 Плагин прошел фазу обновления и расширил свои возможности довольно значительно. На первый взгляд можно выделить такие основные функции:
- Добавили новый пользовательский стиль (вариантов внешнего вида очень много).
- Прикрутили форму подписки с возможностью накопления адресов и отдельного просмотра. В бесплатной версии форма простая — только поле для ввода почты и кнопка подписаться. Форма полностью кастомизируется в плане перевода из админки. Для защиты от спама рекомендуют установить плагин капчу.
- Добавлена вкладка с возможностью самостоятельного перевода единиц измерения времени, туда теперь можно прописать все что угодно.
- Попытка вставить в страницу счетчик не увенчалась успехом, ошибка так и остается актуальной.
Берем на сайте WordPress: Uji Countdown .
Связанные посты:
Запомнить, поделиться — Обратный отсчет на WordPress — Uji Countdown
Всего комментариев: 2
Есть проблема с этим плагином: секунды перескакивают на следующую строку. И не важно, какой размер счетчика я выбираю, все равно он переносит секунды на вторую строку. Подскажите, как можно решить данную проблему?
Проверил, все работает нормально, секунду перелистываются. Проблема может быть характерна для вашей темы. Поставьте стандартную тему и проверьте в ней работоспособность. Если не получится, то надо более детально посмотреть.
