Від автора: мініатюра поста WordPress – досить поширена функція в темах, але іноді хочеться використовувати дану можливість в зовсім інших цілях. Іноді при роботі на сайтах мені доводилося стикатися з тим, що зображення в пості відносилося не до теми статті, а до категорії посади. Було б набагато зручніше, якби я міг призначити категорії для всіх своїх зображень і відображати мініатюри категорій в постах, а не навпаки додавати зображення під всі категорії.
Приклади застосування:
Коли є набір постів пов’язаних з брендом, і ви хочете відображати його логотип
Коли посади асоціюються з певною кількістю місць, і ви хочете відображати зображення цього місця (карту)
Коли пости відносяться до розділу сайту (наприклад, вивчення сайтобудування), і ви хочете відображати іконку розділу
Коли пости з серії статей (іноді можна зустріти на цьому сайті), і ви хочете використовувати спеціальне зображення, щоб однозначно визначати серію статей
У цьому уроці я скористаюся технікою, яку я вже демонстрував у двох попередніх статтях:
Застосування категорій до вкладених файлів: необхідно буде зробити так, щоб у кожній категорії був свій власний прикріплюється файл
Створення мініатюри поста для категорії: у цьому уроці я розповів, як створити мініатюру поста для категорії і потім відображати її в архіві посад за категоріями. Наш сьогоднішній урок трохи відрізняється, ми будемо відображати зображення категорій на головній сторінці блогу.
Наш сьогоднішній урок складається з 3 етапів:
Реєстрація класифікації категорій під вкладені файли
Створення категорій і додавання зображень
У циклі визначати, до якої категорії належить пост, і витягати за допомогою запиту потрібне зображення з цієї категорії
Зверніть увагу: Кожному посту можна присвоїти тільки одну категорію, і до кожної категорії можна прив’язати тільки одне зображення. Також я розповім, як можна адаптувати нашу техніку під інші архіви, такі як користувальницькі архіви.
Що нам потрібно
У цьому уроці нам буде потрібно:
Встановлений WordPress
Тема для редагування (я створю дочірню тему Twenty Fourteen)
FTP доступ (або MAMP або будь-який інший, якщо ви працюєте локально)
Редактор коду
Встановлюємо файли теми
Вам потрібно створити або відредагувати існуючу тему. Я створю дочірню тему Twenty Fourteen.
Мої стилі:
/*
Theme Name: Automatic Featured Image Based On Category
Версія: 1.0.0
Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at http://bit.ly/14cm0ya
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk
Ліцензія: GPL-3.0+
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Domain Path: /lang
Text Domain: tutsplus
Template: twentyfourteen
*/
@import url(‘../twentyfourteen/style.css’);
Таким чином, я зробив свою тему дочірньої від Twenty Fourteen. Якщо ви хочете ознайомитися з процесом створення дочірніх тим, пройдіть по посиланню Codex. Також для теми необхідно створити файл functions.php (або відредагувати існуючий, якщо він у вас вже є), а також створити файл index.php.
Реєстрація категорій під вкладені файли
За замовчуванням WordPress не можна пов’язувати категорії з прикреплениями, але це легко виправити. Якщо у вас в темі ще немає файлу functions.php створіть його та скопіюйте код нижче:
Збережіть файл і перейдіть на вкладку Медіа файли. У випадаючому меню ви помітите новий пункт «категорії».
Додавання зображень категорій
Тепер необхідно завантажити декілька зображень і присвоїти їм свої категорії. Те, які завантажувати зображення, залежить від спрямованості вашого сайту: у мене категорії по кольорах, так що я взяв зображення з цими квітами. Я присвоїв зображень відповідні категорії. Ось так тепер виглядає моя вкладка Медіа бібліотека:
Тепер необхідно додати кілька постів і прив’язати до них наші категорії:
Створюємо файл index.php
Пости і категорії ми створили, тепер необхідно відредагувати файл index.php так, щоб відображались наші мініатюри категорій. Так само, як і з файлом functions.php вам необхідно або створити новий, або відредагувати існуючий файл index.php. Я створив свій за шаблоном index.php, додавши код content.php з теми Twenty Fourteen. Мій файл виглядає так:
‘, ‘
‘); ?>
wp_link_pages(
array(
‘before’ => ‘
‘after’ => ‘
‘,
‘link_before’ => ‘‘,
‘link_after’ => ‘‘,
)
);
?>
‘, “, ‘‘ ); ?>
Визначаємо поточну категорію поста
Для відображення релевантних зображень категорій, необхідно правильно визначити категорію, до якої належить поточний пост. Робити це необхідно в циклі. Насамперед, якщо ви працюєте з темою Twenty Fourteen, видалите функцію виведення мініатюр посту. Видалити цей рядок:
Відразу після тега article додайте наступний код:
term_id;
Ми створили змінну $category, в якій зберігається ID першої категорії посади. Всі категорії ми витягли з допомогою функції get_the_category().
Створюємо аргументи запиту
Цю змінну можна передати в якості аргументу на запит. Додайте наступний код:
$args = array(
‘cat’ => $category,
‘post_status’ => ‘inherit’,
‘post_type’ => ‘attachment’,
‘posts_per_page’ => ‘1’
);
Це означає, що запит поверне тільки одне прикріплення до заданої категорії. Зауважте, що вам необхідно використовувати аргумент post_status. За замовчуванням для вкладених файлів ‘post_status’=>’inherit’, а не ‘public’, як для інших типів посад. Додайте сам запит:
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
Зображення поміститься у DIV з класом category-featured-image, стилі до цього класу можете додати самі. Для відображення зображення використовується функція wp_get_attachment_image(). Якщо тепер оновити домашню сторінку блогу, то з’являться зображення:
Стилі для зображень
Відкрийте файл стилів теми і додайте стилі по своєму смаку. Я зробив так:
.category-featured-image {
float: left;
margin: 10px 2%;
}
.blog .entry-header .entry-title,
.blog .entry-header .entry-meta {
clear: none;
}
Зображення притискається до лівому верхньому куті поста:
Адаптація техніки під інші типи вмісту
Цю техніку можна застосувати і для інших типів контенту. Наприклад:
Для користувацького типу постів. Для вашого типу необхідно створити файл шаблону archive-$posttype.php з таким же циклом, як у нас вище.
Якщо замість категорій ви використовуєте свою класифікацію. При першій реєстрації нового типу постів ‘attachment’ необхідно додати його в вашу класифікацію. І потім замінити функцію get_the_category() на get_the_terms(), і відповідно аргументи в запиті на аргументи з вашої класифікації.
Можна комбінувати дві класифікації і відображати зображення з однієї, а сам пост з архіву з іншої класифікації. Посилання зображень можна вказувати на сторінку архіву класифікації.
Підхід з попереднього пункту можна застосувати у файлі archive.php, якщо, звичайно, такий у вас є, т. к. в постах з архіву теж є мініатюри.
Якщо ви бажаєте об’єднати один або більше попередніх пунктів, то можна створити свій файл з циклом (підключає мініатюри категорій) і викликати його в потрібних вам файлах шаблонів.
Висновок
Як я підкреслив вище, може скластися ситуація, коли вам буде необхідно показати зображення, що відноситься до категорії, а не до посту. У цьому уроці ви дізналися, як це можна зробити з допомогою додавання категорій до вкладених файлів, визначення першої категорії кожного поста в циклі і створення запиту на виведення зображення відповідної категорії.
