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. Ниже пример:

wordpress spoiler editor html 620x241 - Wordpress — самый простой спойлер без шорткодов
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();
});

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

wordpress spoiler demo - Wordpress — самый простой спойлер без шорткодов
Код в редакторе для спойлера ниже

spoiler

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

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

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

spoiler

Читайте также

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

WordPress SEO Friendly Images — плагин для изображений
SEO Frendly Images — плагин для WordPress, автоматически добавляющий HTML5 разметку для изображений FIGURE, FIGCAPTION (точно не уверен — возможно...
WordPress — правильное подключение скриптов
Есть два варианта, как можно добавить сторонний скрипт в WordPress: классический способ — указать путь в HEAD или перед закрывающим...
Простые способы ускорить работу сайта на WordPress
Скорость загрузки сайта важна как для посетителей, так и для поисковых систем. Первые закроют сайт, если он грузится две лишние...
Simple Spoiler — спойлер для WordPress в несколько строк кода
В базовой комплектации WordPress нет спойлера и устанавливать его приходится своими силами. Решением может послужить плагин Simple Spoiler — простой...

Комментарии

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *