Привет! В этом посте расскажу как я видоизменил отображение даты и автора в записях 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, это тема для отдельной статьи. =)
Для наглядности вот что у меня получилось.
В следующей статье я расскажу (Как вывести миниатюры в анонсы статей)