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

Без плагина WordSmall

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

Такая техника часто применяется для создания 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].

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 31
  • Denys

    Здравствуйте. Спасибо за ответ.

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

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

    • WordSmall

      Здравствуйте. Обновил, пробуйте.

  • Denys

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

  • Denys

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

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

    '.$content.'

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

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

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

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

    • WordSmall

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

    • WordSmall

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

        (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);
      

  • Denys

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

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

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

  • Ершович

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

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

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

    • WordSmall

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

      • Ершович

        WordSmall,

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

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

  • WordSmall

    Могу подсказать плагин Shortcodes Ultimate wordsmall.ru/plaginy-dlya...a-wordpress.html. Там в спойлере есть возможность открытие спойлера по якорю.

  • Николай

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

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