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
Комментариев: 13
  • abhiram

    Как сделать, чтобы открытый спойлер автоматически закрывался, если я открываю другой?

    • WordSmall

      abhiram, попробуйте заменить скрипт на этот:

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

  • vova111

    На смартфоне не раскрывается список. Т.е. Тыкаю пальцем на кнопку и скрытый текст не появляется.

  • vova111

    Извиняюсь, заработало. Видимо был глюк

  • Vlastev

    Куда закидывать стили,чтоб они подключились?Кидаю в файл style.css но ничего не подключается.Как быть?

    • WordSmall

      Добавьте стили в файл style.css. И перед тем как смотреть результат на сайте, нажмите ctrl+f5

  • Серг

    Здравствуйте, спасибо, всё работает, подогнал под себя. Остался один вопрос, есть способ как из редактора поставить эту кнопку (развернуть/свернуть) в нужное мне место на странице, на каждой странице в разных местах?

    Буду очень признателен!

    • WordSmall

      Здравствуйте. С помощью редактора можно вставлять только в область ввода текста, там где статьи добавляете, контент на страницы и т.д. А чтобы использовать спойлер за границами ввода, то нужно прям в шаблоне файла вставлять шорткод. Пример:

      <?php echo do_shortcode( '[collapse title="любой текст"] Вставить свой текст [/collapse]' ); ?>
      

      • Серг

        WordSmall, в область ввода текста, да — и выравнивание всегда по левому краю. в шаблоне какого именно файла нужно вставлять шорткод? Спасибо.

      • WordSmall

        Выравнивание, внешний вид — это все легко корректируется стилями css. Файла шаблона страниц, вы же в страницы хотели добавлять? то есть вставлять спойлер. Обычно шаблон страниц называется page.php, вот с ним и нужно работать. Вот почитайне wordsmall.ru/sajtostroeni...rukovodstvo.html и особое внимание уделите условиям, если хотите на разные страницы добавлять разное содержимое.

  • Алексей

    А можно как то с помощью шорткода ограничить доступ к кнопке например в статье, сделать ее доступной только например группе: Автор, а другим в том месте будет выводится сообщение в рамке, например: Зарегистрируйтесь что бы получить доступ к скачиванию!

    • WordSmall

      Есть куча разных плагинов и без плагина тоже есть решения. На блоге я эту тему не рассматривал, но можете поискать в поике по типу запроса «текст только зарегистрированным вордпресс»

  • Алексей

    Есть вот такой код, но он только для одной роли, а мне нужно сделать так что бы к примеру премиум видел скрытый текст, а все остальные роли в том числе и незарегистрированные люди выдели призыв к приобретению премиум подписки

    function pr_shortcode_access($attrs, $content = null){ // Преобразуем элементы массива $attrs в переменные. Роль по умолчанию - Администратор extract(shortcode_atts(array( 'role' => 'administrator' ),$attrs)); // Если переменная $content пустая, ничего не возвращаем и прерываем выполнение шорткода if(empty($content)) return; // Если залогиненый пользователь может изменять настройки сайта, т.е. является администратором, // нет необходимости производить дальнейшую проверку. Администратор должен видеть все, поэтому // просто выводим содержимое переменной $content if(current_user_can('manage_options')) return $content; // Для всех остальных пользователей доступ по умолчанию запрещен, он будет разрешен если // все проверки будут пройдены. $access = false; // Преобразуем переменную роль в массив. Это позволит нам открывать доступ к контенту сразу // для нескольких ролей (перечисленных через запятую) одновременно. $roles = explode(',', $role); // Если пользователь не залогинен и гостям разрешено видеть контент - разрешаем доступ if(!is_user_logged_in() && in_array('guest', $roles)){ $access = true; } else { // Теперь необходимо узнать роль текущего пользователя global $current_user; // Т.к. ролей у пользователя может быть несколько, они находятся в массиве $user_roles = $current_user->roles; // Теперь для каждой роли, указанной в шорткоде проведем проверку foreach($roles as $role){ // Если в массиве ролей данного пользователя есть эта роль - разрешаем доступ if(in_array($role, $user_roles)) $access = true; } } // Если доступ разрешен, выводим содержимое переменной $content, т.е. то, что находится внутри // тегов нашего шорткода if($access) return $content; } add_shortcode('access', 'pr_shortcode_access');

    Шорткод для вставки:

    [access role="premium"]<a href="#" rel="nofollow">Скачать файл</a>[/access] [access role="guest"]Скачивание доступно только премиум пользователям. Пожалуйста <a href="#" rel="nofollow">Зарегистрируйтесь</a>[/access]

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