Плагины для wordpress спойлер

Автопринадлежности

Урок 200. Как создать спойлер WordPress с плагином и без

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

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

Большие куски текста можно скрывать, чтобы статья не выглядела громоздкой и не отпугивала читателя. Такие статьи можно сделать удобнее для чтения, с хорошей навигацией, и в этом случае не придется страницу постоянно прокручивать.

Часто спойлер применяют на страницах FAQ (часто задаваемые вопросы), и выглядит это приблизительно так:

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

Плагин BBSpoiler 2.00

Плагин BBSpoiler, версии 2.00 прошел успешно тест на последней версии WordPress 4.3.1, поэтому его можно смело устанавливать. С помощью этого плагина Вы можете скрыть часть текста в красиво отформатированный контейнер. При нажатии на специальную вкладку, раскрывается спрятанный текст.

Плагин создает свою собственную кнопку/вкладку «Спойлер». Вы можете выбирать вкладки разных цветов, их всего 10. Вот как это выглядит:

Плагин можно установить из панели администратора: «Плагины» -> «Добавить новый», и в поиске набрать название «BBSpoiler». После активации плагина, не нужно делать никаких настроек, плагин готов к работе.

Теперь в визуальном редакторе появится красная дополнительная кнопка « S », а в текстовом редакторе кнопка «spoiler».

После нажатия на кнопку « S », появляется окно, где в одно поле надо вписать название спойлеру, а в другом ввести текст, который хотим скрыть. Там же можно выбрать цвет спойлера «Стили», а затем, нажать «ОК». Галочку «Ссылка свернуть» лучше оставить.

Как скрыть изображение с помощью спойлера «BBSpoiler»? Добавьте вначале изображение в статью обычным способом, а потом перейдите в текстовый редактор, и скопируйте HTML код этого изображения.

Перейдите в визуальный редактор, поставьте в тексте курсор, где должна быть картинка. Нажмите красную кнопку « S », дайте название спойлеру, а в большое поле вставьте HTML код изображения.

Как вставить изображение в текстовом редакторе? Добавьте обычным способом изображение в текст. Перейдите в текстовые редактор, найдите код этого изображения, и скопируйте его. Нажмите кнопку «spoiler», после чего появится код [spo iler title=’Title’]Text[/spo iler]
. Теперь в место, где написано «Text», нужно вставить код изображения.

С этим плагином мы разобрались, пора переходить к следующему.

Плагин «Advanced Spoiler» 2.02

Плагин «Advanced Spoiler» также прошел тест на последней версии WordPress 4.3.1, хотя последний раз он обновлялся 6 лет назад.

После установки плагина, перейдите в настройки: «Настройки» -> «Advanced Spoiler». Здесь можно перевести слова на русский: show (показать) и hide (скрыть). Вберите эффект по умолчанию. Мне понравился эффект «slide», и «скорость эффекта» — медленный. Больше ничего можно не трогать. Нажмите в низу страницы «Сохранить настройки»

Читайте также:  Накладка порога уаз патриот 2019

Для того чтобы установить спойлер в статье, нужно выделить текст, а затем нажать кнопку «Включить интерцептор». Эта кнопка добавится в панели редактора после установки плагина.

Появится окошко, где нужно задать некоторые параметры:

  1. Выбрать тип эффекта
  2. Дайте название спойлеру
  3. Нажать «Okay»

Чтобы спрятать изображение, выделите его, а затем нажмите «Включить интерцептор». Но лучше это делать в текстовом редакторе. Перед HTML кодом с изображением подставьте [spo iler] , и в конце кода [/spo iler] . Это относиться и к видео.

Спойлер можно применять не только в тексте, но и в сайдбаре, или футере. Просто надо добавить текст с тегами [spo iler] текст [/spo iler] .

Ну, а теперь рассмотрим, как создать спойлер WordPress без плагина.

Как создать спойлер WordPress без плагина

