Расширенное использование вложений WordPress: Создание страниц галерей по категориям

2020-10-20

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ | ПОСМОТРЕТЬ ДЕМО

Создание файла шаблона

Что мы будем создавать

Эта статья является третьей из серии, посвященной работе с изображениями во вложениях WordPress.

В этой серии статей я рассказываю о:

Назначении вложениям категорий и таксономий;
Запросах медиафайлов по категориям / таксономиям;
Использовании запросов таксономий / категорий для изображений, чтобы выводить их на страницах архивов;
Добавлении изображений для терминов категорий или таксономий в качестве "специального изображения" категории или термина.

В первой части я показала, как создать новые таксономии для вложений. Во второй части я показала, как создать файл пользовательского шаблона для документов и добавить цикл, который выводит ссылки на медиафайл для каждого документа. В этой части я создам специальный файл шаблона для таксономии gallery-category, которая будет выводить все изображения с данным термином на странице архива в виде галереи.

Примечание: Если вы хотите применять существующие категории и теги к медиафайлам, прочитайте статью о том, как назначать категории и теги для вложений.

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

Установленная система WordPress;
Доступ по FTP (или локально установленный сервер);
Редактор кода.

В первой части я создала плагин для регистрации таксономии, а во второй - дочернюю тему twentyfourteen с файлом шаблона для документов. В этой части я буду использовать эту же тему и добавлю в нее еще один файл шаблона.

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

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

Вы также должны будете добавить файл функций из второй части данной серии, или добавить функцию из этого файла в вашу тему. Код, рассматриваемый в этой статье, включает в себя плагин и новую дочернюю тему с двумя добавленными файлами шаблонов, которые будут работать, только если у вас установлена тема twentyfourteen.

1. Создание файла шаблона

В папке темы создайте новый файл taxonomy-gallery-category.php. Он будет использоваться для вывода архивов терминов таксономии gallery-category. Скопируйте код из файла шаблона document-category и отредактируйте его, удалив цикл и изменив заголовок выводимой страницы. Или скопируйте в созданный файл следующий код:

<?php
/**
 * шаблон для вывода галерей
 * с помощью пользовательского цикла, который выводит изображения вложений
 */

get_header(); ?>

<div id="main-content" class="main-content">

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

        <header class="page-header">

            <?php $queried_object = get_queried_object();
                echo '<h1 class="page-title">Gallery - ' . $queried_object->name . '</h1>'; ?>
        </header><!-- .page-header -->

        </div><!-- #content -->
    </div><!-- #primary -->
    <?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();
?>

2. Добавление пользовательского цикла

Следующим шагом является добавление цикла. Он будет выводить изображение внутри ссылки на страницу вложения. После закрытия тега добавьте следующий код:

<?php
    if ( have_posts() ) : ?>

        <section class="gallery <?php echo $queried_object->name; ?>">

            <?php // Запуск цикла.
                while ( have_posts() ) : the_post();

                // определение атрибутов для вывода изображения
                $imgattr = array(
                    'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
                ); ?>

                <div class="gallery-image"><a href ="<?php echo get_attachment_link(); ?>"><?php echo wp_get_attachment_image( $post->ID, 'thumbnail', $imgattr ); ?></a></div>

                <?php endwhile; ?>

        </section>

    <?php else :
        // Если контента не существует, подключить шаблон "No posts found".
        get_template_part( 'content', 'none' );

    endif;
?>

Этот код отличается от цикла в файле, который мы создали в прошлой части:

Вместо списка, который содержит вложения, мы используем ряд элементов div (с классом gallery-image для стилей) внутри section;
Вместо ссылки на сам файл вложения мы выводим ссылку на страницу вложения, используя для этого echo get_attachment_link();
В ссылку мы превращаем само изображение, которое отображается при помощи echo wp_get_attachment_image(). Код содержит атрибут тега alt, который задается с помощью переменной $imgattr.

Данный код будет выводить все изображения на странице архива, как показано ниже на скриншоте:

Когда я нажимаю на любое из этих изображений, я попадаю на страницу вложения этого изображения:

3. Стили галереи

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

Добавьте следующий код в файл style.css вашей темы:

/* стиль галереи изображений */
.gallery-image {
    float: left;
    margin: 10px 2%;
}

Теперь сохраните файл стилей и снова откройте в браузере страницу галереи. Теперь она выглядит гораздо лучше:

Заключение

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

В заключительной части этой серии я покажу, как задать категорию изображению и использовать его в качестве "специального" для этой категории.