Cпойлер в WordPress на CSS

В этой записи я расскажу как сделать спойлер в WordPress на чистом HTML и CSS. Предпосылкой для написания этой статьи стало желание полностью отказаться от использования библиотеки jQuery, которая по умолчанию используется в стандартной теме WordPress Twenty Fifteen.

Стандартная тема WordPress Twenty Fifteen использует библиотеку jQuery для отображения блока сайдбара в мобильной версии сайта. Функционал не настолько сложный, чтобы ради него подключать jQuery. Поэтому, было принято решение полностью выпилить jQuery из содержимого шаблона.

Начать я решил с самого простого. Ранее спойлер на моем блоге работал на JavaScript, который требовал для своей работы наличие подключенной библиотеки jQuery. Представляю вашему вниманию небольшую функцию, которая добавляет возможность использовать спойлер в WordPress.

Текст спойлера

Для установки откройте файл functions.php вашей темы и добавьте в него следующий код:

function showhide_shortcode ($atts, $content = null) {
    $attributes = shortcode_atts (array('text' => 'Спойлер'), $atts );

    $output = '<span class="spoiler"> 
        <label for="spoiler">' . $attributes['text'] . '</label>
        <input type="checkbox" id="spoiler">';
    $output .= '<div class="spoiler_text">'. do_shortcode( $content ) .'</div>
        </span>';

return $output;
}
add_shortcode ('spoiler', 'showhide_shortcode');

Чтобы добавить спойлер в WordPress используйте шорткод [spоiler] для области, которую хотите скрыть. Через параметр text можно изменить текст, который будет отображаться в заголовке спойлера.

[spоiler text="Заголовок спойлера"]Текст[/spоiler]

За отображение данных под спойлером добавьте в файле style.css:

.spoiler label {
    color: #0060a0;
    border-bottom: 1px dashed rgba(0,96,160,.2);
    cursor:pointer;
}
.spoiler input {
    display: none;
}
.spoiler_text {
    display: none;
}
.spoiler input[type=checkbox]:checked + .spoiler_text {
    display: block;
}

Теперь, вам остается только подправить стили под дизайн вашего сайта.