Специфическое меню внутри страницы загружает разный контент без перезагрузки по той же ссылке.

Я разрабатываю веб-сайт для НПО, и они хотят, чтобы он был максимально удобным для пользователя, так как сайт ориентирован на людей старше 65 лет. Здесь задача кажется немного сложной. У меня слишком много вопросов о том, как с этим справиться.

Им нужна страница с меню внутри (вкладки), и под каждой вкладкой будет различное содержимое. Это меню будет специфичным для этой страницы (оно не появится в другой части сайта, только на этой странице), и все это будет под одной ссылкой, потому что они хотят, чтобы этот конгломерат контента был легкодоступным.

Я нарисовал что-то, чтобы попытаться передать, как это будет выглядеть. В основном, я просто хочу быть уверенным, что движусь в правильном направлении, не упуская при этом более хорошего способа сделать это.

Мои вопросы:

• Как добавить специфичный предварительно загруженный контент под эти вкладки?
• Как редактор сможет выбрать контент, который будет под каждой вкладкой?
• Я узнал о пагинации, но она, кажется, распределяет контент через разные ссылки, поэтому, вероятно, мне придется использовать AJAX для перезагрузки содержимого страницы. Верно ли это предположение?
• У вас есть какие-либо другие предложения или потенциальные проблемы, которые вы можете предвидеть, и советы по их решению?

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

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

Вы можете сделать что-то подобное вручную с использованием CSS и Javascript. Но я предпочитаю разрабатывать свои сайты, используя Foundation 6 как фреймворк. Он включает в себя множество готовых решений, включая контент с вкладками. Использование такого фреймворка, как Foundation, позволяет мне просто добавлять некоторые классы в мой html в редакторе постов.

В вашей теме уже может быть включен фреймворк (Bootstrap, Foundation, другие), который имеет предварительно созданные классы для вкладок. Если его нет, вам, возможно, придется написать свой CSS и JS для создания вкладок или выбрать плагин, который добавляет CSS и JS, позволяющий добавлять вкладки.

Если всего несколько страниц имеют такой контент с вкладками, проще всего просто создать правильную структуру HTML и классов в текстовом представлении редактора контента.

Но это довольно легко может сломать редактор, поэтому это не хорошее решение, если вам нужно иметь много страниц с вкладками или если ваши страницы с вкладками редактируются часто. В этом случае вы можете настроить какое-то решение с Advanced Custom Field, которое создаст формы для каждой вкладки, а затем написать пользовательский шаблон, который обернет эти поля ACF в правильную структуру HTML и классов. В ACF вы, вероятно, будете использовать одну группу полей с множеством полей, таких как tab1_title, tab1_content, tab2_title и т. д.

Чтобы создать формы, которые редакторы и авторы смогут использовать на странице редактирования поста, вам нужно создавать пользовательские поля. Наиболее распространенный способ сделать это – с помощью плагина Advanced Custom Fields, который очень прост в освоении и имеет отличный сайт с документацией. ACF позволяет создать поле и указать вид постмета-бокса, который позволяет вводить поля.

У ACF также есть отличная документация о том, как отображать эти поля в шаблоне. Вам нужно будет уметь редактировать некоторый PHP и фактически создать HTML-структуру вкладок с помещенным внутрь содержанием из полей ACF. Точные детали зависят от требований формы Bootstrap и имен, выбранных для ваших пользовательских полей.

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