Получайте секретные материалы проекта на свой E-Mail:

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

Всем привет, Дорогие друзья! Сегодня мне хотелось бы поделиться с Вами тем, как сделать спойлер на 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="//http://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>

Ну как Вам?

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

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

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

Белан Константин Сергеевич

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

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 47
  1. Ответить

    Обалденная штука, только осталось придумать, куда ее всунуть у себя 😀

  2. C JS интересно смотрится. Нужно себе будет сделать и раскладной и что бы статический был. Статический у меня есть, а вот как сделать выдвижной не знал, спасибо 😉

    • Не за что 🙂 Дерзай!

  3. Отличный пост. Очень познавательно ))

  4. Кость, всё хотел спросить... Знаю, что ты сам всё делаешь на блоге, в плане вёрстки и дизайна, так вот интересно узнать, как ты учился? 🙂 Я как-то уже давно помню просмотрел два бесплатных курса Попова по Html и CSS, ну и так немного попрактиковался, ну то что в голове отлегло, то сейчас мне и пригодилось, но всё же я особо не углублялся и с нуля написать страницу не получится. Так вот подумываю, может подтянуть знания чуток. Это уж точно лишним не будет 😎

  5. Ответить

    Круто, осталось собрать набор всяких дизайнов и примочек 🙂

  6. Ответить

    Спойлер порой просто необходим на блоге, спасибо за советы.

  7. Привет Костя!

    Давненько не был у тебя на блоге, заметил что много чего изменилось в плане дизайна, молодец не стоишь на месте)

    • Ответить

      Кстати, в футере слева, невидно И из ИП, съехала запись влево на одну букву.

  8. Ответить

    Да, статья, что надо, у себя тоже организую спойлер как-нибудь.

  9. Ответить

    А есть же наверное спец плагины для этих дел?

  10. Ответить

    О, норм так то... чуть подшаманю под себя и пригодится обязательно! Пасиб)))

    • Ответить

      Олег, напишешь потом статью о том что подшаманил и зачем. Я слежу за тобой 🙂

      • Ответить

        Не вопрос! Может даже полноценную статью напишу с примочками.

  11. Спасибо, Костян! Как раз хотел сделать страницы «О блоге», «Об Авторе» и т. п. Не мог ничего придумать чтобы сделать страницы удобочитаемые. Теперь попробую поэксперементировать.

    • Не за что, Андрей! Рад что тебе это пригодилось 🙂

      • Еще как пригодилось. Спойлер отлично работает.

  12. Ответить

    Костя, а как ты реализуешь закладки со спойлером?

    • Денис, не совсем понял вопрос...

  13. Ответить

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

  14. Ответить

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

  15. Ответить

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

  16. Приветствую Константин. Все сделал, как в вашей статье, но почему-то спойлер оказался неактивным. То есть при нажатии ничего не происходит... Подскажите, как исправить.

    Заранее, спасибо!

    • Привет. Видимо не подключился js, нужно пробовать! Хотя я не вижу смысла тебе ставить данный спойлер, так как у тебя они уже реализованы не менее красивее.

      • У меня такая же проблема, как решить не пойму? Руки не кривые 🙂

  17. Интересное название «Спойлер». На всех блогах он просто необходим и улучшает вид статьи при его вставке

  18. Ответить

    Константин, привет!

    А если мне не нужен спойлер и скрытый текст, какой код тогда нужно вставлять.

    Например, я хочу написать текст, чтобы он привлек внимание и слева была такая полоска и всё, цвет полоски я подстрою в CSS.

    Пока у меня за это плагин отвечает (выделение фрагментов текста), я бы хотел его Delete 🙂

    • Привет, Николай.

      Посмотри, может пригодится — http://seokos.ru/vedenie-bloga/moj-pervyj-plagin-wp-boxes-css-proshu-lyubit-i-zhalovat.html

  19. Ответить

    Интересный подход к решению вопроса установки спойлера! Мне очень он понравился.

    Пора уже облагородить некорорые страницы в своих блогах.

    Сейчас надо подробненько разобрать всё по полочкам, чтобы не «наломать дров» с перепугу 😉

    Займусья лучше этим ответственным делом завтра с утра.

  20. Ответить

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

    1 — как отнесутся поисковики если я например создам запись с плеером, кодом видео с вк и описанием, а под ним спойлер ваш, в котором еще 5 допустим плееров с коротким описанием ...

    2 — можно ли ставить несколько спойлеров на страничке и опять же как на это смотрят поисковики .

    у вас спер блог — как у вас сделано три вкладки под поиском подскажите плиз ... и иконки перед рубриками тож круто ............ пжлст ответьте на все вопросы если знаете про вкладки с иконками не забудьте . в долгу не останусь$

  21. Ответить

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

  22. Ответить

    привет подскажите пжлст как ширину уменьшить спойлера

  23. Спасибо! Всё получилось, скоро планирую начать вставлять в статьи!

  24. Привет, подскажи пожалуйста, — установил все по инструкции, но спойлер не открывается. Тоесть, отображается только заголовок спойлера, при наведении на него курсора он меняется (как будто идет наведение на ссылку), но если нажать на заголовок, то не происходит его раскрытие.

    Куда можно крутить, где что подправить?

    • У меня была такая же проблема, посмотри на блоге у Борисова. Там подключение к кьюверти другое.

  25. Ответить

    Виталий, что теперь у тебя уже нет этой проблемы?

  26. Уже нет.

  27. Ответить

    Виталий, я наверное что то провтыкал, за сентябрь Константин подведение итогов конкурса делал?

  28. Не сделал 🙁 Скорее всего у него мало времени на всякие там конкурсы...

  29. Ответить

    У же заканчивается за октябрь, а за сентябрь еще подведение итогов я не встречал Виталий

  30. Ответить

    Спасибо за урок, давно уже искал реализацию спойлера без плагина.

  31. Ответить

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

    Благодарю.

  32. Ответить

    Использую Advanced Spoiler, в целом устраивает, но есть некоторое... затруднение. Словом, нужно, чтобы медиа под спойлером прогружалось только лишь тогда, когда спойлер разворачивается, никогда иначе. Сейчас трудностей не создает, но в будущем вполне может. Отсюда вопрос: способ здесь представленный поможет справиться с этой проблемой или нет? А если нет, то как можно справиться?

    • Справится, в доказательство смотрите раздел «Об авторе»

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

  34. Константин здравствуйте! Спасибо вам за ваш труд и помощь окружающим. Скажите пожалуйста как сделать чтобы по умолчанию спойлер был закрытым.

    Спасибо!

  35. Ответить

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