Шорткоды для аккордеона wordpress

Как сделать меню аккордеон на WordPress

Меню аккордеон – это удобный способ представления контента. Он представляет собой что-то вроде гармошки, которая состоит из вкладок. При клике на ту или иную вкладку появляется какой-то текст. Изначально все вкладки скрывают текст.

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

Меню аккордеон также помогает упорядочить текст, скрыв ненужное с глаз. Каждый, кому пригодится скрытая информация, сможет открыть её в этом меню.

Меню аккордеон с плагином Accordions

Вот такое незамысловатое и простое называние у плагина, который создаёт меню аккордеон в WordPress. И работает он так же просто.

Скачайте плагин Accordions, установите его на свой сайт и активируйте. После этого в консоли появится новый пункт «Accordions». Перейдите в подпункт «New Accordions», чтобы добавить новое меню. Здесь вам потребуется написать называние для этого меню, и потом нужно будет рассмотреть опции во вкладках ниже. Есть шесть вкладок:

• Shortcode. Здесь есть шорткоды, которые можно установить в записи или страницы, а также PHP коды, которые можно поместить в файлы шаблона. Эти коды выводят создаваемое меню аккордеон.
• Accordionoptions. Здесь небольшие настройки для меню. Всё на английском. Кому интересно, могут поэкспериментировать. Можно оставить всё по умолчанию.
• Style. Здесь настройки внешнего вида меню аккордеона. Настроек очень много, и благодаря им можно подогнать дизайн меню под тему, которая установлена на сайте, таким образом, что оно будет выглядеть, как элемент шаблона. В общем, можно проявить творчество.
• Content. В этой вкладке можно добавлять контент для меню аккордеона. Можно добавлять любое количество вкладок. У каждой вкладки может быть заголовок и тело контента. Единственный недостаток, который тут есть – это отсутствие визуального редактора. Поэтому при необходимости форматирования текста придётся пользоваться HTML тегами.
• CustomCSS. Для тех, кто знает хотя бы основы CSS, здесь открываются дополнительные возможности в дизайне. Можно задавать собственные стили для меню.
• Tabsoptions. Здесь можно настроить вкладки.

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

Также вам будет интересен похожий плагин, о котором мы рассказали тут.

Источник

Accordion

There are Additional Skins available for this shortcode.

Single Spoiler

Multiple Spoilers wrapped with Accordion

Table of contents

Description

This shortcode allows you to create blocks with hidden content — spoilers (toggles). Hidden content will be shown when the block title will be clicked. You can specify different icons or even use different styles for each spoiler.

Options

[su_accordion] – container

class

Additional CSS class name(s) separated by space(s)

[su_spoiler] – single spoiler

title

Text in spoiler title

Default value: Spoiler title open Is spoiler content visible by default

Possible values: yes or no

Default value: no style Spoiler style

Possible values:
default
fancy
simple
carbon
sharp
grid
wood
fabric
modern-dark (Modern: Dark)
modern-light (Modern: Light)
modern-violet (Modern: Violet)
modern-orange (Modern: Orange)
glass-dark (Glass: Dark)
glass-light (Glass: Light)
glass-blue (Glass: Blue)
glass-green (Glass: Green)
glass-gold (Glass: Gold)

Default value: default icon Icons for spoiler

Possible values:
plus
plus-circle (Plus circle)
plus-square-1 (Plus square 1)
plus-square-2 (Plus square 2)
arrow
arrow-circle-1 (Arrow circle 1)
arrow-circle-2 (Arrow circle 2)
chevron
chevron-circle (Chevron circle)
caret
caret-square (Caret square)
folder-1 (Folder 1)
folder-2 (Folder 2)

Default value: plus anchor You can use a unique anchor for a spoiler to access it with hash in page URL. For example: use the word Hello and then use a URL like http://example.com/page-url#Hello. This spoiler will be opened and scrolled in anchor_in_url This option specifies whether an anchor will be added to page URL after clicking the spoiler

