Делаем спойлер без плагина на сайт!

Здравствуйте уважаемые читатели моего блога pribylwm.ru! Рад Вас видеть на ресурсе “Блог Валерия Бородина”! Сегодня хочу Вам рассказать, как можно не используя плагин в WordPress на своем сайте или блоге, без лишних усилий и не нагружая базу данных WordPress, что для ускорения загрузки блога очень важно, создать очень даже привлекательный и аккуратный спойлер или по другому «выпадающую запись». Вот пример, как будет выглядеть Ваш сделанный спойлер:
До нажатия:

После нажатия:

И так приступим к созданию спойлера…

Вот рабочий пример нашего спойлера:

Вы наверное спросите меня… Ну а зачем и для чего собственно он этот спойлер нужен на моем блоге или сайте? Все очень просто! Например Вы ведете свой блог и пишите, пишите и еще и еще. А где располагается вся Ваша информация, на странице в которой уже не хватает места, а Вы и половины не выложили всей нужной информации! А как все это выглядит? Да как сплошная стена, испещренная буквами и всевозможными знаками препинания! Вот здесь и спасает наш спойлер. Вы всю важную информацию пишите заголовком, который очень прекрасно индексируется поисковыми системами, а менее важную укладываете в «выпадающую запись», т. е. спойлер. Прекрасно! И смотрится привлекательно, и для SEO очень полезно, а главное много остается свободного места для внесения важной информации, и база данных блога не загружена лишним плагином. Ну я наверное Вас все таки уговорил! Начнем создавать «выпадающую запись» или по-другому спойлер…

Как создать спойлер «выпадающую запись» на блог wordpress без плагина?

Во-первых, схематично, что будем делать:
1. Подключаем jQuery библиотеку на блог в файле footer.php
2. Подключаем сам скрипт нашего спойлера в файле footer.php
3. Добавляем стили css нашего спойлера в файл style.css
4. Добавляем основной код нашего спойлера в запись или на страницу блога
Теперь все четыре шага подробнее:
Первый шаг. Подключаем jQuery библиотеку на блог. Вот код, который нужно добавить в файл footer.php Вашей темы блога. Его нужно вставить перед закрывающимся тегом /body (wp-content/themes/ваша тема/footer.php):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Но перед добавлением этого кода посмотрите, может у Вас уже он подключен! Проверьте как файл footer.php, так и header.php, он может быть там!
Второй шаг. Для корректной работы спойлера необходимо добавить вот этот код в footer.php Вашей темы блога, так же перед закрывающимся тегом /body (wp-content/themes/ваша тема/footer.php):

<script>// <![CDATA[
$(".closed").toggleClass("show");
 
$(".title").click(function(){
 $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
 if ($(this).parent().hasClass("show"))
     $(this).children(".title_h3").css("background","#bbbbbb");
 else $(this).children(".title_h3").css("background","#dddddd");
});
// ]]></script>

Третий шаг. Добавляем стили css спойлера в файл style.css нашей темы блога. Вот код, который нужно вставить:

.spoiler {
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid #dfdfdf;
    border-left: 2px solid #3965a8;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
    cursor:pointer;
    font-size: 14px;
    background: #dddddd;
    margin: 0 -10px 0 -10px;
    padding: 10px;
    padding-left: 30px;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

Прекрасно! Почти закончили, осталось совсем немного!
Четвертый шаг. Он же последний! Берем код, который расположен ниже и вставляем его в нашу «выпадающую запись», где должен располагаться спойлер. Уточнение! Вставляйте код в режиме “Текст”, но не в режиме “Визуально”. Это важно!

<div class="spoiler closed">
<div class="title">
<div class="title_h3"><strong>Сюда вставляете Ваш заголовок для спойлера</strong> (можно написать дополнительный текст не в формате заголовка)</div>
</div>
<div class="contents">Здесь пишется сам текст, который выводится спойлером</div>
</div>

Вот и все! Наш спойлер готов к использованию. Теперь в «выпадающую запись» в коде пишите Ваш заголовок и вставляете необходимый текст самой записи.

Вот Вы и узнали: Как создать спойлер «выпадающую запись» на блог wordpress без плагина?

Друзья! У Вас точно у всех есть своя бытовая техника, которой Вы ежедневно пользуетесь и естественно она не вечна и выходит из строя, но это не беда. Так как я знаю, где вам ее могут быстро и дешево, а главное с гарантией отремонтировать! Посетите вот этот ресурс https://best-servis.com.ua/ и Вы не пожалеете, что узнали о нем!

Спасибо за Ваше внимание! Очень признателен, если был Вам полезен.
Возникли вопросы? Пишите, комментируйте! Отвечу всем без исключения! Ваш Валерий Бородин.