Плагин BBSpoiler на WordPress. Wordpress плагин спойлер


wp-spoiler-alert | WordPress.org

This plugin adds the shortcode [spoiler] to WordPress. Any contentwrapped inside this shortcode is blurred out. It can be revealed byclicking on the blurred content.

The shortcode takes a mode parameter, which defaults to block. Thiswraps your content inside a div. To add spoilers that are inside to yourtext use the mode inline.

Eg:- Some [spoiler mode=’inline’]super secret stuff[/spoiler] here!

Credits

  1. Click Plugins > Add New in the WordPress admin panel.
  2. Search for «wp-spoiler-alert» and install.

Customization

The Partial and Max blur options control the amount of the blur effectapplied. A value of 0 applies no blur, 20 applies a very large blureffect, etc.

The Custom option allows you to override the manner in which to hide thespoilers. This is useful to tune the effect to your site’s theme.

The plugin checks for a custom.css in your currenttheme’s directory at {current_theme}/wp-spoiler-alert/custom.css.

If this CSS file is present it will be added to the page automatically.

For eg:- the CSS below makes all spoilers into red blocks.

.spoiler-hidden { color: red; background: red; } .spoiler-hidden:hover { color: white; background: white; outline: 1px solid red; } .spoiler-hidden img { opacity: 0; } .spoiler-visible { color: inherit; background: inherit; outline: none; }

Yes, see the customization section under Installation.

«wp-spoiler-alert» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники
0.8.3
0.8.2
0.8.1
0.8.0
0.6.0
0.5.2
0.5.1
0.5.0
0.4.0
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.2
0.1.0

ru.wordpress.org

опыт методом проб и ошибок. SEO-экспериментатор

муз. Шевчук Ю. / сл. Шевчук Ю.

Вступление: C | Am7 | Em | Em

CЯ — осколок электрички:AmНочь, вокзал, глаза в окно…EmЯ — промокшие, как спички,Небеса в Бородино.

CФонари грызут аллею,Am7Паровоз как глыба льда,EmВ черной копоти на реяхВороненая орда;

CЗлой этап, глотают нычки,Am7Бьют прикладом сопляка,EmЗэки спят на перекличкеEsus4 EВ грязной луже у ларька;

CГражданин начальник скачетAm7Документом на ветру,А на рельсах время плачет —Будем счастливы к утру.

AmЖизнь больная, кашель — скука,D#dim7Пьет изжога из реки,EmЛижет пепел, лает сукаEsus4 EПо движению руки;

AmВ забинтованном вокзалеD#dim7Так привычно ледяно,EmСыпят ржавые медалиEsus4 EНебеса в Бородино.

CВерили, что точно знаем:AmЖизнь не будет так горька —EmПроживем в тепле да с краю,Esus4 EКовыряясь у ларька.

CМы ларьками сцепим Землю,AmСвяжем Запад и Восток.Бей McDonalds’ы — приемлюТолько наш родной лоток.

AmНаш ларек нам всем утеха,D#dim7Реет смыслом на ветру:EmВ нем — беда и дискотека,Esus4 EВ нем — спасенье поутру.

AmРусь моя, ты снишься многим.D#dim7Вещий сон — всегда кошмар.EmИ богатым, и убогим —Esus4 EВсем достался этот дар.

CЧто же нам открыто в мире,AmЧто нам отрыгнут века?EmВ пятикомнатной квартиреEsus4 EЯ спиваюсь у ларька.

CНа мою свободу словаAmЛьют козлы свободу лжи.EmГражданин начальник, сноваEsus4 EСказку злую расскажи!

Am7Кем нам стать, уже не знаю, —Am75-Верим ли, что сталь крепка?EmРусь закатом добивают,Распиная у ларька.

Am7Города стучат экраномAm75-В лбы замерзших деревень.EmМы уходим слишком рано,Оставляя дребедень.

CМы прошли свою дорогуAmПо фашистам, по попсе,EmМы тащили души к Богу —Esus4 EЖалко, выжили не все.

CИ духовно, как на вздохе,AmРежет небо красота…EmМы зубами твои крохиEsus4 EРвем до чистого холста.

CКрасота, ты здесь, родная, —AmНедоступна, нелегка.EmЗа тобою наблюдаем,Esus4 EПохмеляясь у ларька.

CТы спасешь нас, точно знаю,AmЯ — твой враг, твоя еда…EmКрасота не исчезает,Лишь уходит иногда.

AmMais jamais,D#dim7Oh, pourraEmArriverEsus4 EJusqu’à toi.

AmMais jamais,D#dim7Oh, pourraEmArriverEsus4 EJusqu’à toi.

CDis commentAmOn te voitEmDans cette boueEsus4 EOh, beauté.

CDis commentAmOn te voitEmDans cette boueOh, beauté.Oh, beauté.Oh, beauté…

temsoon.com

Плагин BBSpoiler на WordPress | Pogudo

