Как добавить вкладку на страницу WordPress: Полное руководство

[tabbytitle]Название вкладки 1[/tabbytitle]
Содержимое первой вкладки.

[tabbytitle]Название вкладки 2[/tabbytitle]
Содержимое второй вкладки.

[tabbylast]

<?php

/**
 * Глобальный счетчик для уникальных идентификаторов групп вкладок.
 *
 * @var int
 */
$tabs_group_counter = 0;

/**
 * Шорткод для обертки группы вкладок.
 *
 * @param array|string $atts Атрибуты шорткода (не используется).
 * @param string|null                 $content Контент внутри шорткода (вложенные табы).
 * @return string HTML разметка группы вкладок.
 */
function custom_tabs_shortcode( $atts, ?string $content = null ): string {
    global $tabs_group_counter;
    $tabs_group_counter++;

    // Извлекаем заголовки и контент вкладок
    $pattern = get_shortcode_regex(['custom_tab']);
    $tabs_content = '';
    $tabs_nav = '
';
    $tab_index = 0;

    if ( preg_match_all( '/' . $pattern . '/s', (string) $content, $matches ) 
         && array_key_exists( 2, $matches )
         && in_array( 'custom_tab', $matches[2], true ) ) {

        foreach ( $matches[0] as $match_content ) {
            // Парсим атрибуты вложенного шорткода [custom_tab]
            // ([custom_tab title="Название"]...[/custom_tab])
            $tab_atts_string = str_replace(['[custom_tab', ']'], '', $matches[3][ $tab_index ]);
            $tab_atts = shortcode_parse_atts($tab_atts_string);
            $title = $tab_atts['title'] ?? 'Tab ' . ($tab_index + 1);
            
            $inner_content = $matches[5][ $tab_index ]; // Содержимое [custom_tab]...[/custom_tab]

            $tab_id = 'custom-tab-' . $tabs_group_counter . '-' . $tab_index;
            $panel_id = 'custom-panel-' . $tabs_group_counter . '-' . $tab_index;
            $is_active = ( $tab_index === 0 );

            // Навигация
            $tabs_nav .= sprintf(
                '
%s
',
                $is_active ? 'active' : '',
                $panel_id,
                $tab_id,
                $panel_id,
                $is_active ? 'true' : 'false',
                esc_html( $title )
            );

            // Панель с контентом
            $tabs_content .= sprintf(
                '
%s
',
                $is_active ? 'active' : '',
                $panel_id,
                $tab_id,
                $is_active ? '' : 'hidden',
                do_shortcode( $inner_content ) // Обрабатываем вложенные шорткоды
            );
            
            $tab_index++;
        }
    }

    $tabs_nav .= '
';

    return sprintf(
        '
%s%s
',
        $tabs_group_counter,
        $tabs_nav,
        $tabs_content
    );
}
add_shortcode( 'custom_tabs', 'custom_tabs_shortcode' );

/**
 * Шорткод для отдельной вкладки (используется внутри [custom_tabs]).
 *
 * @param array|string $atts Атрибуты шорткода (нужен 'title').
 * @param string|null                 $content Контент вкладки.
 * @return string Возвращает контент как есть, обработка идет в родительском шорткоде.
 */
function custom_tab_shortcode( $atts, ?string $content = null ): string {
    // Этот шорткод сам по себе ничего не выводит, он служит маркером для родительского [custom_tabs]
    // Атрибуты и контент извлекаются через regex в custom_tabs_shortcode()
    // Возвращаем контент для возможности вложенных шорткодов
    return (string) $content;
}
add_shortcode( 'custom_tab', 'custom_tab_shortcode' );

?>

[custom_tabs]
[custom_tab title="Вкладка 1: Анализ данных"]
Контент первой вкладки. Пример: Визуализация данных с использованием Chart.js.
[/custom_tab]
[custom_tab title="Вкладка 2: Маркетинг"]
Контент второй вкладки. Пример: Настройка UTM-меток для рекламных кампаний.
[/custom_tab]
[custom_tab title="Вкладка 3: Настройки"]
Контент третьей вкладки.
[/custom_tab]
[/custom_tabs]

