Красивая кнопка даты публикации поста на WordPress

Автор:
Nurlan Kemelbekov

В этой короткой статье покажу, как можно сделать, чтобы на блоге Word Press появилась красивая кнопка даты публикации и украсить дату поста значком календаря с помощью некоторого CSS и чуть-чуть PHP.

postdate
Для начала мы собираемся найти подходящую иконку для даты. Вы могли бы сделать это сами, но IconFinder имеет большой выбор, и вы можете сэкономить время. Если хотите, Вы можете скопировать иконку, расположенную левее.

Далее идет часть кодирования, и мы начнем с PHP. Вам нужно добавить следующие строки кода в шаблон, где вы хотели бы, чтобы появилась красивая кнопка даты написания поста. Я бы рекомендовал добавить его в single.php, index.php и search.php.

<div class="postdate">
<div class="postmonth"><?php the_time('M') ?></div>
<div class="postday"><?php the_time('d') ?></div>
</div>

Стили
Теперь стиль для элемента (POSTDATE.):

.postdate {
float: left;
display: inline;
margin: 5px 10px 0 0;
padding: 2px 0 0 0;
background: url(img/date_img.png) no-repeat;
width: 59px;
height: 60px;
text-align: center;
}

Данный CSS создаст общий вид нашей кнопки даты публикации статьи. Тем не менее, мы еще должны уложить месяц и день.

//стиль для показа месяца публикации
.postmonth{
color: #FFF;
font-size: 11px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 2px 0px;
}
//css – показать день публикации поста
.postday{
color: #333;
font-size: 25px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 3px 0px;
}

Конечный результат должен выглядеть примерно так.Дата публикации поста

Следующая заметка, которую я рекомендую Вам прочитать, называется «Раскрывающаяся при наведении курсора кнопка с иконками соц.сетей».



Вам также может понравиться:


Добавить комментарий

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

* Copy This Password *

* Type Or Paste Password Here *

18 − 5 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!