От автора: миниатюра поста WordPress – довольно распространенная функция в темах, но иногда хочется использовать данную возможность в совсем других целях. Иногда при работе на сайтах мне приходилось сталкиваться с тем, что изображения в посте относилось не к теме статьи, а к категории поста. Было бы намного удобнее, если бы я мог назначить категории для всех своих изображений и отображать миниатюры категорий в постах, а не наоборот добавлять изображения под все категории.
Примеры применения:
Когда есть набор постов связанных с брендом, и вы хотите отображать его логотип
Когда посты ассоциируются с некоторым количеством мест, и вы хотите отображать изображение этого места (карту)
Когда посты относятся к разделу сайта (к примеру, изучение сайтостроения), и вы хотите отображать иконку раздела
Когда посты из серии статей (иногда можно встретить на этом сайте), и вы хотите использовать специальное изображение, чтобы однозначно определять серию статей
В этом уроке я воспользуюсь техникой, которую я уже демонстрировал в двух предыдущих статьях:
Применение категорий к вложенным файлам: необходимо будет сделать так, чтобы у каждой категории был свой собственный прикрепляемый файл
Создание миниатюры поста для категории: в этом уроке я рассказал, как создать миниатюру поста для категории и затем отображать ее в архиве постов по категориям. Наш сегодняшний урок немного отличается, мы будем отображать изображения категорий на главной странице блога.
Наш сегодняшний урок состоит из 3 этапов:
Регистрация классификации категорий под вложенные файлы
Создание категорий и добавление изображений
В цикле определять, к какой категории принадлежит пост, и вытягивать с помощью запроса нужное изображение из этой категории
Обратите внимание: Каждому посту можно присвоить только одну категорию, и к каждой категории можно привязать только одно изображение. Также я расскажу, как можно адаптировать нашу технику под другие архивы, такие как пользовательские архивы.
Что нам потребуется
В этом уроке нам потребуется:
Установленный WordPress
Тема для редактирования (я создам дочернюю тему Twenty Fourteen)
FTP доступ (или MAMP или любой другой, если вы работаете локально)
Редактор кода
Устанавливаем файлы темы
Вам потребуется создать или отредактировать существующую тему. Я создам дочернюю тему Twenty Fourteen.
Мои стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Theme Name: Automatic Featured Image Based On Category Theme URI: //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 //bit.ly/14cm0ya Author: Rachel McCollin Author URI: //rachelmccollin.co.uk License: GPL-3.0+ License URI: //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, создайте его и скопируйте код ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php /** * добавляем миниатюры к категориям. */ 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 так, чтобы отображались наши миниатюры категорий. Так же, как и с файлом functions.php, вам необходимо или создать новый, или отредактировать существующий файл index.php. Я создал свой по шаблону index.php, добавив код из content.php из темы Twenty Fourteen. Мой файл выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<?php /** * Основной файл шаблона. * * Основан на `index.php` из TwentyFourteen с отредактированным файлом `content.php`. */ ?> <?php get_header(); ?> <div id="main-content" class="main-content"> <?php if ( is_front_page() && twentyfourteen_has_featured_posts() ) { // подключаем шаблон контента. 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">→</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 } // Отображаем предыдущий / следующий пост. twentyfourteen_paging_nav(); } else { // Если ничего нет, добавляем шаблон "No posts found". get_template_part( 'content', 'none' ); } ?> </div> </div> <?php get_sidebar( 'content' ); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Определяем текущую категорию поста
Для отображения релевантных изображений категорий, необходимо правильно определить категорию, к которой принадлежит текущий пост. Делать это необходимо в цикле. Первым делом, если вы работаете с темой Twenty Fourteen, удалите функцию вывода миниатюр поста. Удалите эту строку:
|
1 |
<?php twentyfourteen_post_thumbnail(); ?> |
Сразу после тега article добавьте код ниже:
|
1 2 3 4 5 |
<?php // Находим первую категорию. $categories = get_the_category(); $category = $categories[ 0 ]->term_id; |
Мы создали переменную $category, в которой хранится ID первой категории поста. Все категории мы вытянули с помощью функции get_the_category().
Создаем аргументы запроса
Эту переменную можно передать в качестве аргумента в запрос. Добавьте код ниже:
|
1 2 3 4 5 6 |
$args = array( 'cat' => $category, 'post_status' => 'inherit', 'post_type' => 'attachment', 'posts_per_page' => '1' ); |
Это значит, что запрос вернет только одно прикрепление в заданной категории. Заметьте, что вам необходимо использовать аргумент post_status. По умолчанию для вложенных файлов ‘post_status’=>’inherit’, а не ‘public’, как для других типов постов. Добавьте сам запрос:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$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(). Если теперь обновить домашнюю страницу блога, то появятся изображения:
Стили для изображений
Откройте файл стилей темы и добавьте стили по своему вкусу. Я сделал так:
|
1 2 3 4 5 6 7 8 9 |
.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, если, конечно, такой у вас есть, т.к. в постах из архива тоже есть миниатюры.
Если вы хотите объединить один или более предыдущих пунктов, то можно создать свой файл с циклом (подключающий миниатюры категорий) и вызывать его в нужных вам файлах шаблонов.
Заключение
Как я подчеркнул выше, может сложиться ситуация, когда вам будет необходимо показать изображение, относящееся к категории, а не к посту. В этом уроке вы узнали, как это можно сделать с помощью добавления категорий к вложенным файлам, определения первой категории каждого поста в цикле и создании запроса на вывод изображения соответствующей категории.
Автор: Rachel McCollin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (1)