Мы установили 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 type="text/javascript">
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пойлер можно вывести на страницу сайта в нужном месте. В этом коде можно задать как название спойлера, так и его содержимое, которое он будет в себе хранить.
Описанный инструмент позволяет сделать страницу сайта более функциональной и придать ей красивый внешний вид.