/* Базовые стили для контейнера вкладок */
.custom-tabs-container {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Стили для навигации */
.custom-tabs-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ddd;
  background-color: #f8f8f8;
}

.custom-tabs-nav li {
  margin: 0;
}

.custom-tabs-nav a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #337ab7;
  border-right: 1px solid #ddd;
}

.custom-tabs-nav li:last-child a {
    border-right: none;
}

.custom-tabs-nav li.active a {
  background-color: #fff;
  border-bottom-color: transparent; /* Может потребоваться调整, если граница контейнера снизу */
  font-weight: bold;
  position: relative;
  top: 1px; /* Чтобы слиться с нижней границей */
}

/* Стили для панелей контента */
.custom-tab-panel {
  padding: 15px;
  display: none; /* Скрываем все панели по умолчанию */
}

.custom-tab-panel.active {
  display: block; /* Показываем активную панель */
}

  

    

      Вкладка 1
    
    

      Вкладка 2
    
    

      Вкладка 3
    
  

  

    

      
Содержимое первой вкладки...
    
    
    
  

/* Пример стилизации для ручного метода */
.manual-tabs .tabs-nav {
  /* ... стили как в примере для шорткодов ... */
}

.manual-tabs .tabs-nav a {
   /* ... стили ... */
}

.manual-tabs .tabs-nav li.active a {
  /* ... стили активной вкладки ... */
}

.manual-tabs .tab-panel {
  padding: 20px;
  border: 1px solid #ddd;
  border-top: none; /* Убираем верхнюю границу, т.к. есть у nav */
}

.manual-tabs .tab-panel[hidden] {
  display: none;
}

.manual-tabs .tab-panel.active {
  display: block;
}

/**
 * Инициализирует функциональность вкладок для заданного контейнера.
 * @param {HTMLElement} tabsContainer - DOM-элемент контейнера вкладок.
 */
function initializeTabs(tabsContainer) {
  const tabLinks = tabsContainer.querySelectorAll('.tabs-nav a[role="tab"]');
  const tabPanels = tabsContainer.querySelectorAll('.tab-panel[role="tabpanel"]');

  /**
   * Обработчик клика по ссылке вкладки.
   * @param {Event} event - Событие клика.
   */
  function handleTabClick(event) {
    event.preventDefault();
    const clickedTab = event.currentTarget;
    const targetPanelId = clickedTab.getAttribute('aria-controls');

    // Деактивировать все вкладки и скрыть все панели
    tabLinks.forEach((link, index) => {
      link.setAttribute('aria-selected', 'false');
      link.parentElement.classList.remove('active');
      // Убеждаемся, что панель существует перед попыткой скрыть
      if (tabPanels[index]) {
         tabPanels[index].hidden = true;
         tabPanels[index].classList.remove('active');
      }
    });

    // Активировать кликнутую вкладку и показать соответствующую панель
    clickedTab.setAttribute('aria-selected', 'true');
    clickedTab.parentElement.classList.add('active');
    
    const targetPanel = tabsContainer.querySelector(`#${targetPanelId}`);
    if (targetPanel) {
        targetPanel.hidden = false;
        targetPanel.classList.add('active');
    }
    
    // Опционально: обновить URL hash
    // window.location.hash = clickedTab.getAttribute('href');
  }

  // Назначить обработчик клика на каждую ссылку вкладки
  tabLinks.forEach(link => {
    link.addEventListener('click', handleTabClick);
  });

  // Опционально: активировать вкладку по URL hash при загрузке
  /*
  if (window.location.hash) {
      const activeTab = tabsContainer.querySelector(`.tabs-nav a[href="${window.location.hash}"]`);
      if (activeTab) {
          activeTab.click();
      }
  }
  */
}

// Инициализировать все контейнеры вкладок на странице после загрузки DOM
document.addEventListener('DOMContentLoaded', () => {
  const allTabsContainers = document.querySelectorAll('.manual-tabs'); // Используем класс .manual-tabs
  allTabsContainers.forEach(initializeTabs);
  
  // Также инициализируем табы, созданные шорткодом
  const shortcodeTabsContainers = document.querySelectorAll('.custom-tabs-container'); 
  shortcodeTabsContainers.forEach(container => initializeTabs(container)); // Используем ту же функцию инициализации
});