Размещение на веб-страничке компании формы для голосования – один из способов бесплатного интерактивного опроса пользователей. Этот прием помогает выяснить, что думают посетители сайта о продукции или услугах, каковы их ожидания от сотрудничества, как они относятся к контенту и внешнему виду интернет-магазина, что хотели бы изменить в работе компании и т.д.
Занимаясь обслуживанием сайтов разных предприятий и организаций, нам часто приходится не только решать задачи SEO, но и подключать к ним опросы разных видов и форматов, по требованию заказчиков. Наиболее распространена практика создания голосований под WordPress – одну из продвинутых систем управления контентом, имеющую открытый код. Согласно исследованиям W3Techs в наши дни каждый четвертый сайт создается на базе Вордпресса, что обуславливает и высокую популярность плагинов под эту CMS.
В этой статье мы поделимся с вами, как подборкой решений для формирования опросов на WordPress, так и опишем алгоритмы создания эффективного тематического Vue-плагина. Каждый из предложенных вариантов может быть задействован в процессе работы с сайтом для налаживания коммуникации с потребителем.
Содержание
Основные рабочие WordPress-плагины
Владелец сайта на Вордпрессе имеет возможность работать с разными программными продуктами, в зависимости от особенностей голосования, которое он хочет провести. Существует несколько продуктов, предлагаемых сегодня веб-мастерам:
- Среди бесплатных плагинов особое место отводится проекту YOP. Он позволяет настраивать опросы с учетом множества требований, в том числе позволяет блокировать отдельных пользователей с целью соблюдения чистоты результата. Плагин предполагает опцию архивирования, настройку дизайна голосования, отображение опросов на нескольких страницах.
- Неплохой бесплатный плагин Survey дает возможность создавать до 100 опросов ежемесячно. После его установки появляется вкладка POWr Survey, где можно настраивать внешний вид, задавать количество элементов, вводить вопросы и варианты ответов. Итоговый опрос можно установить как в любое место сайта (скопировав шорткод), так и в боковую панель (используя специальный виджет).
- Адаптивные опросы Responsive Poll – отличный инструмент для создания несложных голосовалок на сайте. Плагин позволяет выводить вместе с текстовыми вариантами ответа графические. Также в рамках настройки опросов можно клонировать ранее созданные материалы, добавлять по несколько голосований на одну страницу, устанавливать временные рамки эксплуатации отдельных элементов и т.д.
- WP-Polls также относится к доступным проектам, которые подходят для создания AJAX-голосований. Плагин может вставлять формы с опросами в любое место на сайте. Пользователи получают возможность работать с CSS-стилями и корректировать внешний вид за счет кодирования. Сервис поддерживает как одиночный, так и множественный выборы ответов.
Правильно используя данные плагины, можно узнать реальное мнение пользователей о сайте, что поможет исправить текущие ошибки, развить клиентоориентированность и увеличить продажи.
Создание уникального Vue-плагина
Возможно, кому-то покажется, что задействовать Vue в качестве плагина для WordPress – слишком экстремально. Однако практика показывает, что подобный вариант решения проблемы органично вписывается на сайт и предоставляет веб-мастеру расширенные возможности. Например, данный опрос может масштабироваться таким образом, чтобы быть актуальным и для модных одностраничных сайтов, и для классических веб-проектов с множеством разделов. Среди его ключевых преимуществ – оперативность, удобство пользования, сравнительная простота создания.
Для работы с плагином потребуется запустить Vue из cdnjs.com, css-файл и файл сценария pollka-king.js, в котором будет писаться весь JavaScript. Шорткод плагина, который можно использовать для вывода HTML-кода, выглядит таким образом.
Основываясь на этом шорткоде, можно редактировать содержимое, чтобы создавать новые опросы под решение определенных задач. Алгоритм работы в данном случае может быть таким:
- добавление в код новых строк с вариантами голосования;
- очистка атрибута id, чтобы он мог использоваться как атрибут HTML или как ключ при сохранении нашего опроса в базе данных;
- трансформация всех атрибутов answer-n в массив для упрощения их обработки;
- создание объекта JSON, который можно вставить в атрибут HTML;
- обновим наш метод вывода div с этими данными, прикрепленными как атрибут.
По результатам данного рефакторинга, внешний вид shortcode-плагина несколько изменяется.
Процесс инициализации опроса
Получив шорткод, с помощью которого можно работать дальше, нужно запустить Vue из CDN, а также открыть пустой файл pollka-king.js. Теперь можно работать с JavaScript:
- Найти div, который генерирует шорткод на странице. Сделать это можно за счет vanilla js, активировав querySelectorAll. В ходе такой манипуляции будет найден JavaScript NodeList, аналогичный массиву элементов div, включающих атрибут data-pk-atts. При необходимости получить несколько опросов на одной странице требуется перебрать NodeList и применить функции Vue на каждом из них.
- Нужно создать цикл, задействовав JSON из атрибута data-pk-atts, и проанализировать его таким образом, чтобы он мог превратиться в объект JavaScript
- Теперь следует преобразовать все те div, которые шорткод создавал в рамках опросов. Для этого создается несколько экземпляров Vue и в каждом выполняется доступ к объектам atts.
- Далее надо предоставить в распоряжение Vue заменитель разделителя. Это может быть новый div с классом pk-container. Речь идет о том, чтобы добавить свойство шаблона новому объекту Vue и заполнить его строковым шаблоном.
Если работа была выполнена правильно, по ее завершении вопрос будет виден повсеместно, где бы ни вставлялся шорткод.
Работа с компонентами
Вместо работы с единственным экземпляром Vue логичнее выполнить его разбивку на более мелкие структурные компоненты:
- один – для опроса;
- другой – для демонстрации результатов.
Для опросной части делается отдельная копия pk-poll, куда уйдет атрибут atts. Для этого потребуется в коде удалить текущее `{{atts.question}} и добавить тот компонент, который станет частью шаблона. Надо внести коррективы в файл pollka-king.js, предварительно добавив в начало файла ряд команд. В данном случае создается компонент pk-poll, вводится atts prop, добавляется selectedAnswer – элемент, отвечающий за отслеживание ответа, выбираемого пользователем.
Следующим этапом формируется шаблон для компонента pk-poll. Он организуется по той же схеме, что и шаблон для основного экземпляра Vue. Дополнительно добавляются кнопка @click и функция submitPoll. Таким образом, система проверит, выбран ли ответ и если да – зафиксирует выбранный пользователем голос.
В php-файле плагина надо обработать новый запрос, внеся следующее в метод регистрации:
add_action( ‘wp_ajax_nopriv_pk_submit_poll’, [$this, ‘submit_poll’] );
Чтобы запросы с действием pk_submit_poll обрабатывались за счет submit_poll, нужно добавить также еще один алгоритм.
Далее к методу скриптов требуется добавить такую строчку, чтобы понять, что переменная window.ajaxurl доступна для нашего кода интерфейса:
wp_add_inline_script( ‘pollka-king’, ‘window.ajaxurl = “‘ . admin_url( ‘admin-ajax.php’ ) . ‘”‘);
Данных действий должно быть достаточно, чтобы сохранить ответы пользователей.
Результаты опроса
Чтобы настроить демонстрацию результатов голосования, надо зайти в pollka-king.php и добавить туда компоненты Ajax, которые способствуют решению данной задачи.
- Нужно добавить действие Ajax к методу регистрации, чтобы активировать точку pk_get_poll_data.
- Создать метод get poll data для обработки.
- Вернуться в JavaScript файл и создать еще один Vue-компонент под названием pk-results.
- Далее новый компонент надо добавить в основной шаблон Vue после компонента pk-poll.
- Следующий момент – обновление шаблона pk-results для демонстрации вопросов и ответов.
- Когда есть вопросы и ответы, надо добиться получения результатов от API и выбрать вариант их отображения. Можно задействовать для этого метод жизненного цикла для запроса API результатов голосования.
- Для быстрого получения результата рекомендуется создать специальное свойство в объекте данных за счет привлечения копии объекта ответов.
- Используем имеющийся жизненный цикл для обнуления значений.
Так получается быстро вывести результаты опроса для просмотра. Остается лишь создать ряд методов, которые помогут отобразить данные в виде процентов, соотношений и т.д.
По итогам этой работы остается всего лишь пара трудностей. С одной стороны, результаты грузятся до того, как пользователь получит ответ. С другой стороны, юзеры могут голосовать несколько раз. Устранить эти недостатки можно с помощью нехитрых манипуляций.
Вывод
В современных условиях вебмастера не ограничены в выборе средств для опроса пользователей сайта. Они имеют возможность как самостоятельно редактировать код для получения идеальных опросников, так и задействовать уже готовые плагины, созданные специально для WordPress. Выбор в пользу того или иного решения обеспечивает ряд преимуществ:
- Платные и бесплатные проекты для внедрения опросных форм крайне просты и удобны в использовании, не требуют от веб-мастера специфических навыков и умений, однако часто грешат ограниченностью инструментария, невозможностью сложной настройки содержимого опроса.
- Применение средств Vue обеспечивает гибкость размещения голосования, а также формирование опросников с уникальными характеристиками, которые наиболее значимы для владельца сайта.
Наша практика показывает, что отдавать предпочтение тем или иным средствам нужно только с оглядкой на задачи, которые вебмастер ставит перед опросом. Чем сложнее исследование, которое он планирует проводить на своем сайте – тем выше вероятность, что потребуется вносить коррективы в код, а не использовать шаблонные решения.
Автор публикации
