Вопрос или проблема
Я хотел бы использовать что-то для фильтрации изображений в галерее ACF. Я добавил плагин Enhanced Media Gallery, который позволит мне назначать категорию каждому изображению, но я не совсем понимаю, как вывести список категорий, чтобы можно было по ним кликать и фильтровать/отображать изображения в выбранной категории.
Кроме того, как мне отобразить категорию, назначенную изображению, в div, окружающем изображение?
Мой цикл в настоящее время выглядит следующим образом для вывода моей галереи.
Я буду благодарен за любые советы о том, как лучше всего назначать категории каждому изображению в моей галерее (плагин здесь лучший?) и как получить эти категории и отсортировать их. Спасибо заранее!
<div class="wrapper-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<?php
$images = get_field('images');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div class="gallery-image" id="imageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://wordpress.stackexchange.com/questions/206285/<?php echo $image["url']; ?>" itemprop="contentUrl" data-size="https://wordpress.stackexchange.com/questions/206285/<?php echo $image["width'] . 'x' . $image['height']; ?>">
<img src="https://wordpress.stackexchange.com/questions/206285/<?php echo $image["sizes"]['large']; ?>" itemprop="thumbnail" alt="https://wordpress.stackexchange.com/questions/206285/<?php echo $image["alt']; ?>" />
</a>
<figcaption itemprop="caption description"><?php echo $image['caption']; ?></figcaption>
</figure>
</div>
<?php endforeach; ?>
<?php endif; ?>
Если вы знаете имя таксономии, которую использует плагин, вы сможете использовать the_terms довольно просто. Вы в принципе можете вставить это между <?php foreach( $images as $image ): ?> и <?php endforeach; ?> там, где хотите отобразить термины:
<?php the_terms($image->ID, 'YOUR_TAXONOMY_NAME'); ?>
Если хотите сделать это более сложным, вы можете использовать get_the_terms, который предоставляет вам немного больше контроля над тем, как все отображается.
Проблема наполовину решена:
Я решил создать свою собственную пользовательскую таксономию, следуя этому руководству. http://code.tutsplus.com/articles/applying-categories-tags-and-custom-taxonomies-to-media-attachments–wp-32319 Это позволяет создать пользовательскую категорию для ваших загруженных медиафайлов. В моем случае я создал новую, называемую “image_category”.
Затем эти категории выводятся с помощью этого:
<div class="gallery-filter">
<ul id="filters">
<li><a href="#" data-filter="*" class="selected">Все</a></li>
<?php
$terms = get_terms('image_category' ); // получить все категории, но вы можете использовать любую таксономию
$count = count($terms); //Сколько их?
if ( $count > 0 ){ //Если больше 0 терминов
foreach ( $terms as $term ) { //для каждого термина:
echo "<li><a href="#" data-filter=".".$term->slug."">" . $term->name . "</a></li>\n";
//создать элемент списка с текущим слугом термина для сортировки и именем для метки
}
}
?>
</ul>
</div>
Я все еще совершенно не знаю, как получить эти категории, чтобы вывести их как класс.
Ответ или решение
Для того чтобы реализовать сортировку изображений в галерее, созданной при помощи плагина Advanced Custom Fields (ACF) и плагина Enhanced Media Gallery, мы можем воспользоваться следующими шагами. Ниже представлен подробный план, который охватывает создание пользовательской таксономии, вывод категорий изображений и их использование для фильтрации.
1. Создание пользовательской таксономии
Сначала вам нужно зарегистрировать пользовательскую таксономию для медиафайлов. Это можно сделать с помощью следующего кода, который следует добавить в файл functions.php вашей темы:
function create_media_taxonomy() {
register_taxonomy(
'image_category', // Название таксономии
'attachment', // Связываем с медиафайлами
array(
'label' => __('Image Categories'),
'rewrite' => array('slug' => 'image-category'),
'hierarchical' => true,
)
);
}
add_action('init', 'create_media_taxonomy');2. Присвоение категорий изображениям
После того, как вы зарегистрировали таксономию, теперь вы можете присваивать категории каждой картинке при загрузке в медиабиблиотеку.
3. Вывод категорий для фильтрации
Для вывода категорий необходимо добавить блок, который будет отображаться над галереей. Код, который позволяет получить и вывести категории, выглядит следующим образом:
<div class="gallery-filter">
<ul id="filters">
<li><a href="#" data-filter="*" class="selected">Все</a></li>
<?php
$terms = get_terms('image_category'); // Получаем все категории
if ( !empty($terms) && !is_wp_error($terms) ){
foreach ( $terms as $term ) {
echo '<li><a href="#" data-filter=".' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</a></li>';
}
}
?>
</ul>
</div>4. Вывод изображений с привязкой к категориям
Теперь необходимо доработать ваш основной цикл вывода галереи так, чтобы каждое изображение содержало указание на его категорию. Вот обновленный код вашего цикла:
<div class="wrapper-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<?php
$images = get_field('images');
if ($images):
foreach ($images as $image):
$image_terms = get_the_terms($image['id'], 'image_category');
$class_names = '';
if ($image_terms) {
foreach ($image_terms as $term) {
$class_names .= esc_attr($term->slug) . ' '; // Генерация классов
}
}
?>
<div class="gallery-image <?php echo trim($class_names); ?>" id="imageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="<?php echo esc_url($image['url']); ?>" itemprop="contentUrl" data-size="<?php echo esc_attr($image['width'] . 'x' . $image['height']); ?>">
<img src="<?php echo esc_url($image['sizes']['large']); ?>" itemprop="thumbnail" alt="<?php echo esc_attr($image['alt']); ?>" />
</a>
<figcaption itemprop="caption description"><?php echo esc_html($image['caption']); ?></figcaption>
</figure>
</div>
<?php endforeach;
endif; ?>
</div>5. Фильтрация изображений на фронтенде
Чтобы осуществить фильтрацию изображений по категориям, потребуется реализовать JavaScript. Например, можно использовать следующий код для обработки клика по элементам фильтра:
jQuery(document).ready(function($) {
$('#filters a').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).attr('data-filter');
if (filterValue === '*') {
$('.gallery-image').show(); // Показываем все
} else {
$('.gallery-image').hide(); // Скрываем все
$(filterValue).show(); // Показываем только выбранное
}
$('#filters a').removeClass('selected'); // Убираем класс выбранного
$(this).addClass('selected'); // Добавляем выбранному элементу
});
});Заключение
В данном ответе мы полностью охватили настройку пользовательской таксономии, присвоение категорий, вывод списка категорий для фильтрации и отображение изображений с соответствующей категорией. Это приведет к созданию функциональной галереи, в которой пользователи смогут легко фильтровать изображения по категориям. Убедитесь, что вы протестировали каждый шаг и настроили код под свои нужды.