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

1. Система шаблонів для категорій
2. Як зробити з категорії ілюстрований каталог
3. Шаблон для категорії без підкатегорій
4. Шаблон для категорій з дочірніми категоріями
5. Як прикрутити посторінкову навігацію до шаблону категорії

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

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

Про що це я? Всім відомо, що WordPress формує сторінки категорій у вигляді анонсів записів, де виводяться 5 або більше анонсів, в залежності від налаштувань.

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

Ось я і вирішив зробити з даної статті наочний посібник зі створення ілюстрованих каталогів зі сторінок з категоріями.

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

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

Не так давно вийшла моя стаття, де я описав два способи створення шаблонів сторінок і один із способів грунтувався на ієрархії файлів. Що це таке?

У WordPress закладена логіка, виходячи з якої формується «сімейка» файлів, де кожен член сім'ї знає своє місце. Пам'ятаєте дитячу казку про ріпку - «Дід за ріпку, бабка за діда, внучка за бабку» і т.д.

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

Ієрархія файлів-шаблонів для категорій (рубрик) виглядає наступним чином:

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

Тепер давайте розберемося, що за ланцюжок файлів я тут навів.

category-slug.php - даний файл має найвищий пріоритет в ієрархічній системі шаблонів категорій, де sung - це умовна назва рубрики, вірніше її ярлик.

Давайте розглянемо такий приклад. Припустимо рубрика називається «М'ясні страви». Для того, щоб дізнатися який у неї ярлик, треба пройти: адімн-панель -> Рубрики та клікнути по назві потрібної категорії. На сторінці, ми побачимо поле «Ярлик»:

Якщо ми створимо файл і такою назвою:

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 (); ?&gt; <? Php get_sidebar (); ?&gt; <? Php get_footer (); ?>

Наступним кроком вставляємо індивідуальні стилі, що відповідають за дизайн сторінки, наприклад:

<? Php get_header (); ?> <Div class = "span-24" id = "contentwrap"> <div class = "span-16"> <div id = "content"> <! - Тут буде код виведення категорії -> </ div > </ div&gt; <? php get_sidebars (); ?> </ Div&gt; <? Php get_footer (); ?>

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

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

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

Отже, якщо у категорії немає дочірніх категорій, то код шаблону буде виглядати так:

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

Хочу звернути Вашу увагу на кілька рядків:

Рядок №10.

<Div class = "katalog">

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

Рядок №11.

<Ul&gt; <? 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() ?> "&gt; <? 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 {/ * тут можна задати окремі стилі для посилань * /}

Тепер якщо я відкрию рубрику «Салати», то побачу таке:

Навіть дуже непогано! Але можна зробити і по-другоіму.

Варіант №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; }

вуаля:

Тут я не став коментувати призначення тих чи інших селекторів і їх значень. Якщо щось не зрозуміло, питайте в коментарях. Йдемо далі.

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

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

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

<! - Виводимо шапку -&gt; <? Php get_header (); ?> <! - Індивідуальні стилі -> <div class = "span-24" id = "contentwrap"> <div class = "span-16"> <div id = "content"> <! - Тема рубрики -> <h2&gt; <? php single_cat_title (); ?> </ H2> <! - Код виведення заголовків постів зі слайдами -> <div class = "katalog"&gt; <? 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() ?> "&gt; <? Php the_post_thumbnail (array (80,70)); ?> </a> <a href="<?php the_permalink() ?> "rel =" bookmark "&gt; <? Php the_title (); ?> </a> <br/> </ li> </ ul&gt; <? Php}}}?> </ Div> <! - Кінець коду виведення постів з категорії -> </ div> </ div > <! - Тег виведення сайдбара -&gt; <? php get_sidebars (); ?> </ Div> <! - Кінець індивідуальних стилів -> <! - Тег виведення підвалу -&gt; <? Php get_footer (); ?>

Зверніть увагу на рядок №13:

'Child_of' => 10,

Тут треба вказати ID батьківської категорії.

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

По-моєму не погано! Може варто зайнятися і переробити всі сторінки з рубриками. Як ви вважаєте?

Як прикрутити посторінкову навігацію до шаблону категорії

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

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

<! - Виводимо шапку -&gt; <? Php get_header (); ?> <! - Індивідуальні стилі -> <div class = "span-24" id = "contentwrap"> <div class = "span-16"> <div id = "content"> <! - Тема рубрики -> <h2&gt; <? php single_cat_title (); ?> </ H2> <! - Код виведення заголовків постів з категорії зі слайдами -> <div class = "katalog"> <ul&gt; <? Php if (have_posts ()): while (have_posts ()): the_post (); ?> <Li> <a href="<?php the_permalink() ?> "&gt; <? Php the_post_thumbnail (array (80,70)); ?> </a> <a href="<?php the_permalink() ?> "rel =" bookmark "&gt; <? Php the_title (); ?> </a> <br/> </ li&gt; <? Php endwhile; else:?> <h3&gt; <? php _e ( 'На жаль, по Вашому запиту нічого не знайдено.'); ?> </ H3&gt; <? Php endif; ?> </ Ul> <! - КОД ВИВЕДЕННЯ посторінкового навігації -> </ div> <! - Кінець коду виведення постів з категорії -> </ div> </ div> <! - Тег виведення сайдбара- -&gt; <? php get_sidebars (); ?> </ Div> <! - Кінець індивідуальних стилів -> <! - Тег виведення підвалу -&gt; <? 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