Как добавить автоматическое открытие и закрытие аккордеона в WordPress

Аккордеоны — это удобный способ компактно представить большой объем информации на страницах сайта WordPress. Однако иногда требуется, чтобы аккордеон автоматически открывался при загрузке страницы или закрывался через определенное время, чтобы улучшить пользовательский опыт. В этой статье мы разберём, как добавить автоматическое открытие и закрытие аккордеона с помощью готовых плагинов и кастомного кода.

Выбор плагина для аккордеона с автоматическим открытием

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

1. Accordion by WPShop

Плагин Accordion от WPShop предоставляет гибкий функционал аккордеонов, включая API для управления состоянием секций через JavaScript.

Основные возможности:

• Создание неограниченного числа аккордеонов и секций;
• Поддержка автоматического открытия заданной секции;
• Возможность программного управления через JS;
• Совместимость с Gutenberg и классическим редактором.

2. Shortcodes Ultimate

Еще один мощный плагин с большим набором шорткодов, включая аккордеоны. Он поддерживает открытие определенных секций через параметры и легко адаптируется под кастомные скрипты.

Как реализовать автоматическое открытие и закрытие аккордеона с помощью кода

Если вы хотите добавить кастомный функционал без плагинов или поверх существующего, ниже пример кода, который автоматически открывает первую секцию аккордеона при загрузке и закрывает ее через 5 секунд.

document.addEventListener('DOMContentLoaded', function() {
  var accordions = document.querySelectorAll('.yarpp-accordion .yarpp-accordion-section');
  if (accordions.length > 0) {
    // Открываем первую секцию
    accordions[0].classList.add('active');
    var content = accordions[0].querySelector('.yarpp-accordion-content');
    content.style.maxHeight = content.scrollHeight + 'px';

    // Закрываем через 5 секунд
    setTimeout(function() {
      accordions[0].classList.remove('active');
      content.style.maxHeight = null;
    }, 5000);
  }
});

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

<div class="yarpp-accordion">
  <div class="yarpp-accordion-section">
    <div class="yarpp-accordion-header">Заголовок 1</div>
    <div class="yarpp-accordion-content">Содержимое 1</div>
  </div>
  <div class="yarpp-accordion-section">
    <div class="yarpp-accordion-header">Заголовок 2</div>
    <div class="yarpp-accordion-content">Содержимое 2</div>
  </div>
</div>

Настройка автоматического открытия аккордеона по URL-параметру

Иногда полезно открывать определённую секцию аккордеона, если пользователь перешёл по ссылке с параметром, например ?accordion=2. Это удобно для прямой навигации к нужной информации.

Пример кода для этой задачи:

function yarpp_getUrlParameter(name) {
  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  var results = regex.exec(location.search);
  return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

document.addEventListener('DOMContentLoaded', function() {
  var index = parseInt(yarpp_getUrlParameter('accordion'));
  var accordions = document.querySelectorAll('.yarpp-accordion .yarpp-accordion-section');
  if (!isNaN(index) && index > 0 && index <= accordions.length) {
    var section = accordions[index - 1];
    section.classList.add('active');
    var content = section.querySelector('.yarpp-accordion-content');
    content.style.maxHeight = content.scrollHeight + 'px';
  }
});

Такой подход позволяет открывать нужный аккордеон без дополнительного вмешательства пользователя.

Рекомендации по улучшению UX и производительности

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

Рекомендации:

• Используйте плавные CSS-переходы для открытия и закрытия, чтобы не было резких изменений;
• Не открывайте сразу все секции — это увеличит нагрузку на DOM и ухудшит восприятие;
• Добавляйте задержку или условие, чтобы аккордеон открывался только при определённых сценариях;
• Тестируйте на мобильных устройствах, чтобы избежать проблем с прокруткой и видимостью контента.

Для чего полезен такой функционал и где применять

Автоматическое открытие аккордеонов отлично подходит для FAQ, инструкций, многосекционных форм и страниц с большим количеством текстовой информации, где важно показать пользователю конкретный раздел сразу.

Например, если пользователь перешёл по ссылке из письма поддержки, можно автоматически открыть ту секцию с ответом, которая ему нужна, повышая удобство и сокращая время поиска информации.

Также это удобно при внедрении лендингов с пошаговыми инструкциями, где аккордеон показывает прогресс пользователя и автоматически открывает нужный этап.

Заключение

Добавление автоматического открытия и закрытия аккордеонов в WordPress — простая, но мощная техника, улучшающая UX. С помощью плагинов, таких как Accordion от WPShop и кастомного JavaScript вы можете гибко управлять поведением аккордеонов на сайте.

Используйте приведённые примеры и адаптируйте их под свои задачи, чтобы сделать интерфейс вашего WordPress-сайта удобнее и современнее.