Как создать плагин WordPress для веб-приложения

1656610825 kak sozdat plagin wordpress dlya veb prilozheniya

от Feedier от Alkalab

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

1*wXmt_4PB07yn2zG5zgNOSg
Авторы: https://unsplash.com/photos/I8OhOu-wLO4

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

  • PHP и ООП
  • JavaScript (мы будем использовать jQuery и Ajax)
  • Разработка WordPress (так как большинство функций из ядра WordPress).

Вы можете найти рабочий результат учебника в этом репозитории Github.

Эти веб-приложения могут быть любыми, например CrazyEgg, Freshbook, Google Analytics, Facebook Pixel или Feedier. Почему? Всем им нужно ввести некоторый код HTML/JavaScript на ваш сайт для разных целей.

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

Шаг 1. Найдите свою веб-приложение

Целью этого учебника является создание плагина WordPress, добавляющего страницу администратора WordPress. Кроме того, мы также добавим некоторые настройки, чтобы настроить внутренний виджет программы и автоматически ввести HTML/JS код на нашу веб-страницу. Ничего особенного, просто то, что хорошо работает.

Обратите внимание: для этого учебника нам нужно веб-приложение. Для этого примера мы будем использовать Feedier. Однако если у вас есть другая веб-приложение, которое вы хотели бы использовать в этом учебнике, сделайте это. Просто переименуйте все, что называется feedier, в название программы и адаптируйте настройки в соответствии с потребностями программы. Большинство из них предоставит вам фрагмент, который нужно добавить на свой сайт, чтобы он работал.

Вот короткий брифинг о Feedierе, если вы никогда о нем не слышали:

  • Это инструмент сбора отзывов, использующий опрос, чтобы понять ваших пользователей
  • Он очень гибок
  • Это бесплатно!
  • Имеет хороший API (здесь очень важно)
  • Имеет внутренний виджет (здесь очень важно)
  • Позволяет вознаграждать своих клиентов
  • Позволяет создавать условные вопросы
  • Имеет полную информационную панель аналитических отчетов
  • Позволяет управлять обратной связью отдельно

Вот виджет, который мы хотим добавить автоматически:

0*c2GG9QpqM6aMth9s
Предварительный просмотр виджета на woffice.io

Если вы зарегистрировались в Feedier, вы можете просто найти код на вкладке «Поделиться» вашего опроса:

0*CIKS52RyV3b0DYy9
Возьмите фрагмент из feedier.com

Шаг 2: Настройте наш плагин и его архитектуру

Плагин WordPress по своей конструкции очень прост. Нашему плагину понадобится всего два файла.

  • feedier.php: PHP-файл основного плагина
  • активы/js/admin.js: сценарий JavaScript для сохранения параметров с помощью Ajax.

Вы можете создать новый каталог feedier (или название веб-приложения) в вашем wp-content/plugins/ папку.

0*_n_Hxi7MHCqjzoO9

Важнейшим файлом будет файл плагина feedier.php класс. Вот его структура:

Здесь мы делаем несколько вещей:

  • Объявление нашего плагина с помощью комментариев заголовка
  • Определение нескольких удобных констант для легкого нахождения URL-адреса и PATH плагина
  • Объявляем наш класс плагина, который будет содержать все, что нам нужно в этом плагине. Пока нам просто нужен метод конструктора.

Вы уже должны увидеть плагин на своей странице плагинов, даже если он еще ничего не делает:

0*9zBfprPe_aLld2TY
Активируйте плагин с панели администратора WordPress

Шаг 3. Создайте страницу администратора

Для этой части мы добавим новую страницу администратора Feedier на наш сайт WordPress и будем динамично получать наши опросы с API Feedier.

В конструкторе нашего класса давайте зарегистрируем три новых действия, необходимых для добавления страницы администратора на WordPress:

  • addAdminMenu добавить новую страницу в левое меню WordPress. Будет также обратный вызов другому методу, содержащему содержимое страницы.
  • storeAdminData будет вызвано каждый раз, когда пользователь нажмет кнопку «Сохранить настройки».
  • addAdminScripts зарегистрирует новый файл JavaScript для нашего администратора WordPress, чтобы сохранить данные формы. Но он также обменивается некоторыми переменными между сторонами PHP и JavaScript.

