Как сделать удобный спойлер | Advanced Spoiler

Как сделать удобный спойлер | Advanced Spoiler | n-wp.ru Плагины

В одном из блогов понадобилось мне для одного эксперимента сделать спойлер, в котором должен быть вставлен другой спойлер. Задача нетривиальная, но оказалась вполне разрешимой — мне помог плагин Advanced Spoiler. Этот плагин — один из самых удобных для вставки спойлера в пост или на страницу.

Как сделать удобный спойлер | Advanced Spoiler

Спойлер — это такая ссылка, в которой скрыт от глаз кусок текста. При клике на эту ссылку этот текст отображается либо скрывается. Продвинутый спойлер имеет заголовок, и умеет скрывать/отображать не только тест, но и  любое содержимое, сопровождая все это красивыми визуальными эффектами. Все перечисленное умеет делать Advanced Spoiler.

Как сделать удобный спойлер | Advanced Spoiler

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

Как сделать удобный спойлер | Advanced Spoiler

Использование специальных тегов тоже не вызывает особых вопросов. Например, вот пример простейшего спойлера, использующего установки, выставленные в настройках плагина:

[spoiler] содержимое спойлера [/spoiler]

А вот пример более продвинутого варианта, в котором обозначены названия ссылок скрытия/отображения содержимого, а так же визуальный эффект слайдер, который сопровождает работу спойлера:

[spoiler effect=»slide» show=»Раскрыть спойлер» hide=»Скрыть содержимое спойлера»] Содержимое спойлера [/spoiler]

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

[spoiler] основное содержимое [spoiler] содержимое спойлера внутри содержимого [/spoiler] основное содержимое [/spoiler]

Только не забудьте выставить в настройках плагина Allow Nested — Yes.
Плагин может работать, используя jQuery и без использования скриптов (Simple Mode). Конечно же, красиво плагин работает только в том случае, если использует jQuery.

Скачать Advanced Spoiler

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. emmell-a

    Что-то не получается разместить не шорттегом в записи, а на странице шаблона (index.php) ссылкой..

    <a class="spoiler-tgl" href="<?php the_permalink() ?>/<?php the_ID(); ?>#SID<?php the_ID(); ?>_1_tgl" id="SID<?php the_ID(); ?>_1_tgl" rev="slide||скрытый_текст||скрытый_текст||300">скрытый_текст</a></p>
    <div id="SID<?php the_ID(); ?>_1" class="spoiler-body">текст</div>

    рисуется +скрытый текст, но при нажатии на + идет по ссылке взятой из <?php the_permalink() ?>/<?php the_ID(); ?>#SID<?php the_ID(); ?>_1_tgl а не показывается что там скрыто…. в чем может быть проблема?

    Ответить
    1. В тексте поста я вставляю:
      [spoiler effect="slide" show="название" hide="название"]
      <p>текст</p>
      [/spoiler]

      Если мне нужно вставить спойлер в шаблон, то я использую:
      <p><a class='spoiler-tgl' href='#SID_8_tgl' id='SID_8_tgl' rev='slide||название||название||300'></a></p>
      <div id='SID_8' class='spoiler-body'>
      содержимое спойлера
      </div>
      Попробуйте использовать <p><a … ></a></p>

      Ответить
  2. Алексей

    "все гениальное просто"… благодарю.

    Ответить
  3. kandar

    Мучаюсь уже второй день. Не могу спрятать недели в месяцы. Надо, чтобы при нажатии на месяц выезжали недели, а они сразу появляются(((:

    Показать скрытое содержание
    главное годовое событие
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие месяца
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    Показать скрытое содержание
    главное событие недели
    [/spoiler][/spoiler][/spoiler][/spoiler][/spoiler][/spoiler][/spoiler][/spoiler]
    Ответить
    1. В настройках плагина Allow Nested — Yes отмечено? Там же и пример спойлера с дочерним спойлером есть. И почему у вас спойлеры закрываются сразу все в конце? Спойлеры месяцев наверное должны закрываться сразу же:

      Показать скрытое содержание
      год
      Показать скрытое содержание
      первый месяц
      Показать скрытое содержание
      событие 1
      Показать скрытое содержание
      событие 2
      Показать скрытое содержание
      событие 3
      [/spoiler] <!-- закрылся первый месяц -->
      Показать скрытое содержание
      второй месяц
      Показать скрытое содержание
      событие 4
      Показать скрытое содержание
      событие 5
      Показать скрытое содержание
      событие 6
      [/spoiler] <!-- закрылся второй месяц --> [/spoiler] <!-- закрылся год -->
      Ответить
  4. mirvla

    Здравствуйте!

    Подскажите пожалуйста — вставляю спойлер в шаблон (http://start.e-pepper.ru/?page_id=22) всё отлично работает. Но почему то название спойлера (show=»название») отображается у него только после того, как щелкнешь +.
    Как решить эту проблему?

    Ответить
    1. mirvla

      Именно так, по вашей схеме и вставляю:

      <p><a class="spoiler-tgl" href="#SID_8_tgl" id="SID_8_tgl" rev="slide||Программирование||Скрыть||300" rel="nofollow"></a></p>
      <div id='SID_8' class='spoiler-body'>
      
      </div>
      

      Может не так что-то понял, подскажите, если ошибся в коде.

      Ответить
      1. mirvla

        ой, вот пример

        \\p>

        Ответить
        1. Попробуйте так:

          <?php do_shortcode('
          Показать скрытое содержание
          содержимое спойлера
          '); ?>
          Ответить
          1. mirvla

            к сожалению, тоже не помогло. спасибо, буду колдовать дальше.

            Ответить
            1. Вы правы — с плагином что-то не то происходит в последней версии WordPress. Думаю, что это связано с jQuery.

              Посмотрите другие варианты:
              — Как сделать простой спойлер
              Как сворачивать длинную запись | wpSpoiler

              Ответить