Урок 218 Как сделать спойлер в WordPress с помощью плагина Advanced Spoiler

Добрый день! Меня часто посещала мысль про то, как сделать спойлер в WordPress. Вы не знаете, что такое спойлер? Вот они - эти самые заветные спойлеры:

Спойлер WordPress

Спойлер в Вордпресс позволяет скрыть некий участок страницы/текста, который можно открыть/развернуть. Очень удобно скрывать некие участки, которые не обязательны к просмотру или на больших страницах.

Да, можно сделать вывод спойлеров самостоятельно (в интернете куча “мануалов” – информации), но так как я не любитель этих всех кодов, да и не очень хорошо в них разбираюсь, для меня куда проще было сделать вывод спойлера через WordPress плагин. Вопрос был другим, а какой именно плагин использовать? Идеальное решение нашлось, встречайте, плагин Advanced Spoiler.

Спойлер в WordPress с помощью плагина Advanced Spoiler

  1. Сначала, как и всегда Вам нужно скачать и установить плагин Advanced Spoiler.
  2. Сейчас переведем текст, который по умолчанию стоит Show и Hide. Для этого перейдите в админке WordPress –> Параметры –> Advanced Spoiler и переведите там эти слова: Спойлер Вордресс
  3. Также на этой странице Вы можете выбрать эффект спойлера и т.п. А вывести этот спойлер очень просто. Для этого заходите на страницу редактирования поста/страницы, выделяете необходимый текст (в моем случае это картинки в “Целях”) и нажимаете на кнопку “Включить интерцептор”: advanced_spoiler
  4. И уже там выбираете эффект (мне понравился эффект “slide”) и нажимаете на кнопку “okay”: vstavka_spoilera
  5. Результат проделанной работы, Вы можете видеть на той же странице “Цели”. Также Вы можете скрыть нужный текст в шаблоне (например, в сайдбаре, список целей и т.п.). Для этого используйте используйте следующий шорткод:
    Шорткод спойлер WordPress

Вот и все! Вот такой коротенький урок получился сегодня Улыбка. Возможно, данная функция кому-то, как и мне, пригодится.

До скорой встречи!

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

