Рады вас приветствовать в нашем блоге

Урок 12 Спойлер для блога WordPress

Спойлер WordPressПриветствую, дорогие читатели блога! Меня часто посещает мысль скрыть лишний текст в больших статьях. Полагаю, что данная необходимость возникает не только у меня, потому я решил рассказать Вам, как организовать вывод спойлеров в блоге WordPress.

К сожалению, в стандартный пакет возможностей WP спойлеры не входят, поэтому создавать и настраивать их будет ручками.

Что такое спойлер?

Спойлер — это специальный блок, скрывающий лишний текст. При нажатии на него открывается содержимое блока. Выглядит он следующим образом:

Пример спойлера
Здесь находится скрытый текст

Чтобы закрыть содержимое спойлера, необходимо повторно на него нажать. Итак, приступим к реализации данного спойлера на блоге WordPress.

Создание спойлера без плагинов

Я сторонник работы блога без плагинов, поэтому начну с описания реализации спойлеров без плагинов.

1. Для начала скачиваем этот архив с исходниками. Все скрипты, используемые в инструкции, находятся в нем.

2. Загружаем файл sp.js в корневую папку блога на сервере (public_html/)

3. Открываем файл header.php и перед закрывающимся тегом </head> добавляем следующие строки:

Спойлер WordPress
*Первая строчка подключает библиотеку jQuery, а вторая указывает на адрес скрипта спойлера.

4. Открываем файл function.php и добавляем следующие строки:

Спойлер WordPress

5. Открываем скачанный архив и загружаем plus.gif и minus.gif в папку images шаблона

6. Открываем style.css и добавляем стили нашему спойлеру:

Спойлер WordPress

7. Настраиваем внешний вид спойлера под дизайн своего блога

Для вывода спойлера используем шорткод:

[ spoiler name=»Название спойлера»]Скрытый текст спойлера[/spoiler ]

В принципе, это всё! Надеюсь, что у вас не возникло проблем в процессе реализации спойлера. Есть вопросы, спрашивайте в комментариях.

Реализация спойлера с помощью плагина

1. Скачиваем плагин Advanced Spoiler

2. Активируем и открываем страницу плагина

3. Настраиваем плагин, указывая названия определенных функций

Спойлер WordPress

Вывод спойлер происходит с помощью следующего шорткода:

[ spoiler name=»‘Название»] Скрытый текст [/spoiler]

Спойлер можно вывести в любом месте шаблона: в постах, комментариях, сайдбаре и других местах.

Вот и всё! Теперь вы знаете, как реализовать возможность вставки спойлера в блоге Wordpess.

P.S. подписывайтеcь на обновления блога и получайте ежедневно информацию о свежих статьях, новых методиках и способах заработка в интернете!!!

Задавайте вопросы и дополняйте статью: