Множественная фильтрация по тегам

На чтение 4 мин Опубликовано 12.01.2025

Содержание

Вопрос или проблема
Ответ или решение
Теория:
Пример:
Применение:

Вопрос или проблема

Я пишу тему для WordPress и мне нужен инструмент фильтрации тегов для постов, который может фильтровать по нескольким тегам одновременно, без кнопки отправки, без чекбоксов, без радио кнопок, и с кнопкой показать все посты. (См. изображение)

Как лучше подойти к решению этой проблемы? Или может кто-то порекомендовать подходящие плагины?

Недавно я написал немного кода, который фильтрует только по одному тегу за раз, но его было бы довольно легко модифицировать, чтобы ‘переключать’ статус каждого тега, чтобы можно было фильтровать по нескольким тегам одновременно. Вы можете увидеть, как он работает здесь: http://sadcookbook.recipes/sad/. Он использует следующий PHP для отображения ссылок на теги,

Показать только:
<?php
$tags = get_tags();
foreach ($tags as $tag) {
        $taglinks[] = "<span style=\"cursor: pointer;\" class=\"filter-tag\" id=\"filter-".$tag->slug."\"><b>".$tag->name."</b></span>";
}
echo join($taglinks, " - ");`

Затем он использует этот jquery вместе с masonry для отображения постов в зависимости от того, какие теги были нажаты

jQuery('.filter-tag').click(function() {

    showAll();
    var $grid = jQuery('#grid-container');
    tag = 'tag-' + jQuery(this).attr('id').substring(7)
    classSelector="." + tag
    elementsToRemove = jQuery('#gridcontainer').children().children().not(classSelector).parent()

    elementsToRemove.clone().appendTo('#grid-hidden')
    $grid.masonry('remove', elementsToRemove)
    $grid.masonry('layout')

    // Save the elements removed so they can be put back later
    elementsToRemove.each(function (index) {
            id = jQuery(this).attr('id');
            if (!putBack.includes(id))
                    putBack.push(id)
    });

});

Ответ или решение

Теория:

Разработка инструмента фильтрации тегов в WordPress, который позволит пользователям фильтровать посты по нескольким тегам одновременно, без использования кнопок отправки, чекбоксов или радиокнопок, является интересной задачей. Такой функционал позволяет улучшить юзабилити сайта, делая навигацию по контенту более интуитивной и быстрой для конечного пользователя.

Пример:

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

Применение:

Создайте элементы тегов в WordPress:
Используйте PHP для формирования списка тегов с идентификаторами, которые определяют уникальность каждого тега. Это уже реализовано в вашем нынешнем коде.
```
$tags = get_tags();
foreach ($tags as $tag) {
   $taglinks[] = "<span style=\"cursor: pointer;\" class=\"filter-tag\" id=\"filter-".$tag->slug."\"><b>".$tag->name."</b></span>";
}
echo join($taglinks, " - ");
```

Реализуйте логику выбора и фильтрации в jQuery:
Вам необходимо изменить логику так, чтобы поддерживалось нажатие на несколько тегов и обновление перечня отображаемых элементов. В каждый клик по тегу добавляйте или удаляйте тег из массива активных тегов. Затем обновляйте сетку отображаемых постов на основе активного списка тегов.

var activeTags = [];

jQuery('.filter-tag').click(function() {
   var tag = 'tag-' + jQuery(this).attr('id').substring(7);

   if (activeTags.includes(tag)) {
       var index = activeTags.indexOf(tag);
       if (index > -1) {
           activeTags.splice(index, 1);
       }
   } else {
       activeTags.push(tag);
   }

   filterPosts();
});

function filterPosts() {
   var $grid = jQuery('#grid-container');
   var classSelector = activeTags.map(t => "." + t).join(", ");

   if (activeTags.length > 0) {
       var elementsToShow = jQuery('#grid-container').children().children(classSelector).parent();
       var elementsToHide = jQuery('#grid-container').children().children().not(classSelector).parent();
       $grid.masonry('remove', elementsToHide);
       $grid.masonry('addItems', elementsToShow);
   } else {
       showAll();
   }

   $grid.masonry('layout');
}

function showAll() {
   // Логика для восстановления всех элементов
}

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

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