Спойлер для сайта, jQuery скрипт спойлера

Здравствуйте, сегодня мы будем устанавливать спойлер для сайта без использования плагинов. В «обязанности» спойлера входит скрытие большого объема информации на страницах сайта. Например аннотаций, каких-то пояснений, ну или-же как в моем случае, спойлер скрывает большой объем html, CSS, и других кодов, которые не очень гармонично вливаются в дизайн страницы, но просто необходимы.

Вкратце : Спойлер — информация о сюжете книги, фильма или компьютерной игры, которая, будучи преждевременно раскрытой, лишает некоторых читателей части удовольствия от сюжета. Википедия

Пример работы скрипта можно увидеть прямо на этой странице.

Данный скрипт спойлера использует технологии jQuery, он довольно-таки динамичный, легкий имеет гибкие настройки. И в этой публикации будет рассмотрена установка этого спойлера для сайта на популярный движок WordPress.

Что-бы спойлер для сайта заработал, для начала необходимо немного подредактировать файл functions.php и создать шорткод. Для этого в файл functions.php перед закрывающим тегом ?> нужно добавить ниже опубликованный код : (шаблон кода можно скачать ниже, здесь некорректно отображается).

Cпойлер для сайта

Следующим шагом создайте файл с расширением js, к примеру spoiler.js, скопируйте код самого скрипта jQuery спойлера и поместите в созданный файл.

Скрипт спойлера jQuery

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

Далее разместите файл в папке вашего сайта на сервере, или на хостинге, это одно и то-же, только названия разные и запомните или запишите путь к этому файлу. Кто не знает как прописать путь к папке или файлу советую ознакомиться.

Добавляем код вывода спойлера в файл functions.php

/* шорткод spoiler */
function update_spoiler($atts, $content) {
if (!isset($atts[name])) {
$sp_name = 'Спойлер';
} else {
$sp_name = $atts[name];
}
return '
<div class="spoiler-wrap">
<div class="spoiler-head folded">'.$sp_name.'</div>
&nbsp;
<div class="spoiler-body">'.$content.'</div>
</div>
'; } add_shortcode('spoiler', 'update_spoiler');

Подключаем скрипт спойлера jQuery в (footer) сайта. поместить нижеприведенный код можно перед закрывающим тегом </footer>.

Подключаем скрипт спойлера jQuery

следующее:

<script src="ваш" type="text/javascript"></script>

Ну и на последок добавим в самое окончание файла (style CSS — таблица стилей)

Подключаем стили спойлера для сайта

/* этот код скопируйте и вставьте в таблицу стилей CSS */
/* spoyler */
.spoiler-wrap{
border: 1px solid #0278c6; /* ширина и цвет рамки */
background-color: #0278c6; /* цвет фона спойлера */
margin: 0px auto; /* выравнивание по центру */
width: 100%; /* ширина */
}
.spoiler-head {
font-size: 17px; /* размер шрифта заголовка */
line-height: 27px; /* выравнивание текста заголовка по вертикали */
margin-left: 20px; /* отступ текста заголовка от левого края */
cursor: pointer;
width: 97%; /*для IE6*/
height: 20px; /* высота заголовка */
overflow: hidden;
}
.folded {
background:url(/wp-content/spoiler/icon_plus_1.gif) no-repeat scroll left 10px center transparent;
display: block;
width: 90%;
height: 20px;
padding: 8px;
color: #0278c6;
background-color: #c0c0c0;
border: 3px solid #fff;
}
.unfolded {
background:url(/wp-content/spoiler/icon_minus_1.gif) no-repeat scroll left 10px center transparent;
display: block;
width: 90%;
height: 20px;
padding: 8px;
color: #0278c6;
background-color: #c0c0c0;
border: 3px solid #fff;
}
.spoiler-body {
background: none repeat scroll 0 0 #f7f7f7; /* цвет фона внутреннего содержимого спойлера */
padding: 10px;
line-height: 20px;
overflow: hidden;
}

В этом коде обратите внимание на комментарии, в них написаны основные настройки, где, что можно изменить. Так-же есть возможность использовать свои фоновые картинки, либо совмещать их с текстовым названием. Для этого нужно просто указать путь к картинкам. В файле эти места закомментированы.

Я настроил их под свой сайт, но вы сможете с легкостью поменять цвет, размер, да и вообще весь внешний вид спойлера, настроить его под свой сайт и сделать не похожим на другие «открывашки».

А вот и сам шорткод : только при вставке заключайте его в квадратные скобки, как показано на картинке.

Теперь при написании статьи, обернув текст в шорткод, вы получите неплохой спойлер, кстати, в отличии от бесплатных плагинов, как вы успели заметить, этот шорткод имеет возможность полной настройки внешнего вида.

Да, чтобы вам не париться, я подготовил файл который залил на Яндекс диск. Скачивайте и размещайте на хостинге.
Cкачать архив с Яндекс Диска
На этом на сегодня все. Если что пишите, обращайтесь, как говорится — чем можем, тем поможем !

Купить книгу багуа массаж лица. https://www.bordur-trotuar.ru тротуарная плитка под камень.

Похожие по Тегам статьи

Плавающий виджет WordPress без плагина

В статье пойдет речь о том как сделать плавающий виджет WordPress без использования плагинов….

Cсылка якорь на странице. Плавный якорь.

В данной статье пойдет речь о том, что такое html cсылка якорь на странице…

Маска для ввода номера телефона

Маска для ввода номера телефона дает понять человеку в каком формате вводить номер, а…