Спойлер - это небольшой HTML блок, который скрывает свое содержимое до определенного действия, например, до нажатия на определенную ссылку. Спойлер для WordPress можно сделать с помощью специальных плагинов, но сейчас я расскажу, как сделать спойлер для WordPress на HTML и jQuery, не используя при этом плагинов.
HTML каркас спойлера для WordPress
Для начала предлагаю создать HTML каркас будущего спойлера. Вы можете взять HTML код ниже, скопировать его и вставить в то место вашего сайта, где должен быть ваш спойлер. Когда мне нужен был спойлер на WordPress сайте, я вставлял этот HTML код в шаблон single.php.
<a href="#" class="spoilerLink">Эта ссылка открывает спойлер</a> <div class="spoilerContent"> Здесь должен быть текст, который необходимо скрыть спойлером </div>
А в файл style.css необходимо добавить следующий код, который будет скрывать блок спойлера по умолчанию.
.spoilerContent {display:none;}Код jQuery для спойлера
Библиотека jQuery автоматически подключается в WordPress, поэтому нет необходимости делать это еще раз. Но, для того чтобы спойлер срабатывал при нажатии на ссылку, необходимо добавить следующий код. Код можно добавить сразу после спойлера или в шаблон footer.php.
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('.spoilerLink').click(function(){
$(this).parent().children('div.spoilerContent').toggle('normal');
return false;
});
});
})(jQuery)
</script>Готовый спойлер для WordPress
Таким образом, на вашем WordPress сайте появится ссылка и скрытый блок. При нажатии на ссылку, скрытый блок становится видимым. Если у вас все работает должным образом, значит вы успешно создали спойлер для WordPress на HTML и jQuery.
Если у вас при нажатии на ссылку не открывается спойлер, значит вы неверно выполнили описанные выше действия или произошел конфликт jQuery, который необходимо исправить.
