Как сделать спойлер на WordPress без плагина


Этот пост посвящен спойлеру. Иногда требуется не показывать полностью какой-то фрагмент текста, поместив его в спойлер — область, которая сворачивается/разворачивается по клику. Это нужно например, чтобы опубликовать текст, который не должен сразу бросаться в глаза, а должен лишь появляться по желанию читателя.

Чтобы в блоге заработал спойлер, можно воспользоваться специальным плагином. А можно и обойтись без него, создав спойлер в с помощью java-скриптов. Давайте и займемся созданием такого спойлера. Особенностью данного спойлера будет то, что вставить можно его с помощью шорткода (shortcode). Еще одним преимуществом, является то, что можно настроить его как угодно, подогнав фон заголовка, фон скрытого текста, а, так же, вписывать произвольный текст в заголовок…

Видеоурок: Как сделать спойлер на WordPress без плагина

Необходимые данные

Редактируем файл functions.php
И так, первым делом создадим функцию, отвечающую за вывод шорткода спойлера. Вставляем в файл function.php темы:

Далее необходимо подключить скрипты. Всего их два.

1. Подключаем Jquery

Jquery уже встроен в wordpress, но советую задействовать его с сервера google? т.к. загружается значительно быстрее. Открываем файл header.php в вашей теме:

Проверьте Jquery может быть уже подключен в Вашей теме.

2. Кусочек кода, отвечающий за переключение спойлера:

Настраиваем внешний вид спойлера

И, последнее, сами стили, которые можно прописать в css Вашего шаблона:

Код для вставки спойлера

Дело остается за малым – вставить спойлер. Воспользуемся коротким кодом (shortcode):

Пример спойлера

Необходимые данныеДля открытия - нажмите
Пример спойлера

Вот таким образом можно вставить спойлер в WordPress без использования плагинов. А где его можно использовать надо придумать Вам, я свой уже пристроил.


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

