Використання мініатюр в архівах постів — дуже поширена практика, але не всі знають, що це не єдине застосування. Іноді ми працювали над сайтами, де зображення було прив'язане не до посту, а до категорії, до якої належить цей пост. Було незручно прикріплювати одну і ту ж мініатюру до кожного посту з однієї категорії, хотілося просто призначити свою категорію для кожного зображення, яке потім відображалося б разом з потрібним постом.
У цьому уроці ми розповімо, як автоматично призначати певну мініатюру для кожного посту певної рубрики WordPress. У результаті всі пости однієї рубрики матимуть одну загальну мініатюру, всі пости іншої рубрики — іншу мініатюру, і так далі.
Дивіться також:
- Як задати зображення мініатюри за промовчанням для нових записів WordPress
- Як додати текст поверх зображень мініатюр у WordPress
- Як додати кілька мініатюр зображень до запису WordPress
- Оформляємо пости за рубриками на головній сторінці вашого WordPress сайту
- Як вивести останні пости з кожної рубрики WordPress на одній сторінці
Ось приклад того, що ми зробимо в цьому уроці:
Завантажити вихідні | Подивитись демо
Це не поодинокий випадок. Ось ще приклади того, де можна використовувати загальні мініатюри:
- Коли кожен пост прив'язаний до певного бренду, необхідно, щоб на екран виводився логотип.
- Коли кожен пост пов'язаний з одним або декількома місцями, ви хочете виводити на екран зображення або карту.
- Коли кожен пост належить до певної теми, і ви хочете відображати його разом із іконкою теми.
- Коли на сайті з'являються різні серії постів, і ви хочете використати мініатюри, щоб виділити кожну з них.
У цьому уроці ми будемо використовувати такі методи:
- Призначимо категорії для вкладень: ми повинні зробити так, щоб у кожної категорії було своє вкладення
- Створимо мініатюри для категорій: як приклад ми розглянемо, як створити мініатюри для категорій і потім виводити їх на головній сторінці блогу.
Ми виконаємо три наступні пункти:
- реєстрація категорії для вкладень
- налаштування категорій та прикріплення зображень до них
- визначення категорії посту та виконання запиту для відображення мініатюри
Примітка: Кожен пост буде відноситися тільки до однієї категорії, до кожної категорії буде прикріплена лише одна мініатюра.
Ми також розглянемо, як використовувати цю техніку в роботі з іншими архівними сторінками.
Що вам знадобиться
Для цього уроку вам знадобляться наступні інструменти:
- середовище розробки WordPress
- тему, яку можна редагувати (ми створимо дочірню тему для Twenty Fourteen)
- Доступ FTP (або MAMP, або будь-який інший аналогічний)
- редактор коду
Налаштування файлів теми
Для подальшої роботи вам необхідно створити та редагувати дочірню тему. Ми створюватимемо дочірню тему Twenty Fourteen.
Ось наша таблиця стилів:
/*
Theme Name: Automatic Featured Image Based On Category
Theme URI: http://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms-22664
Version: 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:
License: 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');Таким чином, ми ставимо нашу дочірню тему. Вам також знадобиться створити для вашої теми файли functions.php (якщо вона вже існує, то доведеться просто редагувати) і index.php.
Реєстрація категорій для вкладень
За промовчанням WordPress не дозволяє призначати категорії вкладень, але це легко змінити. Якщо у вашої теми ще немає файлу functions.php, то створіть його та вставте наступний код:
<?php
/**
* Add featured image to category.
*/
function tutsplus_add_attachments_to_categories() {
register_taxonomy_for_object_type( 'category', 'attachment' );
}
add_action( 'init' , 'tutsplus_add_attachments_to_categories' );Збережіть файл і перейдіть до Медіафайли вашої консолі. Ви побачите, що категорії були додані до медіа-підменю:
Прикріплення зображень до категорій
Тепер нам потрібно завантажити зображення та присвоїти кожному з них свою категорію. Підбирайте зображення так, щоб вони гармонійно виглядали на вашому сайті та відповідали тематиці кожної категорії. Якщо до цього ви використовували різні кольори для виділення окремої категорії, то буде доречно підібрати зображення, які в основному використовуватимуть той самий колір.
Ми надали потрібні категорії, тому наша медіа-бібліотека виглядає наступним чином:
Тепер ми додамо кілька постів і надамо їм певні категорії:
Створення файлу index.php
Тепер, коли ми маємо пости з категоріями та їх мініатюрами, необхідно редагувати файл index.php, який відображатиме наші мініатюри.
Налаштування файлу
Ви повинні або редагувати існуючий файл index.php, або додати новий. Ми створили свій на основі шаблону файлу index.php и content.php з теми Twenty Fourteen. Це буде виглядати так:
<?php
/**
* The primary template file.
*
* Based on the `index.php` file from TwentyFourteen, with an edited version of the `content.php` include file from that theme also included here.
*/
?>
<?php get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) { ?>
<div class="entry-meta">
<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
</div>
<?php } ?>
<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
</header>
<div class="entry-content">
<?php
the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) );
wp_link_pages(
array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
)
);
?>
</div>
<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>
</article>
<?php
}
// Display previous / next post navigation.
twentyfourteen_paging_nav();
} else {
// If there is no content, include the "No posts found" template.
get_template_part( 'content', 'none' );
}
?>
</div>
</div>
<?php get_sidebar( 'content' ); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Визначення категорії поточного посту
Для відображення поруч із постом потрібного зображення необхідно визначити, до якої категорії він належить. Причому це потрібно буде зробити в циклі.
Для початку, якщо ви працюєте з Twenty Fourteen, видаліть функцію, яка виводить мініатюри посту, а саме видаліть цей рядок:
<?php twentyfourteen_post_thumbnail(); ?>
Відразу після цього, всередині тега, що відкриваєстаття>, додайте наступне:
<?php // Find the first category the post is in. $categories = get_the_category(); $category = $categories[ 0 ]->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'=>'наслідувати', а не 'громадськістьяк інші типи постів.
Тепер додайте сам запит:
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<div class="category-featured-image">
<?php echo wp_get_attachment_image( $post->ID, 'thumbnail' ); ?>
</div>
<?php
}
}
// Reset postdata to restore ordinal query.
wp_reset_postdata();
?>Це помістить зображення всередину тега DIV з класом category-featured-imageякий можна використовувати для оформлення. Потім буде задіяна функція wp_get_attachment_image()для відображення зображення.
Тепер, якщо ви оновите головну сторінку вашого блогу, побачите всі пости з прикріпленими мініатюрами:
Як ви бачите, у нас на сайті утворилося занадто багато порожнього простору, тож давайте трохи попрацюємо над оформленням.
Налаштування стилів оформлення
Відкрийте таблицю стилів style.css вашої теми та редагуйте все, що вважаєте за потрібне. Ми внесли такі зміни:
.category-featured-image {
float: left;
margin: 10px 2%;
}
.blog .entry-header .entry-title,
.blog .entry-header .entry-meta {
clear: none;
}Тепер наш сайт виглядає так:
Застосування цієї техніки до інших типів контенту
Як ми вже згадували на початку статті, подібним чином ви можете працювати з іншими типами контенту. Наприклад:
- Для постів типу користувача ви можете створити шаблонний файл archive-$posttype.php з таким же циклом, що ми вже описали.
- Якщо ви використовуєте таксономію користувача замість категорій, ви зможете додати "прикріплені" типи постів у вашу таксономію при її реєстрації. Вам потрібно буде замінити функцію get_the_category() на get_the_terms() та аргументи категорії для запиту.
- Ви можете об'єднати дві таксономії, відображаючи зображення однієї таксономії з постами в архіві шаблонів з іншою таксономією.
- Ви можете використовувати аналогічну техніку для файлу archive.php, якщо він є у вашій темі, щоб пости в архівах також відображалися із зображеннями.
- Якщо ви хочете об'єднати кілька із запропонованих варіантів, вам необхідно створити файл із циклом, підключити його до теми та викликати його правильним файлом шаблонів.
Висновок
Сьогодні ви дізналися, як присвоїти окреме зображення кожної категорії на вашому сайті замість того, щоб постійно додавати ті самі мініатюри постам однієї категорії.
Чи практикували ви вже щось подібне у себе на сайті? Чи вам сподобався наш варіант? Обов'язково ділитесь своїми враженнями у коментарях.
Джерело: code.tutsplus.com
Коментарі до запису: 2
матеріал цікавий але, напевно, для більш просунутих користувачів, ніж я. Smiruponitke13.ru
А чи можна призначати мініатюри до товарів на woocommerce?
Тобто, той самий принцип… До кожної категорії товарів прикріплюється своє зображення.