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

Стильный спойлер ноутбук смартфон телефон зарядка Прибамбасы для сайта

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

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

 

 

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

 

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

 

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

 

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

 

info-effect.ru
Добавить комментарий для Илья Журавлёв Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Александр

    полезная инфа давно искал…блог супер спасибо.

    Ответить
  2. Надя

    У меня проблема не могу вставить аккордеон в спойлер (аккордеон очень длянный, а вставляется только одна часть). Делаю всё это в приложением шоткодов (первый вариант из статьи)

    Ответить
    1. Admin автор

      Почему вставляется только одна часть?

      Ответить
  3. Надя

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

    Ответить
    1. Admin автор

      Аккордеон и спойлер от разных плагинов?

      Ответить
  4. Надя

    нет, один плагин шоткодов. а надо разные? можете посмотреть что есть на. Логика проста – хочу все плюсы спрятать в спойлер.

    Ответить
    1. Admin автор

      Лучше использовать один плагин Shortcodes Ultimate. Не понял, вы хотите несколько спойлеров спрятать в один спойлер? Зачем?

      Ответить
  5. Надя

    этот плагин и использую. хочу спрятать, чтоб получилось как FAQ, и кому, что из списка надо: тот то и открывает.

    Ответить
    1. Admin автор

      Обычно в FAQ используют аккордеон со спойлерами, то есть просто несколько спойлеров вместе и всё. У вас я посмотрел, так и сделано. Не пойму, что вы ещё хотите сделать? В плагине есть функция аккордеон, там всё просто.

      Ответить
  6. Надя

    Я хочу эти 11 пунктов аккордиона засунуть в спойлер, дабы они были сразу закрыты. Возможно действительно стоит попробовать засунуть аккордеон в аккордеон))) позже поэксперементирую. спасибо, Илья, за диалог и крутую статью!!!

    Ответить
    1. Admin автор

      Аккордеон состоит из спойлеров. Вы хотите несколько спойлеров засунуть в ещё один спойлер? Какая-то каша получается. Вам нужно шорткод аккордеона вставить в Содержимое спойлера, в поле в окне создания спойлера.

      Ответить