Первый шаг очень легок. Мы просто регистрируем страницу, например:

Как видите, мы используем функции локализации WordPress для все струны. Заметьте, что

array($this, ‘adminLayout’)

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

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

В начале этого метода вы можете увидеть, что мы сначала получаем сохраненные данные с помощью:

$data = $this->getData();

И получить опрос с Feedier API:

$surveys = $this->getSurveys($data[‘private_key’]);

Итак, объявим первое:

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

Чтобы второй метод работал, нам нужен закрытый ключ Feedier. Это зависит от того, кто первым получит доступ к этому ключу, сохраненному в опции:

API Feedier задокументирован здесь, поэтому вы можете увидеть, что вы получите в ответе.

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

0*B9v_zAYSu7-4pa-u

Весьма хорошо, давайте сохраним наши данные!

Как уже упоминалось ранее, мы сохраним наши данные с помощью AJAX. Поэтому нам нужно зарегистрировать новый JavaScript и обменяться данными с помощью функции wp_localize_script():

Нам также нужно добавить новый файл /assets/js/admin.js. Это просто сделает вызов Ajax, и WordPress автоматически направит запрос правильно к нужному методу (уже сделано в конструкторе). Вы можете прочитать больше о том, как WordPress разумно обрабатывает запросы AJAX здесь.

В этот момент мы можем нажать кнопку сохранить, и приведенный выше сценарий сделает запрос HTTP POST к WordPress. Мы также добавляем параметр действия, содержащий: store_admin_data (что мы объявили в начале в этой части конструктора):

add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );

Метод storeAdminData получит запрос POST и сохранит нужные нам значения в нашей опции WordPress.

Несколько примечаний по вышеуказанному методу:

  • Мы используем «одноразовую запись WordPress» для обработки безопасности и убедитесь, что это поступает с веб-сайта, а не хакером, подрабатывающим запрос.
  • Мы определяем поля, которые нам нужно сохранить, используя префикс feedier_. После получения мы перебираем все данные $_POST и сохраняем только эти поля. Мы также удаляем префикс перед сохранением каждого поля.

Вот и все для процесса сохранения. Когда мы нажимаем кнопку «Сохранить», мы видим, что запрос POST и наши данные хранятся в базе данных в пределах wp_options стол.

0*uTVECizHs2jERzSM

Прекрасно, мы закончили со страницей администратора.

Шаг 4: автоматически вставьте динамический код на наши страницы

Теперь, когда сохранены наши параметры, мы можем создать динамический виджет, который будет зависеть от параметров, установленных пользователем через нашу страницу администратора. Мы уже знаем, чего от нас ожидает веб-приложение.

Что-то вроде:

<div class=”feedier-widget” data-type=”engager” data-position=”right” data-carrier-id=”x” data-key=”xxxxxxxxxxxxxxxxx”></div>
<! — Include this line only one time, also if you have multiple widgets on the current page →
<script src=” type=”text/javascript” async></script>

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

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

Это!

Есть вопросы, отзывы или идеи? Дайте мне знать в комментариях!

Вы можете найти рабочую версию этого учебника в этом репозитории Github.

2Fwebd/feedier-wordpress-plugin
Внесите свой вклад в разработку плагина feedier-wordpress, создав аккаунт на GitHub.pxlme.me

Обратите внимание, что это первая версия плагина, и многие вещи можно улучшить. Я открыт для предложений и улучшений. ?

Мы создаем Feedier. Собирать отзывы и строить отношения со своими клиентами становится несложно!

Feedier – обратная связь следующего поколения
Встречайте Feedier, программное обеспечение для отзывов клиентов следующего поколения, позволяющее собирать ценные отзывы. Награждайте, занимайтесь…feedier.com

Убежден? Подпишитесь на бесплатно на feedier.com?

1*euK96ycNbjw9yVMXgflmLg
Feedier.com, следующее поколение обратная связь приложение. Начните бесплатно сейчас!

Не забудьте аплодировать нашей статье и подписаться, чтобы получать больше удивительных статей, если она вам понравилась? Вы также можете найти нас в Twitter.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *