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

Как сделать удобный спойлер | 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
вы перейдете по ссылке http://wordpress.org/extend/plugins/advanced-spoiler/

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

12 комментариев

  • Что-то не получается разместить не шорттегом в записи, а на странице шаблона (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 а не показывается что там скрыто…. в чем может быть проблема?

    • В тексте поста я вставляю:
      [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>

  • Мучаюсь уже второй день. Не могу спрятать недели в месяцы. Надо, чтобы при нажатии на месяц выезжали недели, а они сразу появляются(((:
    [cc lang=»css»]
    [spoiler show=»2011 год» hide=»2011″]главное годовое событие

    [spoiler show=»январь» hide=»январь»]главное событие месяца
    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [spoiler show=»февраль» hide=»февраль»]главное событие месяца

    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [spoiler show=»март» hide=»март»]главное событие месяца

    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [spoiler show=»апрель» hide=»апрель»]главное событие месяца

    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [spoiler show=»май» hide=»май»]главное событие месяца

    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [spoiler show=»июнь» hide=»июнь»]главное событие месяца

    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [spoiler show=»июль» hide=»июль»]главное событие месяца

    [spoiler show=»неделя 1″ hide=»неделя 1″]главное событие недели[/spoiler]
    [spoiler show=»неделя 2″ hide=»неделя 2″]главное событие недели[/spoiler]
    [spoiler show=»неделя 3″ hide=»неделя 3″]главное событие недели[/spoiler]
    [spoiler show=»неделя 4″ hide=»неделя 4″]главное событие недели[/spoiler]

    [/spoiler][/spoiler][/spoiler][/spoiler][/spoiler][/spoiler][/spoiler][/spoiler]

    • В настройках плагина Allow Nested — Yes отмечено? Там же и пример спойлера с дочерним спойлером есть. И почему у вас спойлеры закрываются сразу все в конце? Спойлеры месяцев наверное должны закрываться сразу же:
      [cc lang=»css»]
      [spoiler] год

      [spoiler] первый месяц
      [spoiler] событие 1 [/spoiler]
      [spoiler] событие 2 [/spoiler]
      [spoiler] событие 3 [/spoiler]
      [/spoiler]

      [spoiler] второй месяц
      [spoiler] событие 4 [/spoiler]
      [spoiler] событие 5 [/spoiler]
      [spoiler] событие 6 [/spoiler]
      [/spoiler]

      [/spoiler]

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

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

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

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

/* ]]> */