Создание WordPress-плагина для отправки SMS-сообщений / Хабр

Привет, Habr! Меня зовут Анастасия Иванова, я технический писатель МТС Exolve. В этой статье я расскажу, как создать свой WordPress-плагин для отправки SMS-сообщений. Кроме сайта, вам потребуется Exolve SMS API.

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

Итак, пользователи согласны получать ваши сообщения, рассылки готовы… Начнём! Все подробности — под катом!

SMS-плагин для WordPress помогает интегрировать SMS-сообщения в ваш сайт на WordPress. В нём много функций и возможностей для улучшения взаимодействия с пользователями и повышения эффективности коммуникации.

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

Что нам понадобится

Аккаунт разработчика в MTC Exolve.
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.

Создание WordPress-плагина для отправки SMS-сообщений