Аккордеон для wordpress без плагина

Создаем аккордеон на WordPress без плагинов и скриптов на HTML+CSS

Всем привет. Сегодня я начинаю серию статей (она будет состоять только из 2), в которых мы рассмотрим, как можно получить короткую ссылку на Вашу статью WordPress. Вы в курсе, что если установить ЧПУ в WordPress, то ссылки на каждую статью будут огромными (не на все, но будут). Некоторые пользователи, например, хотят разместить ссылку на Вашу статью, у себя на сайте, или в твиттер-аккаунте, но когда копируют, получается слишком длинная. Но это не беда, WordPress предоставляет нам возможность получить короткие ссылки для каждой статьи, даже если у нас активированы ЧПУ.

Вы поняли мою задумку: я хочу, чтобы в каждой статье, автоматически добавлялась короткая ссылка к статье. Есть множество сервисов, которые укорачивают ссылки, но зачем использовать их, если WordPress сам предоставляет такую возможность.

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

После каждой статьи у меня будет вот такой аккордеон. Я еще раньше писал про WidgetKit+Wordpress, там рассказывал, что можно делать красивые аккордеоны в WordPress в ручном режиме, но сегодня не об этом, сегодня мы создадим аккордеон вручную, при помощи HTML и CSS, поэтому ничего лишнего.

Мой аккордеон работает следующим образом: раскрывается только при наведении мыши, а не нажатию по нему. Для того чтобы вставить его в каждую статью (чтобы он появлялся для каждой статьи), то Вам необходимо скопировать файл single.php, который отвечает за вывод каждой статьи. Да, но для начала Вам необходимо создать стили для нашего аккордеона, поэтому копируем файл style.css и в середине его вставляем следующий код:

После этого можно приступать к выводу самого аккордеона, для этого открываем файл single.php и в том месте, где Вы хотите его выводить необходимо добавить следующий код:

Сколько Вам полей необходимо, столько Вы и добавляете у себя, ну а теперь просто можете протестировать его у меня на сайте, в каждой статье. Вот и все, теперь Вы в курсе как создать аккордеон для WordPress без плагинов и скриптов на чистом HTML+CSS. В следующей статье мы рассмотрим, как можно прикрутить короткую ссылку к аккордеону. Причем такой аккордеон Вы можете использовать не только для данных целей, но и для вывода любой другой информации в каждой статьи, я его решил использовать именно так.

Источник

7 лучших плагинов для создания раскрывающихся списков (Аккордионов)

Раскрывающиеся списки (Аккордионы) — это элемент оформления контента на страницах сайтов, который позволяет отобразить информацию на сворачивающихся вкладках. Где при нажатии на заголовок вкладки, раскрывается её содержимое.

Это очень полезный функционал и в этой заметке мы выбрали для вас 7 лучших плагинов для Аккордионов на WordPress.

Как это используют на WordPress?

На самом деле, все очень даже просто. Раскрывающиеся списки позволяют отображать больше контента на страницах сайтов, не делая её при этом очень длинной. Либо, если вы хотите, чтобы ваша статья не отпугивала читателей своей длиной — вы можете разбить контент по скрытым блокам и сделать отображение его по нажатию на подзаголовки.

Такие списки так же очень часто используют для добавления Часто Задаваемых Вопросов (FAQ). Где пользователи, зайдя на страницу, видят только список самих вопросов. А при нажатии на интересующий его вопрос — раскрывается сам ответ. Согласитесь, очень удобно сделано и не испорчен дизайн сайта кучей контента.

Такие плагины называют Аккордионами, из-за их структуры и принципа работы. Именно по этому ключевому слову мы и собирали данную подборку. А теперь, давайте перейдем непосредственно к самим плагинам:

1. Accordion

Accordion — удобный WordPress плагин, который позволяет добавлять красивые Аккордеоны на ваши страницы, заметки, шаблоны и вообще в любом месте вашего сайта с помощью шорт кодов. Плагин обладает отзывчивым дизайном и прекрасно будет отображать ваш контент на всех устройствах.

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

Так же, у плагина есть поддержка шрифта Font Awesome, с помощью которого вы сможете использовать красивые значки на вкладках заголовков.

2. Accordion FAQ

Accordion FAQ — еще один плагин Аккордеона для сайтов на WordPress. Он имеет drag and drop интерфейс, который поможет вам легко добавлять такие списки в любом месте вашего сайта. Вы можете сортировать списки и управлять их размещением, перетаскивая их вверх или вниз на сайте.

Плагин имеет несколько шаблонов, неограниченные цветовые вариации, поддержку значков шрифта Awesome, структуру bootstrap framework для гибкого дизайна и многое другое. Загрузка Accordion FAQ происходит очень быстро, что отлично подходит для ранжирования в поисковых системах вашего сайта.

3. Tab – Accordion, FAQ

Tab, Accordion и FAQ — это WordPress плагин, который позволяет добавлять красивые анимированные вкладки и Аккордеоны в WordPress. Вы можете легко добавить отзывчивые горизонтальные и вертикальные аккордеоны в заметки, на страницы и области виджетов вашего сайта.

Плагин имеет несколько эффектов перехода, различные макеты, функции перетаскивания для сортировки вкладок и многое другое.

4. Arconix Shortcodes

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

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

5. Easy Accordion

Easy Accordion — еще один плагин Аккордеона на WordPress, который позволяет вам устанавливать неограниченные количество вкладок и добавлять их на свой сайт.

Если вы приобретёте премиальную версию, то в неё будут входить дополнительные функции, такие как: расширенная система коротких кодов, красивые темы, неограниченная поддержка цветов и многое другое.

6. Shortcodes Ultimate

Shortcodes Ultimate — это всеобъемлющий плагин WordPress, который поставляется с набором шорт кодов для добавления нескольких функций. Вы можете использовать этот плагин и для добавления Аккордеонов на свой сайт.

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

7. Smooth Accordion

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

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

Мы надеемся, что эта статья помогла вам найти лучшее решения этой задачи для своего сайта на WordPress.

Источник