Как отображать/скрывать текст в WordPress с toggle effect

Иногда вам может понадобиться скрыть кусочек вашей записи блога или контента страницы, чтобы придать статье компактный вид и позволить пользователям кликнуть и увидеть больше информации, если они захотят. Эта технология известна под названием toggle effect, и используется на множестве сайтов в различных формах и разными способами. Скрытый контент становится видимым, когда пользователь кликает на определенную ссылку или кнопку. Этот toggle effect отображения/скрытия очень удобен для страниц FAQ. Вы попадаете на страницу, где расположено много вопросов. Когда пользователь кликает на вопрос, ответ раскрывается сразу под ним. Когда же вы снова кликните на вопрос, ответ свернется. В этой статье мы покажем вам как отображать и скрывать текст в записях и на страницах WordPress с toggle effect.

Прежде всего вам необходимо установить и активировать плагин WP ShowHide. Он работает «из коробки»» не нуждается в дополнительной настройке.. Для того, чтобы скрыть текст в записи с помощью toggle effect, вам нужно использовать шорткод вроде этого:

[showhide type="post"]Текст, который нужно скрыть[/showhide]

show-hide-toggle-posts-text[1]

После первого использования шорткода вы заметите, что он отображает ссылку с текстом “Show Press Release (xx more words)”. Вообще плагин был написан специально для сайта, публикующего пресс релизы. Однако, этот текст можно легко изменить на любой, который нужно. Для этого используем такой шорткод:

[showhide type="post" more_text="Показать больше..." less_text="Показать меньше..."]
Текст, который нужно скрыть
[/showhide]

У шорткода showhide есть несколько параметров, которые можно использовать для настройки его работы в каждой отдельной записи. Стандартными параметрами и их значениями для этого шорткода являются:

[showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

Мы надеемся, что эта статья помогла вам добавить toggle effect для того, чтобы скрывать текст в ваших записях и на страницах WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]
Rating: 5.0/5 (7 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Анастасия

    Прикольная наверное статья, но для таких чайников как я, хотя бы написали куда этот код вставлять. Была бы очень благодарна.

    • ADv

      В область контента записи/страницы.

      • Еленка

        а подскажите вместо
        «Показать больше»
        как вставить gif?

  • Ирина

    Спасибо огромное, очень помогли! нашла статьи про другой плагин с аналогичной функцией, но он почему-то не работал на моем сайте. а вот этот прям то что надо!!!!

  • Спасибо. Давно искал решение проблемы тега «more»

  • Elena Vincit

    Подскажите:

    ВОПРОС1_Как сделать не надписью, а кнопкой или картинкой?
    «Показать больше…» заменить на картинку?

    ВОПРОС2_Как сделать ряд:
    [showhide type=»post» more_text=»Показать больше…» less_text=»Показать меньше…»]
    Текст №1, который нужно скрыть
    [/showhide]

    [showhide type=»post» more_text=»Показать больше…» less_text=»Показать меньше…»]
    Текст №2, который нужно скрыть
    [/showhide]

    [showhide type=»post» more_text=»Показать больше…» less_text=»Показать меньше…»]
    Текст №3, который нужно скрыть
    [/showhide]

Scroll To Top