Как добавить спойлер на страницу Wordpress-сайта

Мы установили Wordpress на https://s-host.com.ua/ и далее планируем выкладывать на него статьи, причем достаточно большие. В некоторых случаях посетители сайта не всегда рады видеть огромные материалы, поэтому разберемся как создать спойлер, чтобы пользователи могли сворачивать/разворачивать текст по своему усмотрению.

Установка и настройка плагина Advanced Spoiler

Перейдите в раздел поиска и добавления новых плагинов (“Плагины”/“Добавить новый”) и найдите Advanced Spoiler. Сначала нажмите “Установить”, а затем — “Активировать”. После этого в разделе “Настройки” появится пункт Advanced Spoiler. Кликните на него, что перейти на страницу “Общие настройки”:

• в поле “Способ” можно выбрать метод вывода спойлера (jQuery или простой);

• в поле Feed Visibility настраивается видимость эффекта в RSS;

• в полях  “Показать текст” и “Спрятать текст” прописывается текст спойлера в развернутом/свернутом виде;

• в поле “Эффект по умолчанию” представлены различные эффекты, среди которых нужно выбрать один;

• в поле “Скорость эффекта” задается скорость эффекта (по умолчанию выставлено “3”);

• в поле “Позволить вкладки” включается функция добавления спойлера внутри спойлера (опция. полезная в том случае, если текст действительно большой и требует дополнительных “разбивок”):

Сохраните изменения в настройках, прежде чем переходить к использованию спойлера на страницах сайта.

Настройка спойлера на странице сайта

После того, как все настройки сделаны и сохранены, создайте новую страницу и добавьте в нее текст:

• выделите строки, которые вы хотите “скрыть”;

• выберите тип эффекта;

• заполните поле “Показать текст” (впишите вместо Show свой вариант):

Сохраните изменения и перейдите на страницу, чтобы убедиться в том, что слайдер действительно работает:

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

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

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

Перед началом проведения работ, лучше создать копию файла functions.php. В нем необходимо, отступив несколько строк вниз разместить функцию php, которая отвечает за вывод shortcode после тега <?phр>.

function hyper_spoiler($atts, $content) {

if (!isset($atts[name])) {

$sp_name = 'Спойлер';

} else {

$sp_name = $atts[name];

}

return '

<div class="spoiler-wrap">

<div class="spoiler-head folded">'.$sp_name.'</div>

<div class="spoiler-body">'.$content.'</div>

</div>

';

}

add_shortcode('spoiler', 'hyper_spoiler');

Название в кавычках – "Спойлер", можно изменить на любую другую фразу;

Далее необходимо установить и вставить библиотеку JQuery в header.php. В footer.php нужно разместить скрипт, который будет нести ответственность за правильную функциональность спойлера. Выглядит он следующим образом:

<script >

jQuery(document).ready(function(){

jQuery('.spoiler-body').hide()

jQuery('.spoiler-head').click(function(){

jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()

})

})

</script>;

Последним шагом будет придание созданному спойлеру приемлемого внешнего вида, который будет отвечать общей стилистике сайта. CSS стили помогут разобраться с оформлением. Необходимо скопировать код в «style.css», далее его можно будет редактировать, подгоняя под общий дизайн.

.spoiler-wrap{

-moz-border-radius:11px;

-webkit-border-radius:11px;

border-radius:11px;

border: 2px solid #2E90BC;

background: none repeat scroll 0 0 #2E90BC;

margin: 11px;

width: 100%;

}

.spoiler-head {

font-size: 12px;

line-height: 14px;

margin-left: 5px;

padding: 2px 13px 4px;

cursor: pointer;

width: 96%; /*для IE6*/

}

.folded {

display: block;

padding: 9px;

color: #FFFFFE;

}

.unfolded {

display: block;

padding: 9px;

color: #FFFFFE;

}

.spoiler-body {

-moz-border-radius:0 0 11px 11px;

-webkit-border-radius:0 0 11px 11px;

border-radius:0 0 11px 11px;

background: none repeat scroll 0 0 #F5F5F3;

border-top: 1px solid #C3CBD2;

padding: 11px;

line-height: 21px;

}

С помощью кода – <spoiler name=”НАЗВАНИЕ>скрытый текст/картинка/видео</spoiler>, cпойлер можно вывести на страницу сайта в нужном месте. В этом коде можно задать как название спойлера, так и его содержимое, которое он будет в себе хранить.

Описанный инструмент позволяет сделать страницу сайта более функциональной и придать ей красивый внешний вид.