Статьи

Учебник по Ajax в WordPress Dashboard — создание основы

Март 12, 2019

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

Но прошло уже несколько лет, и теперь это практически стандарт — трудно представить, что ваше любимое веб-приложение перезагрузит всю страницу, чтобы выполнить задачу, не так ли?

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

Аякс: Суть этого

Ajax — это технология, которая обычно рассматривается как аббревиатура от «асинхронного JavaScript и XML», но на самом деле это нечто большее. Вообще говоря, Ajax — это то, что мы делаем, когда обновляем часть страницы (то есть, не обновляя всю страницу).

На высоком уровне процесс выглядит так:

  • Пользователь выполняет событие — например, щелчок мыши — на элементе на странице
  • Разработчик написал функцию, которая слушает это событие
  • Когда происходит событие, функция отправляет данные из браузера обратно на сервер
  • Затем сервер выполняет действие и / или собирает любые запрошенные данные и возвращает их в определенном формате.

Хотя раньше данные возвращались в XML, теперь более распространено возвращать JSON, фрагменты HTML или даже базовые строки.

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

К счастью, библиотеки, такие как jQuery, значительно упростили этот процесс, предоставляя уровень абстракции, который устраняет трудоемкость обработки межбраузерных несоответствий, позволяя нам сосредоточиться исключительно на асинхронной отправке и получении данных.

Поскольку WordPress поставляется с jQuery, у нас есть преимущество в том, что мы можем использовать эту библиотеку для нашей работы. Но это еще не все — хотя в WordPress можно развернуть собственную систему для функциональности Ajax, платформа на самом деле обеспечивает основу для этого очень легко.

Ajax в панели управления WordPress

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

  1. Создайте элемент, который будет использоваться для запуска Ajax-запроса.
  2. Напишите код JavaScript для обработки события при изменении состояния элемента ввода (например, нажатие, ввод и т. Д.)
  3. На стороне сервера обработайте запрос и подготовьте ответ для возврата в браузер.
  4. Еще раз, используйте JavaScript для обработки ответа соответственно

Четыре шага — вот и все. Неплохо, правда? В оставшейся части этой статьи мы рассмотрим практический пример именно этого.

Ajax Notification: пример плагина для WordPress

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

Просто? Конечно. Бессмысленно? С функциональной точки зрения, безусловно. Но мы рассмотрим много вопросов, которые могут внести непосредственный вклад в практическую работу: мы обсудим административные уведомления, одноразовые значения, WordPress Ajax API, параметры и ответы на основе JavaScript.

Планируйте плагин

Прежде чем писать какой-либо код, давайте спланируем, как плагин будет работать:

  • Когда плагин активирован, он должен создать значение параметра для хранения того, выбрал ли пользователь, чтобы скрыть сообщение
  • Когда плагин деактивирован, он должен полностью удалить опцию из базы данных
  • Уведомление может отображать простое сообщение и должно быть оформлено с помощью собственного интерфейса WordPress.
  • Там должен быть элемент, который пользователь может нажать, чтобы отклонить сообщение
  • Если пользователь решает скрыть сообщение, оно должно скрываться без обновления страницы и должно быть скрыто с этого момента

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

Эскиз интерфейса уведомлений Ajax

На этом этапе пришло время написать код.

Создайте параметры

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

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

Для этого мы зарегистрируем два хука: один для активации и один для деактивации.

Давайте определим класс и конструктор, который включает действия для этих двух методов:

1
2
3
4
5
6
7
8
9
class Ajax_Notification {
 
    function __construct() {
        register_activation_hook( __FILE__, array( &$this, ‘activate’ ) );
        register_deactivation_hook( __FILE__, array( &$this, ‘deactivate’ ) );
    }
 
}
new Ajax_Notification();

Конечно, на данный момент ничего не произойдет, поскольку мы не определили два метода. Давайте сделаем это сейчас:

1
2
3
4
5
6
7
function activate() {
    add_option( ‘hide_ajax_notification’, false );
} // end activate
 
function deactivate() {
    delete_option( ‘hide_ajax_notification’ );
} // end deactivate

Функции должны быть относительно понятными, но вот краткое объяснение того, что мы делаем:

  • activate добавляет опцию в базу данных с ключом hide_ajax_notification . Поскольку мы хотим показывать уведомление, пока пользователь не скажет иначе, мы установим для него значение false.
  • deactivate просто удаляет опцию из базы данных.

Теперь нам просто нужно сообщение для отображения.

Создать сообщение уведомления

Давайте добавим еще один хук в конструктор, который вызовет действие, которое фактически отобразит уведомление. Обновленный конструктор будет выглядеть так:

01
02
03
04
05
06
07
08
09
10
class Ajax_Notification {
 
    function __construct() {
        register_activation_hook( __FILE__, array( &$this, ‘activate’ ) );
        register_deactivation_hook( __FILE__, array( &$this, ‘deactivate’ ) );
        add_action( ‘admin_notices’, array( &$this, ‘display_admin_notice’ ) );
    }
 
}
new Ajax_Notification();

Конечно, на самом деле пока ничего не произойдет — нам нужно определить метод display_admin_notice который будет отвечать за отображение сообщения. Итак, давайте определим это сейчас:

01
02
03
04
05
06
07
08
09
10
11
12
function display_admin_notice() {
 
    $html = ‘<div id=»ajax-notification» class=»updated»>’;
        $html .= ‘<p>’;
            $html .= ‘The Ajax Notification example plugin is active.
        $html .= ‘</p>’;
        $html .= ‘<span id=»ajax-notification-nonce» class=»hidden»>’ .
    $html .= ‘</div><!— /.updated —>’;
 
    echo $html;
 
}

Выше мы создаем элемент, который будет отображать простое сообщение:

Пример плагина Ajax Notification активен. Это сообщение будет появляться до тех пор, пока вы не решите отклонить его.

Сообщение также обеспечивает привязку, которая позволит пользователям отклонить сообщение. Вот что следует отметить при импорте:

  • Атрибут href — это пустой javascript:; заявление, потому что сообщение на самом деле нигде не связывает
  • У якоря есть идентификатор, чтобы мы могли легко получить доступ к ссылке с помощью JavaScript позже в этой статье.

Конечно, вы можете ввести href для привязки в случае, если у пользователя не включен JavaScript, но эта статья посвящена Ajax, поэтому мы предполагаем, что JavaScript включен. Прогрессивное улучшение — это совсем другая тема.

Во-вторых, вы заметите, что я включил вызов wp_create_nonce . Это мера безопасности. Когда пользователь нажмет на якорь «отклонить», мы сможем подтвердить, что запрос поступает из уведомительного сообщения; в противном случае мы можем игнорировать запрос.

Метод принимает одно значение, которое используется для идентификации одноразового номера. В нашем случае это ajax-notification-nonce . Мы вернемся к этому значению, как только начнем вводить функциональность Ajax.

Вывод

К настоящему времени у вас есть полностью работающий — хотя и статический — плагин. Когда вы активируете плагин, вы должны увидеть сообщение, подобное приведенному ниже:

Уведомление Ajax установлено

В следующей статье мы представим функциональность Ajax и закончим контрольным списком того, что должны иметь все функциональные возможности Ajax на основе WordPress, но в то же время обязательно ознакомьтесь со следующими ресурсами:

42
Share: