В современных проектах на WordPress часто возникает необходимость структурировать контент с помощью табуляторов (вкладок), чтобы пользователи могли быстро переключаться между разделами без перезагрузки страницы. Многие решают эту задачу установкой плагинов, однако это не всегда оправдано: плагины могут замедлять сайт и создавать конфликты. В этой статье я расскажу, как создать полноценные динамические табуляторы в WordPress без сторонних плагинов, используя только PHP, HTML, CSS и JavaScript.
Почему стоит создавать табуляторы самостоятельно
Создание табуляторов вручную позволяет:
- Минимизировать количество используемых плагинов и тем самым повысить скорость загрузки сайта;
- Иметь полный контроль над разметкой и стилями, что важно для дизайна и адаптивности;
- Избежать конфликтов с другими плагинами и обновлениями;
- Оптимизировать код под свои задачи и масштабировать решение.
В итоге вы получите легковесное и гибкое решение, которое можно адаптировать под любые нужды.
Создание шорткода для вывода табуляторов в WordPress
Чтобы использовать табуляторы в любом месте сайта, удобно создать шорткод, который будет генерировать всю необходимую разметку и скрипты.
Пример функции, добавляющей шорткод [wpassist_tabs]:
function wpassist_add_tabs_shortcode($atts, $content = null) {
// Атрибуты с дефолтными значениями
$atts = shortcode_atts(array(
'tabs' => 'Tab 1,Tab 2,Tab 3'
), $atts, 'wpassist_tabs');
$tabs = explode(',', $atts['tabs']);
// Генерируем уникальный ID для блока табов
$id = 'wpassist-tabs-' . uniqid();
ob_start();
?>
<div class="wpassist-tabs" id="<?php echo $id; ?>">
<ul class="wpassist-tabs-nav">
<?php foreach ($tabs as $index => $tab): ?>
<li class="wpassist-tab-link <?php echo $index === 0 ? 'active' : ''; ?>" data-tab="tab-<?php echo $index; ?>"><?php echo esc_html(trim($tab)); ?></li>
<?php endforeach; ?>
</ul>
<div class="wpassist-tabs-content">
<?php foreach ($tabs as $index => $tab): ?>
<div id="tab-<?php echo $index; ?>" class="wpassist-tab-content <?php echo $index === 0 ? 'active' : ''; ?>">
<p>Содержимое "<?php echo esc_html(trim($tab)); ?>"</p>
</div>
<?php endforeach; ?>
</div>
</div>
<script>
(function() {
const container = document.getElementById('<?php echo $id; ?>');
if (!container) return;
const tabs = container.querySelectorAll('.wpassist-tab-link');
const contents = container.querySelectorAll('.wpassist-tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
tab.classList.add('active');
const contentId = tab.getAttribute('data-tab');
const content = container.querySelector('#' + contentId);
if (content) content.classList.add('active');
});
});
})();
</script>
<style>
.wpassist-tabs-nav {
list-style: none;
padding: 0;
display: flex;
border-bottom: 2px solid #ccc;
margin-bottom: 1em;
cursor: pointer;
}
.wpassist-tabs-nav li {
padding: 10px 20px;
border: 1px solid #ccc;
border-bottom: none;
margin-right: 5px;
background: #f7f7f7;
user-select: none;
}
.wpassist-tabs-nav li.active {
background: #fff;
font-weight: bold;
border-top: 2px solid #0073aa;
color: #0073aa;
}
.wpassist-tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
background: #fff;
}
.wpassist-tab-content.active {
display: block;
}
</style>
<?php
return ob_get_clean();
}
add_shortcode('wpassist_tabs', 'wpassist_add_tabs_shortcode');Эта функция создает простой табулятор, который можно вставлять в контент следующим образом:
[wpassist_tabs tabs="Описание,Характеристики,Отзывы"]
В итоге мы получим три вкладки, содержимое которых можно легко менять или расширять, дорабатывая функцию.
Добавление динамического содержимого в табуляторах
Чтобы вкладки были по-настоящему полезными, надо выводить в них динамические данные. Например, на странице товара WooCommerce, где в табах выводится описание, отзывы, дополнительные параметры.
Для этого можно расширить шорткод, передавая в контент блоки с разметкой:
function wpassist_add_tabs_shortcode($atts, $content = null) {
$atts = shortcode_atts(array('tabs' => ''), $atts, 'wpassist_tabs');
$tabs = array_map('trim', explode(',', $atts['tabs']));
$contents = array_map('trim', explode('<!--tab-->', $content));
$id = 'wpassist-tabs-' . uniqid();
ob_start();
?>
<div class="wpassist-tabs" id="<?php echo $id; ?>">
<ul class="wpassist-tabs-nav">
<?php foreach ($tabs as $i => $tab): ?>
<li class="wpassist-tab-link <?php echo $i === 0 ? 'active' : ''; ?>" data-tab="tab-<?php echo $i; ?>"><?php echo esc_html($tab); ?></li>
<?php endforeach; ?>
</ul>
<div class="wpassist-tabs-content">
<?php foreach ($contents as $i => $content_block): ?>
<div id="tab-<?php echo $i; ?>" class="wpassist-tab-content <?php echo $i === 0 ? 'active' : ''; ?>">
<?php echo do_shortcode($content_block); ?>
</div>
<?php endforeach; ?>
</div>
</div>
<script>
// скрипт из предыдущего примера
</script>
<style>
// стили из предыдущего примера
</style>
<?php
return ob_get_clean();
}Использовать такой шорткод можно так:
[wpassist_tabs tabs="Описание,Характеристики,Отзывы"]
Здесь описание товара с любым HTML и шорткодами.
<!--tab-->
Технические характеристики и таблицы.
<!--tab-->
[wpassist_reviews id=123]
[/wpassist_tabs]В этом подходе разделение контента идет по маркеру <!--tab-->, что позволяет легко поддерживать и обновлять вкладки.
Пример интеграции с плагином WPRemark для отзывов
Если на вашем сайте установлен плагин WPRemark для модерирования и отображения отзывов, то вы можете подключить его шорткод в одну из вкладок, как показано выше.
Например, в третью вкладку вставляем шорткод, который выводит отзывы по ID товара. Это позволяет удобно показывать отзывы в отдельном табе без лишних плагинов табуляторов.
Советы по оптимизации и расширению функционала
Для улучшения вашего решения можно:
- Добавить поддержку AJAX загрузки контента в табах для тяжелых данных;
- Реализовать сохранение выбранной вкладки в cookie или localStorage, чтобы при обновлении пользователь оставался на той же вкладке;
- Добавить анимации переключения вкладок на CSS;
- Поддержать вложенные табы или аккордеоны для сложной структуры;
- Интегрировать с REST API для загрузки данных с сервера динамически.
Все это можно сделать, расширяя представленный базовый код.
Итог
Создание динамических табуляторов без плагинов — это простая и эффективная задача, которую можно решить с помощью базовых навыков PHP и JavaScript. Такой подход позволяет сохранять контроль над кодом, избегать излишних зависимостей и улучшать производительность сайта WordPress. Используйте представленные примеры, чтобы быстро внедрить табуляторы на свой сайт и при необходимости расширять функционал под свои задачи.