Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Всем снова привет! Продолжаю делать разбор элементов шаблона своего блога. На этот раз мы поговорим об оформлении так называемой панели под анонсами поста, в которые могут входить название рубрики, дата публикации поста, сколько комментариев и кнопка «Читать далее».
Как Вы уже давно, я надеюсь, заметили, под каждым анонсом записи располагаются вот такие вот кнопки:
Это число комментариев, кнопка «Читать далее» и дата публикации.
Вариантов оформления для данных элементов довольно много, но в данном примере будет разобрано оформление кнопок именно на этом блоге, но если Вам понравится, можете взять и себе.
Для создания таких кнопок нужно открыть файл шаблона index.php, и после
1 | <?php the_excerpt() ?> |
добавить вот это:
5dabc78d550c245d72fa5e9b603f4a31001
Небольшое пояснение к выводу даты. На моем блоге дата публикации выводится в формате число, месяц в цифровом формате и год, и выглядит это так: 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 и добавляем в него вот это:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | .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, найдите в них это:
[php]
<? php the _date( ‘j .m. Y’ ); ?>
[/php]
и удалите.
Всем привет. Если честно, то кнопки не очень смотрятся, мне не нравится. А что вот эта жёлтая блямбина и есть ссылка читать далее, я хоть и понял сразу, но боялся нажимать её
Только зайдя сюда и прочитав что это в самом деле она, успокоился 
Готов выслушать Ваши пожелания по кнопкам
Я же Вам не художник! 
Если честно, я сам на своём блоге не могу определится с нормальным выводом этих кнопок
Пока читаю рекомендации как должны выглядеть и какими быть кнопки на блогах, чтоб не пугать и не портить дизайн.
Что ж, экспериментируйте! Как это делал я, делая дизайн блога.
Там, где вы пишете должно быть: «»
у меня на блоге: «}
.include_date span.the_date{»
Если я вставляю, как вы пишите «(j.F.Y)» — дата получается такого же формата » 2014-09-12″ только очень большого размера.
Что скажите делать?
Необычная кнопка получилась, интересная и не такая, как у большинства сайтов
Спасибо, приятно!