Как я настраивал вывод календаря с датой сбоку от записи
Решил написать статью о том, как вывести на экран изображение календарика с датой публикации записи. Толчком к этому послужило перечитывание перевода “Изменение цикла и сайдбара в стандартной теме“. Я решил несколько видоизменить предложенное решение, подстроив его под свои нужды. Во-первых, оно должно работать для любых по длине заголовков, а не только для тех, которые умещаются в одной строке. Во-вторых, мне не требуется отображать иконку для прилепленной записи, потому что в ней весь текст расположен во вкладках.
Сначала я нашел подходящую иконку календаря, поколдовал немного над ней в фотошопе и сохранил ее в папке с остальными медиафайлами. Затем открыл файл 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>
Сразу скажу: это первое решение, которое пришло мне в голову, поэтому оно может быть неоптимальным. Если вы знаете другие, более простые реализации – буду рад выслушать ваши предложения в комментариях.