Як додати jquery акордеон faq в wordpress, amoseo

До нас звернувся один з Новомосковсктелей з питанням, чи можливо на його сайті на WordPress реалізувати FAQ у вигляді акордеона. Існує безліч плагінів для цього, однак в цій статті ми розповімо, як реалізувати задумане самостійно за допомогою jQuery.

Що за акордеон?

У веб-дизайні акордеон - це термін, який використовується шаблон для дизайну користувальницького інтерфейсу, у якого є таби або блоки контенту, що розкриваються і згортаються за бажанням (взаємодії) користувача. Нижче - скріншот реалізації простого акордеона.

Додаємо jQuery акордеон FAQ

Перш ніж додавати акордеон для ЧаВо, переконайтеся що у вас на сайті є розділ FAQ. Потрібно встановити плагін WordPress FAQ Manager.

У WordPress є вбудована бібліотека jQuery, проте в ній немає тем для jquery. Ми будемо завантажувати бібліотеку з Google CDN і довантажувати ці скрипти в WordPress. Також ми створимо шорткод, який буде виводити наші часті питання. Найголовніше в цьому всьому те, що ми реалізуємо це за допомогою створення свого плагіна WordPress.

Тепер у нас є плагін, готовий до завантаження. Відкрийте свій FTP клієнт і завантажте папку my-accordion в директорію / wp-contnt / plugins / вашого сайту на WordPress. Потім вам потрібно активувати плагін, перейшовши в розділ Модулі адмін.панелі сайту.

Додаємо сторінку FAQ з акордеоном

Для відображення FAQ в форматі акордеона, вам необхідно створити нову сторінку. Йдемо в Сторінки »Додати нову. Задайте вашій сторінці ім'я, наприклад FAQ. а в поле редагування записи введіть цей шорткод:

Міняємо стилі і кольори вашого акордеона

Для квітів і стилів наш акордеон використовує теми jQuery UI, що розташовуються на серер Google. По суті це просто таблиця стилів, і, якщо хочете, то можете завантажити і розмістити її на своєму сайті. На сайті jQuery є розділ з темами для jQuery UI з декількома вже готовими. У нашому прикладі ми використовували тему humanity. якщо ви помітили. Ви можете змінити її на будь-яку представлену (smoothness, cupertino і т.д.) Також теми можна редагувати або створювати самостійно за допомогою Themeroller.

Поділитися з друзями: