Как добавить блок FAQ (Вопросы-Ответы) в WordPress

Ищете WordPress FAQ плагин для вывода вопросов-ответов на сайте? Разберем популярные и проверенные решения: с плагином и через свой код.

Блок с частыми вопросами/ответами отлично подойдет для веб-ресурса, который продает товары или предоставляет услуги. Например, в этом разделе можно разместить информацию, которую обычно спрашивают клиенты. Например, для них будут полезными ответы на вопросы “Что делать, если товар повредился при доставке”, “Как оплатить услугу из другой страницы” или “Что делать, если я не могу зарегистрироваться на вашем сайте”.

Владельцу компании будет удобно разместить блок с дополнительной информацией на сайте, чтобы немного разгрузить службу техподдержки.

Способы создания FAQ на WordPress

Разберем несколько популярных плагинов, а также попробуем создать блок FAQ своими силами.

Плагин Ultimate FAQ

Это бесплатное решение с большим количеством опций и настроек. Чтобы создать блок вопросов/ответов, после установки и активации дополнения откройте админ-раздел FAQs > FAQs.

На странице со списком всех вопросов нажмите кнопку Добавить новый. Откроется обычный визуальный редактор, который используется по умолчанию на сайте.

Добавьте название вопроса в первом поле, а также свой ответ.

Чтобы сохранить, кликните Опубликовать. Повторите эти действия для всех вопросов-ответов.

Чтобы вывести их на сайте, откройте на редактирование запись или страницу. В Gutenberg, в разделе блоков Ultimate FAQs, добавьте блок Display FAQs.

Это добавит все созданные вами FAQ.

Другие блоки позволяют также показать на сайте форму поиска вопросов, последние добавленные и популярные.

Если опубликовать или обновить страницу или запись, то блок будет выглядеть примерно так:

Основные возможности плагина:

• сортировка вопросов по категориям и тегам;
• кнопка Наверх;
• responsive-дизайн;
• поддержка Gutenberg;
• микроразметка;
• поддержка WooCommerce (в премиум-версии);
• возможность комментирования.

Плагин Expert Review

Это платное и многофункциональное ВордПресс-расширение на русском от команды WPShop.ru, созданное для выделения важного контента. Одна из его возможностей – создание блока FAQ.

Чтобы добавить блок вопросов-ответов, откройте страницу или запись на редактирование (или создайте новую).

Если используете новый блочный редактор, добавьте блок Классический.

На панели управления нажмите кнопку Отзыв эксперта и выберите пункт Добавить FAQ.

В начале всплывающего окна выберите цветовую схему, укажите заголовок, задайте стиль оформления и добавьте вопросы и ответы. Для последних есть кнопка Добавить.

На сайте это будет выглядеть так:

Возможности Expert Review:

• переведен на русский;
• профессиональное оформление всех элементов;
• отзывчивый дизайн;
• удобное управление;
• моментальное добавление вопросов в контент;
• добавляет дополнительную ценность содержимого;
• улучшает поведенческие факторы;
• увеличивает время просмотра страниц;
• повышает взаимодействие посетителей с контентом;
• улучшает визуальное восприятие.

WordPress FAQ без плагина

Этот способ предусматривает редактирование файлов WP-темы. Рекомендуем использовать дочерние темы, которые сохранят все ваши изменения после обновления темы.

Обязательно сделайте резервную копию сайта.

Для начала нужно добавить специальный скрипт-обработчик. Для этого откройте файл functions.php активной темы и в самый конец добавьте код:

function wpplus_faq_block() {
    if ( is_single() || is_page() ) {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.faqs dd').hide();
                $('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
                $(this).next().slideToggle(150);
                });
                $('a.faq-button').click(function(){
                $('.faqs dd').slideToggle('normal');
                });
            });
        </script>;
    <?php
    }
}
add_action( 'wp_footer', 'wpplus_faq_block' );

Этот JS-код будет добавлен в подвал сайта и будет срабатывать только на страницах и записях.

Если нужно, чтобы опросы работали на всех частях сайта, уберите условие  if ( is_single() || is_page() ) {}.

Дальше откройте раздел Внешний вид > Настроить > Дополнительные стили и в поле добавьте CSS-правила:

.faq-wrapper {
    margin: 25px 0;
}
dl {
    line-height: 170%;
    margin-bottom: 20px;
}
dl, dt, dd {
    margin: 0;
    padding: 0;
}
.faqs dt {
    font-weight: 700;
    background: #f1f1f1;
    position: relative;
    padding: 6px 14px;
    margin: 15px 0;
    border-radius: 4px;
}
.faqs dd {
    display: none;
}
.faqs dd {
    padding: 0 0 15px 7px;
}
.faqs .hover {
    cursor: pointer;
}

Эти правила можете изменить в соответствии с общим дизайном сайта.

Теперь осталось добавить сами вопросы и ответы. Для этого откройте страницу/запись (или создайте новую).

Добавьте в документ блок, например, Абзац. Перейдите в режим кода.

В блок вставьте HTML-код в следующем формате:

<div class="faq-wrapper">
    <dl class="faqs">
        <dt>Вопрос 1</dt>
        <dd>Ответ 1</dd>
        <dt>Вопрос 2</dt>
        <dd>Ответ 2</dd>
        <dt>Вопрос 3</dt>
        <dd>Ответ 3</dd>
    </dl>
</div>

На сайте это будет выглядеть примерно так: