Установка на Wordpress

Установка квиза Enquiz на сайт, сделанный в Wordpress

В нашей инструкции мы используем самую свежую версию Wordpress на момент написания (Wordpress 5.4). Если у Вас более старая версия Wordpress, возможны отличия в панели управления Wordpress и процессе установки квиза.

Установка квиза Enquiz на сайт, созданный в Wordpress, происходит за несколько шагов:
  1. Для квиза, который нужно установить на Wordpress, получите код интеграции, следуя рекомендациям Общей инструкции. Обязательно потребуется код из блока 1 (далее код подключения). А также - в зависимости от нужного режима отображения квиза — либо код из блока 2А (далее код инициализации встроенный), либо код из блока 2В (далее код инициализации диалоговый).

Получения кодов для интеграции

  1. Зайдите в панель управления Wordpress под учётной записью администратора и перейдите в редактор тем. Далее выберите в редакторе файл header.php.

На иллюстрациях показан код базовой темы Wordpress (Twenty Twenty). Код header.php Вашей темы оформления может отличаться.

Редактор тем Wordpress

  1. В header.php найдите тег </head> (“закрывающий хед”).

Содержимое header.php может отличаться в зависимости от выбранной темы оформления Wordpress. Однако тег </head> (“закрывающий хед”) в нём однозначно должен присутствовать.

Разместите код конфигурации прямо перед </head>:

<script type="text/javascript" src="https://show.enquiz.io/js/quizloader.js"></script>

Нажмите кнопку “Обновить файл”.

Установка кода конфигурации в header.php

  1. Теперь в панели управления Wordpress перейдите в раздел “Страницы” и откройте для редактирования страницу, на которую нужно установить квиз.

Редактор страниц

Далее возможны два варианта установки - встроенный или диалоговый.

В настройках квиза на стороне Enquiz не забудьте выбрать нужный режим отображения - встроенный или диалоговый.

Установка для режима встроенный:

Добавьте на страницу новый блок под названием “HTML код”.

Добавление блока "HTML код"

Добавленный блок "HTML код"

Внесите в только что добавленный блок код инициализации встроенный:

<script>
(function () {
   new enquiz_ioLoader({
      quiz_hash:"opcgcou",
      type: enquiz_ioLoader.EMBEDDED,
      hash: "quiz_opcgcou"
   })
})()
</script>

Уставнока кода инициализации встроенный внутрь "HTML блока"

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

Установленный квиз в режиме встроенный

Установка для режима диалоговый:

Добавьте на страницу новый блок под названием “HTML код”.

Добавление блока "HTML код"

Внесите в только что добавленный блок код инициализации диалоговый:

<script>
(function () {
new enquiz_ioLoader({
quiz_hash:"opcgcou",
type: enquiz_ioLoader.FLOAT,
button: "YourButtonId",
hash: "quiz_opcgcou"
})
})()
</script>

Установка кода иницилизации диалоговый внутрь "HTML блока"

Теперь добавьте блок под названием “Кнопки”.

Добавление блока "Кнопки"

Впишите название для добавленной кнопки и в её панели инструментов нажмите “Ссылка”.

Добавленная кнопка

Появится всплывающее окно, в котором укажите следующий адрес:

#quiz_opcgcou

Установка адреса ссылки для кнопки

Обратите внимание - указанный адрес ссылки для кнопки (в нашем примере — это #quiz_opcgcou) и параметр hash в коде инициализации диалоговый (в нашем примере — это quiz_opcgcou) должны совпадать, за исключением начального символа решетки “#” в адресе для кнопки.

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

Установленная кнопка для открытия квиза

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

Открытый квиз в всплывающем окне