Possible values: yes or no

Default value: no scroll_offset This option defines the top offset when the element is scrolled in. Can be useful along with the fixed site header.

Possible values: number from 0 to 2000

Default value: 0 class Additional CSS class name(s) separated by space(s)

If accordion doesn’t work

If an accordion doesn’t work, isn’t collapsing or expanding, chances are you have a JavaScript error on your page. Read this to learn how to fix it.

Источник

Как добавить аккордеоны в ваши посты и страницы с аккордеона WordPress плагина

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi — самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Аккордеоны — очень популярная функция в интернете. Они позволяют представить максимум содержимого в ограниченном пространстве. Как правило, они представляют собой выпадающие меню, которые отображаются по очереди после щелчка.

В этом уроке вы узнаете, как создавать аккордеоны в своем блоге, используя Аккордеонный плагин WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда вернемся к тому, почему мы здесь.

Как установить плагин Accordion’s WordPress

Как создать аккордеон

После установки и активации плагина в меню панели инструментов появится новое меню. Нажмите на Новые аккордеоны Создать новый аккордеон.

На этой новой странице, идентичной странице создания статьи, вы сможете сохранить заголовок и настроить аккордеон в » Варианты Аккордеоны .

Что касается этого раздела, он состоит из нескольких элементов.

На самом верху у вас есть короткий код в соответствии с текущим аккордеоном, скопируйте его, потому что мы будем использовать его позже в статье или на странице. Мы начнем с создания контента, нажав на вкладку » Content .

Узнайте, как воспроизводить макеты, открыв для себя Как продублировать статью или страницу на WordPress

На этой вкладке вы сможете добавить заголовок и контент. Чтобы добавить новый предмет к аккордеону, необходимо нажать на кнопку « Добавить Добавить новый форма с названием и содержанием.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

Цвета по умолчанию должны быть изменены, потому что цвет фона и текста очень похожи. Аккордеонный шрифт «И» Цвет фона по умолчанию .

После завершения настроек не забудьте сохранить свой аккордеон. На месте Аккордеоны >> Аккордеоны «(то есть первая страница плагина), где вы можете управлять различными аккордеонами.

Как добавить аккордеон в статью

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

Проверьте свою страницу, чтобы увидеть, как выглядит ваш новый аккордеон.

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

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Система WP Pro Forum

Система WP Pro Forum — это плагин WordPress, который позволяет добавить красивый и удобный форум на ваш сайт. Он имеет множество мощных функций, которые позволяют создавать профессионально выглядящий форум.

Форум создан для работы в открытом интерфейсе веб-сайт, но администраторы могут управлять всеми форумами, темами, ответами, категориями и ярлыками из приборная панель.

Кроме того, система WP Pro Forum имеет определенные преимущества, такие как функциональный перевод благодаря включенным файлам mo / po, интеграция многих моделей в соответствии с внешним видом вашего веб-сайта или даже включенные настраиваемые фильтры.

2. Окончательный Pro членство

Ultimate Membership Pro — отличный плагин для подписки и ограничения контента. Он может управлять пользователями в соответствии с их пакетом (бесплатным или платным), создавая эксклюзивные уровни доступа.

Таким образом, можно будет защитить все содержимое вашего веб-сайта или только его часть. Это будет, например, курс, урок, страница, продукт, категория, изображение и т. Д.

Его основные функции, среди прочего: защита контента, множественные уровни доступа, поддержка множественных платежные шлюзы -PayPal, Authorize.net, Stripe, 2CheckOut, Bank Transfer-, частичная защита контента и многое другое .

3. Портфолио Cube

Cube Portfolio — это плагин сетки WordPress, который предлагает мощное портфолио, красивую анимированную фильтрацию, настраиваемые подписи и т. Д. Он идеально подходит для проектов портфолио, галерей изображений, членов команды, сообщений в блогах, блоги или другой контент, организованный в виде сетки.

