- Личный дневник Spider'a - https://spider.bsyteam.net -

Спойлеры в WordPress

Делаем Спойлеры в Worpress.

Для начала определимся для чего это нужно.

Применений Спойлерам очень много.

Основная задача, мне кажется, сэкономить место. Или скрыть от быстрого взгляда некоторую информацию.

Итак как это работает ? Пример можно посмотреть у меня же на блоге. Переведите взгляд правее и посмотрите на меню — Рубрики/метки/Голосование/Каталоги. Все это занимает бОльшую часть боковой колонки, место которой можно более еффективно использовать.

По заголовку можно раскрыть/скрыть содержимое.

Практика.

Сначала нужно задать соответсвующие стили. Для этого открываем CSS файл с описанием стилей и вносим соответствующий код:

.onner {font-size: 1.4em;font-variant: small-caps;color: #08970c;border-bottom: 1px solid #ccc; width: 260px;font-weight: bold;}
 .spoiler {border:0px solid #ddd; padding:3px;}
 .spoiler .inner {border:0px solid #eee; padding:1px;margin:1px;}

Оформление можете редактировать на свой вкус и цвет.

Далее между тегами <head> и </head> подключаем java-скрипт:

 

Ну и теперь собственно сам код спойлера:

Раскрыть/Скрыть