Автоматический каталог картинок — удобный инструмент для сайтов, которые регулярно публикуют большое количество изображений, например, портфолио, блоги о фотоискусстве или магазины с галереями товаров. В этой статье разберём, как создать такой каталог на WordPress с минимальными затратами времени и усилий, используя собственные функции темы и популярные плагины.
Почему нужен автоматический каталог картинок в WordPress
Ручное добавление и организация изображений на сайте быстро становится неудобным, особенно если контент обновляется часто. Автоматический каталог позволяет:
- Собрать все изображения по категориям или тегам без лишних действий.
- Обеспечить удобную навигацию для пользователей.
- Облегчить SEO-задачи за счёт правильной разметки и структуры.
- Экономить время на обновлении и поддержке сайта.
Для реализации таких задач можно использовать как готовые плагины, так и писать кастомный код. Рассмотрим оба варианта.
Использование плагина для создания каталога изображений
Плагин NextGEN Gallery — простой старт
NextGEN Gallery — один из самых известных плагинов для галерей в WordPress. Он позволяет создавать альбомы и галереи с удобной навигацией и настройками отображения.
- Установка через админку WordPress:
Плагины → Добавить новый → NextGEN Gallery → Установить → Активировать - Создание галереи: в меню NextGEN добавить новую галерею, загрузить изображения и разместить её на странице с помощью шорткода.
- Настройка отображения: можно выбрать стиль галереи — сетка, слайдер, миниатюры и др.
Недостаток — плагин может быть избыточным для простых каталогов и замедлять сайт при большом количестве изображений.
Плагин WP Media Folder для организации каталога
WP Media Folder помогает упорядочить медиафайлы в папки прямо в библиотеке WordPress. Это удобно для автоматизации каталогов, так как можно создавать папки по дате, категории или другим критериям.
- После установки и активации плагина создайте структуру папок в медиа-библиотеке.
- Загружайте изображения в нужные папки, чтобы каталог автоматически обновлялся.
- Используйте шорткоды плагина для вывода папок и галерей на страницах.
Плагин платный, но есть демо и пробные версии.
Создание автоматического каталога изображений с помощью кода в теме WordPress
Получение изображений из медиабиблиотеки по категориям
WordPress не умеет по умолчанию привязывать изображения к категориям, но можно использовать таксономии для медиафайлов или метаданные. Ниже пример функции для вывода изображений из конкретной категории с использованием пользовательской таксономии wpkpi_media_category.
function wpkpi_get_images_by_category($category_slug) {
$args = [
'post_type' => 'attachment',
'post_status' => 'inherit',
'posts_per_page' => -1,
'tax_query' => [
[
'taxonomy' => 'wpkpi_media_category',
'field' => 'slug',
'terms' => $category_slug,
],
],
];
$query = new WP_Query($args);
if (!$query->have_posts()) {
return '<p>Изображения не найдены в категории "' . esc_html($category_slug) . '".</p>';
}
$output = '<div class="wpkpi-image-catalog">';
while ($query->have_posts()) {
$query->the_post();
$image_url = wp_get_attachment_url(get_the_ID());
$output .= '<div class="wpkpi-image-item"><img src="' . esc_url($image_url) . '" alt="' . esc_attr(get_the_title()) . '"></div>';
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}Чтобы функция работала, нужно зарегистрировать таксономию для медиафайлов. Добавьте в файл functions.php темы:
function wpkpi_register_media_taxonomy() {
register_taxonomy(
'wpkpi_media_category',
'attachment',
[
'label' => 'Категории изображений',
'hierarchical' => true,
'show_ui' => true,
'show_in_rest' => true,
]
);
}
add_action('init', 'wpkpi_register_media_taxonomy');Вывод каталога через шорткод
Создайте шорткод для удобного вывода каталога на страницах или в записях:
function wpkpi_catalog_shortcode($atts) {
$atts = shortcode_atts(['category' => ''], $atts, 'wpkpi_catalog');
if (empty($atts['category'])) {
return '<p>Укажите категорию изображений в параметре category.</p>';
}
return wpkpi_get_images_by_category(sanitize_text_field($atts['category']));
}
add_shortcode('wpkpi_catalog', 'wpkpi_catalog_shortcode');Пример использования на странице:
[wpkpi_catalog category="nature"]
Оптимизация и стилизация каталога изображений
Добавление стилей для сетки изображений
Для красивой и адаптивной сетки добавьте CSS в файл стилей темы или через настройщик:
.wpkpi-image-catalog {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.wpkpi-image-item {
flex: 1 1 calc(25% - 15px);
box-sizing: border-box;
}
.wpkpi-image-item img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}Этот стиль создаст 4 колонки с отступами и адаптируется под ширину экрана.
Lazy Load и кеширование изображений
Для ускорения загрузки страниц рекомендуем включить lazy load — отложенную загрузку изображений. В WordPress 5.5+ это включено по умолчанию через атрибут loading="lazy", но можно явно добавить его в вывод:
$output .= '<div class="wpkpi-image-item"><img src="' . esc_url($image_url) . '" alt="' . esc_attr(get_the_title()) . '" loading="lazy"></div>';Для кеширования используйте плагины, например, Clearfy Pro, который также оптимизирует работу с медиафайлами.
Интеграция с плагинами WPShop для расширения возможностей
Использование WPStories для создания интерактивных галерей
Плагин WPStories от WPShop позволяет создавать красивые визуальные истории из изображений, которые автоматически формируются из медиабиблиотеки. Это отличный вариант для интерактивного каталога.
После установки и активации WPStories можно подключить изображения из созданных таксономий и выводить их как истории с анимацией и спецэффектами.
Автоматизация с помощью Quizle и Expert Review
Если каталог картинок связан с обучающим или обзорным контентом, можно использовать плагин Quizle для создания тестов и опросов, а Expert Review — для сбора отзывов и рейтингов. Это повысит вовлечённость пользователей и качество каталога.
Выводы по созданию автоматического каталога картинок в WordPress
Создать автоматический каталог изображений можно как с помощью мощных плагинов, так и самостоятельно, используя собственные функции и таксономии. Такой каталог улучшит навигацию, SEO и внешний вид сайта, а также упростит управление большим объёмом медиа.
Для начала рекомендуем попробовать зарегистрировать таксономию для медиафайлов и написать простую функцию вывода с шорткодом. Если нужны дополнительные возможности — обращайтесь к плагинам, например, NextGEN Gallery или WP Media Folder.
Также не забывайте про оптимизацию загрузки и кеширование, чтобы каталог работал быстро и стабильно.
Для более глубокого управления и автоматизации можно использовать решения из WPShop, например, WPStories или Expert Review.