Как сделать смену контента по нажатию на кнопку без перезагрузки страницы?
Добрый день. Есть несколько блоков информации, которые нужно отобразить на одной странице последовательно, чтобы изначально был виден 1 блок, потом по нажатию кнопки он пропадал и на его месте появлялся 2 блок и так далее. Желательно чтобы была возможность вернуться назад к предыдущему блоку (должно в итоге получиться что-то типа викторины, только вместо вариантов ответа - текст)
Как это можно реализовать на WordPress?
Предполагаю что тут нужен JavaScript или может какой-то плагин. Но что-то никак не могу найти ничего подходящего
Дополнительно:
Покажите, что Вы уже сделали
Ответы:
Поищите виджет карусель или step
Вот такой есть вариант
https://codepen.io/alexanderr-prog/pen/abQLOGZ
Или слайдер вам нужен, если нужна карусель. Погуглите slick slider jquery
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Такой сценарий не требует перезагрузки страницы и не требует AJAX, если все блоки текста уже известны заранее. Это обычный пошаговый интерфейс: на странице лежат несколько блоков, активным считается только один, кнопка Далее показывает следующий, кнопка Назад возвращает предыдущий. WordPress здесь нужен только как место, где вы храните и выводите HTML, а сама смена состояния делается JavaScript.
Рабочая структура обычно такая:
В WordPress это можно реализовать несколькими способами. Если страница одна, самый быстрый путь — HTML-блок Gutenberg или HTML-виджет в Elementor, а CSS и JS подключить через тему или через отдельный небольшой плагин для сайта. Если такие блоки будут повторяться на разных страницах, лучше сделать шорткод или Gutenberg-блок, чтобы редактору не приходилось копировать разметку и случайно ломать классы.
Слайдеры вроде Slick стоит подключать только тогда, когда нужна именно слайд-анимация, свайпы, точки навигации, автопрокрутка или сложная карусель. Для простой викторины из текстовых экранов это лишняя зависимость. Чем меньше стороннего JavaScript, тем ниже риск конфликтов с темой, конструкторами страниц и оптимизаторами скорости.
Обратите внимание на детали интерфейса. На первом шаге кнопку Назад лучше отключать или скрывать, на последнем шаге кнопку Далее можно заменить на Завершить или тоже отключить. Если блок похож на тест или инструкцию, полезно показывать счётчик текущего шага, например 2 из 5. Для доступности кнопки должны быть настоящими button, а не ссылками без href, потому что так корректнее работают клавиатура и вспомогательные технологии.
Если контент должен подгружаться с сервера только после нажатия, тогда уже нужен AJAX или REST API. Но по описанию у вас несколько готовых текстовых блоков на одной странице, поэтому проще и надёжнее вывести их сразу и переключать видимость на клиенте. Это быстрее для пользователя и проще в поддержке.