Недавно один из наших пользователей спросил нас, есть ли способ добавить аккордеон FAQ на свой сайт WordPress. Существует множество плагинов, позволяющих добавить раздел часто задаваемых вопросов или FAQ в WordPress. В этой статье мы покажем вам, как добавить jQuery FAQ аккордеон в ваш WordPress сайт.
Что такое аккордеон?
В веб-дизайне аккордеон — это термин, используемый для обозначения шаблона дизайна пользовательского интерфейса, в котором есть вкладки или блоки контента, которые сворачиваются или разворачиваются при взаимодействии с пользователем. Каждая вкладка имеет контент под ними, который раскрывается, когда пользователь нажимает на пункт меню. Проще говоря, это похоже на меню, которое расширяется при нажатии на него. Мы использовали подобный эффект на странице настройки нашего бесплатного блога WordPress. Ниже приведен скриншот примера аккордеона.
Если вам не понравилось видео или нужны дополнительные инструкции, то продолжайте читать дальше.
Добавление jQuery FAQ Accordion
Прежде чем добавить аккордеон jQuery FAQ, необходимо убедиться, что у вас есть раздел FAQ. Начните с добавления раздела FAQ, следуя нашему руководству о том, как добавить раздел FAQ в WordPress.
Теперь давайте продолжим добавление аккордеона jQuery FAQ. WordPress поставляется с библиотекой jQuery, однако в нем нет тем jquery. Мы загрузим ее из Google CDN и поставим в очередь эти скрипты в WordPress. Мы также создадим шорткод, который будет отображать наши часто задаваемые вопросы. Самое главное, что мы сделаем все это, создав плагин WordPress.
Создайте папку на рабочем столе и назовите ее my-accordion. Откройте Блокнот или любой другой текстовый редактор по вашему выбору. Создайте файл под названием my-accordion.php и вставить в него этот код:
10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'question', )); // Генерация вывода $faq .= '%1$s'; //Закрываем контейнер return $faq; //Возвращаем HTML. > add_shortcode('faq_accordion', 'accordion_shortcode');%2$s'), $post->post_title, wpautop($post->post_content) ); > $faq .= '
После сохранения изменений в этом файле, откройте новый пустой файл. Сохраните его как аккордеон.js . Далее вставьте в него этот код и сохраните файл:
jQuery(document).ready(function() < jQuery("#accordion").accordion(); >)();
Теперь у нас есть наш плагин, готовый к загрузке. Откройте FTP-клиент и загрузите папку my-accordion в каталог /wp-contnt/plugins/ на вашем сайте WordPress. Далее вам нужно активировать плагин, перейдя на экран вашего плагина в области администратора WordPress.
Добавление страницы FAQ с аккордеоном
Чтобы отобразить эти часто задаваемые вопросы в формате аккордеона, вам нужно создать новую страницу. Перейти к Страницы » Добавить новую. Дайте вашей странице заголовок, e.g. FAQs и в области редактирования страницы введите этот шорткод:
Сохраните и опубликуйте свою страницу, а затем просмотрите ее. Вы увидите, что ваши часто задаваемые вопросы отображаются в красивом аккордеонном меню.
Изменение стиля и цвета вашего аккордеона
Для цветов и стиля этот FAQ Accordion использует jQuery UI Themes, размещенные на Google. По сути, это таблица стилей, и если вы хотите, вы можете скачать и разместить ее на своем сайте. На сайте jQuery есть раздел тем jQuery UI с несколькими готовыми к использованию темами. Как вы можете видеть, мы использовали тему человечества в нашем плагине. Вы можете заменить его на любую из доступных тем, таких как smoothness, cupertino и т.д. Вы также можете создать или изменить эти темы на Themeroller.
Мы надеемся, что эта статья помогла вам добавить jQuery FAQ Accordion на ваш WordPress сайт. Для обратной связи и вопросов, пожалуйста, оставьте комментарий ниже.
Источник: www.wpbeginner.com