Simple Spoiler — спойлер для WordPress в несколько строк кода

Раздел: PHP кодинг, JavaScript
Simple Spoiler — спойлер для WordPress в несколько строк кода


В базовой комплектации WordPress нет спойлера и устанавливать его приходится своими силами. Решением может послужить плагин Simple Spoiler — простой скрипт, позволяющий добавить функцонал спойлера для CMS WordPress.

Вариантов установки два: готовый плагин (более новая версия плагина) из репозитория или правки файлов темы (предыдущая версия). Мне более интересна прака файлов, поэтому инструкция ниже.

Плагин будет работать через шорткоды и в редакторе необходимо использовать следующую конструкцию.

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


1. functions.php



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' );


Функция отлавливает ключевые слова SPOILER и текст, который заключен между ними заворачивает в HTML-код. Остается лишь написать слайдер. Наиболее простое решение — JQ и CSS

2. Слайдер на JQuery



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


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

Стили 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;
}


Чистая косметика. Кнопки "плюс" и "минус" также тут.


Понравилась статья "Simple Spoiler — спойлер для WordPress в несколько строк кода" из раздела PHP кодинг, JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 108   Дата: 14-авг-2018, 07:05

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика