webdonsk.ruКак сделать спойлер в вордпресс
Добавил пользователь Владимир З. Обновлено: 09.10.2024
Скачиваем плагин по ссылке в конце страницы и устанавливаем его:
1 Распаковываем архив.
2 Копируем папку bbspoiler в /wp-content/plugins/.
3 Заходим в админку блога на вкладку "Плагины" и активируем плагин.
Отдельных настроек в плагине нет. При своей активации плагин создаст кнопку "Спойлер" в визуальном редакторе:
При клике на нее откроется диалоговое окно создания спойлера:
В результате вы получите вот такой спойлер:
Спойлер можно вставить и без кнопки "Спойлер", для этого используйте следующий шорткод:
[spoiler title='Заголовок спойлера' collapse_link='true'] Текст спойлера [/spoiler]
Тут всего две управляющие команды: title задает заголовок спойлера, а collapse_link говорит выводить или нет ссылку "свернуть" в правом нижнем углу спойлера (она будет выведена при значении "true" - любое другое значение удалит вывод этой ссылки).
В стилях спойлера не задан ни шрифт, ни его размер. Стиль шрифтов наследуется из вашей темы. Поэтому, в какой-нибудь теме вроде Twenty Twelve спойлер может выводиться с увеличенным размером шрифтов:
Из-за ограничений WordPress плагин не поддерживает напрямую спойлеры в спойлерах. Но я реализовал простенький обходной путь, позволяющий выводить дочерние спойлеры в родительском (но не дальше 2 уровня). Используйте следующую конструкцию шорткода:
[spoiler title='Родительский спойлер'] [spoiler2 title='Дочерний спойлер 1']текст[/spoiler2] [spoiler2 title='Дочерний спойлер 2']текст[/spoiler2] [spoiler2 title='Дочерний спойлер 3']текст дочернего спойлера[/spoiler2] [/spoiler]
В результате получите:
Выводить дочерние спойлеры нужно далеко не всем пользователям, но все-таки такую возможность я предусмотрел. Просто на всякий случай.
Иногда для того чтобы представить новый материал на сайте, недостаточно просто технически правильно оформить текст. Приходится приложить максимум усилий, чтобы повысить читабельность темы, вход идут и подзаголовки, и списки, выделения цветом, и т.д. Одним из вариантов оптимизации текстового материала, является применение спойлера, который помогает скрыть цитирование или примечания…
Плагин WP Spoiler для блога
Если Вы счастливый владелец веб проекта на системе WordPress, то существует множество вариантов по решению проблемы скрытия контента. И основным из них, конечно, установка специализированного плагина. Вы сможете самостоятельно подобрать вариант, отвечающий вашим требованиям, а ниже речь пойдёт о плагине WPSpoiler , который заслужил моё внимание, и функционирует на сайте уже более года!
Установка и настройка плагина WPSpoiler
WPSpoiler не имеет настроек, а для применения его функции при редактировании публикации нужно применить специальные теги – [ SPOILER ]
По умолчанию плагин для скрытия использует слова:
- View– показать / обзор
- Hide– скрыть / убрать
Спойлер контента без плагинов
Помимо вариантов реализации через плагины, есть возможность встраивать спойлер вставкой html кода. Такой вариант отлично подойдёт для разовых применений на сайте, тем более, что Вам необязательно иметь сайт на WordPress…
Далее сохраняем изменения в файле, а для отображения используйте следующий код:
Вместо послесловия
Собственно, и в первом варианте с плагином, и во втором с кодом html, не возникает технических сложностей вывода спойлера.
От себя добавлю, что для разовых применений скрытия текстового фрагмента или графических объектов подойдёт, как нельзя лучше, второй способ.
Я написал плагин для вордпресс OtFm Gutenberg Spoiler. Этот плагин добавляет спойлер в новый редактор Gutenberg (WordPress Gutenberg editor).
Гутенберг сейчас выпускается в виде отдельного плагина и как он будет готов - войдет в ядро WordPress 5.0. Конечно же плагин Gutenberg у вас должен быть установлен и активирован.
Сейчас сам гутенберг достаточно стабилен и хорошо документирован поэтому я решил сделать под него плагин и заодно изучить его апи.
Почему WordPress спойлер? Я планирую начать использовать гутенберг редактор на своем сайте, а тут спойлер - важный блок. Вторая причина - я не нашел под гутенберг хорошего спойлера. Есть аккордеоны (accordion wordpress) - но все они примитивны. Не позволяют включать ничего кроме простого текста.
Так что там в плагине:
В плагине два блока спойлеров (точнее - три):
Первый блок спойлера: "Little Spoiler" - спойлер как и у всех. Просто может содержать в себе текст. + может из предустановленных цветов выбрать оформление.
Второй блок спойлера: "Box Spoiler" - спойлер состоит из двух блоков.
Тут подробней:
Т.к. гутенберг - это разбивка на блоки, то сейчас нет нормального механизма, чтобы внутрь одного блока поместить другие без ограничений. У них есть inline block - который включает только изображение. т.е. вроде задел на будущее есть, но реализация не готова.
Так как мне внутрь одного блока вставлять любые блоки?
- включая любые блоки от сторонних разработчиков?
Всё гениальное просто: один блок - шапка (блок "Spoiler Start"), второй - футер (блок "Spoiler End"); всё что внутри блоков - и будет содержимым спойлера.
Коробку открыли, коробку наполнили, коробку нужно закрыть ?
Шапка имеет возможность вписать заголовок и выбрать цветовое оформление.
Посмотрите демонстрацию в видео:
Таким образом - нет никаких ограничений на блоки, которые можно спрятать внутрь спойлера. Просто их расположите между открывающим и закрывающим блоках спойлера. И таких спойлеров на странице не ограничено.
Делайте, например, свой F.A.Q. сайта - по клику открывая спойлер с ответом. Заголовок можно выделить жирным, вставить ссылку или смайлы (эмодзи) - это просто.
Лайфхаки:
Еще не задокументированная особенность: Box Spoiler вы можете и не закрывать. Он автоматически закроется после последующего первого гутенберг блока. Но тут я не даю гарантию если вы забудете закрыть Box Spoiler более 2-х раз. Так сказать защита от дурака забывчивых. Ничего не поломается, просто спойлер будет ограничен одним блоком внутри и закроется сразу после него:
В админке не закрыт Box Spoiler
Вид в фронтенде. Свёрнут спойлер
Вид в фронтенде. Раскрыт спойлер
Вы можете кликать на кнопку "Вставить блок" и там в поиске вбивать: otfm , spoiler , спойлер - достаточно первых букв и спойлер будет у вас на виду. С этой фичей команда Gutenberg постаралась. К тому же он потом в шаге одного клика - в блоке последних трёх использованных блоков (На гифке, ниже, справа внизу).
И еще: вы легко можете воспользоваться командой /и-поисковая-фраза-выше . Слеш внутри блока параграфа запускает поиск. Это здоровско и удобно. Посмотрите ниже гифку с поиском:
Что ещё:
Его приняли в официальный репозиторий вордпресс. Это мой первый плагин в репозитории ВП. Я для себя делал плагины, дополнения, но ни разу не было желания выйти в репо. Но этот плагин я попробовал. В понедельник отправил его на рассмотрение, а в среду вечером его уже утвердили. Никаких реджектов. Хороший первый опыт ?
Сразу хочется поблагодарить испанца Nilo Velez - он оперативно помог мне с переводом на испанский язык.
На текущий момент плагин переведен на 3 языка: русский, английский, испанский. Ещё с десяток предложил к переводу - может кто подсобит. Если у вас есть желание помочь с переводом плагина на знакомый вами язык - буду благодарен за ваш вклад.
И я получил один отзыв в WordPress репозитории - на старте это приятно порадовало.
Пару звёзд мне добавили на GitHub репозитории - спасибо вам, мотивируете!
Результаты:
Благодаря работе над "OtFm Gutenberg Spoiler" у меня получилось настроить вебпак и npm, разобрался в анатомии гутенберг блоков и понял основные принципы работы с apigutenberg wp. Поработал с переводом js (для гутенберга он отличается от просто перевода js файлов WordPress).
Т.к. в голове много вопросов, по блокам гутенберг, разложил "по полочкам" - ожидайте серию уроков по разработке под гутенберг редактор.
Работу WordPress спойлера во фронтенде можете заценить на этой странице. Хотите такой же? Скачайте: OtFm Gutenberg Spoiler
Часто, создавая обучающий или разъясняющий пост, из-за большого количества картинок, а также, Html — кодов и CSS — таблиц, возникает необходимость скрыть хотя бы часть содержимого. Всё дело в том, что такие коды желательно показывать в “живом” виде (не на снимке), чтобы читатель, при необходимости, мог скопировать код и использовать для своих целей.
Оказывается, решение подобных вопросов можно осуществить с помощью плагинов. Их создано не мало, но принцип у всех один — спрятать часть поста в контейнер, который можно открыть для просмотра и при желании, закрыть. В сегодняшней статье рассмотрим один из таких плагинов — Advanced Spoiler.
Индексируется ли текст, спрятанный в спойлер? Пользователи утверждают, что индексируется, но я не понимаю, зачем его (текст) прятать. Спрятать часть картинок, если их много, как у меня в некоторых постах (30 и более штук), спрятать длинный список стилей и т.п., это дело другое.
В общем, цель применения подобного плагина — создать более комфортное изучение материала для читателя, а так же, сэкономить время просмотра материала (не каждому нужна настолько “разжёванная” информация, которая присутствует во многих моих постах). Но, перейдём к плагину, установим, настроим и научимся им пользоваться.
Advanced Spoiler — установка и настройка
Установка плагина обычная: Админ-панель/Плагины/Добавить новый, ввести в поисковую строку Advanced Spoiler и нажать Enter.
В открывшемся окне найдите Advanced Spoiler и нажмите Установить. Пусть вас не смущает запись, что плагин не обновлялся 5 лет, плагин рабочий. После активации плагина в визуальном редакторе появится значок “Включить интерцептор”. ( До сих пор не пойму, причём тут интерцептор. Так же, как и спойлер, оба названия относятся к авиации, а именно, к крыльям ).
Чтобы переустановить файл в плагине придётся воспользоваться FTP — клиентом. Я покажу как это сделать в клиенте FileZilla. Откройте FileZilla, пройдите по пути: Ваш домен/public_html/wp-content/plugins/advanced-spoiler. В нижнем окне найдите файл advanced-spoiler.php, выделите его и в выпадающем контекстном меню выберите: Удалить.
Затем в папке, куда вы скачали файл найдите, предварительно разархивированный файл, кликните по файлу правой клавишей мыши и в открывшемся контекстном меню выберите: Закачать на сервер.
Таким образом, в настройках вашего плагина будет установлен более или менее адекватный перевод. Если не хочется заморачиваться или опыта маловато, то сравнивайте свои настройки со скриншотом, расположенным чуть ниже. Настроек в этом плагине немного.
Чтобы настроить плагин, в админ-панели зайдите Настройки/Advanced Spoiler
В открывшемся окне настроек есть возможность произвести некоторые изменения. У меня установлены такие настройки. Хочу отметить, что в этом окне производятся настройки по умолчанию, но такие настройки, как Текст спойлера и эффекты открытия/закрытия, можно изменить в визуальном редакторе перед непосредственным использованием спойлера.
Как работать с плагином Advanced Spoiler
Например, есть текст с картинками. Откройте текст в визуальном редакторе WordPress. Чтобы вставить текст в спойлер, выделите необходимую часть текста (стрелка 1) и нажмите на кнопку Вставить в спойлер (стрелка 2).
В открывшемся окне настроек спойлера выберите тип эффекта (стрелка 1), в строчке Показать текст впишите свой текст или оставьте тот который установлен по умолчанию, если в данный момент он вас устраивает (стрелка 2). В строке Спрятать текст (стрелка 3) выполните те же действия. Затем нажмите кнопку okay (стрелка 4). К сожалению я не нашёл код этой кнопки, чтобы сделать корректный перевод.
Как видите, в начале и в конце абзаца появились теги спойлера.
Откроем Html — редактор и видим, что плагин облачил этот спойлер тегами
Идём на страницу блога. Вот так выглядит спойлер в закрытом виде. Согласитесь, не так уж много места он занимает. Нажмём на Показать текст.
Открывшийся спойлер выглядит примерно так. Как видите, на снимке блок с текстом несколько сдвинут по отношению к основному тексту, присутствует лёгкий фон и стиль шрифта изменён.
Чтобы настроить цвет фона, отступы, стиль шрифта и т.д., скопируйте стили и вставьте в самый конец таблицы стилей вашего блога.
Попробуем вставить картинку в спойлер. Кликните по картинке левой клавишей мыши и нажмите на кнопку Вставить в спойлер.
В окне настроек спойлера меняем название спойлера на Показать картинку и Скрыть картинку. После чего жмём на кнопку okay.
Вот так отобразятся теги спойлера в визуальном редакторе.
Перейдём в Html — редактор. Здесь такая же картина, как и в случае с текстом, код картинки помещён в теги спойлер и всё это облачено “дивами”.
Переходим на страницу. Вот так выглядит часть статьи со спойлерами.
Напоследок, давайте разберёмся со вкладками
Как создать спойлер в спойлере
Для примера я взял из другого своего сайта нумерованный текст. Сначала поместил в спойлер весь текст. Выделил текст и нажал на Вставить в спойлер. В окне настройки спойлера изменил названия спойлера на Показать список.
Затем, каждый из нумерованных заголовков так же вставил в спойлеры, поменяв лишь названия спойлеров на Показать описание.
На странице блога я открыл спойлер Показать список, а в нём ещё три спойлера.
Откроем каждый из них. В каждом спойлере заголовок статьи со ссылкой на неё. Это только три заголовка, а представьте, если список будет состоять из 50, 100 заголовков. А список обязательно нужно вставить в средине статьи — какой длины будет статья? У читателя на мышке колёсико отвалится от вращения.
Читайте также: