А вы, уважаемые читатели, когда-нибудь задумывались о том, как сделать спойлер на WordPress блоге, который способен освободить часть пространства на странице, необязательного для просмотра и играющего вспомогательную роль. Нет?! Тогда вам обязательно нужно прочитать эту статью и узнать о том, что такое спойлер на WordPress, зачем он нужен, как его установить и настроить.

Спойлер на WordPress

В общем, если сказать в двух-трех словах, спойлер на WordPress — это объект на странице, который открывает/скрывает часть контента расположенного на ней, тем самым маскирует его от посетителей. Пример спойлера на WordPress можно наблюдать ниже.

На практике он полезен тем, что способен скрыть огромные массивы кода, изображения и видео, текст и ссылки. Это бесспорно экономит место на блоге и приводит его в человеческий вид.

В данной статье мы рассмотрим два примера, как сделать спойлер на WordPress без плагина и с использование плагина Advanced Spoiler. Какой вариант вам покажется более простым, удобным и универсальным, тем и воспользуетесь. Моя же задача осветить этот урок более подробно.

Как сделать Спойлер. Плагин Advanced Spoiler – установка и настройка.

Первым делом, скачайте и установите плагин Advanced Spoiler. Перейдите в административную панель — «Консоль», откройте вкладку “Параметры” – “Advanced Spoiler”.

Вам следует внести некоторые изменения в настройки, которые позволят русифицировать плагин, то есть настроить отображение кнопок на русском языке. А именно ввести слово «Показать» (открываем спойлер) и «Скрыть» (закрываем спойлер). Обратите внимание на изображение ниже.

Для того, чтобы включить спойлер на WordPress блоге, пройдите в окно редактирование поста и обратите внимание на панель инструментов. Появилась новая кнопка “Включить интерцептор”.

Для вывода спойлера в WordPress, вам следует выделить фрагмент текста или изображение, и нажать на кнопку “Включить интерцептор”.

Откроется диалоговое окно, которое предложит выбрать эффект и нажать “Okay”.

Использование спойлера не ограничивается внутристатейным расположением, его так же можно расположить в боковой панели блога (сайдбар). Для этого в виджетах следует прописывать шорткод:

Как сделать спойлер на WordPress без плагина

Данный способ создания спойлера без плагина примечателен тем, что во-первых, не происходит никакой дополнительной нагрузки (она минимизирована) и тем самым не возникает вопрос об его ускорении блога. А во-вторых, особенностью установки спойлера на WordPress без плагина является то, что мы не ограничеваемся в его настройках. У нас появляется возможность изменять оформление, шрифт, фон и размер.

Откройте файл functions.php, который расположен в теме и разместите в нем php функцию после тега «, предварительно отступив несколько строк вниз, или в самом конце перед «?>», отвечающую за вывод шорт кода. Чтобы избежать дополнительных проблем, сделайте копию файла functions.php до внесения изменений.

function hyper_spoiler($atts, $content) {
if (!isset($atts[name])) {
$sp_name = 'Спойлер';
} else {
$sp_name = $atts[name];
}
return '

'.$sp_name.'
'.$content.'

';
}
add_shortcode('spoiler', 'hyper_spoiler');

Следующим шагом, будет установка или вставка JQuery библиотеки, которую нужно разместить в header.php. Если вы уже подключали JQuery, то пропустите этот шаг.

Ниже, в этот же файл скопируйте скрипт расположенный ниже. Он будет нести ответственность за функциональность спойлера.

Двигаемся дальше. Теперь рассмотрим html код, который поможет нам разобраться с оформление. Скопируйте его в style.css темы. В дальнейшем его можно будет редактировать, так чтобы внешний вид подходил под дизайн.

.spoiler-wrap{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px solid #2E90BD;
background: none repeat scroll 0 0 #2E90BD;
margin: 10px;
width: 100%;
}
.spoiler-head {
font-size: 11px;
line-height: 15px;
margin-left: 6px;
padding: 1px 14px 3px;
cursor: pointer;
width: 97%; /*для IE6*/
}
.folded {
display: block;
padding: 8px;
color: #FFFFFF;
}
.unfolded {
display: block;
padding: 8px;
color: #FFFFFF;
}
.spoiler-body {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
background: none repeat scroll 0 0 #F5F5F5;
border-top: 1px solid #C3CBD1;
padding: 10px;
line-height: 20px;
}

Для того, чтобы сделанный спойлер вывести на страницы сайта, следует вставить в нужное место опубликованный ниже код. В нем вы можете задать не только содержание, которое будет хранить в себе spoiler, но и его название.

А на этом статья о том, как сделать спойлер без плагина завершена. Успехов вам в реализации. Если возникнут проблемы, прошу задавать вопросы в комментариях. А чтобы быть в курсе выхода новых постов, подписывайтесь на обновление блога и получайте их на E-mail.

(10 голос, средний: 4,90 из 5)

 Loading ...