Как сделать на сайте max-спойлер в один клик, и без плагина

Сегодня расскажу как встраивается в блог лёгкий спойлер. А в финале – вживим кнопку SpL в html редактор.

Плагины использовать не станем, ибо – это тяжеловато и может привести к ряду ошибок (коли не грамотно устанавливать), которые выявятся при проверке странички валидатором HTML, – вам они покажутся жутью…

 

…кстати, все ссылки полезных тестеров будут под рукой, если пользоваться плагином seo-Ultimate (не знаю, жив ли на этот момент плагин), или полезным web-мастеру RDS-бар(ом).

 

Итак, вот всё, что нам потребуется для реализации достаточно простого spoiler max.

Исправляем ошибки для новых версий php – код будет работать примерно от php 5.4 и, конечно же, в php 8.2 – задавайте вопросы, если что:

 

 

 

 

 

…чтобы инструмент “скрытия текста” получился таким максимально-симпатичным и настраиваемым:

 

 

 

 

 

 

встраиваем на странички сайта спойлер

 

 

 

 

 

 

 

Наш блог призван помочь тем, которые создают сайт своими руками, а значит рассмотрим прописку spoiler подробнее. Но для авторов кулинарных блогов, сердцу которых все эти скрипты до фени, в финале, для скорой настройки спойлера, дам ссылку на скачивание архива – кнопки и файла spoiler.js – чтобы каша не подгорела)

 

 

Ну а мы, подготовимся и приступим:

 

…открывайте файловый менеджер и в нём папку js В большинстве современных шаблонов она присутствует (а коли в вашем её нет, создайте с именем js).

 

…и в этой папке создайте файл, под псевдонимом spoiler.js. Откройте его и пропишите в его теле следующий скрипт. И… сохраняйте эту работу на сервере.

 

 

 

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

 

 

 

Ну, и, не мешкая длинно, откроем файл функций functions.php… прокрутим фенечку до финала, и, увидев тег ?> пуще включим наше внимание.

 

 

Установим курсор перед знаком вопроса и “Enter” отступим пару пробелов книзу.

 

 

Теперь копируем приведённый ниже функциональный код и помещаем в “укромное” местечко. Сохраните, от греха подальше.

 

Проверьте работоспособность сайта, перезагрузкой страницы F5.

 

 

 

// max-СПОЙЛЕР
function hyper_spoiler( $atts, $content ) {
	if ( !isset( $atts[ 'name' ] )) { $sp_name = 'Спойлер-max'; }
	else { $sp_name = $atts[ 'name' ]; }
	return '<div class="spoiler-wraps">
		<div class="spoiler-max-head folded">' . $sp_name . '</div>
		<div class="spoiler-bodys">' . $content . '</div>
	</div>';
}
add_shortcode('spoiler', 'hyper_spoiler');
// ФИН - max-СПОЙЛЕР

 

 

 

 

 

 

 

!..что примечательно: если сайт показал то, что и показывал раньше, значит вы ошибки на этом этапе не совершили и можно продолжать.

 

 

Здесь же, в корневой директории шаблона, открываем файл ститлей style.css.

 

 

Я предлагаю, не спутаться дабы, также как и в случае с функциями пройтись до финала файла стилей, а там уж и расположить код CSS – строки ниже, опять же ж…

 

 

CSS

 

.spoiler-wraps{background:none repeat scroll 0 0 #E0DCCC;width:97%;border-radius:5px 5px;border-color:#1675B8;border-style:solid;border-width:1px 1px 1px 2px;margin:6px}

.spoiler-max-head{width:97%;font-size:12px;font-style:italic;line-height:15px;margin-left:6px;cursor:pointer;padding:1px 14px 3px}
.folded{background:url(images/icon_plus_2.gif) no-repeat scroll left center transparent;display:block;padding-left:14px}
.unfolded{background:url(images/icon_minus_2.gif) no-repeat scroll left center transparent;display:block;padding-left:14px}
.spoiler-bodys{background:none repeat scroll 0 0 #F2F2F2;border-top:1px solid #1675B8;line-height:20px;padding:1px 6px 2px}

 

 

Ну, и, так как у меня строчный вариант селекторов CSS, даю небольшие пояснения без комментариев в коде:

 

 

1 – строка настроек кнопки спойлера: цвет; скругление… настройка ширины кнопочки в процентах; колор бордюра (окантовки, так сказать).

 

2 – возможно задать шрифт и величину фразы открывающей кнопки; вариант курсора…

 

3 – здесь указываем путь к иконкам плюс и минус.

 

4 – аналогично прописан путь к иконкам… и их положение.

 

5 – цвет открытого поля спойлера и бордюра… и их величины.

 

Подробнее болтать не буду, ибо вы здесь и без меня разберётесь: какие-то величины удалите, а какие-то добавите. Экспериментируйте!

 

 

Да! …не забудьте скачать архив, если нужны кнопочки-иконки для spoiler-max, которые и загрузите к себе на сервер: у меня это папка images – здесь строка 3 – 4.

В любом случае имейте в виду свой путь.

 

 

Небольшой антракт и… …давайте откроем файл header.php – внутри которого подключим уже имеющуюся в вашей CMS-WordPress библиотеку js (если по странным обстоятельствам она не подключена ранее) – и активируем наш самый верхний код-файл.

 

 

 

…активируем созданный файл…

 

 

<script src="https://mihalica.ru/wp-content/themes/ВАШ_ШАБЛОН/js/spoiler.js"></script>

 

 

…подключаем библиотеку…

 

 

<script src="/wp-includes/js/jquery/jquery.js"></script>

 

 

 

Поместите эти пару строк где-то ближе к тегу </head> – почему “где-то”?? а потому – что это уж вы сами определите путём рокировок и анализа, ибо скорость загрузки сайта, знаете ли. Хотя этот наш спойлер лёгкий. Не тяжелея самого занятия блоггингом. И предостерёг я только ради приличия и полезного обострения вашего ВНИМАНИЯ.

 

 

 

 

 

 

 

И под занавес:

 

…в виде бонуса за ваше с нами времяпрепровождение покажу вот такую строку, добавив которую у вас получится замечательная кнопочка для молниеносного добавления шорткода spoiler в тело статьи – в один клик, и готово дело (кликнете на фото)) и уведите примерную кнопочку наряду с другими.

 

 

 

 

QTags.addButton( 'max-spoiler', 'max-spoiler', '{spoiler name="ЧИТАТЬ"}\n', '\n{/spoiler}' );

 

 

…вопрос о добавленных мною тегах <р> и т.п. рассмотрим в комментариях.

 

 

Но чтобы всё это лихое кнопочное благоудобство текстового редактора HTML заработало и у вас на сайте, – необходимо ознакомиться с этим постом: Обогащаем своими кнопками текстовый HTML редактор WordPress и тогда у вас будет множество помимо spoiler нужных в функционале кнопочек.

 

…занавес:

 

 

Вероятно, не нужно и напоминать, что, для того, чтобы запустить выполнение спойлера в статье, достаточно – нужный текст поместить между тегами (пример ниже)

 

 

{spoiler name="ЧИТАТЬ СКРЫТОЕ"} Спрятанный текст {/spoiler}

 

 

 

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress

!..подписываясь на обновления mihalica.ru —
...расстаёмся с невежеством..!

 

 

 

А спойлер получится такой:

 

 

 

 

…но коли затрудняетесь с пропиской кода или страшитесь, прочтите вот ЭТО