Если вы только сейчас догоняете эту конкретную серию, мы находимся в процессе создания нашей собственной системы обмена сообщениями, которая подключается к WordPress, что позволяет нам воспользоваться некоторыми из существующих API, но также позволяет нам немного больше контроль.
Из предыдущего урока:
Но так же, как мы рассмотрели, как создавать пользовательские страницы администрирования, также можно реализовать систему, которая позволяет нам программно устанавливать собственные настраиваемые сообщения, их тип, а также когда и где отображать их на странице администрирования.
Хотя читать серию, предшествующую этой, не обязательно , я настоятельно рекомендую прочитать предыдущую инструкцию . Каждый из них основывается на предыдущем уроке (и мы продолжим делать это до конца этой серии).
С учетом сказанного, вся цель этой серии — дать представление о том, как мы можем использовать API WordPress и объектно-ориентированное программирование для создания настраиваемой системы обмена сообщениями, которую мы можем использовать на протяжении всей работы, которую мы можем выполнять для клиента.
Но прежде чем мы начнем, есть несколько предварительных условий, которые вы должны иметь на месте.
Прежде чем начать
- Прочитайте предыдущую статью.
- Установите PHP 5.6.25 и MySQL 5.6.28.
- Установите Apache или Nginx.
- Настройте WordPress 4.6.1.
- Имейте свою любимую IDE или редактор наготове.
Если вы ищете решение «все в одном», посмотрите MAMP и, если вас интересует, как все это сочетается друг с другом, просмотрите эти статьи .
Наша дорожная карта
Если вы не читали предыдущий учебник , мы разработали план действий для этого учебника:
- В этом уроке мы собираемся заложить основы минимума нашего плагина и того, что нам нужно для начала.
- Во второй части мы пойдем дальше, добавив очень простую страницу администрирования WordPress. Мы также будем вызывать пользовательский хук, который будем использовать, и подключим его на стороне сервера. Мы также начнем работу над нашим мессенджером настроек.
- В этом уроке мы начнем реализовывать наш Messenger с настройками, добавив поддержку сообщений об ошибках и успешных сообщениях, а также расскажем о некоторых вопросах безопасности.
- В конце мы свяжем все вместе, увидим это в действии и сделаем финальный плагин общедоступным для загрузки.
Очевидно, мы достигли номер один. Таким образом, в этом руководстве мы сосредоточимся на добавлении базовой страницы администрирования и настройке настраиваемого хука, который позволит нам использовать преимущества нашего собственного мессенджера.
Возвращаясь к работе
Со всем этим, давайте вернемся к разработке. Напомним, что на данный момент у нас должна быть настроена основа этого плагина, чтобы мы могли активировать его и перейти к настройкам, а затем к Tuts + Custom Message Example, чтобы увидеть общую страницу администрирования.
Если вы следили за этим до сих пор, код для страницы очень прост (и мы увидим его чуть позже в руководстве):
|
1
2
3
4
5
6
7
8
9
|
<div class=»wrap»>
<h1><?php echo esc_html( get_admin_page_title() );
<p class=»description»>
We aren’t actually going to display options on this page.
to use this page to demonstration how to hook into our custom messenger.
</p><!— .description —>
</div><!— .wrap —>
|
Я повторяю это, потому что именно здесь мы собираемся начать реализацию нашего собственного мессенджера.
Для этого нам нужно ввести следующее:
- крючок, который мы определяем
- функция, которая зарегистрирована с этим хуком
- отображать что-то, когда эта функция срабатывает
Определение пользовательского крючка
Определение пользовательского хука звучит гораздо страшнее, чем есть на самом деле. Большинство из нас знакомы с вызовами add_action и add_filter , но как мы можем использовать эти функции для вызова наших собственных хуков?
Легко: мы используем do_action и определяем наше действие, которое мы зарегистрируем в WordPress. Например, возьмем приведенный выше код и чуть ниже тега h1 сделаем следующее:
|
01
02
03
04
05
06
07
08
09
10
|
<div class=»wrap»>
<h1><?php echo esc_html( get_admin_page_title() );
<?php do_action( ‘tutsplus_settings_messages’ );
<p class=»description»>
We aren’t actually going to display options on this page.
to use this page to demonstration how to hook into our custom messenger.
</p><!— .description —>
</div><!— .wrap —>
|
Неплохо, правда? Теперь нам нужно зарегистрировать функцию, которая будет запускаться всякий раз, когда вызывается этот хук. Прежде чем мы сделаем это, я хочу убедиться, что мы все на одной странице с тем, что действительно делает do_action .
Вот что сказано в документе разработчика о do_action :
Эта функция вызывает все функции, прикрепленные к
$tagдействия$tag. Можно создать новые хуки действий, просто вызвав эту функцию, указав имя нового хука с помощью параметра$tag.
Если определение неясно, возможно, его реализация поможет. Итак, давайте посмотрим на это сейчас.
2. Зарегистрируйте функцию
Как и в случае с любым другим типом функции, нам нужно зарегистрировать функцию, которая будет tutsplus_settings_messages всякий раз, когда tutsplus_settings_messages наш хук tutsplus_settings_messages . Но поскольку мы работаем с объектно-ориентированным программированием, нам нужно разработать класс, который определяет эту функцию.
И именно здесь наш мессенджер пользовательских настроек впервые вступит в игру. Конечно, мы не будем выполнять большую работу с точки зрения добавления пользовательских сообщений, но мы будем использовать наш пользовательский хук, и мы будем что- то отображать на странице.
Кроме того, мы будем закладывать фундамент класса, который мы будем совершенствовать на следующих уроках. Отсюда, добавьте файл class-settings-messenger.php в папку admin в вашем плагине (и не волнуйтесь, все это будет доступно для скачивания).
|
1
2
3
4
5
6
7
8
|
<?php
class Settings_Messenger {
public function init() {
}
}
|
Помните, что мы не используем пространства имен или автозагрузчики в этом руководстве (хотя мы рассмотрели их раньше ). Обратите внимание, что я сейчас предоставлю код для метода init .
А пока вернитесь к файлу начальной загрузки плагина tutsplus-custom-message.php и добавьте следующий код в основную функцию:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php
function tutsplus_custom_messaging_start() {
$plugin = new Submenu(
new Submenu_Page()
);
$plugin->init();
$messenger = new Settings_Messenger();
$messenger->init();
}
|
Теперь давайте вернемся к функции init в Settings_Messenger и подключим ее к нашему пользовательскому действию.
|
1
2
3
4
5
|
<?php
public function init() {
add_action( ‘tutsplus_settings_messages’, array( $this, ‘display_message’ ) );
}
|
Обратите внимание, что в приведенном выше коде первым аргументом, который мы передаем add_action является имя нашего пользовательского хука. Второй будет метод, который будет отображать сообщение на странице администрирования. Мы просто еще не написали его (поэтому, если вы попытаетесь запустить этот код, вы получите ошибку).
Но давайте изменим это.
3. Отображение пользовательского сообщения
Сначала создайте функцию в классе Settings_Messenger именем display_message , и давайте просто выведем оператор, чтобы увидеть, появляется ли он на созданной нами пользовательской странице:
|
1
2
3
4
5
|
<?php
public function display_message() {
echo ‘This is an example message.’;
}
|
И когда вы выполните код, вы должны увидеть что-то вроде этого. Посмотрите внимательно под тегом h1 и вы должны увидеть предложение, которое мы включили выше.
Однако вот в чем проблема: отображаемое нами сообщение не соответствует ни одной из разметок, которые WordPress использует для отображения сообщений об ошибках, предупреждений или ошибок.
Мы рассмотрим это подробно позже в этой серии, но давайте продолжим и покажем сообщение об успехе. В конце концов, мы зашли так далеко, верно? Мы показываем наше собственное сообщение через пользовательский хук, используя класс мессенджера, который мы создали.
Это можно сделать несколькими способами: мы можем использовать файл шаблона, мы можем использовать разметку в функции и очищать ее там, или мы можем включить файл в функцию. Для целей этого урока я собираюсь создать разметку в функции и использовать wp_kses для wp_kses кода.
Это обычно не то, как я бы рекомендовал делать это, но это один из способов, которым это может быть выполнено, и это также предоставляет нам wp_kses , который является функцией, которую мы все должны использовать при рендеринге информации в браузере.
Используйте этот код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?php
public function display_message() {
$html = «
<div class=’notice notice-success’>
<p>You have successfully displayed a custom success message.</p>
</div><!— .notice-success —>
«;
$allowed_html = array(
‘div’ => array(
‘class’ => array(),
),
‘p’ => array(),
);
echo wp_kses( $html, $allowed_html );
}
|
И это должно привести к следующему снимку экрана:
Обратите внимание, что сообщение сохраняется. Нет кнопки сохранения, нет способа скрыть это сообщение, и нет способа изменить это сообщение вне кода. Но это нормально, потому что это не главное в этом упражнении.
Несколько вещей, которые я хочу упомянуть, хотя:
- Атрибуты класса в элементе div, который вы видите, заимствованы непосредственно из WordPress. Это так, что мы можем наследовать эти стили.
- Некоторые сообщения могут быть отклонены. Мы расскажем об этом в следующем уроке.
- Массив
$allowed_htmlпередаваемый вwp_kses, гарантирует, что ничто, кроме указанных элементов и атрибутов, не будет отображено. Это очень хороший, надежный и чистый способ очистки данных.
И это все, что можно затронуть в этом конкретном уроке; Однако мы только начинаем.
Вывод
В ходе этой серии статей мы рассмотрим, как обрабатывать сообщения об успешном завершении, сообщения об ошибках и предупреждающие сообщения, а также как вводить возможность отклонять сообщения.
Кроме того, мы сможем увидеть, как использовать ввод от пользователя для управления типом отображаемого сообщения.
Обратите внимание, что я также всегда рад ответить на вопросы через комментарии, и вы также можете проверить мой блог и подписаться на меня в Twitter. Я обычно говорю все о разработке программного обеспечения в рамках WordPress и касательных тем, а также.
До следующего урока загрузите файлы, изучите код и посмотрите, как это работает на вашем локальном компьютере. В следующей части мы подберем именно то место, где остановились.