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

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



style="display:block"
data-ad-client="ca-pub-5465116698024082"
data-ad-slot="5720849456"
data-ad-format="auto">


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

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

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



style="display:block"
data-ad-client="ca-pub-5465116698024082"
data-ad-slot="7057981850"
data-ad-format="auto">

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

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

сделать шапку канала

Как сделать шапку канала для YouTube?

Как сделать шапку канала для YuoTube самому с помощью photoshop? Здравствуйте, уважаемые друзья и гости блога! …

  • Наталья

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

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

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

  • Владимир

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

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

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

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