В этой записи я расскажу как сделать спойлер в 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;
}
Теперь, вам остается только подправить стили под дизайн вашего сайта.