Я расскажу только последовательность действий, куда вставить готовые коды. Перед редактированием файлов, сохраняйте их оригинал . Редактируются только файлы шаблона, поэтому не спрашивайте, где тот, или иной файл находится.

Открываем файл function.php, и после кода вставляем следующий код

// Спойлер для блога
function hyper_spoiler($atts, $content) <
if (!isset($atts[name])) <
$sp_name = ‘Спойлер’;
> else <
$sp_name = $atts[name];
>
return ‘

Подключаем библиотеку Jquery с сервера Google.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Урок 218 Как сделать спойлер в WordPress с помощью плагина Advanced Spoiler

Добрый день! Меня часто посещала мысль про то, как сделать спойлер в WordPress. Вы не знаете, что такое спойлер? Вот они – эти самые заветные спойлеры:

Спойлер в Вордпресс позволяет скрыть некий участок страницы/текста, который можно открыть/развернуть. Очень удобно скрывать некие участки, которые не обязательны к просмотру или на больших страницах.

Да, можно сделать вывод спойлеров самостоятельно (в интернете куча “мануалов” – информации), но так как я не любитель этих всех кодов, да и не очень хорошо в них разбираюсь, для меня куда проще было сделать вывод спойлера через WordPress плагин. Вопрос был другим, а какой именно плагин использовать? Идеальное решение нашлось, встречайте, плагин Advanced Spoiler.

Спойлер в WordPress с помощью плагина Advanced Spoiler

  1. Сначала, как и всегда Вам нужно скачать и установить плагин Advanced Spoiler.
  2. Сейчас переведем текст, который по умолчанию стоит Show и Hide. Для этого перейдите в админке WordPress –> Параметры –> Advanced Spoiler и переведите там эти слова:
  3. Также на этой странице Вы можете выбрать эффект спойлера и т.п. А вывести этот спойлер очень просто. Для этого заходите на страницу редактирования поста/страницы, выделяете необходимый текст (в моем случае это картинки в “Целях”) и нажимаете на кнопку “Включить интерцептор”:
  4. И уже там выбираете эффект (мне понравился эффект “slide”) и нажимаете на кнопку “okay”:
  5. Результат проделанной работы, Вы можете видеть на той же странице “Цели”. Также Вы можете скрыть нужный текст в шаблоне (например, в сайдбаре, список целей и т.п.). Для этого используйте используйте следующий шорткод:

Вот и все! Вот такой коротенький урок получился сегодня . Возможно, данная функция кому-то, как и мне, пригодится.

Источник

Спойлер (Spoiler) для WordPress — плагин BBSpoiler

Просмотров: 2 709

Приветствую вас, дорогие друзья! Сегодня у меня очень короткий пост, для тех кому нужно упаковывать большое количество инфы в маленькое пространство, то есть, скрыть часть текста/картинки под спойлер. Тема повествования у нас будет такая — как сделать спойлер на сайте/блоге WordPress? Удобный и красивый Spoiler для сайта WordPress можно сделать при помощи специального плагина.

Спойлер (Spoiler) для сайта WordPress

Для того, чтобы вам не рыскать и интернете в поисках достойного модуля, я вам посоветую (плохого я вам не порекомендую) использовать плагин BBSpoiler от автора Flector. Зовут его Александр (ник Flector) и он знаком уже нам по таким замечательным плагинам как — Яндекс.Турбо, Яндекс.Дзен, Noindex Links и других (их у него БОЛЬШЕ ДЕСЯТКА). Одним словом — молодчина. А теперь, товарищи «бандиты», перейдём непосредственно к нашим баранам. Ой, к BBSpoiler.

Читайте также:  Брызговики для прицепа грузового автомобиля

Да, чуть не забыл, ранее популярные плагины (Advanced Spoiler) с помощью которых можно прятать текст под спойлер на сайте Вордпресс ушли в небытие, так что выходит BBSpoiler на сегодняшний день на первом месте. Это, так, для справки.

