Спойлер для WordPress на HTML и jQuery

Опубликовано: 01.09.2018

видео Спойлер для WordPress на HTML и jQuery

Установка и настройка плагина Advanced Spoiler на Wordpress — показать, скрыть текст

Спойлер - это небольшой 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 , который необходимо исправить.

Подписывайтесь и получайте полезные статьи на почту!

IRC (Internet Relay Chat)
rss