Реализация раздела частозадаваемых вопросов

25 января 2013 / 4 комментария

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

Из большого числа плагинов, реализующих FAQ в WordPress выбор остановился на FAQs Manager. Плагин позволяет создать стандартную страницу, на которой размещает список всех заданных вопросов и ответов на них, а также необходимую нам форму «Задать вопрос». Плюс ко всему можно отобразить отдельную форму поиска для списка вопрос-ответов. Вообще, я не сторонник использования большого числа плагинов на сайте, но если задачу нельзя решить стандартными средствами, или, как очень часто бывает, поджимает время, то вполне допустима установка плагина, тем более что найденный плагин реализует все необходимые возможности.
Устанавливаем и переходим к настройкам. Их немного.

Реализация раздела частозадаваемых вопросов

Groups — Manage FAQs Groups. Управляет группами. По-умолчанию здесь создана группа «General», нам этого вполне хватит.

Questions — содержит все вопросы, которые будут участвовать в данном разделе, а также ответы на них. Технология работы плагина очень удобна: пользователь, решив задать вопрос, заполняет форму. Текст вопроса приходит на электронный адрес админа сайта, и попадает в список раздела Questions в статусе "Inactive «, то есть „Неактивен“. Пока вопрос не будет переведен в статус „Active“, он не появится в общем списке вопросов. Процесс аналогичен модерации комментариев. При редактировании вопроса дается ответ на него. Для примера создадим тестовый вопрос, нажав на „Add New“. В заголовке напишем наш вопрос.

Реализация раздела частозадаваемых вопросов

Далее сохраним со статусом „Active“.

Реализация раздела частозадаваемых вопросов

Реализация раздела частозадаваемых вопросов

Переключимся в раздел „Questions“, где отобразиться наш вопрос. Нажав „Delete“ вопрос удаляется, а „Edit“ — открывается для редактирования. Создадим ещё один вопрос для теста плагина и дадим ответы. Ответ пишется в поле под заголовком.

Реализация раздела частозадаваемых вопросов

Теперь встроим показ списка вопросов на сайт.

Для этого создадим страницу „Вопросы пациентов“ (в моем случае). Опубликуем её и добавим в меню.

Реализация раздела частозадаваемых вопросов

Откроем созданную страницу для редактирования и кнопкой „Faqs Shortcode“ вставим на неё отображение результатов работы плагина „FAQs Manager“.

Реализация раздела частозадаваемых вопросов

Здесь в шорткоде значение searchbox=0 означает, что не будет показана форма поиска для списка вопросов-ответов. Мы пока её спрячем, чтобы разобраться с основным функционалом. Для её показа значение searchbox меняем на 1. Сохраним страницу и посмотрим, что получилось.

Реализация раздела частозадаваемых вопросов

Плагин работает.

Теперь будем разбираться с основными настройками плагина FAQs Manager, переведем на русский язык подписи к полям и постараемся вписать список вопросов-ответов и форму для отправки нового вопроса в дизайн существующего сайта.

Для этого переключимся в раздел „Settings“ меню „iNIC FAQs“. Здесь все основные настройки плагина. Рассмотрим их по порядку.

Реализация раздела частозадаваемых вопросов

Get Notification Email — здесь емэйл, куда будут приходить заданные вопросы.

Capture Email Address — пометить ли поле ввода электронного адреса, как обязательное для заполнения. Оставим „Yes“.

Notify when Answered — уведомлять об ответе. Когда на вопрос будет дан ответ, пользователю задавшему вопрос придет письмо с текстом ответа. Оставим так же „Yes“.

Далее...

Реализация раздела частозадаваемых вопросов

В этом блоке содержится разметка вывода результатов работы плагина „FAQs Manager“, а именно сверху вниз:

[SearchBox] — блок отображает форму поиска.

[LOOP] — выводит цикл с опубликованными (Active) вопросами-ответами.

[AskBox] — форма отправки нового вопроса пользователем.

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

Для начала заменим все англоязычные сообщения и подписи на русскоязычные. Вместо „Ask Question“ напишем „Задать вопрос“ и т.д.

Сохраним изменения и посмотрим на результат.

Первое, что бросается в глаза — это отсутствие разницы в оформлении вопроса и ответа. Текст абсолютно одинаков. Исправляем это при помощи HTML-тегов.

Для этого в блоке [LOOP] включение {#Question} помещаем между тегами <strong></strong>

А перед  {#Answer} вписываем HTML код символа длиное тире: &mdash;

То есть весь блок будет таким:

[LOOP]
<div><a href=»#"><strong>{#Question}</strong></a></div>
<div>&mdash; {#Answer}<br/><br/></div>
[/LOOP]

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

Реализация раздела частозадаваемых вопросов

Уже лучше.

Далее поменяем цвет у формы. Для этого нам нужно внести изменения в следующем блоке настроек плагина «FAQs Manager».

Реализация раздела частозадаваемых вопросов

С помощью незаменимого дополнения для Mozilla Firefox — FireBug отыскиваем наименования идентификаторов в блоке стилей и меняем цвета на свои собственные. Вот что получилось у меня:

Реализация раздела частозадаваемых вопросов

Надпись на кнопке «Ask Question» придется искать в файлах плагина, как бы не хотелось...

В файле плагина inic_faq.php необходимо перевести на русский язык ещё несколько сообщений. Перед переводом не забываем сохранить файл в кодировке UTF-8 without BOM (это можно сделать при помощи утилиты NotePad++).

Первое — заменим подпись на кнопке «Ask Question», выполним поиск «value=»Ask Question" id="faq_submit". Заменим «value=»Ask Question" на "value=«Задать вопрос» или «Отправить».

Второе — переведем фразы «Question must be reuired.» на «Текст вопроса обязателен»,

«Please enter a valid email address.» на «Пожалуйста укажите реальный электронный адрес.» — сообщение появляется в случае неверного формата адреса.

«Please enter a correct captcha.» на «Введенные символы с картинки неверны, попробуйте ещё раз.»

«Question has been saved successfully.» на «Спасибо. Ваш вопрос отправлен специалисту.» — если все поля формы заполнены верно.

«Some one asked question to you.» на «Вопрос с сайта (медицинской клиники Уролаб)» — это тема письма, которое приходит на почту администратора.

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

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

Необходимо их также выделить. По умолчанию они выглядят так:

Реализация раздела частозадаваемых вопросов

Сделаем их другого цвета.  Для этого FireBug-ом определим, какой класс присвоен этому блоку.

Реализация раздела частозадаваемых вопросов

В меню настроек «Settings» в блоке «HTML Settings — Custom CSS» впишем такие строки:

#validation.success {color:green;}
#validation.error {color:red;}

Первая строка в случае удачной отправки вопроса подсветит сообщение об этом зеленым цветом, а вторая окрасит в красный цвет сообщения о некорректном заполнении полей формы. Сохраняем.

Все готово. Ждем вопросов и не забываем отвечать на них.


4 комментария

  1. Александр

    15 апреля 2013
    /

    Спасибо, как раз тот плагин, который искал)) Описание настройки исчерпывающее!

  2. Александр

    15 апреля 2013
    /

    столкнулся с тем, что текст вопроса ограничен по количеству символов! Хотелось бы увеличить размер вопроса!

  3. Александр

    15 апреля 2013
    /

    сам разобрался))) нужно изменить размер поля в таблице базы данных MySQL

  4. z140.ru

    6 июня 2013
    /

    Уточните пожалуйста, какое именно поле в таблице необходимо отредактировать.

* - обязательные поля

Добавить комментарий