Flector

BBSpoiler

BBSpoiler

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

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

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

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

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

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

Кнопка Спойлер

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

Создание спойлера

В результате вы получите вот такой спойлер:

Пример спойлера

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

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

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

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

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

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

Спойлер в теме Twenty Twelve

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

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

Скриншоты в спойлере

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

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

В результате получите:

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

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

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

BBSpoiler
Автор плагина: Flector
Рассматриваемая версия: 1.00 от 21.08.2014
Текущая версия: 2.01 от 26.05.2016
Совместимость с версией WordPress: 3.9 и выше
Скачать плагин версии 2.01 (всего скачиваний: 13 170)

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Комментарии (всего 4 комментария)

Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


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