Вопрос или проблема
Я хочу создать блог с различными категориями контента и хотел бы иметь фильтр по категориям. Но я не хочу создавать для этого разные страницы. Я хочу, чтобы посты просто подстраивались в зависимости от выбранной категории.
Смотрите пример: https://www.blumeglobal.com/resource-center/
Я пробовал разные виджеты, но ничего хорошего 🙁
Спасибо заранее.
Если вы используете редактор блоков Gutenberg в WordPress, вы можете попробовать плагин Gutentor и использовать блок Расширенный пост (тип).
Вы можете ознакомиться с демо блока Расширенный пост (тип).
Вы можете Фильтровать посты по категории (любой тип поста с их терминами таксономии) и также добавить другие опции, такие как пагинация, навигация и кнопка “загрузить больше”.
Ответ или решение
Создание фильтра по категориям на блоге является отличным способом организовать контент и улучшить пользовательский опыт. Если вы хотите, чтобы ваши посты автоматически регулирулись в зависимости от выбранной категории, не создавая для каждой категории отдельные страницы, вы можете воспользоваться системой, подобной той, которую использует сайт по приведенной ссылке. Рассмотрим несколько шагов, которые помогут вам реализовать эту функцию.
1. Выбор платформы
Если вы еще не выбрали платформу, рекомендую использовать WordPress, так как он предоставляет множество возможностей для создания фильтров и работы с категориями контента.
2. Настройка категорий
Убедитесь, что все ваши посты правильно распределены по категориям. В WordPress это можно сделать в редакторе записи, выбрав соответствующую категорию или создав новую.
3. Использование плагинов
Одним из простых способов реализации фильтра по категориям является использование плагинов. Вы уже упомянули плагин Gutentor, который может помочь в данной задаче. Вот как вы можете его использовать:
- Установка и активация плагина: Перейдите в админку вашего WordPress, выберите раздел "Плагины" и найдите "Gutentor". Установите и активируйте его.
- Создание блока для отображения постов: После активации перейдите на страницу с записью или создайте новую. Откройте редактор Gutenberg и добавьте блок Advanced Post Type из Gutentor. Этот блок позволяет отображать записи определенной категории.
- Фильтрация постов: В настройках блока вы сможете выбрать, какие категории отображать, добавить возможность постраничной навигации и кнопку "Загрузить еще".
4. Создание интерфейса для фильтрации
Вы можете также создать собственный интерфейс для фильтрации, используя стандартный функционал WordPress. Для этого вам потребуется:
- Создать пользовательский шаблон: Создайте новый файл в вашей теме, например
archive.php, и добавьте в него код, который будет обрабатывать запросы на фильтрацию. - Использовать AJAX: Чтобы избежать перезагрузки страницы при выборе категории, вы можете использовать AJAX для динамической загрузки постов. Это сделает интерфейс более интуитивно понятным и удобным.
Пример простого AJAX-запроса:
jQuery(function($){
$('.category-filter').on('change', function(){
var categoryID = $(this).val();
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'filter_posts',
category_id: categoryID
},
success: function(data) {
$('.posts-container').html(data);
}
});
});
});5. Подготовка серверной части
Создайте обработчик AJAX в файле functions.php вашей темы:
function filter_posts() {
$category_id = $_POST['category_id'];
$args = array(
'category__in' => array($category_id),
'post_status' => 'publish',
'posts_per_page' => 10
);
$query = new WP_Query($args);
if($query->have_posts()) {
while($query->have_posts()) {
$query->the_post();
get_template_part('template-parts/content', get_post_format());
}
}
wp_die();
}
add_action('wp_ajax_filter_posts', 'filter_posts');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts');6. SEO-оптимизация
Не забывайте о SEO-оптимизации вашего блога. Используйте ключевые слова в заголовках и тексте постов, оптимизируйте изображения и добавьте мета-теги. Это поможет увеличить видимость вашего блога в поисковых системах.
Заключение
Создание фильтрации по категориям на блоге требует определенных усилий, но это значительно улучшает пользовательский опыт и навигацию по вашему контенту. Следуя вышеописанным шагам, вы сможете создать интерактивный и быстрый фильтр категорий, который, подобно примеру, послужит удобным инструментом для ваших пользователей.