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

WordPress Spoiler в базовом состоянии
WordPress Spoiler в базовом состоянии

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

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

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

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

WordPress Spoiler в развернутом состоянии
WordPress Spoiler в развернутом состоянии

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

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

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

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

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

Похожие записи

Особенности и возможности современных шаблонов для CMS WordPress
CMS WordPress — это мощная система с безграничными возможностями кастомизации шаблона и настройки функционала. На этом движке можно создать проект...
WordPress: плавное увеличение изображений на Higslide
Плагин для плавного увеличения изображений для CMS WordPress. Что делает плагин: при клике на изображение оно плавно увеличивается в модальном...
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
Как в CMS WordPress использовать символ «$» вместо «jQuery» подключаемых в скриптах
Разработчики WordPress умышленно заблокировали стандартный символ «$» в виде доллара для языка jQuery. Вы не сможете использовать данный символ без...
Как настроить WEBP изображения для WordPress
Из коробки WordPress не умеет работать с WebP картинками. На данном этапе механизм включения  WebP реализуется только с помощью сторонних...

Добавить комментарий