Спойлер для WordPress с плагином и без

У вебмастеров нередко появляется необходимость закрывать часть контента страницы, сделать который видимым можно после нажатия на специальный значок, текст или кнопку. Выполняет эту функцию, так называемый, спойлер. Спойлер на WordPress блоге способен освободить часть пространства на странице, пряча под собой часть необязательного для просмотра материала, обычно выступающего в качестве дополнительной информации.

спойлер wordpress плагин

Если вы давно хотели такую фишку для своего блога, то вам обязательно нужно изучить данный пост и узнать о том, как данная функция может быть реализована — я покажу как сделать спойлер WordPress плагином и с помощью голых скриптов и кодов (без плагина).

Что такое спойлер?

В общем, если сказать в двух-трех словах, спойлер на WordPress — это объект на странице, который открывает/скрывает часть контента расположенного на ней, тем самым маскирует его от посетителей. Пример спойлера на WordPress можно наблюдать ниже.

Показать +

wordpress плагин advanced spoiler

На практике он полезен тем, что способен скрыть огромные массивы кода, изображения и видео, текст и ссылки. Это, бесспорно, экономит место на блоге и приводит его в человеческий вид.

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

Спойлер на WordPress — плагин Advanced Spoiler

Скачайте и установите плагин Advanced Spoiler (он есть в WordPress базе плагинов). Перейдите в административную панель — «Консоль», откройте вкладку “Настройки” – “Advanced Spoiler”.

Кое что в настройках рекомендую поправить, это позволит русифицировать плагин, то есть настроить отображение кнопок на русском языке. А именно ввести слово «Показать» (открываем спойлер) и «Скрыть» (закрываем спойлер). Скриншот страницы настроек на изображении ниже.

настройки advanced spoiler

Для вставки спойлера на WordPress блоге в пост, пройдите в окно редактирование поста и обратите внимание на панель инструментов. Появилась новая кнопка “Включить интерцептор”. Активации осуществляется в 2 шага:

  1. Выделяете нужный участок контента мышью,
  2. Нажимаете кнопку, которая закатывает этот участок в спойлер — “Включить интерцептор”.

каак вставить спойлер в запись wordpress

Откроется диалоговое окно, которое предложит выбрать эффект и нажать “Okay”.

как сделать спойлер

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

сделать спойлер в сайдбаре

WordPress спойлер без плагина

Данный способ создания спойлера примечателен тем, что:

  • во-первых, не возникает никакой дополнительной нагрузки на сайт (она минимизирована) и тем самым не возникает необходимость ускорения блога.
  • во-вторых, особенностью установки спойлера на WordPress без плагина является отсутствие ограничений по его настройкам. У нас появляется возможность изменять оформление, шрифт, фон и размер.

Откройте файл functions.php, расположенный в теме и разместите в нем php функцию, отвечающую за вывод шорт кода, после тега «<?php», предварительно отступив несколько строк вниз, или в самом конце перед «?>». Чтобы избежать дополнительных проблем, сделайте копию файла functions.php до внесения изменений.

Следующим шагом, будет установка или вставка JQuery библиотеки, скрипт нужно разместить в header.php. 99%, что эта библиотека уже присутствует на вашем блоге, поэтому подробно расписывать этот шаг не хочу, если не заработает, то в поиске найдите — «как подключить библиотеку JQuery».

Ниже, в этот же файл или в footer.php (предпочтительнее) скопируйте скрипт расположенный ниже. Он будет нести ответственность за функциональность спойлера.

Двигаемся дальше. Теперь рассмотрим CSS стили, которые помогут нам разобраться с оформление. Скопируйте код в style.css темы. В дальнейшем его можно будет редактировать, так чтобы внешний вид подходил под дизайн.

Вывод спойлера на страницы сайта осуществляется вставкой в нужное место опубликованного ниже кода. В нем вы можете задать не только содержание, которое будет хранить в себе spoiler, но и его название.

wordpress спойлер без плагина

Теперь у вас есть еще один инструмент позволяющий сделать ваш блог более функциональным и красивым — спойлер штука очень полезная. Успехов вам в реализации. Если возникнут проблемы, прошу писать в комментариях. А чтобы быть в курсе выхода новых постов, подписывайтесь на обновления и получайте их на E-mail.

Спойлер для WordPress с плагином и без: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *