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

Спойлер на блоге вордпресс

Спойлер на WordPress

При нажатии на плюс значок плюс спойлер раскроется, а при нажатии на минус Значок минус свернется обратно. Что потребуется чтобы добавить такую возможность? На самом деле все очень просто. Чтобы было понятней опишу весь процесс по порядку.

Редактируем файл functions.php

С помощью файла functions.php добавляем новую функцию, которая будет отвечать за вывод спойлера, а также создаем shortcode.

shortcode – это особый код WordPress, который построен на API, позволяющий использовать макросы в содержании поста. Одним словом, задается функция, реализация которой будет осуществляться небольшим кодом (тегом). Дословно shortcode можно перевести как короткий код.


 

Итак, вставляем в functions.php следующий код:

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

Подключаем javascript

Далее необходимо подключить скрипты. Всего их два. Один из них уже встроен в вордпресс, осталось его только задействовать. Скрипт подключает jQuery (библиотеку javascript). Для этого в заголовок нужно вставить код:

<script src="/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>

Второй скрипт потребуется непосредственно для спойлера. Для этого нужно создать текстовый файл с расширением .js и вставить в него следующее содержимое:

jQuery(document).ready(function(){
jQuery('.spoiler-body').hide()
jQuery('.spoiler-head').click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()
})
})

Сохранить файл, например с именем spoiler.js, и сохранить его на сервере. Подключать данный скрипт нужно также в заголовке, добавив следующий код:

<script src="/SCRIPT/spoiler.js" type="text/javascript"></script>

При этом измените путь к файлу на свой.

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

Теперь остается лишь настроить внешний вид спойлера. В файл стилей CSS добавить следующие строки (для примера я использовал свои параметры, которые можете изменить на свое усмотрение, подогнав под дизайн своего блога):

.spoiler-wrap {
background:none repeat scroll 0 0 #e9ffd0;
width:100%;
border-color:#29755f;
border-style:solid;
border-width:1px 1px 1px 2px;
margin:6px;
}
.spoiler-head {
font-size:11px;
line-height:15px;
margin-left:6px;
cursor:pointer;
width:97%;
padding:1px 14px 3px;
}
.folded {
background:url(images/icon_plus_1.gif) no-repeat scroll left center transparent;
display:block;
padding-left:14px;
}
.unfolded {
background:url(images/icon_minus_1.gif) no-repeat scroll left center transparent;
display:block;
padding-left:14px;
}
.spoiler-body {
background:none repeat scroll 0 0 #F4FEF3;
border-top:1px solid #29755f;
line-height:20px;
padding:1px 6px 2px;
}

В папку images своей темы вордпресс необходимо загрузить файлы картинок (плюс и минус).

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

Дело остается за малым – вставить спойлер. Воспользуемся коротким кодом (shortcode). Приведу два примера:

[spoiler] Скрытое содержимое в виде спойлера [/spoiler]
[spoiler name="Название спойлера"] Скрытое содержимое в виде спойлера [/spoiler]

В первом случае название спойлера вставляется по умолчанию. Название по умолчанию задается в функции, которую вставляли в файл functions.php и носит имя “Спойлер”, которое можно заменить при желании.

Во втором случае к открывающему шорткоду (shortcode) добавляется тег name, который отвечает за название спойлера, если оно должно отличаться от принятого по умолчанию.