WordPress — самый простой спойлер без шорткодов

Задача: настроить спойлер для движка WordPress с минимальным вмешательством в код и удобным для редактора Gutenberg.

Без шорткодов, ибо они портят всю идеологию редактора текста и без HTML обертки, которую нужно создавать в существующих вариациях.

Решение: получилось реализовать продвинутый спойлер, в котором нужно прописать всего два CSS класса в меню «дополнительно» для блока редактора Gutenberg.

WordPress спойлер раскрыт

WordPress Spoiler в редакторе Gutenberg

Если вы еще не поняли всех преимуществ данного редактора, крайне рекомендую оформить в нем хотя бы 10 статей. За это время все странности и неудобства пройдут и откроется простота и легкость работы с текстом по отношению к стандартному редактору.

Выше показана стандартная визуальная разметка текста в редакторе Gutenberg. По умолчанию каждая новая строка оборачивается абзацем P. Каждый абзац можно редактировать на HTML индивидуально. Предусмотрен интерфейс для указания CSS класса без использования HTML. Ниже пример:

Все, что нужно, это создать два абзаца — до и после спойлера и прописать им в блоке дополнительно CSS классы .sp-start и .sp-end.

Данные классы имеют display: none; и не будут отображаться на странице. Дабы блоки не удалялись, прописать им любой текст (на скриншоте просто spoiler).

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

Подробнее о коде

HTML разметка спойлера

Итоговый код спойлера должен строго соответствовать иерархии т.к. он перебирается на jQuery и не будет работать, если что-то будет не на своих местах. Иерархия очень проста.

<!-- Должен быть НАД .sp-start -->
<p class="sp-title">Заголовок спойлера (не обязателен)</p>

<!-- display:none; НЕ попадет под спойлер -->
<p class="sp-start"></p>

	<!-- Любое содержимое -->
	<!-- Обертку <p> можно заменить любым другим тегом -->

<!-- display:none; НЕ попадет под спойлер -->
<p class="sp-end">

Пояснение

• .sp-start и .sp-end — индикаторы. которые не попадают под спойлер т.к. я не смог найти иное решение! Под спойлер попадет все, что расположено после .sp-start и до .sp-end;
• .sp-title — должен находиться над .sp-start и является кликабельным блоком, разворачивающим и сворачивающим спойлер. Данный блок не обязателен т.к. предусмотрено автоматическое его создание в случае отсутствие. Текст подставляется по умолчанию;
• sp.block — оборачивает элементы после .sp-start и до .sp-end. В HTML разметке не нужен и работает на jQuery;

CSS стилизация

Ниже обязательные стили, остальное по желанию

/* Кнопка плюс при клике на спойлер */
.sp-title:before{
	content: " [+] ";
	width: 32px;
	display: flex;
}
/* Кнопка минус при клике на спойлер */
.sp-title.sp-title-changed:before{
	content: " [–] ";
}
/* Скрываем по умолчанию спойлер и блоки-индикаторы */
.sp-block, .sp-start, .sp-end{
	display: none;
}

jQuery

Хотел сделать простой и маленький скрипт, а получился полноценный плагин. В коде почти 100 строк и его лучше подключать отдельным файлом. Расписывать, как это сделать не буду т.к. в сети полно информации на тему, «как подключить свой скрипт в WordPress».

jQuery(document).ready(function(){

    var $ = jQuery;

	function wordpress_spoiler (){

		//***********************************
		//Заполняем переменные ниже для удобства редактирования в будущем
		//***********************************

		var sp_start = '.sp-start', // Стартовый блок (невидимый, следующий абзац будет внутри спйлера)
			sp_start2 = 'sp-start', // продублировать без точки

			sp_end = '.sp-end', // Конечный блок (невидимый, перед ним абзац будет внутри спйлера)
			sp_block = '.sp-block', // обертка спойлера (для CSS стилизации)
			sp_block2 = 'sp-block', // продублировать без точки

			sp_title = '.sp-title', // Заголовок спойлера (для CSS стилизации)
			sp_title2 = 'sp-title',	// продублировать без точки

			sp_title_empty = 'Нажать...'; // Текст для пустого заголовка
			sp_title_click = 'Скрыть'; // Текст для заголовка с раскрытым спойлером

		//***********************************

		//Находим .sp-start и оборачиваем в .sp-block исключая блок с меткой .sp-end
		$(sp_start).nextUntil(sp_end).wrapAll('<div class="' + sp_block2 + '">');
		
		
		// Проверяем наличие заголовка спойлера
		if(!$(sp_block).prev().prev().hasClass(sp_title2)){
			
			$(sp_block).prev().before('<p class="' + sp_title2 + '">');
			
		}else{
			//Получаем заголовок (ниже подставим на закрытие)
			var sp_title_empty = $(sp_block).prev().prev().text();
		}
		
		//Считаем символы в заголовке спойлера, ставим дефолтный, если пусто
		if($(sp_title).text().length <= 0){

			$(sp_title).append(sp_title_empty);
		}

		// Вешаем событие слайда на клик по тайтлу
		$(sp_title).click(function (){

			//Проверка метки (data-click), что клик совершен
			if(!$(this).data('click')){

				$(this).text(sp_title_click);

				//Меняем плюс на минус добавлением CSS класса
				$(this).toggleClass('sp-title-changed');

				//Вешаем метку, что клик совершен
				$(this).data('click', true);

			}else{

				$(this).text(sp_title_empty);

				//Меняем минус на плюс удалением CSS класса
				$(this).removeClass('sp-title-changed');

				//Вешаем метку, что клик НЕ совершен (т.е. закрываем спойлер)
				$(this).data('click', false);

			}

				//Собственноо, слайдер
				$(this).next().next().slideToggle('slow');

			});
	
		return true;	
	}
	wordpress_spoiler();
});

Демонстрация работы спойлера

spoiler

Первый абзац подкатом

Второй абзац подкатом

Третий абзац подкатом

spoiler