Сплойлер – это скрытая информация на сайте, которая появляется после нажатия кнопки или ссылки.

Плагин BBSpoiler — спойлер для WordPress

Плагин BBSpoiler для сайта WordPress

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

Пример спойлера с картинками

Плагин создаст свою собственную кнопку Spoiler в визуальном редакторе:

Кнопка Spoiler и диалоговое окно плагина

Но вы, также можете вставлять спойлеры напрямую, через вставку тегов. Например:

Есть дочерние спойлеры в родительском спойлере:

Дочерние спойлеры

Цветовые стили на ваш выбор. Вы можете изменить цвет спойлера в wordpress по своему усмотрению:

Цветовые стили спойлера

Установить BBSpoiler можно стандартным способом, через админку сайта. Кнопку плагина Spoiler вы найдете в визуальном редакторе после активации плагинчика. Вот, как то, так, дамы и господа. Надеюсь мой малюсинький нынешний пост был для вас полезен. До новых встреч и удачи вам. Пока, пока.

Источник

WordPress — самый простой спойлер без шорткодов

Задача: настроить спойлер для движка WordPress с минимальным вмешательством в код и удобным для редактора Gutenberg.

Без шорткодов, ибо они портят всю идеологию редактора текста и без HTML обертки, которую нужно создавать в существующих вариациях.

Решение: получилось реализовать продвинутый спойлер, в котором нужно прописать всего два CSS класса в меню «дополнительно» для блока редактора Gutenberg.

WordPress спойлер раскрыт

WordPress Spoiler в редакторе Gutenberg

Если вы еще не поняли всех преимуществ данного редактора, крайне рекомендую оформить в нем хотя бы 10 статей. За это время все странности и неудобства пройдут и откроется простота и легкость работы с текстом по отношению к стандартному редактору.

WordPress Spoiler в редакторе Gutenberg

Выше показана стандартная визуальная разметка текста в редакторе Gutenberg. По умолчанию каждая новая строка оборачивается абзацем P. Каждый абзац можно редактировать на HTML индивидуально. Предусмотрен интерфейс для указания CSS класса без использования HTML. Ниже пример:

HTML разметка для спойлера

Все, что нужно, это создать два абзаца — до и после спойлера и прописать им в блоке дополнительно CSS классы .sp-start и .sp-end.

Данные классы имеют display: none; и не будут отображаться на странице. Дабы блоки не удалялись, прописать им любой текст (на скриншоте просто spoiler).

Предусмотрено автоматическое создание заголовка спойлера, текст для котрого будет подставляться по умолчанию. Если нужен индивидуальный текст, он создается также, как и блоки, окружающие спойлер.

Подробнее о коде

HTML разметка спойлера

Итоговый код спойлера должен строго соответствовать иерархии т.к. он перебирается на jQuery и не будет работать, если что-то будет не на своих местах. Иерархия очень проста.

Пояснение

  • .sp-start и .sp-end — индикаторы. которые не попадают под спойлер т.к. я не смог найти иное решение! Под спойлер попадет все, что расположено после .sp-start и до .sp-end;
  • .sp-title — должен находиться над .sp-start и является кликабельным блоком, разворачивающим и сворачивающим спойлер. Данный блок не обязателен т.к. предусмотрено автоматическое его создание в случае отсутствие. Текст подставляется по умолчанию;
  • sp.block — оборачивает элементы после .sp-start и до .sp-end. В HTML разметке не нужен и работает на jQuery;

CSS стилизация

Ниже обязательные стили, остальное по желанию

jQuery

Хотел сделать простой и маленький скрипт, а получился полноценный плагин. В коде почти 100 строк и его лучше подключать отдельным файлом. Расписывать, как это сделать не буду т.к. в сети полно информации на тему, «как подключить свой скрипт в WordPress».

Источник

Поделиться с друзьями
Тюнинг авто
Adblock
detector