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

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

Сначала я нашел подходящую иконку календаря, поколдовал немного над ней в фотошопе и сохранил ее в папке с остальными медиафайлами. Затем открыл файл 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>

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

Понравилась статья? Поделиться с друзьями:
Комментарии: 2
  1. Макс

    Спасибо Автору за статью. Ты мне своим трудом помог сделать вывод даты слева статьи, так как мне было нужно.

    1. Дмитрий (автор)

      Спасибо) Жаль, что я не сделал в тот раз скриншот, поэтому теперь даже не могу показать результат. Но рад, что помогло.

Добавить комментарий для Architect Of Ruin Отменить ответ

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.