WordPress. Раскрывающийся текст (спойлер) при нажатии на ссылку

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

Такая техника часто применяется для создания FAQ разделов, где отображаются только заголовки вопросов, а вот уже по клику на них открывается полный ответ. Спойлеры могут пригодиться не только на «ЧАВО» страницах, но и в обычном контенте.

Мы сделаем свой раскрывающийся текст для WordPress’a, без плагина и максимально удобным в использовании. Он будет вставляться в материал через шорткод, а с помощью добавления своей кнопке в HTML-редактор WordPress, избежим писать каждый раз короткий код.

Создаем спойлер на WordPress

Шаг 1-й. Открываем файл темы functions.php, перед закрывающим знаком ?> вставляем код. Он создаст новую кнопку в редакторе (Spoiler) и добавит новый шорткод в тему.

//Кнопки в редактор
if( !function_exists('my_buttons') ){
function my_buttons()
{ ?>
<script type="text/javascript">
QTags.addButton( 'Spoiler', 'Spoiler', '[collapse title="любой текст"]', '[/collapse]' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'my_buttons');
}
//конец
//Спойлер шорткод
function swpcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div style="margin: 0; padding:0;">
        <div class="SWPControl">
            <span class="SWPTitle">'.$title.'</span>
            <a href="javascript:void(0)" class="collapseButton SWPButton">Развернуть/свернуть</a>
            <div style="clear: both;"></div>
        </div>
        <div class="SWPContent" style="display: none;">'.$content.'</div>
    </div>';
}
add_shortcode('collapse', 'swpcollapse');

Шаг 2-й. Следом идут стили оформления, которые можно редактировать под свое усмотрение.

.SWPControl {
  background: #FFFF89;
  margin-bottom: 10px;
  display: inline-block;
  font-weight: 600 !important;
  padding:10px;
  border-radius: 3px;
  box-shadow: 0 -0.085em 0 0 rgba(102, 52, 0, 0.2) inset, 0 0 3px 0 rgba(254, 255, 187, 0.5) inset;
  color: #000;
}

a.collapseButton {
    color: #D33F1D !important;
    /*font-weight: 500 !important;*/
    line-height: 22px;
    text-decoration: none !important;
}

span.SWPTitle::before {
    color: #000;
    content: "☻";
    font-size: 27px;
    line-height: 22px;
    display: inline-block;
    animation: credits 1s infinite;
    -webkit-animation: credits 1s infinite;
    animation-name: credits;
    -webkit-animation-name: credits;
    transition: all 0.3s linear 0s;
}
@keyframes credits {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-10px);}
        60% {transform: translateY(-5px);}
}
@-webkit-keyframes credits {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
        40% {-webkit-transform: translateY(-10px);}
        60% {-webkit-transform: translateY(-5px);}
}

Шаг 3-й. В последнем шаге добавляем небольшой скрипт в файл header.php или footer.php. Он добавит плавный эффект к раскрывающему тексту.

<script>
    jQuery(document).ready(function(jQuery) {
        jQuery('.collapseButton').click(function() {
            jQuery(this).parent().parent().find('.SWPContent').slideToggle('slow');
        });
    });
</script>

Результат.

своя кнопка в редакторе вордпресс

спойлер на вордпресс без плагина

Текст для спойлера должен быть обвернут в шорткод [collapse title="любой текст"]… [/collapse].

