Таймер обратного отчета "до завтра" WordPress

Такой счетчик очень удобен тем, что не нужно каждый раз переставлять дату. Раньше пользовалась Uji Countdoun для WP.
Для чего нужен такой счетчик? Естественно, чтобы заставить посетителя купить прямо сейчас, а то завтра будет слишком поздно.

Пришлось "стянуть" скрипт с существующей страницы на WP.

Туда, где должен отображаться счетчик, надо вставить код:

Код:

<div class="ps_countdown_wrap">
    <div id="ps_counter"></div>
        <div class="ps_counter_desc">
            <div>Дней</div>
            <div>Часов</div>
            <div>Минут</div>
            <div>Секунд</div>
        </div>
    <script type="text/javascript" src="wp-content/themes/twentyfourteen/js/jquery.countdown.js"></script>
    <script type="text/javascript">
        var cdate = "02:03:32:00";
        jQuery(function($){$("#ps_counter").countdown({image: "wp-content/themes/twentyfourteen/images/digits.png",startTime: cdate }); });
    </script>
</div>

Как видно, скрипт использует 2 файла “jquery.countdown.js” и “digits.png”. Самое важное — это переменная “cdate” (ee значение равно 02:03:32:00) – время, с которого начинается обратный отсчет на таймере после загрузки/обновления страницы.

Также нам нужно подключить библиотеку “jquery.min.js”, это делается в шапке (header.php):

Код:

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

Файлы .js я сложила в папку js и изображения цифр в папку images в папку с темой (по дефолту Twenty Fourteen). Вам стоит заменить название на вашу тему.

В файл стилей нужно добавить оформление счетчика:

Код:

/* counter */
#ps_counter {
    width: 554px;
    margin: 0 auto;
}

.ps_countdown_wrap {
    width: 580px;
    margin: 10px auto;
    border: 1px solid #CCC;
    background: #fff;
    color: #000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 20px 20px 2px;
    float: none;
    clear: both;
}

.cntSeparator {
    margin: 10px 11px;
    font: 54px/54px Georgia, "Times New Roman", Times, serif;
}

.ps_counter_desc {
    clear: both;
    margin: 10px auto;
    width: 554px;
    overflow: hidden;
    float: none;
}

.ps_counter_desc div {
    float: left;
    width: 105px;
    margin: 0 39px 0 0;
    font: 26px/40px arial;
    text-align: center;
}

.ps_counter_desc div:last-child {
    margin: 0 !important;
}
/* counter */

В общем все, файлы можно скачать тут:
http://startops.ru/countdown.zip