Спойлер для сайта, 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качать архив с Яндекс Диска
На этом на сегодня все. Если что пишите, обращайтесь, как говорится — чем можем, тем поможем !

Купить книгу багуа массаж лица.


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


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

  1. Master-It

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

  2. Виктор

    Давно пользуюсь спойлером-это очень удобно!Советую всем установить его =)

    1. Егор Автор записи

      У меня, как видите, под спойлером спрятаны различные коды. Это улучшает восприятие материала.