Табуляции (вкладки) — это удобный способ упорядочить контент на странице, особенно если его много и хочется избежать длинных скроллов. В Elementor есть стандартный виджет Tabs, который позволяет создать вкладки, но он не поддерживает динамический контент из базы данных WordPress или пользовательских полей. В этой статье рассмотрим, как создать динамические вкладки в Elementor, которые автоматически подтягивают данные из Custom Post Types (CPT), ACF полей или других источников, а также как сделать загрузку вкладок через AJAX.
Почему стандартный виджет Tabs в Elementor не подходит для динамического контента
Стандартный виджет Tabs позволяет вручную добавить вкладки с контентом, но каждая вкладка — это статический блок, который нужно редактировать вручную. Если вы хотите, чтобы вкладки формировались автоматически на основе записей CPT или пользовательских полей, стандартный функционал не подойдет.
Например, если у вас есть CPT «Отзывы» с метаполями оценки и текста, и вы хотите вывести по вкладке на каждый год или категорию, то придется писать код или использовать сторонние решения.
Вариант 1: Используем плагин JetTabs для динамических вкладок
JetTabs от Crocoblock — один из популярных плагинов, который умеет создавать вкладки с динамическим контентом. Он интегрируется с ACF, CPT и таксономиями.
Особенности JetTabs:
- Динамические вкладки на основе таксономий или записей
- Интеграция с ACF для вывода пользовательских полей
- Поддержка AJAX-подгрузки вкладок
- Совместимость с Elementor Pro
Пример настройки:
- Установите и активируйте JetTabs с официального сайта.
- Создайте CPT «Отзывы» и добавьте поля с помощью ACF.
- В Elementor добавьте виджет JetTabs и выберите источник динамических вкладок — таксономия или метаполе.
- Настройте шаблон вывода контента вкладки через Elementor Template или динамический код.
Вариант 2: Собственный код для динамических вкладок через Elementor HTML и AJAX
Если вы хотите минимизировать количество плагинов, можно сделать динамические вкладки с AJAX-загрузкой самостоятельно. Ниже пример решения, которое выводит вкладки на основе записей CPT «service» и загружает содержимое по клику через AJAX.
Шаг 1. Регистрируем AJAX обработчик в functions.php
add_action('wp_ajax_wpelementor_get_service_tab', 'wpelementor_get_service_tab_callback');
add_action('wp_ajax_nopriv_wpelementor_get_service_tab', 'wpelementor_get_service_tab_callback');
function wpelementor_get_service_tab_callback() {
$service_id = intval($_POST['service_id']);
if (!$service_id) {
wp_send_json_error('Неверный ID услуги');
}
$post = get_post($service_id);
if (!$post || $post->post_type !== 'service') {
wp_send_json_error('Услуга не найдена');
}
ob_start();
echo '<h3>' . esc_html($post->post_title) . '</h3>';
echo apply_filters('the_content', $post->post_content);
$content = ob_get_clean();
wp_send_json_success($content);
}Шаг 2. Добавляем HTML и JS в кастомный HTML виджет Elementor
<div id="wpelementor-tabs">
<ul id="wpelementor-tabs-list">
<?php
$services = get_posts(['post_type' => 'service', 'numberposts' => 5]);
foreach ($services as $index => $service) {
echo '<li data-id="' . $service->ID . '"' . ($index === 0 ? ' class="active"' : '') . '>' . esc_html($service->post_title) . '</li>';
}
?>
</ul>
<div id="wpelementor-tabs-content">Загрузка...</div>
</div>
<script>
(function($){
function loadTabContent(serviceId) {
$('#wpelementor-tabs-content').html('Загрузка...');
$.post(
'<?php echo admin_url('admin-ajax.php'); ?>',
{
action: 'wpelementor_get_service_tab',
service_id: serviceId
},
function(response) {
if(response.success) {
$('#wpelementor-tabs-content').html(response.data);
} else {
$('#wpelementor-tabs-content').html('Ошибка загрузки контента');
}
}
);
}
$('#wpelementor-tabs-list li').on('click', function(){
$('#wpelementor-tabs-list li').removeClass('active');
$(this).addClass('active');
var serviceId = $(this).data('id');
loadTabContent(serviceId);
});
// Загрузка первой вкладки по умолчанию
var firstId = $('#wpelementor-tabs-list li.active').data('id');
if(firstId) {
loadTabContent(firstId);
}
})(jQuery);
</script>Вариант 3: Использование Advanced Custom Fields (ACF) и Elementor Pro Dynamic Tags
Если у вас установлен ACF и Elementor Pro, можно создавать вкладки с помощью стандартного Tabs виджета и выводить динамический контент через Dynamic Tags. Для этого создайте группу полей с повторяющимися элементами (Repeater), где каждая строка — это вкладка с заголовком и содержимым.
Затем в настройках вкладок Elementor выберите динамический источник для заголовка и контента вкладки, укажите ACF Repeater и соответствующие поля. Такой метод удобен, если вкладки нужно редактировать через админку без привлечения разработчиков.
Преимущества:
- Простота редактирования через WP-админку
- Поддержка любых типов данных и полей
- Отсутствие необходимости писать PHP и JS
Советы по оптимизации динамических вкладок в Elementor
Динамические вкладки с большим количеством контента могут замедлять загрузку страницы. Чтобы избежать этого, стоит:
- Использовать AJAX подгрузку контента по клику — так страница грузится быстро, а данные подгружаются по необходимости.
- Кэшировать результаты запросов, например с помощью transient API.
- Оптимизировать запросы к базе данных — использовать WP_Query с правильными аргументами и минимизировать количество запросов.
- Использовать lazy load для изображений и медиа внутри вкладок.
Итоги
Создание динамических вкладок в Elementor — это отличный способ сделать контент более структурированным и удобным для пользователя. В зависимости от задачи можно выбрать готовые плагины, например JetTabs, использовать возможности ACF и Elementor Pro, либо написать собственное решение с AJAX подгрузкой.
Для тех, кто хочет расширить функционал динамического контента в Elementor, рекомендую посмотреть плагины из каталога WPShop — там есть полезные инструменты для создания шаблонов и динамических блоков.