Используем CSS спрайты для облагораживания даты в WordPress

Вы когда-нибудь задавались вопросом стилизации даты в блоге? Да так, чтобы было ну прям очень красиво! Сегодня мы вам покажем как это сделать, используя CSS спрайты, за, примерно, 18 минут.

Примечение: Статья ориентирована на разработчиков и дизайнеров тем WordPress. Базовые знания CSS и WordPress рекомендуются.

Что нам понадобиться:

Графический редактор (мы использовали Adobe Photoshop)
Простой текстовый редактор

Чему вы научитесь с помощью этой статьи:

Даты в постах вашего блога будут супер-красивыми благодаря CSS спрайтам

Начнем…

Шаг #1

Запустите ваш графический редактор. Можете скачать шаблон PSD или PNG для того, чтобы ознакомиться с расположением элементов даты в нашем спрайте.

Шаг #2

Нам нужно создать сетку, используя в ней месяцы, дни и года. Как вы видите, наша сетка располагает месяц в одном столбце, затем дни — в два столбца, и, наконец, года — вертикально в столбце. После того, как вы убедитесь, что все нужные вам даты (например, на вашем родном языке) на месте в сетке, сохраняйте файл. Убедитесь, что текст равноудален сверху и снизу, а также слева и справа (одинаковы ли отступы). Так проще вычислять необходимые позиции элементов.

Шаг #3

Теперь немного кода. Код приведен для файлов, указанных выше.

     /*Спрайт даты */
    .postdate {
    position: relative;
    width: 66px;
    height: 60px;
    float: left;
    }
    .month, .day, .year {
    position: absolute;
    text-indent: -1000em;
    background-image: url(images/date_img.png);
    background-repeat: no-repeat;
    }
    .month { top: 10px; left: 0; width: 33px; height: 30px;}
    .day { top: 30px; left: 0; width: 33px; height: 30px;}
    .year { bottom: 0; right: 13px; width: 20px; height: 60px;}

    .m-01 { background-position: 0 0px;}
    .m-02 { background-position: 0 -30px;}
    .m-03 { background-position: 0 -62px;}
    .m-04 { background-position: 0 -94px;}
    .m-05 { background-position: 0 -125px;}
    .m-06 { background-position: 0 -155px;}
    .m-07 { background-position: 0 -185px;}
    .m-08 { background-position: 0 -217px;}
    .m-09 { background-position: 0 -248px;}
    .m-10 { background-position: 0 -279px;}
    .m-11 { background-position: 0 -310px;}
    .m-12 { background-position: 0 -341px;}

    .d-01 { background-position: -51px 0;}
    .d-02 { background-position: -51px -27px;}
    .d-03 { background-position: -51px -57px;}
    .d-04 { background-position: -51px -91px;}
    .d-05 { background-position: -51px -122px;}
    .d-06 { background-position: -51px -151px;}
    .d-07 { background-position: -51px -185px;}
    .d-08 { background-position: -51px -214px;}
    .d-09 { background-position: -51px -249px;}
    .d-10 { background-position: -51px -275px;}
    .d-11 { background-position: -51px -309px;}
    .d-12 { background-position: -51px -338px;}
    .d-13 { background-position: -51px -373px;}
    .d-14 { background-position: -51px -404px;}
    .d-15 { background-position: -51px -436px;}
    .d-16 { background-position: -51px -462px;}
    .d-17 { background-position: -100px -0px;}
    .d-18 { background-position: -100px -27px;}
    .d-19 { background-position: -100px -57px;}
    .d-20 { background-position: -100px -91px;}
    .d-21 { background-position: -100px -122px;}
    .d-22 { background-position: -100px -151px;}
    .d-23 { background-position: -100px -185px;}
    .d-24 { background-position: -100px -214px;}
    .d-25 { background-position: -100px -249px;}
    .d-26 { background-position: -100px -275px;}
    .d-27 { background-position: -100px -309px;}
    .d-28 { background-position: -100px -338px;}
    .d-29 { background-position: -100px -373px;}
    .d-30 { background-position: -100px -404px;}
    .d-31 { background-position: -100px -436;}

    .y-2009 { background-position: -150px 0;}
    .y-2010 { background-position: -150px -60px;}
    .y-2011 { background-position: -150px -120px;}
    .y-2012 { background-position: -150px -180;}
    .y-2013 { background-position: -150px -240px;}
    .y-2014 { background-position: -150px -300px;}

Пояснение:

.postdate – Устанавливаем ширину и высоту всей даты. В данном случае мы делаем дату в блоке 66px на 60px.

.month, .day, .year – Устанавливаем ширину и высоту индивидуальных элементов, чтобы в комплексе дата отображалась как нужно. Месяцы и дни шириной 33px и высотой 30px. Годы — 33px на 60px. Когда вы поместите все эти элементы вместе, то получится блок 66px на 60px.

.m-01 through .m-12 – А это месяцы. Как вы видите, мы установили изображение так, чтобы изображение могло двигаться по осям X Y, в зависимости от того, где оно выводится.

.d-01 through .d-31 – То же, что и .m-01 – .m-12, только с той разницей, что мы настраиваем здесь дни, а не месяцы.

.y-2009 through .y-2014 – То же, только для года.

Шаг #4

Открываем цикл в WordPress. Это будет шаблон страницы, которая выводит ваши записи блога. Обычно — index.php. Даты отображаются также и на других страницах, но эта статья только заменит вам даты в основном цикле. Если вы дошли до этого шага, то вы достаточно «подкованы», чтобы самостоятельно найти и заменить остальные даты в вашей теме в других файлах (single.php, page.php, archives.php и т.д.)

Ищем что-то похожее на эту строку в вашем цикле:

<?php the_time('F jS, Y') ?>

Заменяем на следующее:

<div class="postdate">
<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>