Simple Spoiler — спойлер для WordPress в несколько строк кода

wordpress spoiler - Simple Spoiler — спойлер для WordPress в несколько строк кода

В базовой комплектации WordPress нет спойлера и устанавливать его приходится своими силами. Решением может послужить плагин Simple Spoiler — простой скрипт, позволяющий добавить функцонал спойлера для CMS WordPress.

Вариантов установки два: готовый плагин (более новая версия плагина) из репозитория или правки файлов темы (предыдущая версия). Мне более интересна прака файлов, поэтому инструкция ниже.

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

[spoiler] Скрытое содержимое [/spoiler]
[spoiler title="Название спойлера"] Скрытое содержимое [/spoiler]

functions.php

function simple_spoiler_shortcode($atts, $content) {
	if ( ! isset($atts['title']) ) {
		$sp_name = 'Спойлер';
	} else {
		$sp_name = $atts['title'];
	}
	return '<div class="spoiler-wrap">
			<div class="spoiler-head folded">'.$sp_name.'</div>
			<div class="spoiler-body">'.$content.'</div>
		</div>';
}
add_shortcode( 'spoiler', 'simple_spoiler_shortcode' );

Функция отлавливает ключевые слова SPOILER и текст, который заключен между ними заворачивает в HTML-код. Остается лишь написать слайдер. Наиболее простое решение — JQ и CSS

Слайдер на JQuery

jQuery(document).ready(function() {
	jQuery('.spoiler-body').hide();
	jQuery('.spoiler-head').click(function() {
		jQuery(this).toggleClass('folded').toggleClass('unfolded').next().toggle();
	});
});

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

Стили CSS

.spoiler-wrap {
	border: 1px solid #3b6d3d;
	background: #e9ffd0;
}
.spoiler-head {
	padding: 10px;
	line-height: 1.5;
	cursor: pointer;
}
.folded:before {
	content: "+";
	margin-right: 5px;
}
.unfolded:before {
	content: "-";
	margin-right: 5px;
}
.spoiler-body {
	padding: 10px;
	border-top: 1px solid #3b6d3d;
	background: #f4fef3;
}

Чистая косметика. Кнопки «плюс» и «минус» также тут.

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

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

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 не будет опубликован. Обязательные поля помечены *