Здравствуйте !
Я думаю слово спойлер знакомо многим, а вот какое отношение это слово имеет к сайту, знают не многие. Спойлера для сайта – это очень удобная функция, которая позволит вам компактно и стильно упаковывать большое количество информации в маленькое пространство. Спойлер это вкладка, для которой можно установить стиль и цвет фона. Нажав на спойлер (вкладку) у вас откроется вся заложенная в него информация. В спойлер можно вставлять не только текст, но и медиа элементы – фото, видео, слайдер и т.д.
Однотонные спойлера
Создаются однотонные и цветные спойлера разными плагинами. Начнём с создания однотонных спойлеров, их можно создавать с помощью плагина Shortcodes ultimate, данный плагин предназначен не только для создания спойлеров, но и для создания множества функций и веб-элементов для вашего сайта. Как работать с плагином, как его настраивать, я уже рассказывал, можете почитать – Здесь.
Ну а если вы уже установили плагин и познакомились с ним, то тогда приступим к созданию спойлера. Вы сможете вставить спойлер в любое место на вашем сайте, можно вставить в запись, можно в виджет, а также можно вставить шорткод спойлера в файл php, к примеру footer.php или header.php, в конце статьи я объясню как это сделать.
Ну а сейчас переходим в запись, и нажимаем на кнопку – Вставить шорткод.
Далее, из предложенного списка, нужно выбрать функцию – спойлер.
Затем, у вас откроется окно для создания спойлера.
Теперь я подробно разберу каждую настройку. Начнём по порядку с самого верха:
– Заголовок, напишите здесь заголовок, который будет отображаться на спойлере.
– Открыт, здесь вам нужно выбрать будет ли спойлер открыт сразу же, или только при нажатии на него.
– Стиль, выберите стиль спойлера, есть три варианта: стильный, простой, по умолчанию.
– Иконка, выберите иконку, которая будет отображаться в левой части спойлера.
– Якорь, это функция для того, чтобы спойлер открывался по ссылке. Например придумываете название спойлеру, указываете его в этом поле, название привязываете к URL адресу страницы, где будет располагаться спойлер.
– Класс, если не разбираетесь в css стилях, то оставьте поле пустым. Здесь можно задать свой стиль для спойлера.
– Содержимое, здесь вам нужно добавить содержимое, которое будет показываться при открытии спойлера. Сюда вы можете вставить любой шорткод, видео, фото, записи, обычный текст и т.д.,
Всё, в конце можете посмотреть что у вас получилось, нажав на кнопку – Предпросмотр, а если вас всё устраивает жмите – Вставить шорткод. Как видите здесь всё просто, если не побоятся и разобратся. Таким же образом можно вставлять спойлер в сайдбар, после установки плагина shortcodes ultimate, у вас появится для этого специальный виджет – Шорткоды.
Цветные спойлера
Цветные спойлера создаются с помощью другого плагина, который предоставляет только функции спойлера. Называется плагин – BBSpoiler, плагин очень простой и понятный, не требует настройки. Скачать плагин вы сможете прямо из своей административной панели wordpress, для этого перейдите по вкладке: Плагины – Добавить новый, введите название плагина в поле поиска, нажмите Enter, и установите открывшийся плагин.
Далее, после установки и активации плагина, создайте новую запись или страницу, или откройте для редактирования уже имеющиеся на вашем сайте. В визуальном редакторе wordpress у вас появится новая вкладка со значком в виде буквы S.
Нажав на значок плагина, у вас появится окно для создания спойлера.
Пройдёмся быстренько по настройкам:
– Заголовок, здесь вам нужно указать заголовок, который будет отображаться на спойлере.
– Текст, здесь добавьте содержание, которое будет показываться при открытии спойлера. Можете добавить сюда любой шорткод, с любым содержимым.
– Стиль, выберите стиль спойлера, вам предоставлено на выбор 10 цветовых решений спойлеров.
– Ссылка свернуть, отметьте галочкой будет ли показываться ссылка свернуть внизу развёрнутого спойлера. Вообще спойлер открывается и закрывается при нажатии на него, поэтому эту ссылку можно не ставить.
Всё, как видите ничего сложного здесь нет, надо лишь разобраться. Теперь вы знаете как создаются простые, стильные и цветные спойлера для сайта.
Я обещал вам показать, как можно вставить шорткод со спойлером в файл php, к примеру в файл header.php (верх сайта) или footer.php (подвал сайта). Для таких мест есть специальный HTML код, в который нужно вставить шорткод. Вот как выглядит этот код:
<?php echo do_shortcode(‘[shortcode]‘); ?> жирным я отметил то место, куда нужно вставить ваш шорткод. Всё, данный HTML код с шорткодом вам нужно вставить в файл php.
На этом у меня всё, я надеюсь что данная статья оказалась для вас полезной, и вы извлекли из неё много полезной информации для себя, и для своего сайта. Следите за мной, до новых встреч !
У вас остались вопросы ? напишите мне письмо в обратную связь, либо оставьте комментарий к записи. Я всем отвечу !
полезная инфа давно искал…блог супер спасибо.
У меня проблема не могу вставить аккордеон в спойлер (аккордеон очень длянный, а вставляется только одна часть). Делаю всё это в приложением шоткодов (первый вариант из статьи)
Почему вставляется только одна часть?
Может я что-то не так делаю, но изначально я сделала красивый аккордеон, всё получилось аккуратно и понятно. Далее я этот аккордеон копирую и пытаюсь поместить в спойлер. В итоге в этом спойлере появляется только первая часть аккордиона (грубо говоря первый спойлер аккордиона), думаю причина в конфликте шоткодов. Но как это исправить я пока не додумалась.
Аккордеон и спойлер от разных плагинов?
нет, один плагин шоткодов. а надо разные? можете посмотреть что есть на. Логика проста – хочу все плюсы спрятать в спойлер.
Лучше использовать один плагин Shortcodes Ultimate. Не понял, вы хотите несколько спойлеров спрятать в один спойлер? Зачем?
этот плагин и использую. хочу спрятать, чтоб получилось как FAQ, и кому, что из списка надо: тот то и открывает.
Обычно в FAQ используют аккордеон со спойлерами, то есть просто несколько спойлеров вместе и всё. У вас я посмотрел, так и сделано. Не пойму, что вы ещё хотите сделать? В плагине есть функция аккордеон, там всё просто.
Я хочу эти 11 пунктов аккордиона засунуть в спойлер, дабы они были сразу закрыты. Возможно действительно стоит попробовать засунуть аккордеон в аккордеон))) позже поэксперементирую. спасибо, Илья, за диалог и крутую статью!!!
Аккордеон состоит из спойлеров. Вы хотите несколько спойлеров засунуть в ещё один спойлер? Какая-то каша получается. Вам нужно шорткод аккордеона вставить в Содержимое спойлера, в поле в окне создания спойлера.