Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Спойлер для сайта или блога на wordpress без плагина

Здравствуйте, сегодня на abrek-ad-abra.ru, я хочу рассказать вам о том, как на сайте или блоге под управлением CMS WordPress можно без особого труда и применения нагружающих сервер спец-плагинов сделать достаточно полезную и порой просто не заменимую штуку под названием спойлер.

Спойлер это своего рода html блок содержащий в себе дополнительные (скрытые) до определённого момента материалы, при клике спойлер плавно разворачивается и содержащийся в нём материал становится доступным вашим посетителям. Это может быть; текст, изображение, видео, аудио, какие либо списки или таблицы. В общем абсолютно всё, что угодно. Благодаря тому, что представленный мной сегодня вариант спойлера не подразумевает использования плагина, даёт нам возможность путём изменения css стилей задавать ему абсолютно любой размер и внешний вид.

В сети существует достаточно широкий выбор различных технических решений создания спойлеров для WordPress в том числе и с помощью спец-плагинов из которых наверное самый распространённый на сегодняшний день это: «Advanced Spoiler», если вы решили на своём ресурсе реализовать вывод спойлеров именно с помощью плагина советую воспользоваться именно им.

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

Ваш заголовок спойлера (совершенно любой текст)
А здесь будет находиться ваш контент под спойлером. Это может быть; текст, изображение, видео или аудио. Все что угодно!
Как видите вещь достаточно полезная, я уверен, что абсолютно на любом сайте или блоге для данного спойлера найдётся своё применение. Теперь давайте перейдём уже непосредственно его созданию.

Создаём спойлер на wordpress без плагина

Итак, для нормальной работы скрипта спойлера нам конечно же необходима библиотека «jQuery», если данная библиотека на вашем ресурсе ещё не подключена следует это сделать. Для этого открываем файл темы под названием: «footer.php (подвал)» и до закрывающегося тега: «/body» вставляем следующую строчку:

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

Хочу обратить ваше внимание, что на некоторых сайтах из за особенностей их тем, для корректной работы скриптов данную библиотеку следует подключать в файле «header.php (заголовок)» до тега: «/head».

Итак, библиотеку мы с вами подключили теперь давайте установим сам скрипт нашего спойлера.
Так же в файле темы: «footer.php» до закрывающегося тега: «/body» можно сразу после только, что прописанной строчки подключающей библиотеку «jQuery» вставляем скрипт спойлера:

<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 #56A007;
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; }

Всё по завершению этого спойлер на вашем WordPress настроен и готов к работе, давайте вкратце рассмотрим способ его применения на сайте.

Применение спойлера на WordPress

И здесь всё достаточно просто, при написании статьи необходимо переключиться в html режим редактора и в том месте поста где бы вы хотели вывести спойлер вставляем следующий код:

<div class="spoiler closed">
<div class="title">
<div class="title_h3"><strong>Ваш заголовок спойлера</strong> (совершенно любой текст)</div>
</div>
<div class="contents">А здесь будет находиться ваш контент под спойлером. Это может быть; текст, изображение, видео или аудио. Все что угодно!</div>
</div>

При необходимости вывода на одной странице сразу несколько спойлеров просто повторяйте данную процедуру сколько вам угодно раз. Вот и всё по поводу вывода спойлера на сайте или блоге под управлением WordPress без плагина.

Желаю всего доброго и надеюсь, что статья вам была полезна, до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-19

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

Вы можете поделиться статьёй в социальных сетях:

Комментарии к статье

2 комментарияна “Спойлер для сайта или блога на wordpress без плагина”
  1. Рамазан:

    Я когда то эту информацию так долго искал… Жаль что не увидел ваш сайт)

    Ответить
    • Administrator:

      Добрый день Рамазан! Сейчас я вижу на вашем ресурсе применяется вариант спойлера не чуть не хуже.

      Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

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

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог