Виджет с табами для WordPress

Чтобы создать виджет с табами для 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>

2. Добавьте стили в файл стилей вашей темы (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');

2. Создайте файл 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.