Оформляем посты по рубрикам на главной странице вашего WordPress сайта

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

Оформляем записи по рубрикам на главной странице WordPress веб-сайта

Скачать исходники | Посмотреть просмотр

Хорошим примером будет веб-сайт London Times, который использует различные цвета для каждого раздела. Данные цвета отображаются на главной странице в баннерах над каждым постом, как это показано на скриншоте:

Оформляем записи по рубрикам на главной странице WordPress веб-сайта

Смотрите также:

  • Оформляем страницу авторизации WordPress на вкус
  • Разная структура темы оформления для различных Рубрик в WordPress
  • Как отобразить различные иконки для отдельных рубрик
  • Используем скрипт jQuery Masonry для оформления записей в стиле Pinterest
  • Stylify Me — смотрим, какие цвета, шрифты и стили оформления используются на веб-сайте

При дальнейшей навигации по веб-сайту вы будете наблюдать определенный цвет для каждого раздела:

Оформляем записи по рубрикам на главной странице WordPress веб-сайта

Использование подобного оформления на веб-сайте сделает домашнюю страницу более привлекательной и поможет пользователям быстрее найти содержимое тех рубрик, которые они обычно читают. В этом уроке мы покажем вам, как настроить стили, которые представлены в WordPress, чтобы оформить главную страницу в блоге по категориям.

Что вам понадобится

Для выполнения данного урока вам понадобится:

  • Установленный WordPress с доступом в консоль
  • Редактор кода

В примере мы создадим дочернюю тему из темы Twenty Fifteen и будем редактировать ее оформление.

На веб-сайте, скорее всего, будут записи, так что чтобы и на нашем они были, мы загрузим тестовый содержимое WordPress.

Создание дочерней темы

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

В папке веб-сайта wp-content/themes создайте новую папку. Нашу мы назвали tutsplus-style-posts-by-category.

Внутри папки создайте пустой CSS файл под названием style.css и скопируйте туда следующее:

/*Theme Name: Tuts+ Style Posts by CategoryTheme URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684Description: Theme to support tuts+ tutorial on styling posts by category. Child theme for the Twenty Fifteen theme.Author: Rachel McCollinAuthor URI:     Template:       twentyfifteenVersion:        1.0*/ @import url("../twentyfifteen/style.css");

Это все, что понадобится WordPress для создания дочерней темы и импорта стилевого оформления из Twenty Fifteen. Скорее всего, вы захотите добавить имя и иные детали вместо наших, но это только пример.

После этого активируйте тему.

Импорт данных

Если на веб-сайте есть записи, вы можете без труда пропустить этот раздел, в котором будет рассказываться, как импортировать демо-данные на веб-сайт:

  • Перейдите на веб-сайт Theme Unit Test и скачайте xml файл, который прикреплен.
  • На веб-сайте перейдите на Инструменты → Импорт. Нажмите на WordPress линк.
  • Выберете файл, который вы только что загрузили.
  • Следуйте инструкциям и ждите, пока WordPress импортирует данные.

Ищем нужные стили для изменений

В WordPress есть пару тегов шаблонов, которые отображают классы для страниц и размещают их тогда, когда они просматриваются в браузере. Например:

  • body_class(), который добавляется в тег body в файл header.php: он присваивает классы элементам body, в соответствии с типом просматриваемой страницы.
  • post_class(), который работает аналогичным образом, но используется циклов внутри записей.

Если вы работаете со темой и ещё не добавили данные теги шаблонов, то должны будете это сделать.

Если вы работаете с дочерней темой из Twenty Fifteen, данные теги были добавлены самой темой Twenty Fifteen, так что вам ничего делать не необходимо.

Если вы откроете домашнюю страницу веб-сайта в браузере и используете консоль для разработчиков, чтобы просмотреть выходной HTML-код, то обнаружите, что данные теги добавили кучу классов на страницу.

Вот, что увидели мы, просматривая домашнюю страницу нашего веб-сайта:

Оформляем записи по рубрикам на главной странице  WordPress веб-сайта

Body-тег отображается как:

<body class="home blog logged-in admin-bar customize-support">

Классы home и blog говорят нам о том, что это домашняя страница веб-сайта и главная страница блога. Мы можем использовать данные классы для выбора CSS на нашей домашней странице.

Нечто подобное происходит и с постом:

Оформляем записи по рубрикам на главной странице  WordPress веб-сайта

Статья, которую мы выбрали, отмечается как:

<article id="post-1176" class="post-1176 post type-post status-publish format-standard hentry category-markup tag-alignment-2 tag-content-2 tag-css tag-markup-2">

Это огромное число классов! Исходя из данной информации, мы можем сказать пару вещей о данном посте: его ID, тип, статус, формат, категорию и теги. Вы можете использовать все это для выбора при оформлении. В примере мы будем использовать класс category-markup.

Оформление поста

Сейчас, когда мы определились, какой класс мы будем использовать, настало время настроить дизайн. Мы оставим текст таким же ненавязчивым, но изменим цвет названия каждого поста внутри линка в теге <h2 class=»entry-title»>.

Откройте таблицу стилей темы и добавьте следующее:

.blog.category-markup.entry-title a:link,.blog.category-markup.entry-title a:visited {    color: #6cd2c8;}.blog.category-markup.entry-title a:hover,.blog.category-markup.entry-title a:active {    color: #120e5b;}

Мы использовали оттенок cyan для статусов link и visited, и navy для статусов hover и active. Вы самостоятельно можете настроить данные цвета так, чтобы они вписывались в цветовую гамму.

Сейчас вы можете легко сохранить таблицу стилей и обновить страницу. Вы заметите, что у записей из рубрики, которую вы выбрали, будет другой цвет заголовков.

Оформляем записи по рубрикам на главной странице  WordPress веб-сайта

Сейчас добавим ещё пару цветов для иных категорий в блоге:

.blog.category-template-2.entry-title a:link,.blog.category-template-2.entry-title a:visited {    color: #e5572f;}.blog.category-template-2.entry-title a:hover,.blog.category-template-2.entry-title a:active {    color: #120e5b;}.blog.category-media-2.entry-title a:link,.blog.category-media-2.entry-title a:visited {    color: #933bbe;}.blog.category-media-2.entry-title a:hover,.blog.category-media-2.entry-title a:active {    color: #120e5b;}

Опять же, выбирайте цвета в соответствии с стилем оформления. У вас появится несколько различных цветовых оформлений заголовков записей.

Вы также можете добавить рамочку, независимо от изменения цвета:

.blog .category-markup .entry-title {    padding-top: 0.5em;    border-top: 2px #6cd2c8 solid;}.blog .category-template-2 .entry-title {    padding-top: 0.5em;    border-top: 2px #e5572f solid;}.blog .category-media-2 .entry-title {    padding-top: 0.5em;    border-top: 2px #933bbe solid;}

Сейчас заголовок нашего поста имеет в себя тоненькую границу и иное цветовое оформление:

Оформляем записи по рубрикам на главной странице  WordPress веб-сайта

Этот нехитрый прием выделяет различные рубрики веб-сайта для пользователей, но в то же время, не будет слишком броским элементом дизайна.

Заключение

Так как WordPress предлагает теги шаблонов body_class() и post_class(), становится возможным выбрать конкретную страницу на веб-сайте, а потом и конкретный пост в каждой категории для того, чтобы отдельно их оформить.

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

Источник: code.tutsplus.com

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

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