WordPress — спойлер на jQuery

По мотивам этого поста Как сделать спойлер на jQuery. Или даже пост-ответ на один из комментариев к прошлой статье.

Как использовать этот спойлер в WordPress? Достаточно просто!

Установка:

  1. Во-первых нам надо добавить в файл functions.php следующую функцию:

    Суть этой php-функции заключается в том, чтобы вставлять html-код спойлера в вашу страницу/пост.
  2. Затем подключить JavaScript спойлера, в файл header.php до закрывающего тега head.
    Если у вас уже подключается jQuery, то не нужно подключать его второй раз.
  3. Затем добавить CSS-стили спойлера в стили вашей темы, например style.css.
  4. И, наконец, в каталог /images вашей текущей темы добавить прилагаемые изображения, отображающие состояние спойлера.

Надеюсь мои объяснения вам ясны 🙂

Примеры использования

  1. [spoiler] Текст спойлера. [/spoiler]
    Если имя спойлера не указано, то будет использоваться значение по умолчанию — «Спойлер».Впрочем, вы можете поменять значение имени спойлера по умолчанию на угодное вам в коде функции hyper_spoiler.
  2. [spoiler name=»Внимание, спойлер!»] Текст спойлера. [/spoiler]Спойлер с указанным именем.

Исходники прилагаются. И еще раз демо.

Исходный код
Демо jQuery спойлера

P.S. В идеале конечно хотелось бы для удобства использования сделать кнопочку добавления bb-кода спойлера в редактор TinyMCE, но увы пока не читал его документацию; если кто знает как это сделать, пишите. 😛

32 комментария, подписаться на rss

roomster Ответить

Это конечно хорошо, но вы уверенны, что редактирование functions.php, добавлением в него выше указанного кода не приведёт к непредсказуемым последствиям (белый экран вместо моего сайта например)… другими словами вы его тестировали?

    Hyperc0der Ответить

    Конечно тестировал, куда без этого: на локальном сервере в WordPress 3, стандартная тема TwentyTen — всё отлично. Просто в догадках, что может быть не так.
    Может не так вставили код в functions.php, или не полностью скопировали, возможно нет открывающей или закрывающей инструкции php.
    Ради вас даже поставил себе на блог этот спойлер: вот в посте все конструкции сами заменились, как видите.

roomster Ответить

Заговорил я об этом, потому как, бывает, что если править functions.php. белый экран. Ну это если руки кривые и сам нарушаешь порядок кода в functions.php, но есть и такое, что сам код неисправен… Большое спасибо за ответ! Всегда приятно, когда тебе отвечают 🙂

Sergey Ответить

Можно тоже вопрос? )
Я совсем новичок (зеленее не бывает ))) ). Стараюсь побыстрее все изучить, но дело движется медленно.
Три дня как разбираюсь в вордпресе и вот уже потребовалось добавить в текст выложенного материала спойлеры.
Так вот, закрытым оказывается только первый, а остальные открыты. Можно как-то поправить?

Sergey Ответить

Прошу прощения. Уже понял в чем ошибся

    Hyperc0der Ответить

    Да ничего, все когда-то были новичками) Рад, что помогло.

Пиротеник Ответить

Спасибо. Очень здорово. Только в исходниках файлик spoiler.js исправьте. Уберите из него все строки которые содержат теги «script» «/script».

    Hyperc0der Ответить

    Пожалуйста. И спасибо за замечание, не заметил.

lex111 Ответить

Классный скрипт! Скажи как сделать чтобы спойлер был доступен по [spoilers]текст[/spoilers] просто у меня стоит уже обычный спойлер [spoiler]111[/spoiler]

    Hyperc0der Ответить

    В этой строке изменить параметр spoiler на spoilers. Вот так: add_shortcode('spoilers', 'hyper_spoiler');

lex111 Ответить

А ясно, правда уже нашёл другой вариант но всё спасибо

Денис Ответить

Здравствуйте! А у меня спойлер всегда раскрыт и не сворачивается, в чем может быть причина?

    Hyperc0der Ответить

    Или не подключен jQuery, или отключен Javascript в браузере.

Денис Ответить

Ой, точно jQuery не подключил, а только этот скрипт, спасибо, сейчас буду пробовать!

Хайпер Ответить

О, я не один такой шизовый в плане придумывания названий для блогов 🙂

    Hyperc0der Ответить

    Хаха. Просто это мой программерский ник с 1 курса прижился 😀

Хайпер Ответить

Аа.. А у меня просто плод воображения. На тот момент ничего интереснее к слову SEO придумать не мог 🙂
jQuery рулит. Вообще люблю фреймворки, где словами дольше описать работу скрипта, чем кодом

seoplant Ответить

Сенкс за инфу

TuneUp Ответить

Большое спасибо Вам- очень доступный и легкий по весу пример — плагинов не надо.

Настоящий Полковник Ответить

СУПЕР-сказка!

МиниКин Ответить

Я уже прокомментировал тут: _http://www.webliberty.ru/spoyler-na-wordpress-bez-plaginov/ — очень похожую статью… Не знаю, где источник, а где клон, не важно мне это… Но пока там комменты на модерации, может тут быстрее найдется решение. Цитата:

А я вот пошел искать решение, потому что плагин не сработал. Т.е., он работает в постах, а мне нужно в комментариях. Попробую через функцию и скрипт без плагина, про результаты отпишусь… Терять нечего, библиотека jQuery все равно используется по полной.

А вот и ни фига… Не хочет работать. Блин, и времени сейчас нет разбираться, а потом забуду
Короче, в комментах вообще шоткод не работает, в посте отрабатывает css, но ничего не открывается и не закрывается…

Вообщем, в посте показывает нормально спойлер. Правда поменял [code] [spoiler] на [spoilers] [/code]. Думал, может плагин оставил где-то гадость в коде. И jQuery пришлось еще раз подключать не локальную. В комментах так и не смог добиться. Где копать – ума не приложу…

    Hyperc0der Ответить

    МиниКин, Это источник. Остальное копипаст либо рерайт.

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

    Шорткоды по умолчанию в WordPress работают только в теле статьи. Если Вам нужно, чтобы они работали в блоке комментариев или сайдбаре, советую ознакомиться с кодексом WordPress на эту тему и погуглить на тему «shortcodes in comments». Сам я еще не разбирался, нет пока времени.

zex2 Ответить

Не знаю почему, но у меня не показывается вообще спойлер. Ставил плагин, тоже не отображается, показывает теги спойлера и все, что заключено внутри. А чем может быть трабла?

    Hyperc0der Ответить

    zex2, В том, что Вы не выполнили все действия, описанные в посте. Либо у Вас конфликт имен в шорткодах, придумайте другой шорткод.

    Прошлый ответ был адресован МиниКину, а не Вам.

zex2 Ответить

Нет, я понял, что у вас не плагин. Я просто пишу, что ваш код у меня не работает, что плагин ставил — та же трабла. В чем проблема, не могу разобраться.

МиниКин Ответить

Спасибо, не стал заморачиваться, кодекс не помог. Проблема решена плагином Shortcode Exec PHP.

©ШвЕц АрTёМ Ответить

jQuery я в этом деле вообще новенький, расскажите пожалуйста как его использовать где взять

©ШвЕц АрTёМ Ответить

И как сделать длину спойлер по горизонтали автоматической или где можно изменить ?

Андрей Ответить

Помогите, пожалуйста, с одной вещью. Нужно использовать эту функцию для текста на главной странице сайта. В статьях все работает, а вот на главной ни как. Заранее спасибо за ответ.

Андрей Ответить

Все, спасибо, разобрался. Сделал это следующим образом:

Вручную прописал
Название спойлера
Текст на главной

Скрип обработал эти классы и получился спойлер.

Андрей Ответить

Все, спасибо, разобрался. Сделал это следующим образом:

Вручную прописал:
[code]<div class="spoiler-head folded">НАЗВАЛ СПОЙЛЕР</div>
<div class="spoiler-body">ПОМЕСТИЛ ТЕКСТ НА ГЛАВНОЙ</div>
</div>[/code]

Скрип обработал эти классы и получился спойлер.

Наталья Ответить

У меня ничего не получилось. Проблема с тем, что не понятно куда коды вставлять между каких строк 🙁 и с библиотекой ничего не ясно — подключена она или нет? Попробовала вставлять и убрала -результат один и тотже. еще скрин бы из админки увидеть как выглядит ваш спойлер в редакторе статей? Он ведь там должен проявится?

Оставьте комментарий

Антибот *