Как добавить jQuery аккордеон FAQ в WordPress

К нам обратился один из читателей с вопросом, возможно ли на его сайте на WordPress реализовать FAQ в виде аккордеона. Существует множество плагинов для этого, однако в этой статье мы расскажем, как реализовать задуманное самостоятельно с помощью jQuery.

Что за аккордеон?

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

Добавляем jQuery аккордеон FAQ

Прежде чем добавлять аккордеон для ЧаВо, убедитесь что у вас на сайте есть раздел FAQ. Нужно установить плагин WordPress FAQ Manager.

В WordPress есть встроенная библиотека jQuery, однако в ней нет тем для jquery. Мы будем загружать библиотеку с Google CDN и подгружать эти скрипты в WordPress. Также мы создадим шорткод, который будет выводить наши часто задаваемые вопросы. Самое главное в этом всем то, что мы реализуем это с помощью создания своего плагина WordPress.

Создайте папку на рабочем столе и назовите её my-accordion. Откройте блокнот или другой текстовый редактор на ваш выбор. Создайте файл с именем my-accordion.php и вставьте туда следующий код:

<?php
/** 
Plugin Name: DeVise's FAQ Accordion
Description: A jQuery powered Accordion for FAQs based on a tutorial by DeVise
Version: 1.0
Author: DeVise
Author URI: http://web-devise.com
License: GPL2
*/
function accordion_shortcode() { 

// Регистрируем скрипты и стили
wp_register_style('wpb-jquery-ui-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');

// Получаем собственный тип записей для вопросов из плагина WordPress FAQ Manager
$posts = get_posts(array(  
'numberposts' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Генерируем выходные данные
$faq  .= '<div id="accordion">'; //Открываем контейнер
foreach ( $posts as $post ) { // Создаем разметку для каждого вопроса
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Закрываем контейнер
return $faq; //Возвращаем HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

После сохранения изменений в этот файл, откройте новый пустой файл. Сохраните его с именем accordion.js. Затем вставьте следующий код в него и сохраните:

jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();

Теперь у нас есть плагин, готовый к загрузке. Откройте свой FTP клиент и загрузите папку my-accordion в директорию /wp-contnt/plugins/ вашего сайта на WordPress. Затем вам нужно активировать плагин, перейдя в раздел Плагины админ.панели сайта.

Добавляем страницу FAQ с аккордеоном

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

[faq_accordion]

Сохраните и Опубликуйте созданную страницу и просмотрите ее. Вы увидите ваши часто задаваемые вопросы в виде приятного меню в виде аккордеона.

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

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

Надеемся, что эта статья помогла вам добавить jQuery аккордеон FAQ на ваш сайт на WordPress.