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

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

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

Эта статья будет третьей из серии, посвященной работе с картинками во вложениях 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 --><?phpget_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 .

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

Расширенное использование вложений WordPress: Создание страниц галерей по категориям
Когда я нажимаю на любое из данных картинок, я попадаю на страницу вложения этого картинки:
Расширенное использование вложений WordPress: Создание страниц галерей по категориям

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

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

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

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

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

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

Заключение

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

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

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

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