52 комментария
  1. Здравствуйте. Спасибо за ответ.

    Странно. Сейчас снова все сделал — именно первый работает(что бы открытый див закрывался, если открывать другой), а второй не работает(что бы текст кнопки менялся).

    И ещё уточнение: какой должен быть скрипт(если только скрипт нужно менять или же что-нибудь ещё?) что бы оба метода работали сразу? То есть и текст кнопки менялся, и закрывался див, если открывать другой? Так как нужны обе эти штуки, а в коде не силён:(

  2. Здравствуйте. Спасибо. А где именно изменили? А то всю статью и комментарии пересмотрел — не вижу, что поменяли)

  3. Прошу прощение, ещё одна проблема возникла.

    Как и писал выше, мне нужно было, что бы при клике на кнопку текст открывался над кнопкой, а не под ней. Я просто

    '.$content.'

    Переместил выше, перед SWPControl. Все заработало, блок с текстов открывается над кнопкой.

    Но когда вставляю код

    (function($) { var allPanels = $('.SWPContent').hide(); $('.collapseButton').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery);

    Перестает работать, при клике на кнопку ничего не происходит(

    1. Denys, вы точнее говорите какой именно не работает. Я все думал об втором (текст откр/закр.). Проверил уже, и все работает. Первый код — обычный аккордеон или faq. Если не забуду, то позже гляну, а так можете сами любой код подставить. Готовых решений хватает, там же только подставлять.

    2. Код рабочий. Так что пробуйте менять места подключения.

        (function($) {
          
           var allPanels = $('.SWPContent').hide();
          
           $('.collapseButton').click(function() {
            $this = $(this);
            $target =  $this.parent().next();
            allPanels.removeClass('active').slideUp();
            if($target.is(':hidden')){
               allPanels.removeClass('active').slideUp();
               $target.addClass('active').slideDown();
            }
            
           return false;
           });
      
          })(jQuery);
      

  4. Да, с кодом разобрался, работает, закрывается, при открытие нового. Но после того, как я сменил местами код </code> и <code>'.$content.' , что бы текст открывался над кнопкой, а не под ней — у меня перестал работать следующий скрипт(вы его давали в комментариях самых первых):

    (function($) { var allPanels = $('.SWPContent').hide(); $('.collapseButton').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery);

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

  5. Спасибо, за этот код, все прекрасно работает!!!

    Скажите возможно ли сделать так:

    — на сайте над спойлером стоят якорные ссылки, а сами якоря находятся под скрытым текстом. Как сделать так, что бы при клике на якорные ссылки открывался скрытый текст и пользователь переносился к абзацу с якорем?

    1. Не за что! Не совсем понял. То есть стоп-якорь внутри спойлера? А сам якорь вне спойлера? А зачем так делать?

      1. WordSmall,

        Совершенно верно ссылки находятся вне спойлера, а то куда они ведут находится внутри спойлера

        Над спойлером находятся фразы-ссылки в три столбика с иконками с преимуществами, но если кто-то с каким-то преимуществом захочет ознакомится подробнее, то нажав на эту ссылку попадет под скрытый текст прямо к нужному абзацу. Это нужно для того, что те кто не захочет читать весь большой текст, уже визуально увидит, что у нас это есть. Причем это не просто есть, а подтверждено тем, что находится под скрытым текстом, и при желании можно прочитать.

  6. Спасибо, помогло! Код вставил, кнопка появилась, всё крутится взад-вперёд.

  7. День добрый. Вроде все по инструкции сделал, но не работает. Не раскрывает текст под кнопку.

  8. Доброго вечер! Понравилось ваше решение со спойлером, однако можно ли его применить для комментариев? У меня спойлеры работают только в постах, а в комментариях шорткод не преобразуется в спойлер и остаётся в таком виде:

    [collapse title="Спойлер"]Содержимое[/collapse]

    Форма комментариев стандартная.

    1. Здравствуйте. Попробуйте вставить этот код в файл funcions.php add_filter( 'comment_text', 'do_shortcode' );

      1. WordSmall, благодарю! Всё работает! Отдельная благодарность Вам за оперативный ответ и помощь — у вас лучший сайт о Вордпресс, расписано всё предельно просто и понятно. Жду от Вас новых постов в блоге, которые обязательно прочту.

  9. Добавил в functions.php ШАГ№1 и потом туда же добавил еще ШАГ№2 и получил белый экран смерти.

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

Оставить ответ

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