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

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

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

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

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

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

Слайдер на 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;
}

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