Шаблоны для категорий (рубрик) WordPress

Главная » Создание блога » Настройка Wordpress » Шаблоны для категорий WordPress. Как сделать каталог из рубрики

Шаблоны для категорий WordPress. Как сделать каталог из рубрики

2014-06-17 автор: Виталий Кириллов

Всем привет! Сегодня на seo-mayak.com мы научимся создавать шаблоны для страниц категорий или рубрик, как угодно, на популярной CMS WordPress.

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

О чем это я? Всем известно, что WordPress формирует страницы категорий в виде анонсов записей, где выводятся 5 или более анонсов, в зависимости от настроек.

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

shablony kategoriy

Вот я и решил сделать из данной статьи наглядное пособие по созданию иллюстрированных каталогов из страниц с категориями.

Кроме того я обещал одному моему постоянному читателю помочь с оформлением рубрик на его сайте с кулинарной тематикой, хотя я уверен, что данный материал будет полезен для многих веб-мастеров. Поехали!

Система шаблонов для категорий

Не так давно вышла моя статья, где я описал два способа создания шаблонов страниц и один из способов основывался на иерархии файлов. Что это такое?

В WordPress заложена логика, исходя из которой формируется «семейка» файлов, где каждый член семьи знает свое место. Помните детскую сказку про репку — «Дедка за репку, бабка за дедку, внучка за бабку» и т.д.

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

Иерархия файлов-шаблонов для категорий (рубрик) выглядит следующим образом:

category-slug.php -> category-id.php -> category.php -> archive.php -> index.php

Теперь давайте разберемся, что за цепочку файлов я здесь привел.

category-slug.php — данный файл имеет наивысший приоритет в иерархической системе шаблонов категорий, где sung — это условное название рубрики, вернее ее ярлык.

Давайте рассмотрим такой пример. Допустим рубрика называется «Мясные блюда». Для того, чтобы узнать какой у нее ярлык, надо пройти: адимн-панель -> Рубрики и кликнуть по названию нужной категории. На открывшейся странице мы увидим поле «Ярлык»:

shablon kategorii

Если мы создадим файл и таким названием:

category-myasnye-blyuda.php

И поместим его в корень темы, туда, где находятся файлы header.php, single.php, sidebar.php и т.д, то именно к нему в первую очередь обратится WordPress при выводе страницы с рубрикой «Мясные блюда».

category-id.php — файл, занимающий второе место в иерархической цепочке, в название которого входит ID страницы.

Многое я уже описал статье про шаблоны страниц, ссылку на которую я приводил выше, поэтому не буду повторятся.

category.php — файл, занимающий третье место в иерархической системе приоритетов. Файл с таким названием довольно часто используется разработчиками шаблонов WordPress. Именно на него возлагают функцию вывода всех страниц с категориями.

archive.php — данный файл занимает четвертое место в иерархии файлов-шаблонов и также довольно часто используется в темах WordPress. Но моем блоге именно archive.php отвечает за вывод рубрик.

index.php — файл, замыкающий на себе все иерархический цепочки файлов-шаблонов, будь-то шаблоны для главной или статической страниц, страниц категорий и т.д. И это понятно, ведь самые простейшие шаблоны могут состоять всего из двух файлов: index.php и файла стилей style.css.

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

Как сделать из категории иллюстрированный каталог

Создаем файл category-sung.php или category-id.php, кому как нравится, я для примера создам на своем кулинарном блоге файл category-salaty.php. Далее наполняем файл тегами шаблона, такими как:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Следующим шагом вставляем индивидуальные стили, отвечающие за дизайн страницы, например:

<?php get_header(); ?>

<div class="span-24" id="contentwrap">
<div class="span-16">
<div id="content">

<!--Здесь будет код вывода категории-->

</div>
</div>

<?php get_sidebars(); ?>

</div>

<?php get_footer(); ?>

У вас наверняка другие кассы и идентификаторы. Посмотрите как прописаны стили и теги в файлах page.php, single.php и т.д. В общем придется поэкспериментировать, чтобы достичь корректного отображения страницы. Все эксперименты советую проводить на Денвере.

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

Шаблон для категории без подкатегорий

Итак, если у категории нет дочерних категорий, то код шаблона будет выглядеть так:

<!--Выводим шапку-->
<?php get_header(); ?>
<!--Индивидуальные стили-->
<div class="span-24" id="contentwrap">
<div class="span-16">
<div id="content">
<!--Заголовок рубрики-->
<h2><?php single_cat_title(); ?></h2>
<!--Код вывода заголовков постов из категории с миниатюрами-->
<div class="katalog">
<ul><?php query_posts('category__in=625&showposts=100'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(80,70)); ?></a>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><br/>
</li>
<?php endwhile; ?>
</ul>
</div>
<!--Конец кода вывода постов из категории-->
</div>
</div>
<!--Тег вывода сайдбара-->
<?php get_sidebars(); ?>
</div>
<!--Конец индивидуальных стилей-->
<!--Тег вывода подвала-->
<?php get_footer(); ?>

Хочу обратить Ваше внимание на несколько строчек:

