Как сделать стильный спойлер на сайте

Здравствуйте !

Я думаю слово спойлер знакомо многим, а вот какое отношение это слово имеет к сайту, знают не многие. Спойлера для сайта — это очень удобная функция, которая позволит вам компактно и стильно упаковывать большое количество информации в маленькое пространство. Спойлер это вкладка, для которой можно установить стиль и цвет фона. Нажав на спойлер (вкладку) у вас откроется вся заложенная в него информация. В спойлер можно вставлять не только текст, но и медиа элементы — фото, видео, слайдер и т.д.

 

 

Однотонные спойлера

 

Создаются однотонные и цветные спойлера разными плагинами. Начнём с создания однотонных спойлеров, их можно создавать с помощью плагина 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.

 

На этом у меня всё, я надеюсь что данная статья оказалась для вас полезной, и вы извлекли из неё много полезной информации для себя, и для своего сайта. Следите за мной, до новых встреч !

 

У вас остались вопросы ? напишите мне письмо в обратную связь, либо оставьте комментарий к записи. Я всем отвечу !

 


Оцените статью