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

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

Теперь представьте такую же статью, только с соблюдением должного оформления:

• В начале статьи сделано содержание (оглавление).
• Текст разбит на логические части, каждая из которых начинается с графически выделенного заголовка.
• Должным образом вставлены картинки и графические элементы, которые улучшают восприятие текста.
• Примечания скрыты в спойлеры, именно о них и пойдет речь в данной статье.

Вопрос скрытия/открытия контента довольно актуальный. Мы уже рассматривали как в одном и том же месте, на том же пространстве страницы сайта, можно вывести куда больше материала, чем это кажется на первый взгляд: статья про табы (своеобразные вкладки для вывода различной информации в одном и том же месте). В этой же статье речь пойдет о спойлерах для сайта wordpress.

Чтобы не вдаваться в определение спойлера сразу приведу пример:

Показать »

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

Кликните по нему и Вы увидите содержание данного спойлера. Он реализован без плагинов, этот вариант мы так же рассмотрим ниже.

Для чего нужны спойлеры на сайте?

Пара примеров применения спойлеров:

• В очень длинных статьях скрытие определенного текста в спойлер будет более чем уместно.
• На главной странице сайта. Главная страница должна быть самой информативной – поэтому скрытие определенных элементов в спойлеры будет кстати. Это поможет добиться более информативного “первого экрана” (то что видит пользователь сразу – без прокрутки).

Спойлер на WordPress – как сделать с помощью плагина.

Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры  в дизайн статей блога не составит никакого труда.

1. Скачиваем плагин Advanced Spoiler – кликаем по кнопке Download Version x.xx (на данный момент у меня версия 2.02);
2. Устанавливаем его на блог и активируем;
3. Проводим минимум настроек: 1. Настройки -> Advanced Spoiler; 2. Вводим “Показать” (слово для раскрытия спойлера); 3. Вводим “Скрыть” (слово для закрытия спойлера).
4. Добавляем спойлер в пост. Для этого вводим текст (или добавляем картинку если хотите спрятать ее) для содержания спойлера, выделяем его и нажимаем на появившуюся кнопку “включить интерцептор“:

Выбираем эффект появления и текст при закрытом/открытом спойлере:

На этом вопрос редактирования настроек и применения спойлеров на wordpress при помощи плагина Advanced Spoiler можно закрыть. Но меня немного не удовлетворил результат работы плагина, а именно не совсем непонятно где кончается спойлер и продолжается статья, поэтому я посмотрел какой блок отвечает за стили внутреннего содержания спойлера и дописал их.

Для этого нужно открыть файл стилей style.css (Дизайн -> Редактор) и дописать в самом конце необходимые стили:

/* Спойлер */
.spoiler-body {
наши стили для спойлера
}

Я например для себя написал следующее:

Спойлер для сайта без плагинов.

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

Что бы добавить спойлер в нужное место скопируйте вот этот код:

<div class="spoil">
<br>
 <div
class="smallfont"><input type="button" value="Название спойлера" class="input-button"
onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Свернуть'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Развернуть';
}"/>
</div>
<div class="alt2">
       <div style="display: none;">

Содержание спойлера

</div>
</div>
<br>
</div>

Замените два участка этого кода, на то что требуется:

1. Название спойлера;
2. Содержание спойлера.

Название спойлера выполнено в виде кнопки (type=”button”) с классом: class=”input-button”.

Поэтому для придания своих черт этой кнопке открываем файл стилей (в WP – это style.css) и дописываем то, что хочется:

.input-button {
наши стили
}

Решение возможных проблем со спойлерами.

Я не уверен подключает ли плагин сам библиотеку jquery и будет ли работать спойлер прописанный вручную без нее. Поэтому добавляем данную библиотеку самостоятельно. Чтобы подключить библиотеку jquery необходимо в файл function.php сразу после <?php добавить следующие строки:

// smart jquery inclusion подключаем библиотеку jquery для wordpress

if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
 wp_enqueue_script('jquery');
}

Вообще она должна быть подключена на каждом сайте, ведь с ее помощью реализуются многие “фишки”. К примеру:

• Эффект прокручивания страницы для кнопки “Наверх” (правый нижний угол сайта).
• Переключение табов без плагина.