Как изменить оформление даты WordPress

Привет! В этом посте расскажу как я видоизменил отображение даты и автора в записях WordPress на своем блоге.

Способов отображения на самом деле много. В каждой теме свое отображение, где-то простой текст, где-то красивый шрифт с отдельным оформлением.

Изначально вид был следующим

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

Файлы index.php, single.php, search.php, page.php, archive.php, style.php

К действиям

Ищем строчку похожую на эту

<div class="auth">Posted by<?php the_author_posts_link(); ?></div>

Она отвечает за вывод автора статьи. На мой взгляд если блог авторский, то необходимости писать автора в каждой статье нет. По этому я решил ее убрать. Вы же при желании можете сделать несколько изменений в стиле auth

Следующим этапом будет изменение отображения даты.

Для этого ищем в файлах следующую строчку и заменяем ее

<div class="date"><span><?php the_time('F j, Y'); ?></span></div>

На

<div class="post-date"> 
    <span class="month"><?php the_time('M'); ?></span>
    <span class="day"><?php the_time('j'); ?></span>
    <span class="year"><?php the_time('Y'); ?></span>
</div>

Надеюсь с пониманием что есть что в этом коде не возникнет.

Далее в style.css нужно прописать стили для этих блоков.

.post-date {
float: left;
width: 52px;
text-align: center;
margin: 0 12px 5px 0;
border: solid 1px #bebebe;
background: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ecebeb');
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ecebeb));
background: -moz-linear-gradient(top, #ffffff, #ecebeb);
background: linear-gradient(-90deg, #ffffff, #ecebeb);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.15);
box-shadow: 0 1px 1px rgba(0,0,0,.15);
}

.post-date .month {
color: #fff;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
padding: 2px 0;
width: 100%;
position: relative;
left: -1px;
top: -1px;
border: solid 1px #a11216;
background: #cb151b;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb1c24', endColorstr='#a30c10');
background: -webkit-gradient(linear, left top, left bottom, from(#eb1c24), to(#a30c10));
background: -moz-linear-gradient(top, #eb1c24, #a30c10);
background: linear-gradient(-90deg, #eb1c24, #a30c10);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 0 rgba(0,0,0,.2);
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.post-date .year {
color: #999;
padding: 0 0 4px;
font: 10px/100% Arial, Helvetica, sans-serif;
display: block;
}

.post-date .day {
color: #666;
padding: 2px 0 1px;
font: bold 18px/100% Arial, Helvetica, sans-serif;
display: block;
}

Следующим этапом будет выравнивание даты с заголовком.

В моем случае заголовки имеют следующий код

      <div class="post_title">
        <h3 class="h1"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
      </div>

И стили

.post_title
{
display: table;
min-height: 63px;
}

h3.h1 {
font-size: 19px;
display: table-cell;
vertical-align: middle;
padding: 5px 36px 16px 0;
}

В вашей теме может быть по другому! Но так как в данной статье мы говорим об оформлении даты записей, а не о верстке блоков, то опустим тему взаимодействия блоков date и post_title, это тема для отдельной статьи. =)

Для наглядности вот что у меня получилось.