BBSpoiler – отличное решение для интеграции спойлера на сайт (что такое спойлер?). Позволяет прятать текст под определённым тегом плагина. Хорошо отображается на любых сайтах WordPress. Ключевым достоинством является простота в использовании.

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Установка и настройка:

После установки плагина иконка bbspoiler появится в визуальном редакторе wordpress.

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

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

Пошаговое добавление спойлера с форматированным текстом:

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

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Выделяем нужный текст (если документ новый, можно воспользоваться сочетанием клавиш ctrl+A), после чего вырезаем его (ctrl+X) или копируем (ctrl+C) и стираем (del).

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

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

Нажимаем кнопку «спойлер».

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

После открытия окна заполняем «Заголовок», а в поле «Текст» вставляем (ctrl+V) скопированный ранее текст.

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Не забывайте выбрать стиль и убрать ссылку свернуть, если она не нужна. Жмем «ОК» и если всё сделано правильно по обе стороны нашего медиа-контента будет добавлен шорткод:

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Для проверки работы можно нажать «Посмотреть» в левом меню редактирования записи.

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширениякак сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Кстати шорткод можно прописывать и вручную, а также добавлять текст или меди-контент после его начала или перед закрытием как на примере ниже:

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширениякак сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

P.s. Скриншот всех имеющихся оформлений спойлера:

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Допиливаем под дизайн:

Если Вас не устраивает дизайн спойлера, его без проблем можно переписать под свои нужды. Для этого переходим в папку с плагином которая находится по адресу www/site.domen/wp-content/plugins/bbspoiler после чего открываем папку «inc» и файл bbspoiler.css :

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

Здесь можно отредактировать все используемые в плагине стили. В скриншоте для примера выделены стили, используемые в красном оформлении.

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

как сделать спойлер на сайте для сайта bbspoile bb spoiler html код плагин wordpress улучшение апгрейд спрятать показать текст настройка установка редактирование расширения

 

pogudo.ru

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

BBSpoiler — это плагин-спойлер для wordpress, который представляет собой практически точную копию популярного спойлера, используемого на rutracker.org и многих других сайтах форумного типа.

Конечно, WordPress это не форум, но и на нем иногда бывает полезно использовать спойлеры для того, чтобы скрыть объемные части текста или блоки картинок. Удивительно, но такой довольно-таки простенький и неказистый на вид спойлер пользуется повышенной популярностью среди пользователей. Впрочем, так зачастую и бывает, что чем проще – тем лучше. Итак, спойлер wordpress, плагин BBSpoiler.

Скачиваем плагин по этой ссылке >>>  BBSpoiler и устанавливаем его:

1 Распаковываем архив.

2 Копируем папку bbspoiler в /wp-content/plugins/.

3 Заходим в админку блога на вкладку «Плагины» и активируем плагин.

Отдельных настроек в плагине нет. При своей активации плагин создаст кнопку «Спойлер» в визуальном редакторе:

При клике на нее откроется диалоговое окно создания спойлера.

Спойлер можно вставить и без кнопки «Спойлер«, для этого используйте следующий шорткод:

[spoiler title='Заголовок спойлера' collapse_link='true'] Текст спойлера [/spoiler]

Тут всего две управляющие команды: title задает заголовок спойлера, а collapse_link говорит выводить или нет ссылку «свернуть» в правом нижнем углу спойлера (она будет выведена при значении «true» — любое другое значение удалит вывод этой ссылки).

На сайте rutracker.org этот спойлер идеально вписывается в дизайн форума. Для WordPress сайта спойлер может показаться слишком темным – из-за того, что фон на сайте, как правило, белый.

Стили плагина можно поправить в файле плагина «incbbspoiler.css«. Но лучше будет скопировать содержимое этого файла в файл стилей вашей темы styles.css (добавив директиву !important у каждого значения), чтобы ваши изменения стиля спойлера не пропали при обновлении плагина.

В стилях спойлера не задан ни шрифт, ни его размер. Стиль шрифтов наследуется из вашей темы. Поэтому, в какой-нибудь теме вроде Twenty Twelve спойлер может выводиться с увеличенным размером шрифтов

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

Спойлер можно использовать для чего угодно. На том же rutracker.org его используют, чтобы прятать скриншоты.

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

[spoiler title='Родительский спойлер'] [spoiler2 title='Дочерний спойлер 1']текст[/spoiler2] [spoiler2 title='Дочерний спойлер 2']текст[/spoiler2] [spoiler2 title='Дочерний спойлер 3']текст дочернего спойлера[/spoiler2] [/spoiler]

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

Как и многим другим, мне тоже нравится спойлер в стиле rutracker.org. Клоны этого спойлера были написаны под все популярные форумные (и не только) движки и даже странно, что никто не позаботился о том, чтобы сделать клон этого спойлера под такой популярный движок как WordPress.

info-business.pro

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

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

Вы не знаете, что такое спойлер? Вот они – эти самые заветные спойлеры:

Спойлер WordPress

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

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

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

Метки: спойлер

clublit.ru


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта