Главная » Дизайн » Как скрыть/открыть текст при клике. Реализация спойлера на WordPress
Спойлер для сайта

Как скрыть/открыть текст при клике. Реализация спойлера на WordPress

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

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

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

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

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

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

Показать »

Текст спойлера. Открывается/закрывается при клике.

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

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

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

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

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

А как относятся поисковые системы к спойлерам? »

Поисковые системы без проблем индексируют содержание спойлеров, так что за это переживать ни в коем случае не нужно.

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

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

  1. Скачиваем плагин Advanced Spoiler – кликаем по кнопке Download Version x.xx (на данный момент у меня версия 2.02);
  2. Устанавливаем его на блог и активируем;
  3. Проводим минимум настроек: 1. Настройки -> Advanced Spoiler; 2. Вводим “Показать” (слово для раскрытия спойлера); 3. Вводим “Скрыть” (слово для закрытия спойлера).Спойлер для Worpress при помощи плагина
  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');
}

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

Комментировать через ВКонтакте:
Отзывов к посту "Как скрыть/открыть текст при клике. Реализация спойлера на WordPress" уже 27:
  • Советолог | 12.02.2013 в 15:46

    У меня стоял спойлер на одном блоге, но я так и не разу им не воспользовалась)) Наверное, не получается у меня слишком большие статьи писать… Но разве что в качестве развлекательной штучки)

  • Виталий | 13.02.2013 в 5:27

    О том, как реализовывается спойлер с помощью плагина знал, а вот без плагине нет, спасибо за инфу. Кстати, прикольный у вас спойлер возле шапки я и не замечал его раньше.
    Антон, вижу вы хорошо разбираетесь в верстке и всех этих штуках, я тоже недавно начал изучать эту науку. В принципе CSS и HTML знал давно, но не на том уровне, чтобы верстать с PSD, сейчас изучаю вопрос глубже. Так вот, так как вы уже прошли всю эту кухню, хочется вас спросить, какие бы вы порекомендовали книги по JQuery для изучения? Есть ли что-то для новичков, чтобы на понятном языке написано?

    • admin | 13.02.2013 в 7:27

      Вот css и html я знаю на уровне верстки с макетов, а на счет JQuery ничего собственно не знаю :) Просто есть уже готовые решения, которыми пользуюсь.
      Php так же не знаю – знаю лишь php в рамках WordPress. Так скажем “кто что выводит и как”.
      В принципе мне хватает :grin:

      • Dzmitry Roshchyn | 01.02.2015 в 21:21

        Реально то, что искал, все работает! Благодарю, по нету везде громоздкие варианты только были. :idea:

  • Виталий | 13.02.2013 в 5:32

    Кстати, что-то у вас чекбокс “Это не спам” барахлит :) галочка стоит, а все равно пишет, что нужно отметить что это не спам. Только за 3-й раз удалось отправить комментарий, может это только у меня так, но думаю, на всякий случай скажу.

  • Виталий | 13.02.2013 в 5:33

    Уже всё вроде норм :razz:

    • admin | 13.02.2013 в 7:24

      эмм :) все таки с 3 раза – странно. я конечно не знаю как работает этот плагин, но вроде бы должен вести себя корректно. Все таки не удалось отправить комменты с первого раза?

  • Виталий | 13.02.2013 в 15:03

    Самый первый комментарий не отправлялся, сейчас все нормально. :idea:

  • Павел | 18.02.2013 в 12:05

    Тоже пользуюсь этим скриптом, спасибо что помогаете новичкам!

  • Иннокентий | 12.04.2013 в 18:21

    Здравствуйте, спасибо за статью. Вопрос такой. Как с помощью плагина менять названия? Ну то-есть у меня на одной странице будет три сполера с разными названиями. такое возможно?

    • admin | 12.04.2013 в 22:16

      Ну конечно. Только вот в статье все уже есть, так что зачем повторяться, копирую:
      Замените два участка этого кода, на то что требуется:
      1. Название спойлера;
      2. Содержание спойлера.

      • Иннокентий | 14.04.2013 в 13:55

        Прошу прощения! Был не внимателен!!!

    • admin | 14.04.2013 в 18:14

      div блоки не правильно закрыты, либо лишнее закрытие, либо открытие и т.п.

      • Иннокентий | 14.04.2013 в 20:32

        Ну это же плагин, я там ни чего не делаю((( помогите решить проблему плиз.

  • Иннокентий | 14.04.2013 в 20:50

    Шаблоны менял…в любом такая же фигня

    • admin | 14.04.2013 в 22:01

      На блоге есть страница контактов, здесь мы проблему никак не решим

  • imeikaru | 18.04.2013 в 23:19

    Ребят, а подскажите что можно сделать типа спойлера, только немного другая его функция. У меня CMS WP, использую стороннюю систему комментирования. Я хочу добавить его в спойлер, ну чтобы комментарии появлялись только после запроса “Комментировать”, нажав на кнопочку эту. Спойлер я сделал, однако объект в нем все равно загружается, я хочу сделать именно чтобы сам скрипт комментирования грузился после нажатия на “Комментировать”. Таким образом сайт загружался быстрее, а то системы комментирования тормозят тяжелыми скриптами. Подскажите как сделать!

    • admin | 18.04.2013 в 23:23

      Есть смысл обратиться к фрилансерам – на мой взгляд не такая простая задача

  • Лариса | 09.12.2014 в 18:55

    Ну в плане “дописываем то, что хочется:
    наши стили”
    ты нас переоцениваешь. Остальное попробую :)

  • Лариса | 10.12.2014 в 1:57

    Вставила код, кнопка появилась, но она не открывается…

    • admin | 10.12.2014 в 13:18

      Может jquery не подключена?

      • Лариса | 10.12.2014 в 14:21

        Посмотрела, есть, наверно ты сам мне ее прописал :)
        Да ладно, я решила не заморачиваться пока, перенесла излишки в другой пост.
        После НГ еще поразбираюсь.

  • Алекс | 17.12.2015 в 11:15

    Спасибо! Один из вариантов (не плагинный)) приколол.
    Нужно проверить.

  • pogudo | 25.08.2017 в 16:32

    Хорошая и информативная статья даже спустя столько времени и обновления всеми любимого движка!

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: