Додаємо у WordPress FAQ у вигляді «гармошки» на jQuery

Один із наших користувачів запитав, чи є спосіб додати "гармошку" FAQ у WordPress сайт. Є багато плагінів, які дозволяють вам додати блок часто задаваних питань (FAQ) в WordPress. Наприклад, нещодавно ми розповідали, як додати FAQ-секцію з відповідями на запитання у WordPress. А у цій статті ми покажемо, як додати FAQ гармошку на jQuery у ваш сайт на WordPress.

Дивіться також:

• Як додати FAQ-секцію з відповідями на запитання у WordPress

Що таке гармошка?

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

Додавання гармошки FAQ на jQuery

Перед тим, як ви зможете додати гармошку FAQ на jQuery, вам потрібно подбати про сам блоці FAQ. Почніть із додавання цієї секції. Ви можете скористатися посібником з додавання FAQ на WordPress.

Тепер перейдемо до додавання FAQ гармошки. WordPress постачається з jQuery-бібліотекою, але не містить jQuery-тем. Ми завантажимо їх з CDN та викличемо ці скрипти в WordPress. Ми також створимо шорткод, які відображає наші питання, що часто задаються. І, що найважливіше, ми зробимо це, створивши WordPress-плагін.

Створіть на своєму робочому столі папку під назвою my-accordion. Відкрийте блокнот або будь-який текстовий редактор на вибір. Створіть файл під назвою my-accordion.php і вставте туди наступний код:

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

// Registering the scripts and style
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');

// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(  
'numberposts' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

Після збереження змін у файлі відкрийте новий чистий файл. Збережіть його під ім'ям accordion.js. Вставте в нього наступний код і збережіть:

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

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

Додавання сторінки FAQ з гармошкою

Щоб відобразити FAQ у форматі гармошки, потрібно створити нову сторінку. Перейдіть до Сторінки → Додати нову. Дайте вашій сторінці заголовок, наприклад, FAQ, і в блоці редагування сторінки вставте наступний шорткод:

[faq_accordion]

Збережіть та опублікуйте вашу сторінку, потім подивіться на неї. Ви повинні побачити ваш FAQ у вигляді симпатичного меню-гармошки.

Зміна стилів та кольорів вашої гармошки

Для стилів та кольорів ця FAQ гармошка використовує jQuery UI Themes від Google. В принципі, це звичайні таблиці стилів, і ви можете завантажити та встановити їх на свій сайт. У сайту jQuery є розділ jQuery UI Themes з декількома готовими для використання темами. Як бачите, у нашому плагіні ми використовували тему Людство. Ви можете замінити її будь-якою доступною темою, наприклад, Гладкості, Купертіно і т.д. Ви також можете створити свою або змінити існуючі теми Themeroller.

Сподіваємося, ця стаття допомогла вам додати jQuery-гармошку FAQ на ваш WordPress-сайт. Залишіть свій коментар, якщо вам є що сказати з цього приводу.

Джерело: WPbeginner.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/