Окт
16
0

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

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

Плагин Collapse-O-Matic

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

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

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

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

Скрытый текст в WordPress

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

Выпадающий текст в WordPress

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

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

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

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

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

Collapse-O-Matic - настройки плагина

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

  • 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>

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

Collapse-O-Matic - выпадающий текст для списка

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 3, средний балл: 6,33 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , , .
Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости