Красиво оформляем кнопку «Читать далее», дату публикации поста и число комментариев к нему

2014-02-02 | WordPress

Всем снова привет! Продолжаю делать разбор элементов шаблона своего блога. На этот раз мы поговорим об оформлении так называемой панели под анонсами поста, в которые могут входить название рубрики, дата публикации поста, сколько комментариев и кнопка «Читать далее».

Как Вы уже давно, я надеюсь, заметили, под каждым анонсом записи располагаются вот такие вот кнопки:

оформление панели

Это число комментариев, кнопка «Читать далее» и дата публикации.

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

Для создания таких кнопок нужно открыть файл шаблона index.php, и после

1	<?php the_excerpt() ?>

добавить вот это:

f369cea7ba53e0524eef6c64dbf0e1ed001

Небольшое пояснение к выводу даты. На моем блоге дата публикации выводится в формате число, месяц в цифровом формате и год, и выглядит это так: 01.01.2014. Если Вас такой формат не устраивает, то можно установить значения даты по своему усмотрению. Для этого в функции

1	<?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-блога.

Поделиться:

Записи по теме:

12 комментариев к записи "Красиво оформляем кнопку «Читать далее», дату публикации поста и число комментариев к нему"

Александр от 03.02.2014 в 06:27 пишет:

Привет…Отличная инструкция, жаль, что мне такое не прокатит…=)

Ответить ↓
- Никита от 03.02.2014 в 23:07 пишет:
  
  При огромном и непреодолимом желании можно присобачить
  
  Ответить ↓
  - Александр от 04.02.2014 в 08:16 пишет:
    
    Согласен…Вопрос лишь в том, будет это смотреться или нет =)
    
    Ответить ↓
Татьяна Салимова от 05.02.2014 в 15:15 пишет:

благодарю за информацию, у меня вопрос как убрать дату. с блога, что бы она не отображалась в посте?

Ответить ↓
- Никита от 07.02.2014 в 15:04 пишет:
  
  Откройте файлы темы index.php и single.php, найдите в них это:
  [php]
  <? php the _date( ‘j .m. Y’ ); ?>
  [/php]
  и удалите.
  
  Ответить ↓
vadim.verg от 02.03.2014 в 09:33 пишет:

Всем привет. Если честно, то кнопки не очень смотрятся, мне не нравится. А что вот эта жёлтая блямбина и есть ссылка читать далее, я хоть и понял сразу, но боялся нажимать её Только зайдя сюда и прочитав что это в самом деле она, успокоился

Ответить ↓
- Никита от 02.03.2014 в 16:24 пишет:
  
  Готов выслушать Ваши пожелания по кнопкам Я же Вам не художник!
  
  Ответить ↓
  - vadim.verg от 02.03.2014 в 17:24 пишет:
    
    Если честно, я сам на своём блоге не могу определится с нормальным выводом этих кнопок
    Пока читаю рекомендации как должны выглядеть и какими быть кнопки на блогах, чтоб не пугать и не портить дизайн.
    
    Ответить ↓
    - Никита от 02.03.2014 в 19:37 пишет:
      
      Что ж, экспериментируйте! Как это делал я, делая дизайн блога.
      
      Ответить ↓
Ирина от 19.09.2014 в 12:13 пишет:

Там, где вы пишете должно быть: «»
у меня на блоге: «}
.include_date span.the_date{»
Если я вставляю, как вы пишите «(j.F.Y)» — дата получается такого же формата » 2014-09-12″ только очень большого размера.
Что скажите делать?

Ответить ↓
Андрей от 02.06.2016 в 12:09 пишет:

Необычная кнопка получилась, интересная и не такая, как у большинства сайтов

Ответить ↓
- Никита от 05.06.2016 в 20:44 пишет:
  
  Спасибо, приятно!
  
  Ответить ↓