Спойлер в WordPress

Спойлер

Всем привет!

Сегодня буду рассказывать о том, в чем я, скажем откровенно, не силен. А именно речь пойдет о том, как встроить в текст на вашем сайте спойлер (не силен я в php, а с помощью него все это и делается).

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

Спойлер для Вордпресс

На странице услуги по предоставлению семантического ядра мне нужно было сократить огромное полотно текста на что-то менее массивное. В этом деле мне и помог спойлер.

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

Как сделать спойлер?

Приступим к непосредственной установке:

1) Заходим в Редактор (Админ панель — Внешний вид — Редактор). Находим файл 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 class="title_h3"><strong>Спойлера</strong></div></div>
<div class="contents">А здесь будет текст спойлера</div></div>

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

Checho.ru!

Видео-эпилог: Jubilee & Galat — Battle Rap Made Me Do It

Одна мысль о “Спойлер в WordPress

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

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