Collapse-O-Matic — плагин для выпадающего текста в WordPress

Ранее я рассматривал полезный плагин Социальный замок для раскрутки блогов и веб-проектов. Он позволяет добавлять на страницу скрытый текст в WordPress + блок социальных кнопок, при клике по которым пользователь получал доступ к контенту. Сегодня у нас похожая задача, но без каких-либо SMM фишек — будем создавать выпадающий текст при нажатии на ссылку для WordPress заметки. Проще всего это реализуется с помощью соответствующего плагина — Collapse-O-Matic. Возможно, в системе есть и альтернативные решения, но мне лично приглянулся этот модуль. Прочитав его обзор ниже, поймете почему.

А пока не забыл, хочу порекомендовать Вам один ресурс. Я нашел там то, чего не мог найти нигде. Заинтриговал?  Всё просто, смотрите огромный ассортимент запасных частей и аксессуаров для смартфонов и мобильных. Рекомендую!

Скачать Collapse-O-Matic можете с официального репозитория по этой ссылке или найти плагин через WP админку. Основная его функция — создание скрытого выпадающего текста в WordPress. Реализуется опция с помощью специального шорткода [expand]. Работать с модулем максимально просто. Требуемая версия WP 4.0, оценка на данный момент максимальная, загрузок — более 60тысяч. Очевидно, данное решение понравилось не мне одному.

По сути, создавать скрытый текст в WordPress или любом другом сайте есть смысл в двух случаях:

• вы хотите сэкономить место на странице дабы пользователю не пришлось использовать прокрутку;
• когда решили создать более простой для восприятия текст и скрыть всю дополнительную (не основную информацию) под кат.

А при нажатии на ссылку выпадающий текст должен отобразиться на странице. Без каких-либо социальных кнопок и всего такого, просто обычный контент. Вот как это приблизительно выглядит:

Отображение текста обычное, только возле одного из слов есть стрелочка вниз. Если посетитель кликнет по ссылке, получится следующая картинка:

Он увидит скрытый блок текста. Повторный клик, его снова уберет. Все предельно просто — как по работе модуля, так и его внедрению.

Создание выпадающего текста с Collapse-O-Matic

Итак, давайте все разберемся как сделать выпадающий текст в WordPress. После установки и активации модуля заходите в редактор для создания статьи/страницы. Далее нужную область для скрытия обрамляете в шорткод [expand] следующим образом:

Ваш текст-текст-текст затем идет [expand title=»ссылка для клика»] после чего снова текст, но уже скрытый [/expand]

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

Здесь, например, можно выбрать:

• Style — светлый, темный или свой фон;
• Tag Attribute — тег для оборачивания текста ссылки (span по умолчанию);
• Trigclass Attribute — класс для линка;
• Targtag и Targclass Attribute — аналогично внешний контейнер и класс, но уже для блока скрытого текста;
• Collapse/Expand Duration — скорость, с которой выпадающий текст появится;
• Animation Effect — эффект появления скрытого текста;
• Custom Style — свои CSS стили

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

<ul>
[expand title=»Элемент списка1″ elwraptag=»li»]Текст-текст-текст первого элемента;[/expand] [expand title=»Элемент списка2″ elwraptag=»li»]Текст-текст-текст второго элемента;[/expand] [expand title=»Элемент списка3″ elwraptag=»li»]Текст-текст-текст третьего элемента;[/expand] </ul>

В итоге получится вот такое оформление:

Фишка в том, что в шорткоде используется параметр elwraptag, позволяющий задать тег для всего выпадающего элемента. В таком случае и скрытый текст, и ссылка будут внутри одного тега LI дабы список смотрелся максимально красиво. При клике пользователь увидит соответствующий пункт.

Кстати, если вы используете другие плагины шорткодов в WordPress, то посмотрите какие функции предоставляет то или иное решение — вполне возможно, что выпадающий текст там уже имеется. Тогда вам не придется дополнительно ставить Collapse-O-Matic. Если же нужных шорткодов в теме/плагинах у вас нет, то рассмотренный сегодня модуль — отличное решение.

P.S. В принципе, сам скрипт выпадающего текста при нажатии на ссылку не сложен, наверняка его можно реализовать и без плагинов. Однако далеко не каждый начинающий пользователь WordPress сможет правильно его внедрить. Вариант с Collapse-O-Matic — максимально прост.