Здравствуйте !
Я думаю слово спойлер знакомо многим, а вот какое отношение это слово имеет к сайту, знают не многие. Спойлера для сайта — это очень удобная функция, которая позволит вам компактно и стильно упаковывать большое количество информации в маленькое пространство. Спойлер это вкладка, для которой можно установить стиль и цвет фона. Нажав на спойлер (вкладку) у вас откроется вся заложенная в него информация. В спойлер можно вставлять не только текст, но и медиа элементы — фото, видео, слайдер и т.д.
Однотонные спойлера
Создаются однотонные и цветные спойлера разными плагинами. Начнём с создания однотонных спойлеров, их можно создавать с помощью плагина 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.
На этом у меня всё, я надеюсь что данная статья оказалась для вас полезной, и вы извлекли из неё много полезной информации для себя, и для своего сайта. Следите за мной, до новых встреч !
У вас остались вопросы ? напишите мне письмо в обратную связь, либо оставьте комментарий к записи. Я всем отвечу !
