Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

WordPress: вывод и оригинальное оформление рубрик (категорий) записей

Категории (рубрики) записей в одной из самых популярных бесплатных систем управления сайтом — WordPress можно оригинально оформить, выделив их разным цветом или же добавив к ним соответствующие иконки. Ни для кого не секрет, что при умеренном использовании инфографики, дизайн сайта улучшается как с эстетической, так и с практической точки зрения.

WordPress: вывод и оригинальное оформление рубрик (категорий) записей
Содержание статьи

Добавление рубрик записей в WordPress

wordpress-add-new-categoryПрежде всего, для нашей задачи потребуется наличие рубрик записей, которые можно добавить в системе администрирования в разделе «Записи» — «Рубрики». Самые главные два поля, которые обязательны к заполнению это:

  • название рубрики;
  • ярлык.

Название определяет, как элемент будет отображаться на вашем сайте. «Ярлык» — это вариант названия, подходящий для URL. Обычно ярлык содержит только латинские буквы в нижнем регистре, цифры и дефисы.

Из названия ярлыка должно быть сразу понятно, о какой рубрике идет речь, таким образом не пострадает ни ЧПУ, ни эстетическая сторона вопроса. Более того, дополнительное ключевое слово в адресе страницы никогда не помешает при продвижении в поисковых системах. Например, так:

http://makeasite.ru/category/programming

Ярлык для рубрики можно придумать двумя способами:

Присвоение рубрик каждой записи блога

wordpress-check-category-widgetСледующим шагом (если это еще не сделано) будет присвоение одной или нескольких соответствующих рубрик для каждой записи вашего блога под управлением WordPress. Процедура это довольно простая, но при условии, что делалось это постепенно, по мере заполнения блога статьями. Если же ситуация запущена и вы этого не делали, а статей уже будь здоров, то все-таки придется потратиться какое-то время, потому что присвоение рубрик каждой записи блога — вопрос довольно важный, как в плане продвижения, так и в плане удобства пользовательского интерфейса.

С другой стороны, предугадать заранее со 100% точностью, какие именно рубрики будут присутствовать у вас на сайте тоже довольно сложно. Иногда проще сначала написать 100 статей, а потом, на основании анализа каталогизировать их с большей точностью и актуальностью, чем если бы это было сделано авансом.

Каждая запись может относиться к одной или сразу к нескольким рубрикам, например текущая статья относится сразу к трем рубрикам нашего блога:

  • HTML-верстка;
  • Дизайн;
  • Программирование.

Очевидно, что рубрики довольно отличаются друг от друга тематикой, но кто поспорит с тем, что все они подходят для данной статьи?

Вывод рубрик в шаблоне WordPress

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

Остается лишь добавить, что все зависит от того, какой именно шаблон используется. Вариантов может быть несколько:

  • самописный шаблон;
  • стандартный шаблон, который шел в комплекте с дистрибутивом;
  • шаблон, скачанный из интернета.

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

Вывод рубрик в списке анонсов записей

wordpress-anatomyШаблон списка анонсов записей в WordPress используется сразу в нескольких файлах активной темы:

  • archive.php — архив записей за определенный день, месяц или год (при клике на активные ссылки календаря);
  • index.php — главная страница блога, в случае, если в настройках активирован вывод анонсов («Настройки» — «Чтение» — «На главной странице отображать» — «Ваши последние записи»);
  • search.php — страница с результатами поиска;
  • tag.php — страница с записями, которым присвоена выбранная метка (тег) в виджете «Облако тегов».

Как видите, страниц, на которых выводится список анонсов записей довольно много. Их шаблон отличается от шаблона открытой записи (single.php), хотя принцип работы тот же. Для вывода списка категорий вам нужно воспользоваться функцией get_the_category(), результатом работы которой является объект.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?
	$resultCategories = '';
	foreach(get_the_category() as $category) {
		$resultCategories .= (!$resultCategories ? '' : ', ').'<a rel="nofollow" class="'.$category->slug.'" href="/category/'.$category->slug.'">'.$category->cat_name.'</a>';
	}
?>
	<?=($resultCategories ? '<div class="categories">'.$resultCategories.'</div>' : '')?>
<?php endwhile; endif; ?>

В нашем случае к ссылкам добавлен атрибут rel="nofollow", так как индексация подобных страниц нам не нужна для ускорения индексации сайта. Яндекс рекомендует в первую очередь удалять из индекса технические страницы, цитата:

Запретите в файле robots.txt индексирование страниц, неинтересных пользователям. Например, формы ответа на форуме, статистику посещений, страницы с результатами поиска, сайты-зеркала, документы на нераспространенных в рунете языках.

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

Вывод рубрик открытой записи в single.php

Если в предыдущем случае, когда мы рассматривали вывод списка анонсов записей, для этого использовалось несколько различных файлов шаблона, то за вывод открытой записи отвечает только один файл и называется он single.php. Располагается он так же, в активной теме, которая выбрана в настройках.

Надо сказать, что метод вывода рубрик, которые сопоставлены с открытой записью ничем не отличается от предыдущего и также осуществляется внутри цикла (см. предыдущую главу).

Оригинальное оформление рубрик записей WordPress

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

Оформление с помощью фонового цвета

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

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

.categories a {
	text-decoration: none;
	display: inline-block;
	color: #fff;
	padding: 0 7px;
	background: #ccc;
	border-radius: 3px;
	font-size: 13px;
}
.categories .html-layout {
	background: #66ccff;
}
.categories .seo {
	background: #66cc00;
}
.categories .design {
	background: #ff6600;
}

Как видите, использование ярлыков рубрик в качестве имени класса — очень удобный способ, позволяющий довольно просто уникализировать каждую категорию на свой вкус. Сначала мы установили серый цвет в качестве фона по умолчанию, а далее он переопределяется для каждой рубрики отдельно. Это удобно тем, что если для какой-то рубрики цвет еще не придуман или не добавлен в CSS, она будет отображаться с серым фоном.

Оформление с помощью соответствующих иконок

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

.categories a {
	display: inline-block;
	padding: 0 0 0 30px;
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	font-size: 13px;
}
.categories .html-layout {
	background-image: url(/i/html-layout-category-icon.png);
}
.categories .seo {
	background-image: url(/i/seo-category-icon.png);
}
.categories .design {
	background-image: url(/i/design-category-icon.png);
}


Предыдущая статья:
Конкурс от Яндекс: «Естественная ссылка — 2015»

Читайте также:
Увеличение фрагмента изображения при наведении курсора мышки

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»