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

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

Этот пост посвящен спойлеру. Иногда требуется не показывать полностью какой-то фрагмент текста, поместив его в спойлер – область, которая сворачивается/разворачивается по клику. Это нужно например, чтобы опубликовать текст, который не должен сразу бросаться в глаза, а должен лишь появляться по желанию читателя.

Чтобы в блоге заработал спойлер, можно воспользоваться специальным плагином. А можно и обойтись без него, создав спойлер в с помощью java-скриптов. Давайте и займемся созданием такого спойлера. Особенностью данного спойлера будет то, что вставить можно его с помощью шорткода (shortcode). Еще одним преимуществом, является то, что можно настроить его как угодно, подогнав фон заголовка, фон скрытого текста, а, так же, вписывать произвольный текст в заголовок…

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

Необходимые данные

Редактируем файл functions.php
И так, первым делом создадим функцию, отвечающую за вывод шорткода спойлера. Вставляем в файл function.php темы:

function hyper_spoiler($atts, $content) {
if (!isset($atts[name])) {
$sp_name = 'Спойлер';
} else {
$sp_name = $atts[name];
}
return '
'.$sp_name.'
'.$content.'
'; } add_shortcode('spoiler', 'hyper_spoiler');

Далее необходимо подключить скрипты. Всего их два.

1. Подключаем Jquery

Jquery уже встроен в wordpress, но советую задействовать его с сервера google? т.к. загружается значительно быстрее. Открываем файл header.php в вашей теме:

Проверьте Jquery может быть уже подключен в Вашей теме.

2. Кусочек кода, отвечающий за переключение спойлера:

Настраиваем внешний вид спойлера

И, последнее, сами стили, которые можно прописать в css Вашего шаблона:

.spoiler-wrap{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px solid #2E90BD;
background: none repeat scroll 0 0 #2E90BD;
margin: 10px;
width: 100%;
}
.spoiler-head {
font-size: 11px;
line-height: 15px;
margin-left: 6px;
padding: 1px 14px 3px;
cursor: pointer;
width: 97%; /*для IE6*/
}
.folded {
display: block;
padding: 8px;
color: #FFFFFF;
}
.unfolded {
display: block;
padding: 8px;
color: #FFFFFF;
}
.spoiler-body {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
background: none repeat scroll 0 0 #F5F5F5;
border-top: 1px solid #C3CBD1;
padding: 10px;
line-height: 20px;
}

Код для вставки спойлера

Дело остается за малым – вставить спойлер. Воспользуемся коротким кодом (shortcode):
[crayon lang=”php”][spoiler name=”Название спойлера”] /*Скрытое содержимое в виде спойлера*/ [/spoiler][/crayon]

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

[spoiler name=”Необходимые данныеДля открытия – нажмите“]Пример спойлера[/spoiler]

Вот таким образом можно вставить спойлер в WordPress без использования плагинов. А где его можно использовать надо придумать Вам, я свой уже пристроил.

Новые посты

Создание меню на wordpress

Гордеев Игорь

Вывод нумерации комментариев wordpress

Гордеев Игорь

Админка WordPress настройка под клиента

36 комментариев

Игорь 05.10.2012 / 02:46

Игорь, добрый вечер! Может подскажете… Не знаю куда копать… У меня на блоге спойлеры не работают, т.е. на странице отображается то, что пишу в коде, а именно: [spoiler]скрытый-текст[/spoiler]. И никакого тебе раскрывающегося и схлопывающегося текста. По логике причин может быть 3 (это я так насчитал): (1) несовместимость с версией WordPress (исключаю), (2) несовместимость с шаблоном (теоретически возможно, но сомневаюсь, однако если да, то как исправить?), (3) на блоге не подключен какой-либо нужный скрипт или какая-нибудь библиотека (если да, то какие и как включить?). Более того, я также пробовал использовать плагины wpSpoiler и Advanced Spoiler – результат тот же. Может у Вас есть какие-либо мысли на сей счет. Заранее благодарен! P.S. По идее, все делаю правильно, так как чайником в этих делах себя не считаю.

Ответить
Гордеев Игорь 05.10.2012 / 11:59

Что могу написать!? Скорей всего глючат какие-то javascript подключенные к вашему шаблону. Копаться надо там, я дат думаю. Пробуйте какие-то отключить, поменять очередность подключения и смотрите результат. Попробуйте подключить последнюю версию jquery.

Ответить
Игорь 05.10.2012 / 15:01

А где подключаются javascript к шаблону? И где и как подключать последнюю версию jquery? 😳

Ответить
Гордеев Игорь 05.10.2012 / 16:11

А где подключаются javascript к шаблону?

обычно в шапке шаблона.

И где и как подключать последнюю версию jquery?

Об этом написано в уроке, скорей всего из-за этого и не работают спойлеры.

Ответить
Игорь 07.10.2012 / 16:10

Спасибо, Игорь! Пока проблема осталась, буду копать… Есть подозрения, что “вредничает” один из плагинов, установленных на моем сайте.

Ответить
Наталья 24.11.2012 / 20:17

Большой код, надо с ним повозиться. Если бы не глючили спойлеры, то было бы не жалко возится. Я пробовала с других сайтов – три рецепта и ни один не подошел. Плюнула на это дело и поставила плагин. Так тоже глючит. У вас статьи небольшие и можно бы даже спойлер не использовать. Я себе спойлер ставила с плагином только потому что статья на 8000 знаков с картинками к тому же и доп.материалами и тоже такая же беда, как и у вас – выпадает из под спойлера содержимое. Думаю уже, что для WP нет нормальных решений. Хотя кому очень надо любое решение будет примлемым. А почему спрятать “под кат” нет на WP?

Ответить
Inco 29.11.2012 / 15:18

У меня вопрос такой, то что спрятано под спойлером индексируется ли поисковиками? Ведь в помощи яндекса пишут что робот не выполняет никаких действий, не нажимает кнопки и т.д. А информация под спойлером не видна без нажатия.

Ответить
Гордеев Игорь 29.11.2012 / 21:38

Поисковики индексируют этот спойлер, по исходному коду он просто заключен в html теги.

Ответить
Наталья 29.11.2012 / 21:49

Иными словами правильно я поняла, что не спойлер индексируется, а то что под ним спрятано?
Сегодня пока ничего не выпадало из спойлера у вас 😉 как было в прошлый раз

Ответить
Гордеев Игорь 30.11.2012 / 11:25

Это раз на раз не приходится. Этот косяк замечен если в спойлер вставлено видео

Ответить
Inco 29.11.2012 / 23:02

Получается спойлер это контейнер который лишь для людей скрывает рутинный текст

Ответить
Наталья 29.11.2012 / 23:06

Вообщем то да. Смысл его ставить только тогда, когда статья очень длинная или надо вставить дополнение немного не по теме например. На форумах и на локальных сайтах (для хаба) часто используют кат (и спойлеры) именно для этого. Прячут скриншоты чаще всего и медиаинфо о файле для скачивания.

Ответить
Гордеев Игорь 30.11.2012 / 11:39

Именно так

Ответить
Игорь 09.12.2012 / 00:56

спасибо, давно искал подобное! возникла небольшая проблемка, быть может сможете что то посоветовать! при вставке картинок в спойлер они отображаются, а рядом отображаются кусочки кода этой картинки! странно как-то =)

Ответить
Гордеев Игорь 10.12.2012 / 10:03

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

Ответить
Стас 03.02.2013 / 02:29

Спасибо за пост очень полезно. Поставил себе. Все заработало, чуть настроил под себя и никаких плагинов не надо. Супер!

Ответить
Елена 17.02.2013 / 23:11

Привет ,выполнила все по твоей рекомендации ,но название не выводиться а пишет спойлер .Что не так?

Ответить
Гордеев Игорь 18.02.2013 / 12:05

Не знаю, что у вас не так! Если вы внимательно смотрели инструкцию у Вас все должно работать. Смотрите внимательнее “Код для вставки спойлера”.

Ответить
Денис 24.02.2013 / 22:05

Проверьте пожалуйста код на 1 скриншоте (11-12-13 строчку) они не совпадают с кодом в видео уроке. а так урок очень полезный. Спасибо

Ответить
Денис 24.02.2013 / 22:34

Здраствуйте подскажите можно спойлер в спойлер вставить???

Ответить
Гордеев Игорь 26.02.2013 / 13:04

На сколько помню, можно.

Ответить
Наталья 27.02.2013 / 10:07

А у меня со спойлерами проблема. Однозначно не могу даже 2 спойлера на одной странице поставить, не то чтоб один в другой – это вообще сайт накроет белой пеленой. Кстати, Игорь, Вам я помните тоже писала много раз что бывали проблемы со спойлером, видео у вас выпадало. Сейчас все хорошо!

Ответить
Гордеев Игорь 27.02.2013 / 10:30

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

Ответить
Наталья 27.02.2013 / 13:11

Зрею на то чтоб свой плагин на этот код поменять.
вопрос: “Дело остается за малым – вставить спойлер. Воспользуемся коротким кодом (shortcode):”
Этот код непосредственно вставлять где он нужен или куда?
Как сделать чтобы кнопка была в редакторе, а то если руками такое дело писать – рехнуться можно

Ответить
Гордеев Игорь 27.02.2013 / 14:35

shortcode вставляется в том месте где хотите видеть спойлер. Как вставить кнопку посмотрите тут WordPress редактор – добавление кнопок

Ответить
Дмитрий 13.03.2013 / 20:37

Добрый день. спасибо за статью просто шикарное решение)) Но есть проблема))
Если не пррописывать

то не работает спойлер, А если прописывать не работает Lightbox галерея) Можно как то решить это?))

Ответить
Гордеев Игорь 14.03.2013 / 23:53

С этим не сталкивался даже не подскажу.

Ответить
Светлана 18.03.2013 / 00:13

Спасибо! Сделал спойлер по Вашей инструкции. Все получилось на отлично!!!

Ответить
Андрей 26.03.2013 / 21:37

Доброе время суток! Такой вопрос перед тем как устанавливать плагин или делать какой то хак я все проверяю на локал хосте через денвер, все прописал как у Вас в статье но спойлер не сворачивается, может быть проблема и за того что нет выхода в интернет?……
Заранее благодарен.
С уважением,
Андрей

Ответить
Гордеев Игорь 30.03.2013 / 11:37

Скорей всего из-за отсутствие интернета. Т.к. для работы нужна библиотека jQuery и она наверное у вас подтягивается из интернета.

Ответить
Сергей 16.04.2013 / 22:05

Здравствуйте. Воспользовался данным спойлером. Все оч понятно и по полочкам. Возник вопрос. Как сделать текст “Спойлер” подчеркнутый пунктиром? Только текст. Чтоб он выглядел как псевдо-ссылка. Где-то явно нужно что-то добавить. То ли в функции, то ли в скрипте нужно добавить класс для ссылки. Помогите пожалуйста.

Ответить
Гордеев Игорь 24.04.2013 / 17:43

В стиль.folded добавить строчку text-decoration: underline; Это будет подчеркнутый текст. Что бы сделать подчеркнутым текст надо переделывать больше кода, на что у меня сейчас нет времени.

Ответить
Сергей 24.04.2013 / 17:59

Спасибо

Ответить
Seosko 02.01.2015 / 20:12

Какой-то не самый простой способ установке спойлера на сайт))

Ответить
Константин 22.01.2015 / 19:28

Спасибо. Все работает. Подскажите как правильно использовать два спойлера в одном месте с разными css стилями?

Ответить
Гордеев Игорь 23.01.2015 / 12:00

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

Ответить

Оставить комментарий