Строчка №10.

<div class="katalog">

На этой строчки прописан css класс, для которого в файле style css надо прописать стили. Данный класс распространяется на все заголовки постов и миниатюры на странице.

Строчка №11.

<ul><?php query_posts('category__in=625&showposts=100'); ?>

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

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

Сейчас же я хочу отметить два момента:

1. category__in=625

Здесь надо указать ID категории из которой будут выводится информация category__in=625, где 625 — ID категории. Также можно вывести посты из нескольких рубрик, для этого надо прописать ID соответствующих категорий через запятую — category__in=625,344,555.

2. showposts=100

Здесь задается количество постов для вывода на странице, где 100 — количество постов. Если не прописывать данное значение, то функция query_posts() возьмет его из настоек WordPress, но потом не надо удивляться, что на странице будет отображаться всего 5 — 10 постов.

Строчка №14.

<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(120,100)); ?></a>

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

<?php the_post_thumbnail(array(120,100)); ?>

Но обратить Ваше внимания я хотел совсем на другое. В функции the_post_thumbnail() в качестве параметра заданы размеры миниатюры —(array(120,100)), которые можно изменить на свое усмотрение.

Закидываем созданный файл в корень темы и теперь в файле style.css нам надо прописать стили для класса .katalog. Рассмотрим два варианта:

Вариант№1. Если стоит задача вывести миниатюры в несколько рядов и чтобы при этом заголовки располагались под картинками, в виде ссылок, то стили должны выглядеть так:

.katalog { /* общие стили для блока */
width: 99%; /* общая ширина блока */
margin: 0 auto; /* внешние отступы сверху и снизу, а также выравнивание по центру */
}
.katalog li{ /* стили для элементов списка */
float: left; /* миниатюры располагаются слева от соседней */
height: 150px; /* высота ячейки с миниатюрой и заголовком */
width: 120px; /* ширина ячейки */
margin: 5px 10px 0 0; /* внешние отступы сверху и справа от ячейки */
overflow:hidden; /* скрываем все что не поместилось в ячейку */
}
.katalog img{
/* здесь можно задать отдельные стили для миниатюр */
}
.katalog a{
/* здесь можно задать отдельные стили для ссылок */
}

Теперь если я открою рубрику «Салаты», то увижу следующее:

shablon kategoriy1

Очень даже не плохо! Но можно сделать и по-другоиму.

Вариант №2. Немного подправим стили и миниатюры расположатся столбиков в два ряда:

.katalog li{
float:left; 
height:70px;
margin-right:20px;
margin-top:1px;
overflow:hidden;
width:250px;
list-style-type: none;
}
.katalog {
width: 700px;
margin: 0 auto;
}
.katalog ul{
margin-bottom: 10px;
padding-left: 20px !important;
display: inline-block;
}
.katalog a{
font-size:14px;
color:#0000CC;
text-decoration: none;
}
.katalog img{
float: left;
border-radius: 10px;
border: 2px solid #ccc;
margin-right: 10px;
}
.katalog a:hover{
color:#FF2B2B;
}

Вуаля:

shablon kategoriy2

Здесь я не стал комментировать предназначение тех или иных селекторов и их значений. Если что не понятно, спрашивайте в комментариях. Идем дальше.

Шаблон для категорий с дочерними категориями

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

Для примера я возьму категорию со своего блога, которая называется «Создание блога». По схеме, описанной выше, создам файл category-sozdanie-bloga.php и наполню его следующим кодом:

<!--Выводим шапку-->
<?php get_header(); ?>
<!--Индивидуальные стили-->
<div class="span-24" id="contentwrap">
<div class="span-16">
<div id="content">
<!--Заголовок рубрики-->
<h2><?php single_cat_title(); ?></h2>
<!--Код вывода заголовков постов с миниатюрами-->
<div class="katalog">
<?php
$cat_args=array(
'child_of' => 10,
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($cat_args);
foreach($categories as $category) {
$args=array(
'showposts' => -1,
'category__in' => array($category->term_id),
'caller_get_posts'=>1
);
$posts=get_posts($args);
if ($posts) {
echo '<h2>'.$category->name.'</h2> ';
foreach($posts as $post) {
setup_postdata($post); 
?>
<ul>
<li> 
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(80,70)); ?></a>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><br/>
</li>
</ul>
<?php
} 
} 
} 
?>
</div>
<!--Конец кода вывода постов из категории-->
</div>
</div>
<!--Тег вывода сайдбара-->
<?php get_sidebars(); ?>
</div>
<!--Конец индивидуальных стилей-->
<!--Тег вывода подвала-->
<?php get_footer(); ?>

Обратите внимание на строчку №13:

'child_of' => 10,

Здесь надо указать ID родительской категории.

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

shablon kategoriy3

По-моему не плохо! Может стоит заняться и переделать все страницы с рубриками. Как Вы считаете?

Как прикрутить постраничную навигацию к шаблону категории

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

Вариант №1. Шаблон для категории без подкатегорий.

