Автоматическое добавление миниатюр изображений к постам одной рубрики в WordPress

Использование миниатюр в архивах записей — распространенная практика, но не все знают, что это не единственное их применение. Иногда мы работали над веб-сайтами, где изображение было привязано не к самому посту, а к категории, к которой принадлежит этот пост. Было неудобно прикреплять одну и ту же миниатюру к каждому посту из одной категории, хотелось просто назначить категорию для каждого картинки, которое бы потом отображалось вместе с нужным постом.

В этом уроке мы расскажем, как автоматически назначать определенную миниатюру для каждого поста определенной рубрики WordPress. В результате, все записи одной рубрики будут иметь одну общую миниатюру, все записи другой рубрики — другую миниатюру, и так далее.

Смотрите также:

  • Как задать изображение миниатюры по умолчанию для новых записей WordPress
  • Как добавить текст поверх картинок миниатюр в WordPress
  • Как добавить пару миниатюр картинок к записи в WordPress
  • Оформляем записи по рубрикам на главной странице WordPress веб-сайта
  • Как вывести последние записи из каждой рубрики WordPress на одной странице

Вот пример того, что мы сделаем в этом уроке:

Автоматическое добавление миниатюр картинок к записям одной рубрики в WordPress

Скачать исходники | Посмотреть просмотр

Это не единичный случай. Вот ещё примеры того, где вы можете без проблем использовать общие миниатюры:

  • Когда каждый пост привязан к определенному бренду, и надо, чтобы на экран отображался логотип.
  • Когда каждый пост связан с одним или несколькими местами, и вы хотели бы отображать на экран изображение или карту.
  • Когда каждый пост относится к определенной теме, и вы хотели бы выводить его вместе с иконкой темы.
  • Когда на веб-сайте появляются различные серии записей, и вы хотели бы использовать миниатюры, чтобы выделить каждую из них.

В этом уроке мы будем использовать следующие способы:

  • Назначим категории для вложений: мы должны сделать так, чтобы у каждой категории было ваше вложение.
  • Создадим миниатюры для категорий: в виде примера мы рассмотрим, как создать миниатюры для категорий и потом отображать их на главной странице блога.

Мы выполним три следующих пункта:

  1. регистрация категории для вложений
  2. параметр категорий и прикрепление картинок к ним
  3. определения категории поста и выполнение запроса для выведения миниатюры

Примечание: Каждый пост будет относиться только к одной категории, к каждой категории будет прикреплена только одна миниатюра.

Мы также рассмотрим, как применить эту технику в работе с иными архивными страницами.

Что вам понадобится

Для прохождения этого урока вам понадобятся следующие инструменты:

  • среда разработки WordPress
  • тема, которую вы можете редактировать(мы создадим дочернюю тему для Twenty Fourteen)
  • Доступ FTP(или MAMP, или любой другой аналогичный)
  • редактор кода

Параметр файлов темы

Для дальнейшей работы вам надо создать и редактировать дочернюю тему. Мы будем создавать дочернюю тему Twenty Fourteen.

Вот наша таблица стилей:

/*Theme Name: Automatic Featured Image Based On CategoryTheme URI: http://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms-22664Version: 1.0.0Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at http://bit.ly/14cm0yaAuthor: Rachel McCollinAuthor URI: License: GPL-3.0+License URI: http://www.gnu.org/licenses/gpl-3.0.htmlDomain Path: /langText Domain: tutsplusTemplate: 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');

Сохраните файл и перейдите в Медиафайлы консоли. Вы увидите, что категории были добавлены в медиа-подменю:

Автоматическое добавление миниатюр картинок к записям одной рубрики в WordPress

Прикрепление картинок к категориям

Сейчас нам необходимо загрузить картинки и присвоить каждому из них категорию. Подбирайте картинки так, чтобы они гармонично смотрелись на веб-сайте и соответствовали тематике каждой категории. Если до этого вы использовали различные цвета для выделения отдельной категории, то будет уместно подобрать картинки, которые в основном будут использовать тот же цвет.

Мы присвоили нужные категории, так что наша медиа-библиотека выглядит следующим образом:

Автоматическое добавление миниатюр картинок к записям одной рубрики в WordPress

Сейчас мы добавим пару записей и присвоим для них определенные категории:

Автоматическое добавление миниатюр картинок к записям одной рубрики в WordPress

Создание файла 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(); ?>

Сразу же после этого, внутри открывающего тега <article>, добавьте следующее:

<?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’ => ‘inherit’, а не ‘public, как иные типы записей.

Сейчас добавьте сам запрос:

$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() , для выведения картинки.

Сейчас, если вы обновите главную страницу блога, то увидите все записи с прикрепленными миниатюрами:

Автоматическое добавление миниатюр картинок к записям одной рубрики в WordPress

Как вы видите, у нас на веб-сайте образовалось слишком много пустого пространства, поэтому давайте поработаем над оформлением.

Параметр стилей оформления

Откройте таблицу стилей style.css темы и редактируйте все, что посчитаете нужным. Мы внесли следующие изменения:

.category-featured-image {    float: left;    margin: 10px 2%;} .blog .entry-header .entry-title,.blog .entry-header .entry-meta {    clear: none;}

Сейчас наш веб-сайт выглядит следующим образом:

Автоматическое добавление миниатюр картинок к записям одной рубрики в WordPress

Применение данной техники к иным типам контента

Как мы упоминали в начале статьи, подобным образом вы можете работать и с иными типами содержимого. Например:

  • Для записей пользовательского типа вы можете без проблем создать шаблонный файл archive-$posttype.php с таким же циклом, который мы описали.
  • Если вы используете пользовательскую таксономию вместо категорий, вы сможете без проблем добавить «прикрепленные» типы записей в таксономию при ее регистрации. Вам необходимо будет заменить возможность get_the_category() на get_the_terms() и аргументы категории для запроса.
  • Вы можете без проблем объединить две таксономии путем выведения картинок одной таксономии с записями в архиве шаблонов с другой таксономией.
  • Вы можете без проблем использовать аналогичную технику для файла archive.php, если он есть в теме, чтобы записи в архивах также выводились с картинками.
  • Если вы хотели бы объединить пару из предложенных вариантов, вам надо создать файл с циклом, подключить его в тему и вызывать его правильным файлом шаблонов.

Заключение

Сегодня вы узнали, как присвоить отдельное изображение каждой категории на веб-сайте вместо того, чтобы постоянно добавлять одни и те же миниатюры записям одной категории.

Практиковали ли вы нечто подобное у себя на веб-сайте? Понравился ли вам наш вариант? Обязательно делитесь впечатлениями в комментариях.

Источник: code.tutsplus.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *