Как сделать спойлер на 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 в вашей теме:

%MINIFYHTMLd082260b15c52d3caac9d0d91dce5d7c20%

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

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

%MINIFYHTMLd082260b15c52d3caac9d0d91dce5d7c21%

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

И, последнее, сами стили, которые можно прописать в 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 без использования плагинов. А где его можно использовать надо придумать Вам, я свой уже пристроил.