Иногда требуется разместить большой материал на одной странице. Но как это сделать максимально удобно, чтобы не приходилось бесконечно листать страницу в браузере и при этом вся информация индексировалась на одной странице? Сейчас расскажу.
Проще всего разместить разную информацию в разных вкладках (так называемых "табах"). То есть у вас на странице будут отображаться аккуратные информативные закладки (вроде страниц в Excel) плюс какая-то общая информация. А при переходе по закладкам - открывается соответствующая информация.
Вкладки выглядят вот так:
То есть при клике на разные вкладки - открывается разное содержимое.
В данном случае, разные таблицы с прайсами.
Количество вкладок неограничено, но удобнее всего обходиться 2-5.
Как организовать подобные закладки в WordPress?
Проще всего это сделать специализированным плагином, который называется WordPress Post Tabs.
Для этого нужно установить его из репозитория.
Подробная статья "Как устанавливать плагины на WordPress"
После установки плагина достаточно будет в редакторе кликнуть на кнопку и ввести названия для вкладок. Естественно, поместив нужные тексты внутри шорткодов: [wptab name='название вкладки'] Текст для вкладки [/wptab]
Вот так:
Конечный шорткод [end_wptabset] обозначает конец зоны действия вкладок. И любой текст, стоящий после него, будет показываться на всех вкладках. Это удобно, если вам нужно разместить какую-то общую информацию.
Универсальный плагин для табов
Я сейчас использую для оформления страниц вот такой плагин-комбайн Shortcodes Ultimate.
Почитайте лучшие плагины для WordPress я там чуть подробнее писал о нем и других мастхев плагинах.
В итоге вкладки делаются очень просто, буквально в два клика и хорошо работают на всех сайтах, в мобильных режимах и т.п.
Пример вкладок
и вертикально:
У меня после установки этого плагина появились лишние br (перед табами), в статье и коде сайта всё чисто 100%, софтом искал в плагине, все br которые там нашел удалил - толку 0, беда просто с ним.
Попробуйте плагин Shortcodes Ultimate - там вкладки одна из его опций.
Просто супер работает, я сейчас только с ним все и делаю
Решил проблему с помощью margin-top: -50px;
Может поможет кому-то)