<!--Выводим шапку-->
<?php get_header(); ?>
<!--Индивидуальные стили-->
<div class="span-24" id="contentwrap">
<div class="span-16">
<div id="content">
<!--Заголовок рубрики-->
<h2><?php single_cat_title(); ?></h2>
<!--Код вывода заголовков постов из категории с миниатюрами-->
<div class="katalog">
<ul><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(80,70)); ?></a>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><br/>
</li>
<?php endwhile; else: ?>
<h3><?php _e('К сожалению, по Вашему запросу ничего не найдено.'); ?></h3>
<?php endif; ?>
</ul>
<!--КОД ВЫВОДА ПОСТРАНИЧНОЙ НАВИГАЦИИ-->
</div>
<!--Конец кода вывода постов из категории-->
</div>
</div>
<!--Тег вывода сайдбара-->
<?php get_sidebars(); ?>
</div>
<!--Конец индивидуальных стилей-->
<!--Тег вывода подвала-->
<?php get_footer(); ?>

Код вывода постраничной навигации должен вставляется в помеченную мной строчку №20.

Я изменил цикл вывода статей на стандартный цикл WordPress и теперь все параметры настроек должны прописываться в отдельной функции.

Например, изменим заданное в админке количество анонсов на желаемое количество для конкретной категории.

Для этого в файл functuons.php вставляем такую функцию:

add_action( 'pre_get_posts', 'mayak_category_announcement' ); 
function mayak_category_announcement( $query ) {
	if ($query->is_main_query() && is_category(7))  
		$query->set( 'posts_per_page', 5 );
	}

В строчке №3, в условном теге is_category(), надо указать ID категории, на которое будет распространяться данное событие. Если ID не указать, то настройка будет применяться ко всем категориям.

В строчке №4, в качестве значения аргумента posts_per_page ставим желаемое количество отображаемых анонсов.

Теперь все должно работать. На этом все!

Кстати, кому интересно понять анатомию создания категорий на WordPress, прошу сюда.

Как выводить рубрики WordPress — все аргументы функции wp_list_categories().

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

До встречи!

С уважением, Виталий Кириллов

Статьи по теме:

Редактор для категорий (рубрик), меток и произвольных таксономий
Title, description, keywords и h1 для категорий (рубрик) WordPress
Картинки для категорий (рубрик) — изображения WordPress

Интересное на блоге

Комментарии: 146

Дмитрий:

2015-02-10

Здравствуйте. Не подскажете как вывести на странице категории только ссылки на дочерние категории?

Ответить

Виталий Кириллов:

2015-02-11

Здравствуйте Дмитрий! Как-то так:

<!--Начало вывода дочерних категорий-->
<div class="katalog4">
<?php
$cat_args=array(
'child_of' => 0,
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($cat_args);
foreach($categories as $category) {
$args=array(
'showposts' => -1,
'category__in' => array($category->term_id),
'caller_get_posts'=>1
);
$posts=get_posts($args);
if ($posts) {
foreach($posts as $post) {
setup_postdata($post); 
?>
<ul>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><br/>
</li>
</ul>
<?php
} 
} 
} 
?>
 </div>
<!--Конец вывода дочерних категорий-->

Ответить

Дмитрий:

2015-02-11

Выводит только список всех сообщений…

Ответить

Виталий Кириллов:

2015-02-11

Ах вон оно что) Сори, сразу не понял. Ну тогда как-то так:

<?php
if ( !empty($cat) ) :
  $parent_cat = get_category($cat);
  $output = "<p>Рубрики раздела {$parent_cat->name}($cat):</p>";
  $args = array(
    'title_li' => null,
    'child_of' => $cat,
    'depth' => 1,
    'echo' => 0,
    'hide_empty' => 0,
    'show_count' => 0,
  );
  $output .= wp_list_categories($args);
  print $output;
endif;
?>

Ответить

Дмитрий:

2015-02-11

Все как надо, спасибо!

Ответить

сергей:

2016-08-06

Ответьте пожалуйста на мои вопросы

Ответить

Виталий Кириллов:

2016-08-08

Вот мой css код.

.katalog4 li{
float:left;
height:80px;
margin-right:20px;
margin-top:1px;
overflow:hidden;
width:300px;
list-style-type: none;
}
.katalog4 {
width: 700px;
margin: 0 auto;
}
.katalog4 ul{
margin-bottom: 10px;
padding-left: 20px !important;
display: inline-block;
}
.katalog4 a{
font-size:14px;
color:#0000CC;
}
.katalog4 img{
float: left;
border-radius: 10px;
border: 2px solid #ccc;
margin-right: 10px;
}
.katalog4 a:hover{
color:#FF2B2B;
}
.katalog4 h3 a{
font-size:18px;
}
.rubpiki h2{
font-size:24px;
font-weight:bold;
text-align:center;
text-decoration:underline;
margin:10px 0 30px 0;
}

Ответить

Дмитрий:

2019-01-24

Спасибо за статью!
А как отключить стандартный вывод записей в категориях? Они выводятся списком.

Ответить
- Виталий Кириллов:
  
  2019-01-24
  
  Ответ тут.
  
  Ответить