Спойлер для WordPress на HTML и jQuery
Опубликовано: 01.09.2018
Спойлер - это небольшой 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 , который необходимо исправить.
Подписывайтесь и получайте полезные статьи на почту!