Крадущийся тигр, затаившийся дракон. Плагин для спойлеров wordpress

Вступление

Есть у меня один могильничек. Некоторое время назад я вел блог со своими, скажем так, рецензиями на книги. Цель была оставить себе напоминалки о прочтенных книгах, потому что память уже не та, а помнить хочется. А раз напоминалки, то точно будут спойлеры по сюжету, а вдруг кто-то зайдет на страницы блога и прочитает эти толстые спойлеры, получится нехорошо, и как следствие понадобился механизм сокрытия кусков текста.

Матчасть и реализация

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

Например, вот такой код

[say_yo]

может быть развернут в одно слово yo, очень полезная фича =)

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

Для решения задачи нужна простейшая конструкция: заголовок и тело, заглянув в кодекс wordpress и пораскинув мозги по комнате написал вот так:

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">' . $sp_name . '</div>
		<div class="spoiler_body">' . $content . '</div>
		</div>
	';
}

add_shortcode('spoiler', 'hyper_spoiler');

На всякий случай определяем значение заголовка по умолчанию. Технически этот код можно добавить в functions.php темы, но как я уже говорил где-то ранее, мне больше нравится всё выносить в плагины, к тому же будет логичным, чтобы при смене темы спойлеры всё еще оставались спойлерами.

Добавим простенькие стили

.spoiler_wrap {
	margin: 0 0 24px;
}

.spoiler_body {
	display: none;
	background: #f7f5e7;
	padding: 5px 15px;
}

.spoiler_head {
	cursor: pointer;
	color: #ac0404;
	background: #e0ddcc;
	padding: 3px 15px;
}

.spoiler_head:hover {
	color: #ea9629;
}

Теперь спойлер скрыт, а чтобы его открыть, придется использовать js. Не устаю повторять, в WP уже есть стандартно подключенный JQuery, почему бы не использовать его, если он так и так есть?

jQuery(function($){
	$(document).on('click', '.spoiler_head', function(){
		$(this).siblings('.spoiler_body').slideToggle();
	});
});

Вот собственно и всё.

Чтобы стандартные стили не ломали общий дизайн сайта, они могут быть легко переопределены в css темы, не зря же они каскадные таблицы.

Итог

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

Вот так вот несложно решили проблему. Забрать готовый плагин можно из репозитория

Всем рок!