Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Всем снова привет! Продолжаю делать разбор элементов шаблона своего блога. На этот раз мы поговорим об оформлении так называемой панели под анонсами поста, в которые могут входить название рубрики, дата публикации поста, сколько комментариев и кнопка «Читать далее».
Как Вы уже давно, я надеюсь, заметили, под каждым анонсом записи располагаются вот такие вот кнопки:
Это число комментариев, кнопка «Читать далее» и дата публикации.
Вариантов оформления для данных элементов довольно много, но в данном примере будет разобрано оформление кнопок именно на этом блоге, но если Вам понравится, можете взять и себе.
Для создания таких кнопок нужно открыть файл шаблона index.php, и после
<?php the_excerpt() ?>
добавить вот это:
<div class="postmeta">
<a class="comm" href="<?php the_permalink(); ?>#comments" title="Посмотреть комментарии к записи"><?php
$post = get_post(get_the_ID());
$comment_status = $post->comment_status;
if ($comment_status == 'open') {
$c = get_comments_number();
echo $c . ' '. mike_inducement($c, 'комментарий', 'комментария', 'комментариев');
} else {
echo 'Обсуждение закрыто';
} ?></a> /* Код для количества комментариев. Благодаря нему слово "комментарии" будет грамотно склоняться. */
<a class="dalee" href="<?php the_permalink(); ?>" title="Полный текст записи" class="readmore"></a> /* Иконка "Читать далее" */
<span class="postdate"><?php the_date('j.m.Y'); ?></span> /* Дата публикации. */
</div></div>
Небольшое пояснение к выводу даты. На моем блоге дата публикации выводится в формате число, месяц в цифровом формате и год, и выглядит это так: 01.01.2014. Если Вас такой формат не устраивает, то можно установить значения даты по своему усмотрению. Для этого в функции
<?php the_date('j.m.Y'); ?>
нужно просто взять и изменить буквы в скобках. Для того, чтобы не искать в кодексе WordPress способы форматирования даты, даю небольшую подсказку:
| День месяца | ||
|---|---|---|
| d | Числа с начальным нулем | 01–31 |
| j | Числа без начального нуля | 1–31 |
| S | Суффикс английского порядкового числительного для дня месяца (j) | st, nd, rd или th |
| День недели | ||
| l | Полное название | Sunday – Saturday |
| D | Трехбуквенное сокращение | Mon – Sun |
| Месяц | ||
| m | числа с начальным нулем | 01–12 |
| n | числа без начального нуля | 1–12 |
| F | полное текстовое название | January – December |
| M | трехбуквенное сокращение | Jan — Dec |
| Год | ||
| Y | 4 цифры | 1999, 2010 |
| y | 2 последние цифры | 99, 10 |
Переходим к стилям оформления. Открываем файл style.css и добавляем в него вот это:
.postmeta { /* общее оформление для кнопок */
background: #FFF;
border-top: 1px solid #CCCCCC;
padding: 22px 10px;
text-align: center; /* для выравнивания всех кнопок по центру */
font: 11px Verdana;
clear:both;
}
.postmeta a:hover{ /* оформление для ссылок при наведении */
background-color: #33cc00;
opacity:0.8;
text-decoration:none;
color:#fff;
}
.postmeta a, postmeta a:visited{
color:#003;
}
.comm { /* оформление для кнопки с количеством комментариев. */
background: #66ffff url('images/icons/comments.png') no-repeat left;
padding: 5px 5px 5px 22px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity:0.8;
border:1px solid #ccc;
box-shadow: 0 0 10px rgba(51, 51, 51, 1);
-webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 1);
-moz-box-shadow: 0 0 10px rgba(51, 51, 51, 1);
margin-right:5px;
}
.dalee { /* оформление для кнопки "Читать далее". */
background: #ff9900 url('images/icons/fulltext.png') no-repeat center;
padding: 10px 20px 10px 17px;
border:1px solid red;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
opacity:0.8;
box-shadow: 0 0 10px rgba(51, 51, 51, 1);
-webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 1);
-moz-box-shadow: 0 0 10px rgba(51, 51, 51, 1);
}
.postdate { /* оформление для кнопки с датой публикации. */
background: #66ffff url('images/icons/date.png') no-repeat left;
padding: 5px 5px 5px 22px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity:0.8;
border:1px solid #ccc;
box-shadow: 0 0 10px rgba(51, 51, 51, 1);
-webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 1);
-moz-box-shadow: 0 0 10px rgba(51, 51, 51, 1);
margin-left:5px;
}
Как Вы догадались, для каждой кнопки нужно прописать свое оформление, поскольку они различаются, в частности иконками, а кнопка «Читать далее» вообще имеет другой размер, цвет и не имеет текста.
Вот таким вот способом можно оформить панель кнопок анонса записи WordPress-блога.
Привет…Отличная инструкция, жаль, что мне такое не прокатит…=)
При огромном и непреодолимом желании можно присобачить
Согласен…Вопрос лишь в том, будет это смотреться или нет =)
благодарю за информацию, у меня вопрос как убрать дату. с блога, что бы она не отображалась в посте?
Откройте файлы темы index.php и single.php, найдите в них это:
и удалите.
Всем привет. Если честно, то кнопки не очень смотрятся, мне не нравится. А что вот эта жёлтая блямбина и есть ссылка читать далее, я хоть и понял сразу, но боялся нажимать её
Только зайдя сюда и прочитав что это в самом деле она, успокоился 
Готов выслушать Ваши пожелания по кнопкам
Я же Вам не художник! 
Если честно, я сам на своём блоге не могу определится с нормальным выводом этих кнопок
Пока читаю рекомендации как должны выглядеть и какими быть кнопки на блогах, чтоб не пугать и не портить дизайн.
Что ж, экспериментируйте! Как это делал я, делая дизайн блога.
Там, где вы пишете должно быть: «»
у меня на блоге: «}
.include_date span.the_date{»
Если я вставляю, как вы пишите «(j.F.Y)» — дата получается такого же формата » 2014-09-12″ только очень большого размера.
Что скажите делать?
Необычная кнопка получилась, интересная и не такая, как у большинства сайтов
Спасибо, приятно!