Привет, Habr! Меня зовут Анастасия Иванова, я технический писатель МТС Exolve. В этой статье я расскажу, как создать свой WordPress-плагин для отправки SMS-сообщений. Кроме сайта, вам потребуется Exolve SMS API.
Сразу скажу: мы считаем, что пользователя обязательно нужно спрашивать, согласен ли он получать SMS. Иначе можно заслуженно получить негативный фидбек и падение лояльности клиентов.
Итак, пользователи согласны получать ваши сообщения, рассылки готовы… Начнём! Все подробности — под катом!
SMS-плагин для WordPress помогает интегрировать SMS-сообщения в ваш сайт на WordPress. В нём много функций и возможностей для улучшения взаимодействия с пользователями и повышения эффективности коммуникации.
Вы можете настроить автоматическую отправку SMS-уведомлений о разных событиях на вашем сайте. Например, о новой регистрации пользователя, получении комментария или выполнении заказа. Это поможет вам и вашим пользователям быть в курсе актуальной информации.
Что нам понадобится
-
API-ключ приложения в аккаунте разработчика. Инструкции о том, как создать приложение и найти его API-ключ, вы можете найти в статьях «Создание приложения» и «API-ключ приложения».
-
Номер Exolve для отправки SMS-сообщений. Инструкцию о том, как купить номер, вы можете найти в статье «Покупка номера».
-
Сайт на WordPress.
Создание WordPress-плагина
Если у вас нет WordPress, вы можете скачать его и установить на свой хостинг или локально с помощью дополнительного программного обеспечения. Например, я использовала сервис Local для установки WordPress на localhost моего компьютера. После установки я получила адрес своего нового локального сайта: http://sms-wordpress.local.
Установили и зашли? Супер! Теперь войдите в админ-панель своего WordPress-сайта. По умолчанию она расположена по адресу http://your-domain/wp-admin, где your-domain — адрес вашего сайта на хостинге или локально. В моём случае она находится по адресу http://sms-wordpress.local/wp-admin.
Теперь можно создавать плагин. В нашем случае это PHP-файл с комментарием в заголовке. Заголовок файла считывается при загрузке страницы, и все его функции внедряются в WordPress-приложение. В нашем плагине будет несколько PHP-файлов, их можно поместить в отдельную папку для удобства.
Перейдите в каталог вашего WordPress-сайта, откройте папку wp-content → plugins и создайте папку для файлов плагина, например sms-exolve.
Затем откройте новую папку и создайте в ней основной файл плагина с именем sms-exolve.php.
Далее нужно добавить комментарий к заголовку плагина. Откройте файл sms-exolve.php и добавьте следующий комментарий к заголовку:
<?php /* Plugin Name: SMS Plugin URI: http://sms-wordpress.local/ Description: Плагин для отправки SMS сообщений с помощью Exolve Version: 1.0.0 Author: Anastasia Ivanova */Этот заголовок описывает плагин, который мы создаём, с указанием метаданных: название, автор и описание и так далее.
Теперь плагин должен быть доступен в WordPress. Откройте вкладку Plugins в левой панели. Вы должны увидеть новый плагин SMS. Нажмите на кнопку Activate и активируйте плагин:
Создание страницы настроек плагина
Создадим страницу настроек плагина, где мы будем хранить учётные данные для отправки SMS-сообщений (API-ключ и номер Exolve). Страница будет располагаться во вкладке Settings в панели администратора и выглядеть вот так:
Откройте файл sms-exolve.php. Создайте новый класс для нашего плагина под названием sms:
class Sms { public $pluginName = "sms"; }Создайте файл с именем sms-settings-page.php. Этот файл отобразит HTML-код страницы настроек плагина. Откройте созданный файл и добавьте следующий код:
<form method="POST" action='options.php'> <?php settings_fields($this->pluginName); do_settings_sections('sms-settings-page'); submit_button("Сохранить"); ?> </form>В коде выше мы использовали следующие WordPress-функции:
-
settings_fields — выводит поля формы на странице настроек
-
do_settings_sections — выводит все блоки опций, относящиеся к указанной странице настроек в панели администратора
-
submit_button — выводит кнопку submit с указанным текстом и классами
Далее нам нужно включить только что созданную страницу в основной файл. Это нужно, чтобы плагин мог отображать её при вызове. Добавьте в класс sms в файле sms-exolve.php функцию, которая будет отображать HTML-код страницы настроек:
/** Функция отображения страницы настроек */ public function displaySmsSettingsPage() { include_once "sms-settings-page.php"; }Нам понадобится страница параметров для вызова функции displaySmsSettingsPage. Добавьте следующую функцию в класс sms, чтобы вызвать страницу параметров:
public function addSmsOption() { add_options_page( "SMS EXOLVE PAGE", // $page_title "SMS EXOLVE", // $menu_title "manage_options", // $capability $this->pluginName, // $menu_slug [$this, "displaySmsSettingsPage"] // $function ); }В коде выше мы использовали WordPress-функцию add_options_page, которая добавляет дочернюю страницу (подменю) во вкладку Settings в панели администратора. Функция принимает пять параметров:
-
$page_title — текст для использования в теге title на странице настроек
-
$menu_title — текст для использования в качестве названия для пункта меню
-
$capability — название права доступа для пользователя, чтобы ему был показан этот пункт меню. Список возможных прав доступа вы можете найти в WordPress-документации Roles and Capabilities
-
$menu_slug — идентификатор меню, ссылка на страницу плагина
-
$function — название функции, которая отвечает за код страницы этого пункта меню
Создайте функцию smsSettingsSave(), которая будет регистрировать параметры и поля для хранения учётных данных (API-ключ и номер Exolve) в базе данных. Добавьте следующий код в класс sms в файле sms-exolve.php:
/** Поля для API-ключа и номера */ public function smsSettingsSave() { register_setting( $this->pluginName, $this->pluginName, [$this, "pluginOptionsValidate"] ); add_settings_section( "sms_main", "Настройки", [$this, "smsSectionText"], "sms-settings-page" ); add_settings_field( "exolve_number", "Номер Exolve", [$this, "smsSettingNumber"], "sms-settings-page", "sms_main" ); add_settings_field( "api_key", "API-ключ", [$this, "smsSettingKey"], "sms-settings-page", "sms_main" ); } /** Подзаголовок страницы настроек*/ public function smsSectionText() { echo '<h2">Введите номер Exolve и API-ключ</h2>'; } /** Поле для номера Exolve*/ public function smsSettingNumber() { $options = get_option($this->pluginName); echo " <input id='$this->pluginName[exolve_number]' name='$this->pluginName[exolve_number]' size='40' type='text' value='{$options['exolve_number']}' placeholder='Введите номер Exolve' /> "; } /** Поле для API-ключа */ public function smsSettingKey() { $options = get_option($this->pluginName); echo " <input id='$this->pluginName[api_key]' name='$this->pluginName[api_key]' size='40' type='text' value='{$options['api_key']}' placeholder='Введите API-ключ приложения' /> "; } /** Очистить поля для ввода*/ public function pluginOptionsValidate($input) { $newinput["exolve_number"] = trim($input["exolve_number"]); $newinput["api_key"] = trim($input["api_key"]); return $newinput; }Метод smsSettingsSave включает в себя три WordPress-функции:
-
register_setting — регистрирует новую опцию и callback-функцию для обработки значения опции при её сохранении в базу данных
-
add_settings_section — создаёт новый блок (секцию), в котором выводятся поля настроек
-
add_settings_field — создаёт поле опции для указанного блока (секции)
Теперь подключим функции к WordPress. Откройте файл sms-exolve.php и добавьте следующий код после объявления класса sms:
/** Новый инстанс */ $smsInstance = new Sms(); /** Добавление страницы настроек в админ меню */ add_action("admin_menu", [$smsInstance , "addSmsOption"]); /**Сохранение настроек */ add_action("admin_init", [$smsInstance , 'smsSettingsSave']);В коде выше мы использовали WordPress-функцию add_action, которая позволяет прикрепить указанную PHP-функцию на указанный хук.
Теперь можно открыть страницу настроек плагина и сохранить учётные данные. Откройте вкладку Settings → SMS EXOLVE, введите номер телефона Exolve и API-ключ и нажмите на кнопку «Сохранить»:
Создание страницы отправки SMS-сообщения
Создадим страницу с формой для отправки SMS-сообщений. Страница расположена во вкладке Tools в панели администратора и выглядит вот так:
Создайте новый файл sms-sending-page.php. Добавьте к нему следующую HTML-разметку:
<h2> <?php esc_attr_e( 'Отправка SMS-сообщения через Exolve', 'WpAdminStyle' ); ?></h2> <div class="wrap"> <div class="metabox-holder columns-2"> <div class="meta-box-sortables ui-sortable"> <div class="postbox"> <h2 class="hndle"> <span> <?php esc_attr_e( 'Отправка SMS', 'WpAdminStyle' ); ?></span> </h2> <div class="inside"> <form method="post" name="cleanup_options" action=""> <input type="text" name="number" class="regular-text" placeholder="7999XXXXXXX" required /><br><br> <textarea name="message" cols="50" rows="7" placeholder="Сообщение"></textarea><br><br> <input class="button-primary" type="submit" value="Отправить" name="send_sms_message" /> </form> </div> </div> </div> </div> </div>Теперь добавьте следующий код в класс sms в файле sms-exolve.php:
/** Отображение страницы отправки SMS-сообщения */ public function displaySendingSmsPage() { include_once "sms-sending-page.php"; } /** Функция добавления страницы отправки SMS-сообщения */ public function addSendingSmsPage() { add_submenu_page( "tools.php", // добавляем страницу в меню tools __("SENDING SMS PAGE", $this->pluginName . "-sms"), // заголовок страницы __("SENDING SMS", $this->pluginName . "-sms"), // заголовок в меню "manage_options", $this->pluginName . "-sms", [$this, "displaySendingSmsPage"] // вызов функции отображения страницы ); }В коде выше мы использовали WordPress-функцию add_submenu_page, которая добавляет дочернюю страницу (подраздел) в указанную вкладку в панели администратора. Мы добавили страницу для отправки SMS-сообщений во вкладку Tools.
Функция displaySendingSmsPage добавляет HTML-форму из файла sms-sending-page.php в основной файл. Чтобы функция работала, её нужно подключить к WordPress-действию admin_menu. Для этого добавьте следующие строки в конце кода вне класса sms:
/** Добавление страницы отправки SMS-сообщения */ add_action("admin_menu", [$smsInstance , "addSendingSmsPage"]);Перезагрузите панель администратора WordPress, откройте вкладку Tools → SENDING SMS и вы увидите только что созданную форму для отправки SMS-сообщений.
Отправка SMS-сообщений
Добавьте функцию отправки SMS-сообщения через Exolve API в класс sms в файле sms-exolve.php:
/** Функция отправки SMS-сообщения */ public function send_message() { // POST запрос из формы с номером получателя SMS и текстом сообщения if (!isset($_POST["send_sms_message"])) { return; } $to = (isset($_POST["number"])) ? $_POST["number"] : ""; $message = (isset($_POST["message"])) ? $_POST["message"] : ""; // получение номера Exolve и API-ключа из базы $sms_settings = get_option($this->pluginName); if (is_array($sms_settings) and count($sms_settings) != 0) { $EXOLVE_NUMBER = $sms_settings["exolve_number"]; $EXOLVE_KEY = $sms_settings["api_key"]; } // отправка HTTP POST запроса в Exolve API $url = "https://api.exolve.ru/messaging/v1/SendSMS"; $curl = curl_init($url); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_POST, true); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $headers = array( "Accept: application/json", "Authorization: Bearer $EXOLVE_KEY", "Content-Type: application/json", ); curl_setopt($curl, CURLOPT_HTTPHEADER, $headers); $data = <<<DATA { "number":"$EXOLVE_NUMBER", "destination":"$to", "text":"$message" } DATA; curl_setopt($curl, CURLOPT_POSTFIELDS, $data); $resp = curl_exec($curl); curl_close($curl); $decoded_resp = json_decode($resp, true); if (array_key_exists("message_id", $decoded_resp)) { self::DisplaySuccess(); } else { $error = $decoded_resp["error"]["message"]; self::DisplayError("Ошибка отправки SMS-сообщения: $error"); } }В коде выше мы используем WordPress-функцию get_option, чтобы получить из базы данных API-ключ и номер Exolve, которые мы задали на странице настроек плагина ранее.
После мы используем cURL, чтобы отправить HTTP POST-запрос в Exolve на отправку SMS-сообщения на номер получателя и текстом сообщения из формы.
Если в ответе от Exolve мы получаем message_id, значит, сообщение успешно отправлено, и мы показываем сообщение об успешной отправке. Если получаем error, выводим ошибку отправки.
Теперь добавьте функции для показа сообщений об успешной или неуспешной отправке SMS в sms-класс:
/** Дизайн админ уведомлений (успешная/неуспешная отправка) */ public static function adminNotice($message, $status = true) { $class = ($status) ? "notice notice-success" : "notice notice-error"; $message = __( $message, "sample-text-domain" ); printf( '<div class="%1$s"><p>%2$s</p></div>', esc_attr( $class ), esc_html( $message ) ); } /** Ошибка при отправке SMS-сообщения */ public static function DisplayError($message = "Ошибка отправки SMS-сообщения") { add_action( 'admin_notices', function() use($message) { self::adminNotice($message, false); }); } /** SMS-сообщения успешно отправлено*/ public static function DisplaySuccess($message = "SMS-сообщение успешно отправлено!") { add_action( 'admin_notices', function() use($message) { self::adminNotice($message, true); }); }-
Функция admin_notice выводит HTML с сообщением об ошибке или успешной отправке.
-
Функция DisplayError вызывает admin_notice для отображения сообщения об ошибке.
-
Функция DisplaySuccess вызывает admin_notice для отображения сообщения об успешной отправке.
Наконец, подключим функцию отправки SMS-сообщений к WordPress. Для этого добавьте следующие строки в конце кода вне класса sms:
/** Запуск функции отправки SMS-сообщения */ add_action( 'admin_init', [$smsInstance , "send_message"] );Проверка
Перейдите во вкладку Tools → SENDING SMS, введите номер получателя и текст сообщения и нажмите на кнопку отправить. Если сообщение не было отправлено, вы увидите текст ошибки отправки:
Если сообщение успешно отправлено, вы увидите соответствующее сообщение:
Сообщение должно быть успешно доставлено на номер получателя:
Так мы создали свой WordPress-плагин для отправки SMS-сообщений через сервис Exolve SMS API. Полный код плагина вы можете найти на Github.
ссылка на оригинал статьи https://habr.com/ru/articles/796921/
Добавить комментарий