пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

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

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

Последнее обновление - 21 января 2021 в 15:57

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

Что такое спойлер и зачем он нужен? Это некоторая часть контента на веб-странице, которая скрыта от глаз пользователя. Однако, при желании, посетитель сайта без труда имеет возможность открыть её одним кликом мышки и просмотреть. Иногда требуется скрыть некоторый контент, который не имеет особой смысловой нагрузки, либо очень длинный текст. Назначение может быть различным.

В Сети я нашёл несколько способов реализации такого функционала. В этой записи приведу несколько примеров.

Начну с варианта, предложенного ImpulsWeb. Потребуется вставить в область контента, где хотим видеть спойлер, html-код, включить в работу скрипт и присвоить стили. Кроме того, следует учитывать, что на веб-ресурсе подключена и правильно работает библиотека JQuery.

Автор предлагает такую вёрстку:

<div class="spoiler-block">
<a href="#" class="spoiler-title">Кликни меня</a>
<div class="spoiler-content"> 
Читаете этот текст? Ура! Значит, созданный вами спойлер работает!</br>
(Этот текст можно менять по своему усмотрению)
</div> 
</div>

Далее, перед закрывающим тегом body вставим код скрипта:

<script> 
$(document).ready(function(){ 
$('.spoiler-title').click(function(){ 
$(this).parent().children('div.spoiler-content').toggle('fast');
return false;
});
});
</script>

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

