@sergeyzotoff +7 (960) 065-01-01 sergeyzotoff@gmail.com Sergey Zotoff
В процессе создания сайта для медицинской клиники возникла необходимость создания раздела, который содержал бы ответы на часто задаваемые вопросы, при чем список вопросов постоянно бы пополнялся.
Главное условие — чтобы вопрос мог быть задан пациентом со страницы сайта. Возможно, эту задачу можно было реализовать стандартными средствами при помощи комментариев, но на данном сайте необходима была страница с полным перечнем вопросов пациентов и ответом врачей. Сегодня подробно рассмотрим реализацию раздела часто задаваемых вопросов в Вордпресс.
Из большого числа плагинов, реализующих FAQ в WordPress выбор остановился на
Устанавливаем и переходим к настройкам. Их немного.
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 код символа длиное тире: —
То есть весь блок будет таким:
[LOOP]
<div><a href=»#"><strong>{#Question}</strong></a></div>
<div>— {#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 комментария