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

  1. Что такое Аккордеон?
  2. Видеоурок
  3. Добавление JQuery FAQ Аккордеон
  4. Добавление страницы часто задаваемых вопросов с Аккордеоном
  5. Изменение стиля и цвета вашего аккордеона

Недавно один из наших пользователей спросил нас, есть ли у них способ добавить аккордеон FAQ на свой сайт WordPress. Есть много доступных плагинов, которые позволяют вам добавить часто задаваемые вопросы или раздел часто задаваемых вопросов в WordPress , В этой статье мы покажем вам, как добавить аккордеон JQuery FAQ на ваш сайт WordPress.

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

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

Видеоурок

Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте чтение.

Добавление JQuery FAQ Аккордеон

Прежде чем вы сможете добавить аккордеон JQuery FAQ, вы должны убедиться, что у вас есть раздел FAQ. Начните с добавления раздела FAQ, следуя нашему руководству по как добавить раздел часто задаваемых вопросов в WordPress ,

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

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

<? php / ** Имя плагина: FAQ по WPBeginner. Аккордеон Описание: Аккордеон с поддержкой jQuery для часто задаваемых вопросов, основанный на руководстве от WPBeginner Версия: 1.0 Автор: WPBeginner URI автора: https://www.wpbeginner.com Лицензия: 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-щ стиле'); wp_register_script ('wpb-custom-js', plugins_url ('/ accordion.js', __FILE__), массив ('jquery-ui-accordion'), '', true); wp_enqueue_script ( 'WPB-заказ JS'); // Получение ответов на часто задаваемые вопросы от пользовательских типов плагинов WordPress. Вопросы типа поста $ posts = get_posts (array ('posts_per_page' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'вопрос',)); // Генерируем вывод $ 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 (документ) .ready (function () {jQuery ("# ​​accordion"). accordion ();}) ();

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

Добавление страницы часто задаваемых вопросов с Аккордеоном

Чтобы отобразить эти часто задаваемые вопросы в формате аккордеона, вам нужно создать новую страницу. Перейти на страницы »Добавить новый . Дайте вашей странице заголовок, например, часто задаваемые вопросы, и в области редактирования страницы введите этот короткий код:

[Faq_accordion]

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

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

Для цветов и стилей этого FAQ Аккордеон использует JQuery UI Themes, размещенные в Google. Это в основном таблица стилей, и если вы предпочитаете, вы можете скачать и разместить ее на своем сайте. На сайте jQuery есть JQuery UI темы раздел с несколькими готовыми к использованию темами. Как вы видите, мы использовали тему человечности в нашем плагине. Вы можете заменить его любой из доступных тем, таких как плавность, купертино и т. Д. Вы также можете создавать или изменять эти темы в Themeroller.

Мы надеемся, что эта статья помогла вам добавить jQuery FAQ Accordion на ваш сайт WordPress. Для обратной связи и вопросов, пожалуйста, оставьте комментарий ниже.

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