Сегодня мы увидим, как создать очень простой плагин WordPress для любого веб-приложения, которому необходимо вставить фрагмент кода на ваш сайт.
Чтобы следовать этому руководству, вам потребуются некоторые знания об этих основах:
- 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 (здесь очень важно)
- Имеет виджет на сайте (здесь очень важно)
- Позволяет вознаградить ваших клиентов
- Позволяет создавать условные вопросы
- Имеет полную панель аналитических отчетов
- Позволяет управлять отзывами индивидуально
Вот виджет, который мы хотим добавить автоматически:
Если вы подписались на Feedier, вы можете просто найти код на вкладке «Поделиться» своего опроса:
Шаг 2. Настройте наш плагин и его архитектуру.
Плагин WordPress по своей конструкции очень прост. Нашему плагину потребуется всего два файла.
- feedier.php: файл PHP основного плагина.
- assets / js / admin.js: сценарий JavaScript для сохранения параметров с помощью Ajax.
Вы можете создать новый каталог «feedier» (или имя вашего веб-приложения) в папке wp-content / plugins /.
Самым важным файлом будет класс подключаемого модуля feedier.php. Вот его структура:
Здесь мы делаем несколько вещей:
- Объявление нашего плагина с помощью комментариев заголовка
- Определение нескольких удобных констант, позволяющих легко находить URL и PATH плагина.
- Объявление нашего класса плагина, который будет содержать все, что нам нужно в этом плагине. На данный момент нам просто нужен метод-конструктор.
Вы уже должны увидеть плагин на своей странице плагинов, даже если он еще ничего не делает:
Шаг 3. Создайте нашу страницу администратора
В этой части мы добавим новую страницу администратора Feedier на наш сайт WordPress и будем динамически извлекать наши опросы из Feedier API.
В конструкторе нашего класса зарегистрируем три новых действия, которые необходимы для добавления страницы администратора в 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 задокументирован здесь, поэтому вы можете видеть, что вы получите в ответ.
На данный момент у нас есть полностью новая страница администратора. Но при нажатии на кнопку сохранения ничего не происходит, потому что механизма сохранения нет - пока.
Хорошо, давайте сохраним наши данные!
Как упоминалось ранее, мы будем сохранять наши данные с помощью 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.
Отлично, мы закончили со страницей администратора.
Шаг 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=”https://feedier.com/js/widgets/widgets.min.js" type=”text/javascript” async></script>
Таким образом, первое, что мы хотим сделать, это создать новый метод для нашего плагина, который будет печатать этот код в зависимости от переменных, установленных пользователем. Итак, используя архитектуру, которую мы уже создали в предыдущей части:
Теперь нам просто нужно вызывать эту функцию при каждой загрузке страницы, чтобы добавить ее внизу страницы. Для этого мы подключим наш метод к действию wp_footer. Регистрируя новое действие в конструкторе нашего класса:
Вот и все!
Есть вопросы, отзывы или идеи? Дай мне знать в комментариях!
Вы можете найти рабочую версию этого руководства в этом репозитории Github.
Обратите внимание, что это первая версия плагина, и многое можно улучшить. Я открыт для предложений и улучшений. 😎
Мы строим Feedier. Сбор отзывов и построение отношений с клиентами становится легкой задачей!
Убежденный? Зарегистрируйтесь бесплатно на feedier.com 😎
Не забудьте аплодировать нашей статье и подписаться, чтобы получать больше интересных статей, если она вам понравилась👏. Вы также можете найти нас в Твиттере.
Эта статья изначально была опубликована в нашем блоге здесь.
