- Система шаблонів для категорій
- Як зробити з категорії ілюстрований каталог
- Шаблон для категорії без підкатегорій
- Шаблон для категорій з дочірніми категоріями
- Як прикрутити посторінкову навігацію до шаблону категорії
Всім привіт! сьогодні на 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 (); ?> <? 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 {/ * тут можна задати окремі стилі для посилань * /}
Тепер якщо я відкрию рубрику «Салати», то побачу таке:
Навіть дуже непогано! Але можна зробити і по-другоіму.
Варіант №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 і наповню його наступним кодом:
<! - Виводимо шапку -> <? 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 батьківської категорії.
Стилі я візьму з другого варіанта, трохи підправлю деякі значення і ось що вийде:
По-моєму не погано! Може варто зайнятися і переробити всі сторінки з рубриками. Як ви вважаєте?
Як прикрутити посторінкову навігацію до шаблону категорії
Після численних прохань читачів, вирішив доповнити статтю і розповісти, як прикрутити посторінкову навігацію до конкретного шаблоном категорії.
Варіант №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
Що це таке?
Php get_header (); ?
Gt; <?
Php get_sidebar (); ?
Gt; <?
Php get_footer (); ?
Php get_header (); ?
Php get_sidebars (); ?
Php get_footer (); ?