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

Автор: | Рубрика: Блог на Wordpress | Обновлено: 2015-03-24 | Создано:
Просмотров: 3552
реализация спойлера на блоге

Всем привет!

Раньше я Вам показывала, как создать спойлер для блога на Вордпресс при помощи плагина Advanced Spoiler, почитать Вы можете вот в этой статье http://inetsovety.ru/kak-sozdaty-spoyler-na-wordpress/

Честно говоря, мне самой не нравился такой способ вывода спойлера. Графическое оформление у него отсутствовало, а ссылка "Показать содержимое спойлера", была совсем не привлекательной. Когда я заказывала новый уникальный шаблон для своего блога, я попросила программиста красиво оформить спойлер и задать его вывод без использования каких-либо плагинов. И вот сейчас я хочу поделиться в Вами кодом вывода спойлера в статье.

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

Кликните, чтобы увидеть содержание спойлера
Поздравляю! Вы открыли спойлер 🙂

Для более легкого восприятия информации на странице, особенно там, где ее много и должна быть структурирована удобно использовать спойлер.

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

Последовательно работы:

  1. Откройте файлы header.php, footer.php и function.php и проверьте нет ли там кода подключения библиотеки jquery. Нажмите комбинацюи клавиш Ctrl + F и введите в строку поиска jquery.min.js. Если ничего не найдено ни в одном из файлов, тогда в файл header.php до строки </head> добавьте следующий код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  1. Теперь в файл footer.php до тэга добавьте вот этот код, который обеспечивает работоспособность спойлера:
<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(231, 242, 255)");
});
</script>
  1. Стили оформления спойлера прописываем в файле style.css. Вы можете на свое усмотрение поменять цветовую гамму.
.spoiler {
 overflow: hidden;
 margin-bottom: 20px;
 margin-top: 20px;
 border: 1px solid #FF9574; /* цвет рамки */
 border-left: 2px solid #D02A1B; /* цвет границы слева */
 box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
 cursor:pointer;
 font-size: 14px;
 background: rgb(231, 242, 255); /* фон заголовка. одновременно нужно изменять и в скрипте */
 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: #CBEBFB; /* фон заголовка */}
.contents { padding: 10px; }

Вот неплохой сервис подбора цвета - ссылка.

На этом настройка спойлера завершена. Теперь в режиме "Текст" в админке блога, добавляйте вот этот код:

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

Как Вам такая реализация вывода спойлера на любой странице блога? Сложно?

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 23 к статье "Как сделать красивый спойлер на сайте без плагина"
  • Владимир 2016-10-20 в 16:14

    Классный спойлер! предлагают многое другое, в том числе плагины. но ваше решение, пожалуй, самое лучшее!!

    Ответить
  • ZGD 2015-12-03 в 09:05

    Не сразу понял, что отсутствие правой синенькой рамки в спойлере это не ошибка, а так и задумано. Только посмотрев css код увидел, что прописана только левая рамка. Может всё таки как то оттенить правую границу? При первом взгляде создаётся впечатление, что спойлер прописан с ошибкой и правая его часть ушла за границы активной области….

    Ответить
  • Руслан 2015-11-17 в 12:08

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

    Ответить
    • Ната Дегтярева 2016-04-26 в 17:16

      Руслан, вы не одиноки)) Для меня тоже было новостью, что это за штука такая — спойлер. Зато теперь я знаю и о спойлере и том, как его создать без плагина. Правда возникает некоторое сомнение, а будут ли читатели просматривать информации, скрытую им. У меня, как у пользователя, стойкой предубеждение против кликанья куда-либо, бывает кликнешь и унесет в такие дебри…

      Ответить
  • Наталья Краснова 2015-09-21 в 14:51

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

    Ответить
  • Константин Кислов 2015-03-16 в 09:17

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

    Ответить
  • Игорь 2015-01-17 в 11:20

    Обалденная штука, только осталось придумать, куда ее всунуть у себя на блоге.Хорошо что с помощью скрипта,никогда не был сторонником плагинов. С момента когда я начал худо-бедно разбираться в кодах, в тот момент начал отказываться от плагинов.

    Ответить
    • Виталий Охрименко 2015-03-13 в 22:38

      Аналогично. Скрипты гораздо полезней, особенно в современном мире, яндекс еще куда не шло, а гугл буквально блюет (простите за сравнение) от кучи плагином и «грязных» кодов….так что заменяем плагины на коды и скрипты и будет нам счастье!

      Ответить
      • Сергей Грицюк 2015-03-14 в 15:56

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

        Ответить
        • Руслан 2015-11-17 в 12:11

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

          Ответить
  • Сергей Грицюк 2015-01-11 в 14:27

    Наконец-то и у меня дошли руки до спойлера 🙂 Сразу решил вставить кодом и не пользоваться плагином. Вспомнил, что у Вас, Виктория, была статья по этому поводу. Действительно, как сказал Иван, все четко, коротко и ясно — получилось с первого раза.

    Ответить
  • Александр 2014-12-30 в 22:33

    Есть даже мастера которые делают подобные вещи с помощью плагина на jqery, смысл для такого дела ставить плагин если код смотрится на много лучше. Наверное просто им лень что то делать с кодами, потому что там плагин тоже не так просто сделать

    Ответить
  • Алексей Щукин 2014-12-29 в 21:49

    Виктория, за сервис подбора цвета — СПАСИБО!
    Раньше всегда пользовался HTMLColors2000, попробую и ваш сервис. Может он больше придется по вкусу.

    Ответить
    • Александр 2014-12-30 в 22:35

      Я как то обычно цвета подбирал методом тыка, где увидел что то нормальное, увидел код цвета и использую. Наверное с помощью сервиса будет проще подбирать цвета.

      Ответить
  • Александр 2014-10-30 в 14:24

    Я тоже сделал себе на блоге спойлер, классная штука, только оформление поменял. Благодарю за полезную информацию!

    Ответить
    • Иван Зелинский 2014-11-15 в 01:21

      И какие у Вас Саня впечатление? Понятно, что оформление поменялось, пользователи заметили изменения?

      Ответить
      • Александр 2014-12-30 в 22:32

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

        Ответить
  • Виктор 2014-10-26 в 20:32

    Я даже не знал как это называется,мне повезло что я наткнулся на ваш сайт.
    Спасибо за инструкцию 😉

    Ответить
    • Иван Зелинский 2014-10-29 в 23:47

      Виктор,я считаю, что Вам очень повезло и здесь очень много полезной информации

      Ответить
  • Рашида 2014-10-25 в 20:43

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

    Ответить
    • Оксана 2014-11-12 в 22:52

      Я тоже озадачилась, где можно применить спойлер (кстати, как он называется я тоже не знала). И придумала — когда статья большая, то структурировать информацию можно и таким способом. Например, сделать вопрос — ответ через спойлер

      Ответить
      • Иван Зелинский 2014-11-22 в 12:12

        Главное что уже мы знаем как правильно сделать, а вот применение как и где это дело индивидуальное. Вы не плохо Оксана придумали, надо будет забежать к Вам и глянуть как получилось у Вас

        Ответить
  • Иван Зелинский 2014-10-25 в 00:28

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

    Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!