Благодаря шаблону инструмента создания в реальном времени вы можете контролировать все аспекты плагина: цвета, шрифты, размеры, интервалы, границы и т. Д.

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

Рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

Заключение

Вуаля! На этом урок по интеграции аккордеона в WordPress закончен. Мы надеемся, что эта статья помогла вам научиться их создавать и настраивать. не стесняйтесь поделитесь этим руководством с друзьями в своих любимых социальных сетях.

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

Источник

WordPress.org

Русский

Аккордеон

Описание

Accordions is easy and powerful tool to create accordion, faq, tabs, tab content, frequently asked question, knowledge base, question & answer section, WooCommerce FAQ tabs and many other way to use this plugin. supper easy to customize looks and feel, changing color, font size of content, choosing accordion icons was never easy before.

Accordions by http://pickplugins.com

Plugin Features

Unlimited Accordion & Tabs
You can created unlimited accordion and tabs via this plugin, we never limit your count.

Display via Shortcode
Accordion and tabs can be display anywhere via shortcode under page, post content, sidebar via widgets and page builder
widgets and elements and gutenberg blocks as well. we provided and extra shortcode [accordions_pplugins] to avoid 3rd party conflict.

Lazy Load
Lazy load is very useful and hide content on page load, you can enable to disable this option.

Responsive Accordion and Tabs
We used jQuery UI library to generate accordion and tabs, which is super responsive in any device.

Custom icons
You can set your own icons for accordion header icons, we used fontawesome as font icons, you can change default and
activate icon as well, changing default color, hover color, font size is also available.

Header style
You can style header as your own, there is planty of option available to style accordion header font size, default text
color, activate text color, hover text color, default background color, activate background color and changing header
padding and margins.

Content Style
You can style accordion content as you needs by changing accordion font size, font color, background color, padding and
margin

Container Style
You can change container background color, background image, text align and padding.

Content Editing
You can create accordion content with WP Editor, you can add text, image andother media like youtube video, self hosted
video and etc. Section can be drag & drop sorting. delete any section without
loading the page and can hide without deleting it on front-end.

Import 3rd party plugin data
You can import accordion and tabs data from 3rd party plugin source.

Premium Features

Nested/multi level accordion
You can create multi level or nested accordion with unlimited level, nested accordion can customize as you want.

Click header to scroll top
WHen user click to accordion header it will scroll to top.

Header text toggle
You can display toggle text when clicked on header

Display expand/collapse all button
You can display expand/collapse all button to expand or collapsed at once. you can also set custom text for expand/collapse all button and add custom background color.

Open/Active accordion by url Parameter
You can enable active or open accordion by url parameter, ex: yourdomain.com/accordion-page/?active_index=83|1,2
you display multiple or keep open multiple by providing multiple argument like this yourdomain.com/accordion-page/?active_index=83|1,2-84|1,3

Open/Active accordion by url hash
You can enable active or open accordion by url hash, ex: yourdomain.com/accordion-page#headerID

Header click track & stats
You can track click on accordion header.

Header background image
You can set custom background image and color for each header.

Active accordion on page load

You can choose header to active on page load,

Enable search
You can display search input field to enable search though accordion content. also custom placeholder text for search input field avilable.

Vertical Tabs
You can display vertical style tabs.

Скриншоты

• screenshot-1
• screenshot-2
• screenshot-4
• screenshot-5
• screenshot-6
• screenshot-7
• screenshot-8
• screenshot-9
• screenshot-10
• 
• 

Установка

1. Install as regular WordPress plugin.
2. Go your plugin setting via WordPress Dashboard and find «Accordions» activate it.

After activate plugin you will see «Accordions» menu at left side on WordPress dashboard click «New Accordions» and use the options field «Accordions Options»

How to use on page or post
When accordions options setup done please publish accordions

and then copy shortcode from top of Accordions Options [accordions ]

then paste this shortcode anywhere in your page to display accordions

Источник