Когда вы запускаете новый продукт или вебсайт, вам возможно потребуется добавить раздел с часто задаваемыми вопросами (FAQ), в большинстве случаев FAQ увеличивается, по мере роста продукта и клиентской базы. В этом случае, вам нужен метод правильно управлять FAQ на вашем сайте WordPress. В этой статье мы покажем вам, как создать раздел FAQ в WordPress.

Простой метод

В этом методе всего-то нужно создать пост или страницу и перечислить все ЧЗВ там. Если вам нужно лишь это, то на этом для вас статья заканчивается.

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

 

Добавление менеджера FAQ в WordPress

Первый делом нужно установить и активировать плагин Quick and Easy FAQs. После установки, плагин добавить раздел FAQ в меню администратора WordPress.

Вам необходимо перейти в FAQs » Add New  и добавить свой первый часто задаваемый вопрос. Сам редактор выглядит очень похоже на редактор постов.

Добавьте вопрос в поле заголовка и ответ в поле для поста. Справа находится колонка, где находится секция с группами для FAQ. Эти группы что-то типа категорий в постах WordPress. Вы можете использовать группы для сортировки вопросов по темам или разделам.

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

После этого, нужно отобразить их на сайте.

Отображение FAQ на сайте WordPress

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

1. Отобразите FAQ в виде списка

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

Короткий код: [faqs]

2. Отобразите FAQ в виде гармошки

Данная опция позволяет отображать FAQ в стиле гармошки или jQuery Toggle. Вопрос раскроется, когда пользователь нажмёт на него.

Короткий код: [faqs style=”toggle”]

Загляните на вебсайт плагина, где находится полный список с короткими кодами.

Смена отображения FAQ

Плагин зависит от цветов и шрифтов самой темы. Вы можете изменить отображение стилей темы, используя CSS.

Однако, если вы незнакомы с CSS, вы можете использовать плагин типа CSS Hero, чтобы изменить любой стиль в теме WordPress.

Плагин использует встроенные стили для управления отображением FAQ. Он также снабжён простым пользовательским интерфейсом для смены цветов вашего FAQ. Перейдите в Plugins » Quick and Easy FAQ для смены стандартных цветов.

Для начала вам надо выбрать кастомные цвета для опции ‘FAQs toggle colors’. После этого вы можете выбрать цвета, которые вы хотите использовать.

Не забудьте нажать на кнопку Сохранить для сохранения изменений.

Изменить порядок отображения для FAQ

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

Первым делом нужно установить и активировать плагин Post Types Order. После активации, перейдите на страницу в Settings » Post Types Order.

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

Теперь перейдите на страницу FAQs » Re-Order. Просто перетаскивайте заголовки FAQ, чтобы группировать их так, как вам нужно.

Не забудьте сохранить изменения. На это всё, вы можете посмотреть на результат на странице с FAQ.

 

---

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

---

Недавно мы рассматривали код для одного из плагинов, что прислал один из наших пользователей. Плагин работал отлично, но разработчик не учёл некоторых аспектов при загрузке с внешних источников JavaScript. WordPress имеет систему очереди для добавки внешних скриптов и стилей, что помогает предотвратить конфликты плагинов. Так как большинство держит более одного плагина на своём сайте, то будет полезным прочитать данную статью. Мы покажем вам, когда правильно добавлять JavaScript и стили в WordPress. Это будет крайне полезно всем, кто начал осваивать разработку плагинов и тем для WordPress.

Ошибка

У WordPress есть функция wp_head , которая позволяет загрузить что угодно в шапку вашего сайта. Для добавления своих скриптов, многие используют данный код:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

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

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

Зачем ставить скрипты в очередь?

У WordPress имеет большое сообщество разработчиков. Тысячи людей по всему миру придумывают темы и пишут плагины для WordPress. Чтобы убедиться, что всё работает верно и никто не наступает друг другу на ногу, WordPress имеет специальную функцию очереди для скриптом. Функция предоставляет систематическую загрузку JavaScript и стилей. Используя функцию  wp_enqueue_script ,  вы говорите WordPress когда нужно грузить скрипт, где грузить и при каких условиях.

Это позволяет всем использовать встроенные библиотеки JavaScript, которые идут в комплекте с WordPress, а не загружать одни и те же скрипты по нескольку раз. Это также позволяет сократить время загрузки страницы и избежать конфликтов с остальными темами и плагинами.

Как правильно вставить скрипты в очередь в WordPress

Правильная загрузка скриптов в WordPress крайне проста. Внизу дан пример, который вы можете скопировать в файл плагина или в файл темы functions.php , чтобы правильно загружать скрипты в WordPress.

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Пояснение:

Мы начали регистрацию нашего скрипта через функцию wp_register_script(). Данная функция принимает 5 параметров:

• $handle – Удерживать уникальное имя вашего скрипта. Мы назвали наш скрипт “my_amazing_script”
• $src – src это местоположение вашего скрипта. Мы используем функцию plugins_url чтобы получить правильный URL папки нашего плагина. Как только WordPress найдёт его, он также найдёт скрипт с названием amazing_script.js в этой папке.
• $deps – deps это для зависимостей. Так как наш скрипт использует jQuery, то мы добавили jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если он ещё не был загружен.
• $ver – Это номер версии нашего скрипта. Параметр необязателен.
• $in_footer – Мы хотим загрузить наш скрипт в нижний колонтитул, потому нам надо поставить это значение на true. Если вы хотите загрузить скрипт в шапку, то поставьте false.

После расставления всех параметрво в wp_register_script, вы можете просто вызвать скрипт, который всё сделает: wp_enqueue_script()

Некоторые особо любознательные могут спросить, почему мы сначала зарегистрировали скрипт, а потом поставили в очередь? Это позволяет другим владельцам сайта снять с регистрации ваш скрипт.

Как правильно поставить в очередь стили

Так же как и скрипты, вы можете поставить в очередь свои стили. Посмотрите на пример:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Заметьте, что мы использовали один и тот же приём wp_enqueue_scripts , чтобы подцеплять и скрипты и стили. Несмотря на имя, функция работает для них обоих.

В примерах выше мы использовали plugins_url для уточнения местоположения скрипта или стиля, который мы хотим поставить в очередь. Однако, если вы используете функцию для очередей в вашей теме, то используйте get_template_directory_uri(). Если вы работаете с дочерней темой, то используйтеget_stylesheet_directory_uri(). Вот пример:

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Мы надеемся эта статья помогла вам научиться правильно добавлять JavaScript и стили в темы и плагины WordPress. Для вопросов и комментариев пишите нам в комментарии.

Дополнительные ресурсы:

• wp_enqueue_script
• wp_register_script
• wp_enqueue_scripts

 

---

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

---