Как сделать спойлер. Варианты
Желающих создавать сайты сейчас очень много. Большинство пользователей учится этому самостоятельно, используя разные источники. И, конечно, существуют понятия, о которых будущие владельцы даже и не слышали. Но уж если взялись за дело, то изучать его надо досконально. Поэтому в статье будет подробно рассмотрен вопрос о том, как сделать спойлер на своем ресурсе.
Начнем, естественно, с самого понятия, что это такое и для чего данный объект потребуется. Итак, довольно часто на сайтах присутствует информация разного рода, которую (по разным причинам) надо первоначально спрятать от посетителей. То есть не то чтобы ее совсем не показывать, а просто предоставлять только по желанию. Вот спойлер в html как раз для этого и используется. Он сохраняет первоначально скрытый контент для сайта. Но это никак не отражается при ранжировании ресурса поисковыми системами, так как для них эта конструкция открыта и негативного влияния не наблюдается. Любая скрытая информация раскрывается при клике на указанную ссылку.
Кроме того, как сделать спойлер, очень многим интересно, а с какой целью он делается? Чаще всего для внешней красоты ресурса. Возьмем, например, сайт, дизайн главной страницы которого не предусматривает размещение текста большого размера. А владельцу надо, чтобы поисковики ресурс продвигали, поэтому контент должен быть объемным (размер статьи может сыграть значительную роль). Вот и приходит на помощь создание спойлера. Еще его использование подойдет для скрытия вспомогательной информации, или того, что не всегда хочется читать.
Далеко не всем хочется их читать, но от них никуда не деться. Существует способ, который поможет уберечь посетителей от данного чтива. Это создание кнопки, скрывающей любого вида спойлер на форуме, в статье и т.п. Создать ее можно по-разному. Проще всего при помощи html-кода input class="button". Вначале надо только убедиться, что при добавлении информации поддерживается вставка кода, и если да, то кнопка начнет работать сразу после вставки в нужное место текста.
Такая версия подходит для сайта, созданного на Ucoz. Но даже после установки кнопка может не работать, так как требует дополнительных настроек. В первую очередь – это ее внешний вид. Затем – идентификатор, который должен быть уникальным. И, наконец, в код страницы, где должен находиться материал, перед тегом добавляется скрипт, отвечающий за корректную работу кнопки. Важно правильно его поместить, а не просто знать, как сделать спойлер.
А теперь разберем эту же функцию, но только уже для сайта, сделанного для WordPress. Проще всего здесь использовать плагин Advanced Spoiler, который легко скачать со многих ресурсов. Его установка стандартна:
- распаковка архива на своем компьютере;
- подключение к сайту при помощи фтп-клиента (самый популярный – Total Commander);
- закачка файла на свой хостинг;
- в админке сайта, ищем раздел «Плагины – неактивные» и активируем вновь установленный. После выполненных действий он начнет работать. Теперь, добавляя материал в любом редакторе, как в визуальном, так и в html, будет видна кнопка «Spoiler». Добавлением нужной информацией между тегами [spoiler][/spoiler] и создается спойлер. Если владелец неплохо разбирается, плагин можно чуть перенастроить.
И еще один способ, как сделать спойлер на сайте. В первую очередь надо подключить библиотеку jQuery и так называемую «приблуду» JS, которая требуется для того, чтобы спойлер сворачивался и разворачивался более или менее плавно. На нужной странице сайта, в административной панели, между тегами размещается требуемый код. Дальше, чтобы функция по умолчанию была закрыта, в CSS-файл добавляется строчка .splCont{display:none; padding:3px 5px;}. Если нет такого документа, это не столь страшно. Надпись можно поместить в любом месте прямо в самом тексте, главное – до размещения самого спойлера. И, наконец, между ... помещается сам код скрытия информации.