Красивый спойлер для WordPress без плагинов

Всем привет, Дорогие друзья! Сегодня мне хотелось бы поделиться с Вами тем, как сделать спойлер на WordPress. Конечно существуют различные плагины для реализации спойлера, но мы будем использовать очень простой код, который выводит красивый спойлер без особых усилий.

Но перед этим давай поговорим что это вообще такое, а так же разберем для чего  нужен такой спойлер.

Спойлер — это специальный блок, состоящий из двух частей: заголовок и скрытый текст. И при нажатии на заголовок происходит раскрытие блока, где находится дополнительная информация, то есть тот текст, который был скрыт ранее. Ну вообщем как то так 🙂 Но для того, чтобы понять давайте взглянем на пример:

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

Но лично я стал использовать данный спойлер по причине того, что мне необходимо на страницах «Услуги» и «Реклама» писать много информации, которую необходимо структурировать для легкого восприятия. Вот как раз данный спойлер мне в этом и поможет!

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

И самое интересное данного кода, что его можно использовать не только на движке WordPress, но и на любом другом, даже самописном (если конечно знаете что куда вставлять 🙂 ). Но сегодня мы с Вами будет разбирать на примере нашей любимой CMS WordPress. Вы готовы? Тогда приступим!

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

Ну а теперь можно приступать, ничего сложного тут на самом деле нету!

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

Для этого поочередно открывайте файлы index.php, function.php, header.php, footer.php и смотрите есть ли где нибудь упоминание об файле jquery.min.js.  Если такого нет, то можете смело добавлять следующий код в файл footer.php перед тегом </body>:

1

<script type="text/javascript" src="////ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

А если подключение уже имеется, то данный шаг можно пропустить!

2. Опять же обращаемся к файлу footer.php и так же перед закрывающимся тегом </body> вставляем следующие:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
$(".closed").toggleClass("show");
 
$(".title").click(function(){
 $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
 if ($(this).parent().hasClass("show"))
 $(this).children(".title_h3").css("background","rgb(253, 253, 253)");
 else $(this).children(".title_h3").css("background","rgb(240, 238, 238)");
});
</script>

Данный код отвечает за работоспособность нашего спойлера!

3. Теперь наша задача сделать, чтобы спойлер был красивый. Для этого необходимо перейти в файл style.css и прописать следующие стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.spoiler {
 overflow: hidden;
 margin-bottom: 20px;
 margin-top: 20px;
 border: 1px solid #dfdfdf;
 border-left: 2px solid #09ADAD;
 box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
 cursor:pointer;
 font-size: 14px;
 background: rgb(240, 238, 238);
 margin: 0 -10px 0 -10px;
 padding: 10px;
 padding-left: 30px;
 -moz-box-shadow: 0 0 9px #dddddd inset;
 box-shadow: 0 0 9px #dddddd inset;
}
 
.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

И теперь наш спойлер обретает красивый вид, который Вы сможете видоизменять самостоятельно! Для этого Вам нужно будет просто менять значение строчек. Но это уже тема другой статьи, которую я кстати собираюсь очень скоро написать.

В статье я расскажу о том, как абсолютно любому блоггеру и веб-мастеру, в том числе и новичку, можно с легкостью менять оформление в файле style.css. Для того, чтобы не пропустить данную статью, советую подписаться на обновления блога.

4. Все! Спойлер готов, и уже сейчас Вы можете использовать его! Для этого открываете нужный файл, или статью и в нужном месте вписываете следующий код:

1
2
3

<div class="spoiler closed">
<div class="title"><div class="title_h3"><strong>Сюда пишите свой заголовок</strong></div></div>
<div class="contents">Сюда пишите свой текст, который будет под спойлером</div></div>

Ну как Вам?

На этом у меня все. Спасибо Вам огромное за внимание.

Желаю Вам удачи и до скорых встреч.

С уважением, Белан Константин!
автор блога //seokos.ru

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17