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

Дата публикации:Июнь 21, 2011

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

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

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

    • Architect Of Ruin says:

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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