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

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

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

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



Пример спойлер
Пример спойлер

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

Пример спойлер
Пример спойлер

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

Как создать спойлер «выпадающую запись» на блог 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/ и Вы не пожалеете, что узнали о нем!

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



Про Валерий Бородин

Проверьте также

лайфхаки ютуба

Лайфхаки ютуба, которые изменят вашу онлайн жизнь!

Самые нужные лайфхаки ютуба для ютубера! Здравствуйте, уважаемые друзья и гости блога! Сегодня хочу вам …

  • Наталья

    Читаю всё это — тёмный лес для меня. Но я уверена, что со всем разберусь и справлюсь!

    • https://pribylwm.ru/ Валерий Бородин

      Это пока для Вас «темный лес», а если немного вникнуть, то все окажется не таким уж и сложным! Если будут возникать вопросы, пишите буду вам помогать Наталья!!!

  • Владимир

    Спасибо.Все получилось, но при заходе на страницу блоки открыты. Как сделать так, чтобы они были скрыты до того как по ним кликнут?

    • https://pribylwm.ru/ Валерий Бородин

      Здравствуйте, Владимир! Блок изначально должен быть закрыт и открывается, только по нажатию на него. Это что-то Вы не так сделали. Посмотрите еще раз все шаги и проверьте правильность их выполнения!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу