Как добавить jQuery аккордеон FAQ в WordPress
Опубликовано: 24.08.2018
К нам обратился один из читателей с вопросом, возможно ли на его сайте на WordPress реализовать FAQ в виде аккордеона. Существует множество плагинов для этого, однако в этой статье мы расскажем, как реализовать задуманное самостоятельно с помощью jQuery.
How to Add a jQuery FAQ Accordion in WordPress
Что за аккордеон?
В веб-дизайне аккордеон — это термин, использующийся шаблон для дизайна пользовательского интерфейса, у которого есть табы или блоки контента, раскрывающиеся и сворачивающиеся по желанию (взаимодействию) пользователя. Ниже — скриншот реализации простого аккордеона.
Добавляем 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', 'http://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.
VN:F [1.9.22_1171]
Rating: 1.0/ 5 (1 vote cast)
