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 — простая HTML карта сайта без модулей
Есть несколько способов настроить HTML карту сайта для CMS WordPress. Можно установить модуль и приукрасить его на CSS. Но для...
WordPress — SQL запрос для смены адреса сайта
Случается так, что сайт меняет доменное имя. Ничего страшного в этом нет, но WordPress остается привязан к старому адресу на...
WordPress — как изменить разметку отдельных элементов в посте
Посмотрите на расположение картинок и текст их описания на скриншоте выше. Сверстать подобное не составит никакого труда, если это редактор...
WordPress — как лаконично добавить дополнительный класс CSS блокам внутри статьи
Задача: разработать для статей блок с индивидуальным дизайном дабы была возможность выделять некоторый контент. Данный блок должен вставляться в статью...
WordPress SEO Friendly Images — плагин для изображений
SEO Frendly Images — плагин для WordPress, автоматически добавляющий HTML5 разметку для изображений FIGURE, FIGCAPTION (точно не уверен — возможно...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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

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