Шаблоны для категорий (рубрик) 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
  
  Ответ тут.
  
  Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Открыть преобразователь

» Подписаться на комментарии по RSS

SEO Маяк

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

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

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

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

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

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

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

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

Оставить комментарий

Рубрики

Популярное на блоге

Без плагинов

Содержание статьи