Если кто-то помнит, лет 10-15 назад самой популярной “фишкой” на блогах в колонке виджеты было использование “табов”, когда меню и всякие дополнительные информационные блоки размещались в удобном компактном виде, хочу напомнить о тех временах. Весьма актуальная функция, на некоторых сайтах и сейчас полезная. Да, все брали инструкцию по табам в Рунете того времени, на самом деле исходный материал по ним был на английском языки и немного иного содержания, но суть была одна.

Чтобы создать виджет с табами для WordPress, можно использовать несколько подходов, включая плагины или ручное добавление кода. Вот инструкция по созданию простого виджета с табами с помощью пользовательского кода:

Шаг 1: Добавление HTML и CSS для табов

  1. В файле шаблона (например, sidebar.php или footer.php) добавьте следующий HTML-код:
<div class="tab-widget">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab active">Content for Tab 1</div>
        <div id="tab2" class="tab">Content for Tab 2</div>
        <div id="tab3" class="tab">Content for Tab 3</div>
    </div>
</div>
  1. Добавьте стили в файл стилей вашей темы (style.css):
/* Стили для виджета с табами */
.tab-widget {
    width: 100%;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.tab-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #ddd;
}

.tab-links li {
    margin: 0;
    padding: 0;
}

.tab-links li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-radius: 5px 5px 0 0;
    background: #e9e9e9;
    margin-right: 5px;
}

.tab-links li.active a,
.tab-links li a:hover {
    background: #fff;
    border-bottom: 1px solid #fff;
}

.tab-content .tab {
    display: none;
    padding: 15px;
}

.tab-content .tab.active {
    display: block;
}

Шаг 2: Добавление JavaScript для переключения табов

  1. В файле вашей темы (functions.php) добавьте следующий код для подключения пользовательского JavaScript:
function custom_tab_widget_scripts() {
    wp_enqueue_script('tab-widget-js', get_template_directory_uri() . '/tab-widget.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_tab_widget_scripts');
  1. Создайте файл tab-widget.js в папке вашей темы и добавьте следующий код:
jQuery(document).ready(function ($) {
    $('.tab-links a').on('click', function (e) {
        e.preventDefault();
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tab-content .tab').removeClass('active');
        $(currentAttrValue).addClass('active');

        // Change/remove current tab to active
        $('.tab-links li').removeClass('active');
        $(this).parent().addClass('active');
    });
});

Шаг 3: Использование виджета

Теперь вы можете добавить HTML-код виджета с табами в любую область вашего сайта, например, в сайдбар, футер или любой другой виджет, поддерживающий HTML.

Дополнительно

Для создания виджета с табами без ручного добавления кода, можно использовать плагины, такие как:

  • Shortcodes Ultimate — позволяет создавать табы с использованием шорткодов.
  • Elementor — популярный конструктор страниц с поддержкой табов.
  • WP Tabs — специализированный плагин для добавления табов.

Эти плагины позволяют добавлять табы и управлять их содержимым через админ-панель WordPress.