Добавляем гармошку FAQ на jQuery на WordPress сайт

Опубликовано: 05.09.2018

Наверняка вы часто читали на каком-нибудь сайте раздел FAQ или ЧАВО. Это очень удобный и полезный функционал – не нужно перечитывать сотни комментариев в надежде найти что-нибудь похожее – чаще всего такие разделы содержат самые распространенные вопросы и ответы на них. Поэтому рассмотрим сегодня, как добавить «гармошку» FAQ в сайт, построенный на WordPress. Существует несколько плагинов, при помощи которых можно добавить блок ЧАВО (FAQ) в WordPress. Например, FAQ-Tastic, WordPress FAQ Manager или WP DS FAQ Plus . Но можно обойтись и без использования плагинов – построить свой FAQ на jQuery. Поэтому для интересующихся читателей рассмотрим оба варианта – с плагином и без него. Начнем с добавления гармошки FAQ на jQuery.

Сначала нужно понять, что в веб-среде называют гармошкой. Это элемент интерфейса пользователя (accordion), который состоит из разворачивающихся или сворачивающихся вкладок или блоков. Управлять положением блоков может сам пользователь. Каждая такая гармошка содержит свой контент, появляющийся при нажатии на соответствующий пункт меню. Вот классический пример гармошки:

Супер аккордеон на сайт Wordpress плагин Accordeon HTML CSS3

Здесь при нажатии на вопрос вы переноситесь на той же странице по ссылке на место с ответом (принцип якоря). Ниже вы увидите другое решение – при нажатии на ссылку с вопросом раскрывается (разворачивается) ответ ниже под вопросом. Перед тем, добавлять гармошку ЧАВО на jQuery на страницу, необходимо сделать сам блок FAQ. Как эту функцию реализовать?

Сам WordPress конструктор уже содержит библиотеку jQuery, но не имеет jQuery-тем. Поэтому нам нужно их загрузить из CDN (Content Delivery Network – сеть доставки контента), и вызвать кодом скрипты тем. Также нам нужно создать шорткод, вызов которого и помогает отображать вопросы и ответы на одной странице в виде гармошки. То есть, мы практически создает свой плагин для собственной страницы с FAQ.

Теперь подробно об этом. В компьютере создайте папку accordion, можно прямо на рабочем столе при помощи обычного Блокнота. Дальше создавайте файл 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 .= ' ‘; //Open the container foreach ( $posts as $post ) { // Generate the markup for each Question $faq .= sprintf((‘

%1$s

%2$s

‘), $post->post_title, wpautop($post->post_content) ); } $faq .= ‘

'; //Close the container return $faq; //Return the HTML. } add_shortcode('faq_accordion', 'accordion_shortcode'); ?>

Не забудьте сохранить его. Теперь создаем новый файл (в том же Блокноте) и называем его accordion.js. В этот файл вставляем код и сохраняем:

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

Теперь плагин можно загружать на сайт. Сделать это можно любым способом – при помощи FTP или файл-менеджера. Результатом должна быть загрузка папки accordion с файлами accordion.js и accordion.php в папку wp-contnt/plugins сайта на WordPress. В админпанели переходите во вкладку «Плагин» и активируйте ваш новый плагин.

Чтобы FAQ отображался в формате гармошки, нужно опубликовать новую страницу для вашего ЧАВО. Это стандартная процедура, вы ее проделывали много раз. Зайдите в консоли во вкладку «Страницы», «Добавить новую». Название странице придумаете сами, и в режиме HTML редактора вставьте такой шорткод:

[faq_accordion]

После сохранения и опубликования новой страницы вы увидите свой новый FAQ в виде симпатичной гармошки.

Для задания стилей ваш FAQ использует jQuery UI Themes от Google. Это обыкновенные таблицы стилей, и их можно скачать здесь и установить их на сайт из раздела jQuery UI Themes с несколькими готовыми темами. Наш плагин использует тему Humanity (это видно из кода). Эту тему можно заменить любой другой темой, например, Smoothness, Cupertino и т.д. Можно просто изменить готовые темы в Themeroller.

Кроме этого необычного, но эффективного и интересного способа организовать FAQ на своем сайте есть способ более традиционный – нужно установить плагин WP DS FAQ Plus. Это очень простой в настройке и работе функционал. А результат – такой же. Поэтому если вы не хотите заморачиваться с вставкой кодов, или просто мало знакомы с этой темой, воспользуйтесь плагином WP DS FAQ Plus.

Устанавливается просто и традиционно – заходите в «Плагины», «Добавить новый», и в поле «Поиск» вбиваете название плагина — WP DS FAQ Plus. Теперь вам остается только установить плагин и активировать его. Страница настроек выглядит таким образом:

Здесь почти все переведено на русский язык, и проблем, думаю, не будет. Создаете кучу вопросов и ответов к ним (или пишете те вопросы, которые задают читатели вашего блога/сайта), затем создаете новую страницу и называете ее соответственно. На страницу просто добавляете готовый шорт-код, который вам даст плагин на странице создания нового FAQ (ЧАВО) в виде [dsfaq id=1] . Кстати, может, кто и не знает: аббревиатура ЧАВО расшифровывается, как ЧА сто задаваемые ВО просы.

После публикации страницы у вас появится приблизительно такой FAQ:

В настройках вы можете немного изменить внешний вид страницы, сделать вопросы-ответы свернутыми или развернутыми, и т.д. Единственный недостаток такого FAQ, построенного на плагине WP DS FAQ Plus – через некоторое время вы начинаете жалеть, что ваши 100-150 вопросов с развернутыми ответами индексируются поисковыми системами, как одна страница. Да, к сожалению, это так. Но в любом случае, такая страница нужна, особенно на тематических порталах.