36 раз(а) написали о “Как сделать спойлер на WordPress без плагина

  1. Игорь, добрый вечер! Может подскажете… Не знаю куда копать… У меня на блоге спойлеры не работают, т.е. на странице отображается то, что пишу в коде, а именно: [spoiler]скрытый-текст[/spoiler]. И никакого тебе раскрывающегося и схлопывающегося текста. По логике причин может быть 3 (это я так насчитал): (1) несовместимость с версией WordPress (исключаю), (2) несовместимость с шаблоном (теоретически возможно, но сомневаюсь, однако если да, то как исправить?), (3) на блоге не подключен какой-либо нужный скрипт или какая-нибудь библиотека (если да, то какие и как включить?). Более того, я также пробовал использовать плагины wpSpoiler и Advanced Spoiler — результат тот же. Может у Вас есть какие-либо мысли на сей счет. Заранее благодарен! P.S. По идее, все делаю правильно, так как чайником в этих делах себя не считаю.

    Ответить
    • Что могу написать!? Скорей всего глючат какие-то javascript подключенные к вашему шаблону. Копаться надо там, я дат думаю. Пробуйте какие-то отключить, поменять очередность подключения и смотрите результат. Попробуйте подключить последнюю версию jquery.

      Ответить
  2. А где подключаются javascript к шаблону? И где и как подключать последнюю версию jquery? 😳

    Ответить
    • А где подключаются javascript к шаблону?

      обычно в шапке шаблона.

      И где и как подключать последнюю версию jquery?

      Об этом написано в уроке, скорей всего из-за этого и не работают спойлеры.

      Ответить
  3. Спасибо, Игорь! Пока проблема осталась, буду копать… Есть подозрения, что «вредничает» один из плагинов, установленных на моем сайте.

    Ответить
  4. Большой код, надо с ним повозиться. Если бы не глючили спойлеры, то было бы не жалко возится. Я пробовала с других сайтов — три рецепта и ни один не подошел. Плюнула на это дело и поставила плагин. Так тоже глючит. У вас статьи небольшие и можно бы даже спойлер не использовать. Я себе спойлер ставила с плагином только потому что статья на 8000 знаков с картинками к тому же и доп.материалами и тоже такая же беда, как и у вас — выпадает из под спойлера содержимое. Думаю уже, что для WP нет нормальных решений. Хотя кому очень надо любое решение будет примлемым. А почему спрятать «под кат» нет на WP?

    Ответить
  5. У меня вопрос такой, то что спрятано под спойлером индексируется ли поисковиками? Ведь в помощи яндекса пишут что робот не выполняет никаких действий, не нажимает кнопки и т.д. А информация под спойлером не видна без нажатия.

    Ответить
    • Поисковики индексируют этот спойлер, по исходному коду он просто заключен в html теги.

      Ответить
      • Иными словами правильно я поняла, что не спойлер индексируется, а то что под ним спрятано?
        Сегодня пока ничего не выпадало из спойлера у вас 😉 как было в прошлый раз

        Ответить
        • Это раз на раз не приходится. Этот косяк замечен если в спойлер вставлено видео

          Ответить
  6. Получается спойлер это контейнер который лишь для людей скрывает рутинный текст

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

      Ответить
  7. спасибо, давно искал подобное! возникла небольшая проблемка, быть может сможете что то посоветовать! при вставке картинок в спойлер они отображаются, а рядом отображаются кусочки кода этой картинки! странно как-то =)

    Ответить
    • Даже не знаю, что-то Вы сделали не так! Все должно работать корректно, без всяких видимых кодов. Проверяйте внимательнее как сделали.

      Ответить
  8. Спасибо за пост очень полезно. Поставил себе. Все заработало, чуть настроил под себя и никаких плагинов не надо. Супер!

    Ответить
  9. Привет ,выполнила все по твоей рекомендации ,но название не выводиться а пишет спойлер .Что не так?

    Ответить
    • Не знаю, что у вас не так! Если вы внимательно смотрели инструкцию у Вас все должно работать. Смотрите внимательнее «Код для вставки спойлера».

      Ответить
  10. Проверьте пожалуйста код на 1 скриншоте (11-12-13 строчку) они не совпадают с кодом в видео уроке. а так урок очень полезный. Спасибо

    Ответить
  11. Здраствуйте подскажите можно спойлер в спойлер вставить???

    Ответить
    • На сколько помню, можно.

      Ответить
      • А у меня со спойлерами проблема. Однозначно не могу даже 2 спойлера на одной странице поставить, не то чтоб один в другой — это вообще сайт накроет белой пеленой. Кстати, Игорь, Вам я помните тоже писала много раз что бывали проблемы со спойлером, видео у вас выпадало. Сейчас все хорошо!

        Ответить
        • У данного спойлера есть проблемы с вставкой видео, поэтому я вынес его за пределы спойлера.

          Ответить
  12. Зрею на то чтоб свой плагин на этот код поменять.
    вопрос: «Дело остается за малым – вставить спойлер. Воспользуемся коротким кодом (shortcode):»
    Этот код непосредственно вставлять где он нужен или куда?
    Как сделать чтобы кнопка была в редакторе, а то если руками такое дело писать — рехнуться можно

    Ответить
  13. Добрый день. спасибо за статью просто шикарное решение)) Но есть проблема))
    Если не пррописывать

    то не работает спойлер, А если прописывать не работает Lightbox галерея) Можно как то решить это?))

    Ответить
    • С этим не сталкивался даже не подскажу.

      Ответить
  14. Спасибо! Сделал спойлер по Вашей инструкции. Все получилось на отлично!!!

    Ответить
  15. Доброе время суток! Такой вопрос перед тем как устанавливать плагин или делать какой то хак я все проверяю на локал хосте через денвер, все прописал как у Вас в статье но спойлер не сворачивается, может быть проблема и за того что нет выхода в интернет?……
    Заранее благодарен.
    С уважением,
    Андрей

    Ответить
    • Скорей всего из-за отсутствие интернета. Т.к. для работы нужна библиотека jQuery и она наверное у вас подтягивается из интернета.

      Ответить
  16. Здравствуйте. Воспользовался данным спойлером. Все оч понятно и по полочкам. Возник вопрос. Как сделать текст «Спойлер» подчеркнутый пунктиром? Только текст. Чтоб он выглядел как псевдо-ссылка. Где-то явно нужно что-то добавить. То ли в функции, то ли в скрипте нужно добавить класс для ссылки. Помогите пожалуйста.

    Ответить
    • В стиль.folded добавить строчку text-decoration: underline; Это будет подчеркнутый текст. Что бы сделать подчеркнутым текст надо переделывать больше кода, на что у меня сейчас нет времени.

      Ответить
  17. Какой-то не самый простой способ установке спойлера на сайт))

    Ответить
  18. Спасибо. Все работает. Подскажите как правильно использовать два спойлера в одном месте с разными css стилями?

    Ответить
    • Честно сказать я не пробовал, а так надо настраивать стили и будет вам счастье.

      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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