Как сделать спойлер на сайте html код и плагин BBSpoiler

02 Июня 2017
 

В этой статье мы разберем, как сделать спойлер на сайте двумя способами: при помощи html кода, либо используя плагин BBSpoiler. Спойлер это скрытие текста или картинки в виде выпадающего списка, содержание которого можно посмотреть при нажатии на сам спойлер. Зачем нужен спойлер для сайта? В некоторых ситуациях спойлер незаменимый инструмент скрытия большого объема не целевой информации.

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

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

Живой пример на моем блоге это статья «Автосерфинг«. Периодически (раз в несколько месяцев) я снимаю видео обзор всех проектов, представленных в статье, и показываю вывод денег. Затем скриншоты выплат публикую в самой статье. На момент написания статьи таких видео обзоров снято четыре штуки, под каждым опубликовано не менее 8 скриншотов. Согласитесь, в данном случае лучше скрыть скриншоты выплат под спойлером, иначе вся статья будет состоять из одних картинок.

Ситуации бывают разные. Поэтому грамотный веб-мастер должен знать, как реализовать на сайте такой интересный инструмент программирования, как спойлер. Теперь давайте поговорим о том, какими способами можно разместить спойлер на сайте.

Сделать спойлер на сайте можно либо с помощью специального html кода, либо с помощью плагина. Оба способа имеют как положительные моменты, так и отрицательные. Что касается плагина, с ним спойлер размещается очень легко, но плагины нагружают базу данных, что замедляет работу сайта. Html код не грузит базу данных, но при переключении из текстового в визуальный редактор спойлер начинает некорректно отображаться.

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

 

Как сделать спойлер для сайта при помощи плагина. BBSpoiler единственный WordPress плагин спойлер, сумевший вывести спойлер на мой блог. Ни один другой плагин не смог корректно отобразить спойлер на моем сайте. Для установки плагина BBSpoiler перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «BBSpoiler». Затем нажмите установить и активировать. Все, установка завершена.Настраивать плагин не нужно. После установки в визуальном редакторе WordPress появится специальная кнопка «Спойлер». Вот так она выглядит:Нажимаете на эту кнопку, вводите заголовок, вставляете текст, выбираете стиль и нажимаете «Ok»:Если вам нужно добавить в спойлер простой текст, вставляете текст. Если текст должен быть в определенном стиле (например, необходимо задать размер и цвет шрифта), копируете текст с готовыми стилями из текстового редактора (не из визуального редактора, только в текстовом сохраняются стили) и вставляете в текстовое поле плагина.

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

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script>

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

Спойлер html код. Затем нужно вставить в текстовый редактор страницы, где хотите разместить спойлер, следующий код:

<!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//-->
<div>
<a href="" class="spoiler_links"><span style="background-color: #d6d6d6; font-family: 'arial black', sans-serif; font-size: 12pt;"><strong><span style="color: #000000;">ЗАГОЛОВОК СПОЙЛЕРА</span></strong></span></a>
 <div class="spoiler_body">
ВАШ ТЕКСТ
 </div>
</div>
<input type="button" value="Закрыть все"
    onclick=$("div[class^='spoiler_body']").hide('normal')>
<!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//--><!--//-->

ЗАГОЛОВОК СПОЙЛЕРА это название, при нажатии на которое, будет открываться спойлер. ВАШ ТЕКСТ это текст вашего спойлера. Как и в случае с плагином, в данный спойлер можно вставлять изображения (как это сделать, рассказано выше).

Ну и последнее, чтобы спойлер при загрузке страницы был закрытым, нужно в файл header.php между тегами <head> и </head> вставить следующий код:

<style type="text/css">
 .spoiler_body {display:none;}
 .spoiler_links {cursor:pointer;}
</style>

Вот и все, настройка спойлера завершена. Вот так будет выглядеть спойлер на сайте:

+ СПОЙЛЕР (Нажмите для показа\скрытия)

ВАШ ТЕКСТ ПЛАВНО ОТКРЫВАЕТСЯ
И ЗАКРЫВАЕТСЯ
ПРИ НАЖАТИИ НА СПОЙЛЕР


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

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

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
29 нужных плаинов для WordPress
Как сделать красивое меню для сайта
Все про виджеты и сайдбар WordPress
✓ Плагин WP Quads. Как разместить рекламу на сайте
Как установить счетчик посещений на сайт

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Лучший
курс обмена
BestChange.ru – популярный сервис по подбору выгодных обменных пунктов электронных валют, который поможет вам производить свои обмены безопасно и с минимальными потерями на комиссиях.
Обменять
на

Последнее на YouTube

Популярное на YouTube
© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете
Лучший обменник WM
 mmgp
Яндекс.Метрика
Рейтинг@Mail.ru