Как я настраивал вывод календаря с датой сбоку от записи

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

Сначала я нашел подходящую иконку календаря, поколдовал немного над ней в фотошопе и сохранил ее в папке с остальными медиафайлами. Затем открыл файл loop.php в редакторе, нашел в нем секцию: <?php /* How to display all other posts. */ ?>, и добавил сразу после <h2 class=»entry-title»> следующий фрагмент кода:

<div class="datetime">
<?php the_time('d') ?><br/>
<span><?php the_time('M') ?></span>
</div>

Далее я перешел к стилям. После длительной подгонки получилось следующее:

.entry-title{
padding-left: 2px;
}

div .datetime{
float:left;
margin-right:17px;
background: url('images/dateIcon.png') no-repeat;
margin-top: 0px;
padding-top: 26px;
width: 50px;
height: 60px;
font-size: 14px;
line-height: 12px;
text-align: center;
color: #000;
margin-bottom:-50px;
}

div .datetime span{
font-size: 12px;
color: #666;
}

Теперь осталось только немного подкорректировать контент:

.entry-content p:first-child{
text-indent:70px;}

.entry-summary p:first-child{
text-indent:70px;}

и убрать вывод даты для прилепленных записей:

div .sticky h2 .datetime {display:none;}

Итог вы можете видеть (раньше могли видеть, при старом оформлении) на странице. Единственный недостаток: календарь не будет выводиться в заголовках отдельных записей. Исправим это: откроем файл single.php, и сразу после строки <h1 class=’entry-title’> добавим уже знакомый нам блок:

<div class="datetime">
<?php the_time('d') ?><br/>
<span><?php the_time('M') ?></span>
</div>

Сразу скажу: это первое решение, которое пришло мне в голову, поэтому оно может быть неоптимальным. Если вы знаете другие, более простые реализации — буду рад выслушать ваши предложения в комментариях.