Окт
16
10

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)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , .

комментариев 10 к статье “Collapse-O-Matic — плагин для выпадающего текста в WordPress”

  • Эдуард   13.06.2018

    Скажите а на поисковые боты это влияет? Поисковые боты все равно будут считывать скрытый текст? Так как это важно для продвижения сайта!

  • Tod   13.06.2018

    Эдуард, по идее влиять не должно, т.к. боты считывают код страницы, а там этот текст есть, просто визуально не отображается. Я уверен в этом на 99% но если хотите на 100% убедиться — поищите в поисковиках какую-то скрытую уникальную фразу с вашей страницы после ее индексации.

  • Эдуард   18.06.2018

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

  • vladimir   27.08.2018

    Здравствуйте! скажите пожалуйста
    текст в таком вот выпадающем виде индексируется поисковиком?

    я делаю рубрикатор, в который хочу подтягивать текст из основных статей сайта
    и хочу чтобы на рубрикаторе текст бы не индексировался и не дублировался

  • Tod   27.08.2018

    vladimir, насколько я понимаю, это просто такое «визуальное оформление», поисковики в любом случае считывают HTML код страницы и все ее содержимое прекрасно видят, поэтому оно будет индексироваться. По идее, тут либо запретить индексацию на уровне страницы, либо разбираться с rel=»canonical» который с дублированным контентом помогает.

  • Павел   05.01.2019

    Спасибо

  • Сергей   25.03.2019

    Добрый вечер. Ваша статья супер. Хотелось бы например плюсик вместо стрелки,а когда нажать то минус.Можно такое сделать?Хотя бы подсказать где менять стрелку можно?

  • Tod   26.03.2019

    Сергей, на сайте модуля в документации есть описание стилей по замене стрелок. Вам нужно в настройках модуля в опции Custom Style добавить похожий код, предварительно заменив ссылки/адресса картинок PNG на свои.

    .collapseomatic {
    background-image: url(your_down_arrow_image_here.png) !important;
    }
    .colomat-close {
    background-image: url(iour_up_arrow_image_here.png) !important;
    }

  • Диана   20.12.2019

    Здравствуйте, подскажите, пожалуйста, как можно поменять параметры текста (размер, отступы и тд) в шорткоде??

  • Tod   21.12.2019

    Диана, если я правильно понял вопрос, то все меняется через CSS стили. В админке в разделе «Внешний вид» — «Настроить» — и там уже где-то должен быть пункт «Дополнительные стили».

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


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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

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