В этой статье разберём, как в теме WordPress создать тематические блоки — например, подборки статей по определённой теме, категории или метке — с возможностью фильтрации и сортировки. Такой функционал поможет улучшить пользовательский опыт, повысить вовлечённость и увеличить время пребывания на сайте. Мы рассмотрим и примеры кода, и рекомендации по оптимизации вывода.
Что такое тематические блоки и зачем они нужны в теме WordPress
Тематические блоки — это фрагменты контента, сгруппированные по какому-либо признаку: категориям, тегам, произвольным таксономиям или пользовательским полям. Например, блок «Популярные новости», «Рецепты с курицей», «Обзоры техники» и т.п.
Такие блоки помогают пользователю быстро находить интересующий контент, повышают читаемость сайта и делают структуру более логичной.
В теме WordPress такие блоки часто выводятся на главной странице, в сайдбаре, в подвале или внутри записей.
Использование WP_Query для вывода тематических блоков
Основной инструмент для создания тематических блоков — класс WP_Query. Он позволяет гибко управлять выборкой записей по разным параметрам.
Например, чтобы вывести 5 последних записей из категории «Новости», достаточно такого кода:
function wpthemes_get_news_block() {
$args = [
'posts_per_page' => 5,
'category_name' => 'novosti',
'post_status' => 'publish',
];
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="news-block"><h2>Новости</h2><ul>';
while ($query->have_posts()) {
$query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
echo '</ul></div>';
wp_reset_postdata();
}
}Этот пример можно вставить в нужное место темы, например в шаблон главной страницы.
Фильтрация по произвольным таксономиям и меткам
Для более сложных тематических блоков часто нужно фильтровать записи по произвольным таксономиям или тегам. Например, вывести рецепты с таксономией «кухня» = «итальянская».
Пример запроса:
function wpthemes_get_recipes_by_cuisine($cuisine_slug) {
$args = [
'post_type' => 'recipe',
'tax_query' => [
[
'taxonomy' => 'cuisine',
'field' => 'slug',
'terms' => $cuisine_slug,
],
],
'posts_per_page' => 6,
];
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="recipes-block"><h2>Рецепты: ' . esc_html($cuisine_slug) . '</h2><ul>';
while ($query->have_posts()) {
$query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
echo '</ul></div>';
wp_reset_postdata();
}
}Такой блок можно динамически вызывать с разными параметрами, например, на страницах архива или через шорткод.
Добавление AJAX-фильтрации для тематических блоков
Чтобы сделать тематические блоки интерактивными и не перезагружать страницу при смене фильтров, стоит использовать AJAX. В теме WordPress можно реализовать AJAX-запросы через admin-ajax.php.
Основные шаги:
- Добавить JavaScript, который слушает изменения фильтров и отправляет AJAX-запрос.
- Создать PHP-функцию-обработчик, которая формирует запрос WP_Query с нужными параметрами и возвращает HTML блока.
- Зарегистрировать AJAX-обработчик через хуки
wp_ajax_иwp_ajax_nopriv_.
Пример JavaScript для фильтрации
jQuery(document).ready(function($) {
$('#filter-select').on('change', function() {
var filter = $(this).val();
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'wpthemes_filter_block',
filter: filter
},
success: function(response) {
$('#block-container').html(response);
}
});
});
});PHP обработчик AJAX-запроса
add_action('wp_ajax_wpthemes_filter_block', 'wpthemes_ajax_filter_block');
add_action('wp_ajax_nopriv_wpthemes_filter_block', 'wpthemes_ajax_filter_block');
function wpthemes_ajax_filter_block() {
$filter = sanitize_text_field($_POST['filter']);
$args = [
'posts_per_page' => 5,
'category_name' => $filter,
'post_status' => 'publish',
];
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<ul>';
while ($query->have_posts()) {
$query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
echo '</ul>';
} else {
echo '<p>Нет записей по выбранному фильтру.</p>';
}
wp_reset_postdata();
wp_die();
}Не забудьте локализовать скрипт и передать ajaxurl в JavaScript через wp_localize_script.
Использование плагинов для создания и управления тематическими блоками
Если хочется упростить работу или добавить визуальный интерфейс для управления блоками, можно использовать плагины, совместимые с темой.
Рекомендуемые плагины:
- ABC Pagination — для удобной пагинации тематических блоков.
- WPRemark — для добавления отзывов и рейтингов в тематические блоки.
- Quizle — для создания интерактивных опросов внутри блоков.
Эти плагины расширяют стандартные возможности и помогают сделать блоки более функциональными и привлекательными.
Оптимизация вывода тематических блоков и кеширование
При активном использовании тематических блоков важно не перегружать сервер сложными запросами. Рекомендуется использовать кеширование данных.
В теме можно использовать функции Transients API для кеширования результатов WP_Query:
function wpthemes_get_cached_news_block() {
$cache_key = 'wpthemes_news_block';
$output = get_transient($cache_key);
if ($output === false) {
ob_start();
wpthemes_get_news_block();
$output = ob_get_clean();
set_transient($cache_key, $output, 3600); // кеш на 1 час
}
echo $output;
}Такой подход значительно снижает нагрузку на базу данных и ускоряет загрузку страниц.
Вывод
Создание тематических блоков — мощный инструмент для улучшения структуры и юзабилити сайта на WordPress. Используйте WP_Query для гибкой выборки, AJAX для интерактивности и кеширование для оптимизации. При необходимости расширяйте функционал с помощью плагинов из WPShop. Так вы получите удобный, быстрый и современный сайт с тематическими блоками, которые привлекают и удерживают пользователей.