Скрываем контент на страницах сайта

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

Плагин WP Spoiler для блога

Если Вы счастливый владелец веб проекта на системе WordPress, то существует множество вариантов по решению проблемы скрытия контента. И основным из них, конечно, установка специализированного плагина. Вы сможете самостоятельно подобрать вариант, отвечающий вашим требованиям, а ниже речь пойдёт о плагине WPSpoiler, который заслужил моё внимание, и функционирует на сайте уже более года!

Установка и настройка плагина WPSpoiler

1. Для начала устанавливаем дополнение по средствам админ – панели. Переходим в раздел «Плагины» и кликаем по кнопке «Добавить новый»;
2. Далее в строке поиска набираем название: WPSpoiler
   Стоит учитывать регистр букв, так как это гарантирует вывод требуемого плагина в первой позиции результатов поиска!
   Жмём соответствующую кнопку для начала поиска (или клавишу «Enter»);
3. Под первым вариантом кликаем по ссылке установить и соглашаемся с установкой плагина. Ждём окончания инсталляции файлов дополнения и возвращаемся в раздел «Плагины»;

WPSpoiler не имеет настроек, а для применения его функции при редактировании публикации нужно применить специальные теги – [ SPOILER ]
По умолчанию плагин для скрытия использует слова:

• View– показать / обзор
• Hide– скрыть / убрать

Для того чтобы изменить английские теги на русские слова, находим в разделе «Плагины» установленный плагин и кликаем ссылку «Изменить». Переходим к редактированию файла дополнения.
В коде находим слова «Wiew/Hide» и изменяем их на свои, на пример, «Обзор» и «Скрыть».

Жмём «Сохранить», и можем перейти к применению «Добавить запись».

Спойлер контента без плагинов

Помимо вариантов реализации через плагины, есть возможность встраивать спойлер вставкой html кода. Такой вариант отлично подойдёт для разовых применений на сайте, тем более, что Вам необязательно иметь сайт на WordPress…

Перед закрывающимся тегом «HEAD» вставляем следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.splCont {display:none; padding:5px 15px; border:2px solid #FF3300;}
</style>

Примечание! На WordPress для вставки откройте на редактирование файл «header.php». И перед тегом </head> вставьте вышеуказанный код.

Далее сохраняем изменения в файле, а для отображения используйте следующий код:

<div><a class="splLink" href="">Название спойлера</a>
<div class="splCont">
Здесь скрытое содержимое...
</div>
</div>

Вставить спойлер можно в любое место на сайте, например, в новой публикации перейдите в режим редактирования «Текст» и сформируйте фрагмент для скрытия.

Вместо послесловия

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

Примечание! Зачастую, библиотека JQuery подключена на большинстве шаблонов WordPress (и дополнительное подключение может лишь повредить работе сайта). Поэтому если подключение библиотеки не требуется уберите верхнюю строку из кода перед закрывающимся тегом «head», она как раз отвечает за это действие в форме скрипта.

От себя добавлю, что для разовых применений скрытия текстового фрагмента или графических объектов подойдёт, как нельзя лучше, второй способ.