Ваш комментарий

  1. krock
    http://akseo.ru

    Никогда не пользовался ими, но за урок спасибо. Пригодится. Кстати фотка с айфоном почему-то не отображает?

    • Петр Александров

      Почему не отображается? Вроде все нормально..

  2. Андрей DuKiNssoN
    http://lokonews.ru/

    У этого плагина есть один недостаток – нельзя задать имя спойлеру индивидуально. К примеру, вместо слова “Скрыть” отображалось бы “Скриншоты” или “Видео к уроку” и т.д.

    На одном из своих новых сайтов я сделал все это с помощью добавления функции по какому-то уроку в сети. И теперь спойлер могу задавать так: spoiler name=блабла.
    Хотя, может тут и можно так сделать, я просто не стал разбираться с ним, когда не обнаружил такой возможности при первом тестировании, снес и решил сделать кодом. К тому же много где читал, что плагины дополнительно нагружают и без того тяжелый движок.

    • Петр Александров

      Поверь, здесь можно, и причем очень просто, прямо при вставке спойлера можно задать текст, отличный по умолчанию. Пример можешь увидеть тут http://wpnew.ru/celi (“Показать машину” и т.п.)

    • Андрей DuKiNssoN
      http://lokonews.ru/

      Хаха =) В комментариях плагин тоже срабатывает…

      • Петр Александров

        Ща удалю этот вывод, чтобы путаницы не было 🙂

      • Петр Александров

        А здесь не через spoiler name, а через spoiler title, так что никаких отличий от твоего 🙂

        • Андрей DuKiNssoN
          http://lokonews.ru/

          Ха =) ну тогда все просто замечательно! Я, наверно, в спешке не успел с этим разобраться… или вообще другой плагин ставил. Впрочем, и так и так работает =)

    • Александр
      http://photo-ya.com

      Андрей, прости, что встреваю..НО! Ничего подобного…Просто внутрь шорткода добавь:

      [spoiler effect=”blind” show=”Название спойлера” hide=”Название спойлера”]…И будет тебе любое название, какое захочешь…

      Всем добра!

  3. Landorn
    http://landorn.ru

    Давно искал что-то подобное, спасибо. А можно этот плагин применять для вывода спойлера некоторых рубрик?

    • Андрей DuKiNssoN
      http://lokonews.ru/

      Да спойлером можно что хочешь скрыть. Если не получается в редакторе. То зайдете в исходный код той странице, где есть спойлер. Он наверняка там будет в виде тэгов. Так вот, у каждого дива есть определенные класса (class), которые скрип плагина по определенному обрабатывает. А значит, если использоваться эти дивы с классами напрямую, то спойлер тоже сработает.

      Я так сделал на одном сайте своем, поместив текст на главной под спойлер. Так же буду делать и в рубриках. Это дополнительное продвижение все таки и не стоит этим принебригать.

    • Петр Александров

      К сожалению, не совсем понял твой вопрос, переформулируй, пожалуйста…

      • Роман Лихтин
        http://blog-lihtin.ru

        Скорее всего имелось ввиду чтобы рубрики некоторые на сайте спойлером скрывать.

        • Landorn
          http://landorn.ru

          Да, имелось в виду скрытие рубрик спойлером.

          • Петр Александров

            Вряд ли получится, как ты отделишь каждую рубрику по отдельности? Я не знаю как…

        • Макс
          http://m-body.ru

          Не очень удобно скрывать рубрики спойлером. Чисто мое мнение.

  4. darwin
    http://ifseo.ru

    полезная вещь) кстати теперь у тебя новая цель=) приятно) буду следить за твоей мечтой, и строить свои мечты)

  5. Дмитрий
    http://wpnice.ru/

    Могу посоветовать этот плагин – http://codecanyon.net/item/styles-with-shortcodes-for-wordpress/142221
    Мега вещь! Правда, и стоит недешево.

  6. нерадивый бухгалтер
    http://uma-sovsem.net/

    Полезная штука, возьму на заметку. А почему Вы не пишете про цели относительно блога?

  7. Webmaster

    Петр, пишу не в тему, но нужен совет! Скажи пожалуйста по какой примерной цене ты покупаешь ссылки в Rookee? Просто решил продвинуться по нч запросам, стал закупать ссылки и был неприятно удивлен тем, что часть сайтов оказалась с вирусами. Тут дело в цене ссылок?

  8. Webmaster

    Хотел сначала закупать только вечные ссылки, но тратить 100 и более рублей за ссылку на запрос частотностью 200-400 как то дороговато

    • Петр Александров

      А кто говорит, что нужно тратить на запрос 100 и более рублей? Я трачу буквально 5 рублей на запрос.

      • webmaster

        Я имел ввиду, если продвигать вечными ссылками

  9. Илья
    http://new-webmasters.ru

    А есть тег details и summary. Почитайте о них:удобно и не нагружает блог.

    • EpoSurvarium
      http://eposurvarium.ru/

      А толку от этих тегов, если они работают только в браузере Хром?

  10. Гордеев Игорь
    http://studio-gost.ru

    Зачем для сполейра использовать плагин и нагружать движок, тот же сполер легко сделать и без плагина studio-gost.ru/kak-sdelat-spoler-na-wordpress-bez-plagina/ В видеоуроке показано как это реализовать. Можно даже в своих CSS стилях оформить под смой блог.

  11. Ирина
    http://vladimirovna.biz

    Очень интересный и нужный плагин. Как раз кстати. Мучает только один вопрос: можно ли его выводить в верхнем правом углу шабона над меню, и насколько корректоно он будет отображеться?

  12. Марина Лазарева
    http://frilka.com

    Отличная функция!

  13. Дмитрий
    http://www.openmindblog.ru/

    полезная фишка

  14. Александр
    http://seobuild.ru

    Спасибо Петр за информацию. Спойлеры оказались простым выходом из сложной ситуации, которая у меня возникла. Еще раз благодарю.

  15. yulyaxa
    http://mamulkikrasotulki.ru/

    Петр, хотела твитнуть, но почему-то уже не пускает твиттер это сделать. Наверное уже слишком много поставила сегодня твитов с твоего сайта 🙂
    По теме спойлеров.
    Я о таком раньше даже не слышала. Видела, но ни разу не задавалась мыслью – как такое можно сделать. Спасибо, страничку в закладочку, в будущем обязательно воспользуюсь твоими советами.

  16. Андрей
    http://chevoyka.ru

    Спасибо. Очень помогли.

  17. Сергей
    http://okoneshnikovo-rcio.omskedu.ru

    Давно искал подобное, нашёл то что нужно. Спасибо!!!

  18. Полина
    http://novtrail.ru

    Возможно ли вставить кнопку СКРЫТЬ внизу спойлера, чтобы не прокручивать текст обратно, чтобы закрыть спойлер?

  19. Юля
    http://golos-mir.ru

    Спасибо! Давно искала. Установила. Наслаждаюсь.

  20. Юрий
    http://online-game-5.ru/

    Две проблемы поймал после установки данного плагина.
    1. при попытке редактирования готовой статьи напрочь заблокирован визуальный редактор. (лечится деактивацией плагина)
    2. при вставке под спойлер видео с ютуба не отрабатывается проигрывание ролика. (показывается только ссылка на ролик, сейчас на сайте установлен другой плагин спойлера, у него только первое заболевание в виде “прибития” визуального редактора…)

    • KINOGOGO.COM
      http://kudrim.ru

      Тоже хотел скрыть видео, т.к. занимает кучу места, а ннннет, только ссылка, устанавливал BBSpoiler.
      Если у кого есть опыт спойлеров со вставкой видео с ютуба- поделитесь, хотя не совсем понятно какая разница спойлеру что скрывать… На DLE вообще без разницы…

      • KINOGOGO.COM
        http://kudrim.ru

        нашел. нужно ссылку ютуба вставить через [embed]ссылка[/embed]

  21. businessforwomen.ru
    http://businessforwomen.ru/

    В статье есть ссылка с анкором “цели”. Она ведет на пустую страницу. Поправьте.

  22. Юрец
    http://виртуальная-жд.рф

    Отличное решение для сайта, где нужно показать дополнительные скриншоты через спойлер! 🙂

  23. vista

    [spoiler] Работает? Или плагин удален? [/spoiler]

    • Пётр Александров
      http://wpnew.ru

      Плагин удален давно, так как нет необходимости в нем.

      • Александр

        Приветствую! Есть ли возможность вставлять спойлер в короткую запись? Вместо анонса?

  24. valentina
    http://naw-blog.ru

    Спасибо большое

  25. valentina
    http://naw-blog.ru

    спасибо

  26. Алексей Туманов

    Как раз столкнулся с необходимостью создать удобный и практичный спойлер для WordPress. Что же, всё оказалось проще чем я думал, никаких сторонних скриптов – просто плагин с дополнительными настройками.

    P.S. спасибо за статью!

  27. Серега

    Всем привет! Классный спойлер, но есть проблема, перед тем как зайти в тему спойлер показывает весь текст ))) то есть идет заголовок темы, кусок описания темы, и вот в этом описании спойлер в развернутом виде, то есть идет заголовок “Привет мир” потом описание “здесь живет колобок” заворачиваем это в спойлер, и перед тем как зайти в тему записи идет вот так “Показать здесь живет колобок” когда заходишь в тему все норм, нажимаешь и закрываешь спойлер работает.

Наверх