
Как скрыть/открыть текст при клике. Реализация спойлера на WordPress
При наполнении сайта контентом особую роль отводят его качеству – это и понятно, ведь именно качественные статьи представляют ценность как для посетителей, так и для поисковых систем. Но если уделять внимание только этому, то велика вероятность, что статью никто не оценит! Как такое может быть?
Представьте, что на сайте публикуется очень длинная статья, как их еще любят называть в интернете – портянка. В ней нет ничего кроме текста: ни картинок, ни заголовков, ни выделений и т.д. Даже если это именно то, что Вам нужно, наверняка статья не будет прочитана до конца.
Теперь представьте такую же статью, только с соблюдением должного оформления:
- В начале статьи сделано содержание (оглавление).
- Текст разбит на логические части, каждая из которых начинается с графически выделенного заголовка.
- Должным образом вставлены картинки и графические элементы, которые улучшают восприятие текста.
- Примечания скрыты в спойлеры, именно о них и пойдет речь в данной статье.
Вопрос скрытия/открытия контента довольно актуальный. Мы уже рассматривали как в одном и том же месте, на том же пространстве страницы сайта, можно вывести куда больше материала, чем это кажется на первый взгляд: статья про табы (своеобразные вкладки для вывода различной информации в одном и том же месте). В этой же статье речь пойдет о спойлерах для сайта wordpress.
Чтобы не вдаваться в определение спойлера сразу приведу пример:
Текст спойлера. Открывается/закрывается при клике.
Данный вид спойлера реализован при помощи плагина для wordpress, который будет рассмотрен ниже. Но прежде чем это сделать хочу показать Вам еще один вид спойлера: его можно наблюдать в нижней части шапки на этом блоге:
Кликните по нему и Вы увидите содержание данного спойлера. Он реализован без плагинов, этот вариант мы так же рассмотрим ниже.
Для чего нужны спойлеры на сайте?
Пара примеров применения спойлеров:
- В очень длинных статьях скрытие определенного текста в спойлер будет более чем уместно.
- На главной странице сайта. Главная страница должна быть самой информативной – поэтому скрытие определенных элементов в спойлеры будет кстати. Это поможет добиться более информативного “первого экрана” (то что видит пользователь сразу – без прокрутки).
А как относятся поисковые системы к спойлерам? »
Поисковые системы без проблем индексируют содержание спойлеров, так что за это переживать ни в коем случае не нужно.
Спойлер на WordPress – как сделать с помощью плагина.
Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры в дизайн статей блога не составит никакого труда.
- Скачиваем плагин Advanced Spoiler – кликаем по кнопке Download Version x.xx (на данный момент у меня версия 2.02);
- Устанавливаем его на блог и активируем;
- Проводим минимум настроек: 1. Настройки -> Advanced Spoiler; 2. Вводим “Показать” (слово для раскрытия спойлера); 3. Вводим “Скрыть” (слово для закрытия спойлера).
- Добавляем спойлер в пост. Для этого вводим текст (или добавляем картинку если хотите спрятать ее) для содержания спойлера, выделяем его и нажимаем на появившуюся кнопку “включить интерцептор“:
Выбираем эффект появления и текст при закрытом/открытом спойлере:
На этом вопрос редактирования настроек и применения спойлеров на 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>
Замените два участка этого кода, на то что требуется:
- Название спойлера;
- Содержание спойлера.
Название спойлера выполнено в виде кнопки (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'); }
Вообще она должна быть подключена на каждом сайте, ведь с ее помощью реализуются многие “фишки”. К примеру:
- Эффект прокручивания страницы для кнопки “Наверх” (правый нижний угол сайта).
- Переключение табов без плагина.
Похожие статьи:
-
Владимир Жданов | 12.02.2013 в 17:55
Отличная статья! Как раз делаю новый сайт. Планирую активно спойлерничать )
-
Виталий | 13.02.2013 в 5:27
О том, как реализовывается спойлер с помощью плагина знал, а вот без плагине нет, спасибо за инфу. Кстати, прикольный у вас спойлер возле шапки я и не замечал его раньше.
Антон, вижу вы хорошо разбираетесь в верстке и всех этих штуках, я тоже недавно начал изучать эту науку. В принципе CSS и HTML знал давно, но не на том уровне, чтобы верстать с PSD, сейчас изучаю вопрос глубже. Так вот, так как вы уже прошли всю эту кухню, хочется вас спросить, какие бы вы порекомендовали книги по JQuery для изучения? Есть ли что-то для новичков, чтобы на понятном языке написано?
-
Dzmitry Roshchyn | 01.02.2015 в 21:21
Реально то, что искал, все работает! Благодарю, по нету везде громоздкие варианты только были.
-
Виталий | 13.02.2013 в 5:32
Кстати, что-то у вас чекбокс “Это не спам” барахлит
галочка стоит, а все равно пишет, что нужно отметить что это не спам. Только за 3-й раз удалось отправить комментарий, может это только у меня так, но думаю, на всякий случай скажу.
-
Виталий | 13.02.2013 в 5:33
Уже всё вроде норм
-
Виталий | 13.02.2013 в 15:03
Самый первый комментарий не отправлялся, сейчас все нормально.
-
Иннокентий | 12.04.2013 в 18:21
Здравствуйте, спасибо за статью. Вопрос такой. Как с помощью плагина менять названия? Ну то-есть у меня на одной странице будет три сполера с разными названиями. такое возможно?
-
Иннокентий | 14.04.2013 в 13:55
Прошу прощения! Был не внимателен!!!
-
Иннокентий | 14.04.2013 в 14:07
Блин у меня шаблон съезжает(( почему? Никто не знает? http://prazdnik-data.ru/archives/29
-
Иннокентий | 14.04.2013 в 20:32
Ну это же плагин, я там ни чего не делаю((( помогите решить проблему плиз.
-
-
Иннокентий | 14.04.2013 в 20:50
Шаблоны менял…в любом такая же фигня
-
imeikaru | 18.04.2013 в 23:19
Ребят, а подскажите что можно сделать типа спойлера, только немного другая его функция. У меня CMS WP, использую стороннюю систему комментирования. Я хочу добавить его в спойлер, ну чтобы комментарии появлялись только после запроса “Комментировать”, нажав на кнопочку эту. Спойлер я сделал, однако объект в нем все равно загружается, я хочу сделать именно чтобы сам скрипт комментирования грузился после нажатия на “Комментировать”. Таким образом сайт загружался быстрее, а то системы комментирования тормозят тяжелыми скриптами. Подскажите как сделать!
-
Лариса | 09.12.2014 в 18:55
Ну в плане “дописываем то, что хочется:
наши стили”
ты нас переоцениваешь. Остальное попробую
-
Лариса | 10.12.2014 в 1:57
Вставила код, кнопка появилась, но она не открывается…
-
Лариса | 10.12.2014 в 14:21
Посмотрела, есть, наверно ты сам мне ее прописал
Да ладно, я решила не заморачиваться пока, перенесла излишки в другой пост.
После НГ еще поразбираюсь.
-
pogudo | 25.08.2017 в 16:32
Хорошая и информативная статья даже спустя столько времени и обновления всеми любимого движка!
У меня стоял спойлер на одном блоге, но я так и не разу им не воспользовалась)) Наверное, не получается у меня слишком большие статьи писать… Но разве что в качестве развлекательной штучки)