Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Спойлер для WordPress без плагинов

В данной статье я хочу поделиться с вамитем, как сделать спойлер для WordPress  и для чего это нужно. Существуют различные плагины для установки спойлера на свой сайт, но мы откажемся от них и реализуем данную функцию при помощи простого кода, который выведет красивый спойлер на сайте без особых усилий.

спойлер wordpress, спойлер для сайта, код спойлера

Для чего же нам нужен спойлер и что это такое?

Спойлерэто такой блок, который состоит из заголовка и скрытого текста. Изначально весь текст скрыт и виден только заголовок, но при клике по заголовку раскрывается блок, в котором находится вся информация.

Порой бывает так, что на странице нужно разместить большое количество текста и другой информации. При этом наша страница становится очень длинной и тем самым на очень удобной для пользователя. При помощи спойлера мы можем структурировать нашу инфомацию или просто разместить ее отдельными блоками, что приведет к более лучшему и легкому восприятию.

Ну что ж, пора переходить к делу. Ниже мы разберем код, который можно использовать на любом сайте, а не только на WordPress, если вы конечно разбираетесь что и куда нужно вставлять. Мы с вами разберем как вставить код в WordPress.

Код спойлера для сайта

Для начала, перед тем как что-то менять обязательно сделайте резервные копии своих файлов, чтобы при ошибке можно было все восстановить.

Приступим к делу, все довольно просто и я думаю у вас не возникнут трудности:

  1. Первое что нужно сделать, так это добавить код для подключения библиотеки jQuery. В некоторых темах библиотека может быть уже подключена, так что нужно проверить. Откройте файлы index.php, function.php, header.php, footer.php и посмотрите прописан где нибудь код с упоминанием на файл jquery.min.js. Если нет, то вам нужно добавить в файл footer.php перед закрывающимся тегом </body> следующий код:

    <script type=»text/javascript» src=»//http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>

  2. Далее сразу после вставленного кода нужно вставить код, который отвечает за работоспособность спойлера:

    <script type=»text/javascript»>

    $(«.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»,»rgb(253, 253, 253)»);

    else $(this).children(«.title_h3″).css(«background»,»rgb(240, 238, 238)»);

    });

    </script>

  3.  Осталось немного украсить наш спойлер и для этого ему нужно придать стили. Откройте файл style.css и поместите в него код стилей спойлера:

    .spoiler {

    overflow: hidden;

    margin-bottom: 20px;

    margin-top: 20px;

    border: 1px solid #dfdfdf;

    border-left: 2px solid #09ADAD;

    box-shadow: 0 0 9px #dddddd inset;

    }

    .title_h3 {

    cursor:pointer;

    font-size: 14px;

    background: rgb(240, 238, 238);

    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; }

    Данный код придаст нашему спойлеру красивый вид. Можете изменить некоторые значения по своему вкусу и придать спойлеру свои стили.

  4. Мы настроили наш спойлер и теперь для его использования нужно открыть нужную статью или файл и в месте расположения спойлера вписать следующий код:

<div class=»spoiler closed»>

<div class=»title»><div><strong>Заголовок спойлера</strong></div></div>

<div>Текст, который будет под спойлером</div></div>

На этом все. Воспользуйтесь приведенным кодом и на вашем ресурсе появится оригинальный и привлекательный спойлер. Развивайте и улучшайте свой ресурс при помощи внедрения различных кодов, которые Вы можете найти на моем блоге.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