Додаємо у 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 з кількома готовими до використання темами. Як бачите, у нашому плагіні ми використовували тему Humanity . Ви можете замінити її будь-якою доступною темою, наприклад, Smoothness , Cupertino і т.д. Ви також можете створити свою або змінити існуючі теми Themeroller.

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

Джерело:WPbeginner.com

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

редактор wpcafe

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