/**Стили блока с текстом внутри спойлера**/
.spoiler-content{
display:none;  /**скрываем блок контента спойлера**/
padding:15px 20px; /**добавляем внутренний отступ**/
border:1px solid #ccc; /**рамка блока контента спойлера**/
margin-top:5px; /**отступ сверху**/
background:#F0F0F0; /**фон блока контента спойлера**/
}
/**Стили блока оборачивающего каждый блок**/
.spoiler-block{
margin-top:10px; 
}
/**Стили кнопки спойлера**/
.spoiler-title {
border:1px solid #B9B9B9;
background: #ccc;/**обычный фон для браузеров, которые не поддерживают градиент**/
background:linear-gradient(#CACACA, #E8E8E8);/**градиентный фон**/
padding:10px;/**внутренний отступ**/
text-decoration:none;/**убираем подчёркивание у ссылки**/
color:#000; /**цвет текста ссылки**/
display:block; /**делаем ссылку на всю ширину**/
}

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

Первым делом, необходимо добавить в файл functions.php функцию, которая отвечает за вывод спойлера, а также зарегистрировать шорткод с именем «spoiler». Для этого вставим код:

function simple_spoiler_shortcode($atts, $content) {
	if ( ! isset($atts['title']) ) {
		$sp_name = 'Спойлер';
	} else {
		$sp_name = $atts['title'];
	}
	return '<div class="spoiler-wrap">
			<div class="spoiler-head folded">'.$sp_name.'</div>
			<div class="spoiler-body">'.$content.'</div>
		</div>';
}
add_shortcode( 'spoiler', 'simple_spoiler_shortcode' );

Чтобы скрытый контент раскрывался и снова закрывался при клике, необходима работа jQuery, как и в первом варианте. Включим в работу скрипт. для этого создадим файл spoiler.js с таким содержимым:

jQuery(document).ready(function() {
	jQuery('.spoiler-body').hide();
	jQuery('.spoiler-head').click(function() {
		jQuery(this).toggleClass('folded').toggleClass('unfolded').next().toggle();
	});
});

Файл spoiler.js разместить в папке с сайтом. Теперь, чтобы подключить скрипт, перед закрывающим тегом head (файл темы header.php) вставим строчку:

<script src="spoiler.js"></script>

Путь до файла «spoiler.js» указываем в зависимости от места его размещения.

Далее, при помощи CSS настроим внешний вид спойлера, добавив в файл style.css действующей темы такие строчки:

.spoiler-wrap {
	border: 1px solid #3b6d3d;
	background: #e9ffd0;
}
.spoiler-head {
	padding: 10px;
	line-height: 1.5;
	cursor: pointer;
}
.folded:before {
	content: "+";
	margin-right: 5px;
}
.unfolded:before {
	content: "–";
	margin-right: 5px;
}
.spoiler-body {
	padding: 10px;
	border-top: 1px solid #3b6d3d;
	background: #f4fef3;
}

Как теперь показать спойлер на странице? В нужном месте необходимо вставить шорткод:

[spoiler] Здесь содержимое, которое необходимо скрыть [/spoiler]

В данном случае, по умолчанию будет указан заголовок «Спойлер» (смотрите третью строчку функции). Однако, заголовок можно указать любой на своё усмотрение при помощи атрибута title:

[spoiler title="Название спойлера"] Здесь содержимое, которое необходимо скрыть [/spoiler]

А вот третий способ реализации при помощи только html и css. Указываем такой html-код:

<details>
<summary>Тут название спойлера</summary>
Содержимое, которое необходимо скрыть.
</details>

Придаём внешний вид:

details summary {
  display: block;
  background:#f0f0f0;
  padding:10px;/**внутренний отступ**/
  cursor: pointer
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "+ ";
}
/*плавное раскрытие спойлера*/
details[open] div {
  animation: spoiler 1s;
}
@keyframes spoiler {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
details[open] summary::before {
  content: "- ";
}

Ещё интересный спойлер, раскрывающийся при клике на кнопки. Потребуется включение jQuery.

Код HTML:

<nav class="spoilers-menu"><a class="spoiler-link" href="#sp1">Spoiler 1</a><a class="spoiler-link" href="#sp2">Spoiler 2</a><a class="spoiler-link" href="#sp3">Spoiler 3</a></nav>
<div class="spoilers">
 <div class="spoiler" id="sp1">
 <h2 class="spoiler__title">Spoiler 1</h2> Содержимое №1.
 </div>
 <div class="spoiler" id="sp2">
 <h2 class="spoiler__title">Spoiler 2</h2> Содержимое №2.
 </div>
 <div class="spoiler" id="sp3">
 <h2 class="spoiler__title">Spoiler 3</h2> Содержимое №3.
 </div>
</div>

Код JS:

$(function(){
 $('.spoiler').hide();
$('.spoiler-link').on('click', function(e) {
var idSpoiler = $(this).attr('href'),
 classSelect = 'spoiler-link--active';
$(this).toggleClass(classSelect);
$(idSpoiler).slideToggle(200);
e.preventDefault();
 });
});

Код CSS:

body {
 font: 16px/1.5em "Segoe UI", Arial, sans-serif;
 background: #bfb6a0;
 color: #fff;
 width: 60%;
 margin: 20px auto;
}
.spoiler-link {
 display: inline-block;
 text-decoration: none;
 color: #fff;
 background: #b63333;
 padding: 10px 25px;
 border-radius: 3px;
 text-shadow: 0 1px 0 #8c1111;
 border-bottom: 1px solid #8c1111;
 -webkit-transition: all 0.6s ease;
 transition: all 0.6s ease;
}
.spoiler-link:hover {
 background: #8c1111;
}
.spoiler-link + .spoiler-link {
 margin-left: 5px;
}
.spoiler-link--active {
 background: #4f9c3d;
 border-color: #2d751c;
 text-shadow: 0 1px 0 #2d751c;
}
.spoiler-link--active:hover {
 background: #2d751c;
}
.spoiler {
 background: #fff;
 color: #907c6b;
 padding: 25px;
 margin-top: 25px;
 border-radius: 3px;
 border-bottom: 1px solid #999;
}
.spoiler__title {
 margin-top: 0;
 font-weight: 200;
 color: #b63333;
}

Или вот такое решение на html, js и css.

Код HTML:

<div class="spoil">
    <div class="sp_top">
        <span class="sp_span">Заголовок</span>
        <button class="sp_button">Показать</button>
    </div>
    <div class="sp_text">
        Здесь ваше скрытое содержимое
    </div>
</div>

Код JS:

<script>
    $(document).ready(function () {
        $(document).on("click", ".sp_button", function () {
            spoyler(this);
        });
    });

    function spoyler(obj) {
        var spoil = $(obj).parent().parent(".spoil");
        var he = spoil.find(".sp_text").innerHeight() + 60;

        if (spoil.height() == 24) {
            $(obj).text("Свернуть");
            spoil.stop(true).animate({ height: he + "px" }, 200);
        } else {
            $(obj).text("Развернуть");
            spoil.stop(true).animate({ height: 24 + "px" }, 200);
        }
    }
</script>
.spoil {
        position: relative;
        overflow: hidden;
        background: url(img/nline.png);
        border: 1px solid #c3c3c3;
        border-left: 6px solid #c3c3c3;
        margin: 15px 0 15px 0;
        height: 24px;
    }

        .spoil .sp_text {
            margin: 40px 10px 10px 10px;
        }

        .spoil .sp_top {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 25px;
            background: rgba(195, 195, 195, 0.1);
            border-bottom: 1px solid #c3c3c3;
            display: table;
        }

        .spoil .sp_span {
            vertical-align: middle;
            display: table-cell;
            padding: 0 0 0 20px;
        }

        .spoil .sp_button {
            position: absolute;
            right: 2px;
            top: 2px;
            width: 100px;
            height: 20px;
            text-align: center;
            border: 1px solid #c3c3c3;
            background: #fff;
        }

            .spoil .sp_button:hover {
                box-shadow: inset 0 0 3px #ffd800;
            }

И ещё один вариант мне понравился в блоге Константина Белана. По сути он не отличается от предыдущих способов. Всё то же самое, отличие только во внешнем оформлении.

План такой. Открываем на редактирование файл footer.php и перед закрывающим тегом body вставляем код скрипта:

<script>
$(".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>

За визуальное оформление будут отвечать следующие строчки кода, которые необходимо внести в файл 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; }

Что касается вёрстки, то в область контента, где планируется скрыть некоторый текст или изображения, вставить такой код:

<div class="spoiler closed">
<div class="title"><div class="title_h3"><strong>Здесь указываем свой заголовок</strong></div></div>
<div class="contents">Здесь содержимое, которое надо прикрыть спойлером</div></div>

Всем WEB!

Друзья, плюсаните, вдруг пригодится!

Почитайте похожие материалы

Об авторе: Hobo

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

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

68 − = 65

 

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять