- Що за гармошка?
- Додавання FAQ гармошки на jQuery
- Додавання сторінки з Найчастіші запитання і гармошкою
- Зміна стилю і кольору гармошки
Нещодавно один з наших користувачів запитав нас, чи можна створити розділ з часто вживаними питаннями у вигляді розкривається гармошки на WordPress. Існує безліч плагінів, який дозволяють додати розділ FAQ в WordPress. У цій статті, ми покажемо вам, як створити FAQ гармошку на jQuery на вашому WordPress сайті.
Що за гармошка?
У веб-дизайні, гармошка це термін, використовуваний для призначеного для користувача інтерфейсу, який має закладки або блоки з текстом, які можуть бути приховані або розкриті за бажанням користувача. Кожна закладка має контент, який може бути розкритий, якщо користувач натисне на заголовок меню. Загалом, це меню, яке розкривається після натискання на нього. Внизу можна побачити скріншот з простою гармошкою.
Додавання FAQ гармошки на jQuery
Перед тим як додавати гармошку для Найчастіші запитання, переконайтеся, що у вас є готовий розділ з Найчастіші запитання. Можете прочитати наш посібник, як додати розділ FAQ в WordPress .
Що ж, давайте почнемо створювати гармошку. WordPress йде вкупі з бібліотекою jQuery, проте тим для jQuery у нього немає. Ми завантажимо їх з Google CDN і вставимо скрипти в WordPress. Ми також створимо короткий код, який буде показувати наші Найчастіші запитання.
Створіть папку на вашому робочому столі і назвіть її my-accordion. Відкрийте блокнот і створіть файл my-accordion.php і вставте даний код в нього:
<? Php 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 ( 'posts_per_page' => 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 клієнт і завантажте папку в директорію сайту / wp-contnt / plugins /. Тепер вам потрібно активувати плагін в розділі Модулі в панелі адміністратора.
Додавання сторінки з Найчастіші запитання і гармошкою
Щоб додати FAQ в гармошку, потрібно створити нову сторінку - Pages »Add New. Дайте сторінці назву і вставте в редактор даний код:
[Faq_accordion]
Збережіть і опублікуйте сторінку, і ви побачите ваш FAQ з красивим меню в стилі гармошки.
Зміна стилю і кольору гармошки
Для зміни стилю і кольору гармошки можна використовувати jQuery UI теми. Ви можете завантажити їх і встановити на свій сайт - на сайті jQuery є цілий розділ з jQuery UI темами . Як видно, ми використовували тему під назвою Humanity в нашому плагін. Ви також можете створювати або змінювати теми в Themeroller.
Сподіваємося ця стаття допомогла вам розібратися в тому, як додати FAQ у вигляді гармошки на сайті WordPress.
Наша спеціальність - розробка та підтримка сайтів на WordPress. Контакти для безкоштовної консультації - [email protected] , +371 29394520
Що за гармошка?Що за гармошка?
