Cedior by alkalab
Сегодня мы увидим, как создать очень простой плагин WordPress для любого веб-приложения, который необходимо вставить кусок кода на ваш сайт.
Чтобы следить за этим учебником, вам нужно несколько знаний об этих основах:
- PHP и ооп
- JavaScript (Мы будем использовать jQuery и ajax)
- Развитие WordPress (Поскольку большинство функций из ядра WordPress).
Вы можете найти рабочий результат этого учебника на Этот репозиторий Github Отказ
Эти веб-приложения могут быть чем угодно, как Crazyegg , Freshbook , Google Analytics , Facebook пиксель или Cedire Отказ Почему? Все они должны вводить код HTML/JavaScript на ваш сайт для различных целей.
Этот «код» всегда параметризован переменными и обычно является болью для владельца сайта. Это потому, что вам нужно редактировать шаблоны темы. Итак, как насчет мы создать плагин, чтобы сделать это для нас? Хорошо, давайте сделаем это!
Шаг 1: Найдите свое веб-приложение
Целью данного руководства является создание плагина WordPress, который добавляет администратор WordPress. Кроме того, мы также добавим некоторые настройки, чтобы настроить виджет на сайт приложения и ввести код HTML/JS на нашей веб-странице автоматически. Ничто не нравится, просто то, что работает нормально.
Обратите внимание: нам нужна веб-приложение для этого руководства. Мы будем использовать Cedire Для этого примера. Однако, если у вас есть другое веб-приложение, которое вы хотели бы использовать в этом руководстве, пожалуйста, сделайте. Просто переименуйте что-нибудь названное «Cedyer» с именем вашего приложения и адаптируйте настройки к тому, что нужно приложению. Большинство из них даст вам фрагмент, чтобы добавить на свой сайт, чтобы сделать его работать.
Вот быстрый брифинг Cedire Если вы никогда не слышали об этом:
- Это инструмент для обратной связи, использующий опросы, чтобы понять ваших пользователей
- Это очень гибкий
- Это бесплатно!
- У хорошего API (очень важно здесь)
- Имеет виджет на месте (очень важно здесь)
- Позволяет наградить ваших клиентов
- Позволяет создавать условные вопросы
- Имеет полную аналитическую приборную панель
- Позволяет вам управлять обратной связью индивидуально
Вот виджет, который мы хотим добавить автоматически:
Если вы подписались на Cediver, вы можете просто найти код на вкладке «Обол вашего опроса»:
Шаг 2: Настройка нашего плагина и его архитектура
Плагин WordPress по дизайну очень просто. Наш плагин понадобится только два файла.
- Cedierier.php : Главный PHP-файл плагина.
- Активы/js/admin.js : JavaScript Script для сохранения параметров с использованием AJAX.
Вы можете создать новый каталог «Cediver» (или имя вашего веб-приложения) в вашем WP-Content/Plugins/ папка.
Самый важный файл будет плагином Cedierier.php класс. Вот его структура:
Мы делаем здесь несколько вещей:
- Объявление нашего плагина с помощью комментариев заголовка
- Определение нескольких удобных констант, чтобы иметь возможность легко найти URL-адрес плагина и путь
- Объявление нашего класса плагинов, который будет содержать все, что нам нужно в этом плагине. Нам просто нужен метод конструктора.
Вы уже должны видеть плагин на странице плагинов, даже если это еще ничего не делает:
Шаг 3: Создайте нашу страницу администратора
Для этой части мы добавим новую страницу администратора Cediers на наш сайт WordPress и динамически извлеките наши опросы из API Cychnier.
В нашем классе конструктор, давайте зарегистрируем три новых действия, которые необходимы для добавления администратора на WordPress:
- Addadminmenu Добавлю новую страницу в меню «Влево WordPress». Также будет обратный вызов другому способу, содержащему контент страницы.
- Storeadmindata Будут вызваться всякий раз, когда пользователь нажимает кнопку «Сохранить настройки».
- Addadminscripts Зарегистрируйте новый файл JavaScript для нашего администратора WordPress, чтобы сохранить данные формы. Но он также обменивается некоторыми переменными между стороной PHP и стороной JavaScript.
Первый шаг очень прост. Мы просто зарегистрироваем страницу, как это:
Как вы можете видеть, мы используем Функции локализации WordPress для все строки. Обратите внимание, что то
array($this, 'adminLayout')
Где мы называем еще один метод, содержащий контент страницы. Форма должна быть адаптирована к вашему веб-приложению.
Здесь нам сначала нужно получить публичные и частные ключи API. После сохранения мы собираемся использовать закрытый ключ для динамического извлечения наших опросов. Всякий раз, когда мы получаем обследования, а не ошибка API, мы отображаем некоторые новые параметры для настройки виджета.
В начале этого метода вы можете увидеть, что мы сначала получаем сохраненные данные с:
$data = $this->getData();
И получение опросов из API Cedierier:
$surveys = $this->getSurveys($data['private_key']);
Так что давайте объявляем первым:
Эта функция просто читает опцию нашего плагина и дает нам массив обратно, чтобы мы могли сохранить несколько значений в той же опции.
Чтобы получить второй метод, работаем, нам нужен личный ключ Cediver. Это зависит от первого для доступа к этому ключу, сохраненным в варианте:
API Cedierier документирован здесь Таким образом, вы можете увидеть, что вы получите в ответ.
В этот момент у нас есть полная новая администратор. Но ничего не происходит, когда мы нажимаем на кнопку Сохранить, потому что нет механизма экономии – И все же Отказ
Достаточно хорош, давайте сохраним наши данные!
Как уже упоминалось, мы сохраним наши данные, используя AJAX. Следовательно, нам необходимо зарегистрировать новый файл JavaScript и обмен данными, используя wg_localize_script () Функция:
Нам также нужно добавить новый файл /assets/js/admin.js. . Это просто сделает вызов AJAX, и WordPress автоматически будет автоматически направить запрос правильному способу (уже сделано в конструкторе). Вы можете узнать больше о том, как WordPress Smarty обрабатывает запросы AJAX здесь Отказ
В этот самый момент мы можем нажать кнопку Сохранить, а вышеуказанный скрипт сделает запрос HTTP POST на WordPress. Мы также добавляем параметр действия, содержащий: Store_admin_data (который мы объявили в начале с этой стороны в конструкторе):
add_action( 'wp_ajax_store_admin_data', array( $this, 'storeAdminData' ) );
Метод Storeadmindata Получите запрос на сообщения и сохранить значения, которые нам нужны в нашей опции WordPress.
Несколько замечаний по вышеуказанному способу:
- Мы используем «WordPress Nonce», чтобы справиться с безопасностью и убедиться, что это идет с сайта, а не хакера, не подставляя запрос.
- Мы определяем поля, которые нам нужно для сохранения, используя префикс «Cedier_». После получения, мы проходим все данные $ _Post и сохраняйте только эти поля. Мы также удаляем префикс перед сохранением каждого поля.
Это это для сохранения процесса. Когда мы нажимаем сохранение, мы можем увидеть запрос на почту и наши данные, сохраняемые в базе данных в рамках wp_options стол.
Идеально, мы сделаем с помощью страницы администратора.
Шаг 4: Вставьте динамический код автоматически на наши страницы
Теперь, когда у нас сохранены наши опции, мы можем создать динамический виджет, который будет зависеть от параметров, установленных пользователем, хотя наша администратор. Мы уже знаем, что ожидает от нас веб-приложение.
Что-то вроде:
Таким образом, первое, что мы хотим сделать, это создать новый метод нашему плагину, который будет распечатать этот код в зависимости от переменных, установленных пользователем. Так, Используя архитектуру, которую мы уже настроили в последней части:
Теперь нам просто нужно называть эту функцию на каждой нагрузке страницы, чтобы добавить его в нижнюю часть страницы. Для этого мы подключим наш метод wp_footer действие. Регистрируя новое действие в наш класс «Конструктор:
Вот и все!
Есть вопросы, обратная связь или идеи? Дай мне знать в комментариях!
Вы можете найти рабочую версию этого урока на Этот репозиторий Github Отказ
2FWebd/Cediver-WordPress-Plugin Способствуйте разработку Peryer-WordPress-Plugin, создавая учетную запись на GitHub. pxlme.me
Обратите внимание, что это первая версия плагина, и многие вещи могут быть улучшены. Я открыт для предложений и улучшений. ?
Мы строим Cedire Отказ Это становится неотраслевым для сбора обратной связи и строить отношения с вашими клиентами!
Cediver – обратная связь следующего поколения Познакомьтесь с Cediver, программное обеспечение для клиентов следующего поколения, которое позволяет собирать ценную обратную связь. Награда, участвовать … feedier.com
Убежденный? Подпишитесь на Бесплатно на Feedier.com ?
Не забудьте хлопать нашу статью и Подписаться Чтобы получить более удивительные статьи, если вам понравилось? Вы также можете найти нас на T Увеличение
Эта статья была первоначально опубликована на наших Блог здесь.
Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-wordpress-plugin-for-your-web-app-5c31733f3a9d/”