() translation by (you can also view the original English article)
К этому моменту в данном курсе заложена основа нашего плагина, определён пользовательский hook и привязано постоянное сообщение, чтобы показать, как этот hook работает.
То, что мы не сделали, это не реализовали типы сообщений и их отображение согласно введённым пользователем данным.
Но прежде, чем приступать, нам нужно добавить поддержку для различных типов сообщений, интерфейс класса, который будет поддерживать каждый тип сообщения и структуру данных, необходимых для хранения таких сообщений.
Готовы начать?
Я с нетерпением жду продолжения урока, но есть несколько вещей, которые нам необходимо рассмотреть перед тем, как с головой окунуться в исходный код. Убедитесь, что в вашей системе установлено следующее программное обеспечение:
- PHP 5.6.25 и MySQL 5.6.28
- Apache или Nginx
- WordPress 4.6.1
- Предпочитаемый вами IDE или редактор
И если вы ищете решение "все-в-одном", не забудьте попробовать MAMP.
Мы продвинулись до
Как упоминалось ранее, мы находимся ровно в середине этого курса. Если вы пропустили какой-то из первых уроков, вот то, что мы рассмотрели к настоящему моменту:
- В первом уроке In the first tutorial, мы сосредоточились на минимальной основе для создания нашего плагина и на том, что необходимо иметь на старте.
- В второй части In the second piece, мы продвинулись с плагином дальше, немного дополнив базовую страницу администрации в WordPress. Ещё мы назначили пользовательский hook, который используем и провели его на стороне сервера. Также мы задали основные параметры для нашего Settings Messenger.
И вот что мы рассмотрим на заключительном этапе обучения:
- Мы свяжем все это вместе, посмотрим в действии и сделаем плагин публично доступным для скачивания.
В настоящее время у нас есть иные задачи, на них мы и сосредоточимся.
Вернёмся к работе
Поскольку мы обратились к работе (и, как было сказано в предыдущих уроках), мы стремимся к дальнейшей реализации задач в этой части:
В этом уроке мы продолжим развитие нашего Settings Messenger путём добавления поддержки для успешных и ошибочных сообщений, а также затронем вопросы безопасности.
В предыдущей статье In the last article, мы начали работу в Settings Messenger, но только до настройки функции, которая будет постоянно отображать успешное уведомление во время загрузки пользовательской страницы.
В этом уроке мы добавим поддержку для ошибочных, предупреждающих и успешных сообщениях. Затем выведем их на экран, чтобы получить представление как messenger будет работать.
Кроме того, мы собираемся внести ещё одно изменение, которое добавит поддержку для отклонения уведомлений по усмотрению пользователя.
Это весь план необходимой работы на этот урок. Давайте начнем.
Расширение Settings Messenger
Помните, что вся суть Settings Messenger состоит в определении для нас своего способа работы с пользовательскими сообщениями, пользовательскими hooks и родной WordPress API для отображения сообщений в контексте WordPress панели администрации.
Для этого мы собираемся расширить работу, проделанную в прошлом уроке и начнём отсюда.
Успешные сообщения
Поскольку мы начали с успешных сообщений в предыдущем уроке, давайте с ними и продолжим. Теперь у нас есть жестко-кодированный метод, который отображает единственный приём:
1 |
<?php
|
2 |
|
3 |
public function display_message() { |
4 |
|
5 |
$html = " |
6 |
<div class='notice notice-success'>
|
7 |
<p><strong>You have successfully displayed a custom success message.</strong></p>
|
8 |
</div><!-- .notice-success -->
|
9 |
"; |
10 |
|
11 |
$allowed_html = array( |
12 |
'div' => array( |
13 |
'class' => array(), |
14 |
),
|
15 |
'p' => array(), |
16 |
);
|
17 |
|
18 |
echo wp_kses( $html, $allowed_html ); |
19 |
}
|
В идеале мы хотели бы представить структуру данных для поддержки несколько сообщений, функцию, которая даст возможность добавить сколько угодно сообщений и покажет все успешные сообщения.
Во-первых, начнем с массива. Это будет частный атрибут класса, и он будет отражён в конструкции. Вступительная часть Settings_Messenger теперь будет выглядеть следующим образом:
1 |
<?php
|
2 |
|
3 |
class Settings_Messenger { |
4 |
|
5 |
private $success_messages; |
6 |
|
7 |
public function __construct() { |
8 |
|
9 |
$this->success_messages = array(); |
10 |
}
|
11 |
}
|
Как видите, мы определили то, что мы сказали, но еще не определен метод для добавления собственных сообщений и метод их отображения.
Сейчас мы этим займёмся. Во-первых, давайте пропишем метод, который позволит нам добавить наши собственные сообщения:
1 |
<?php
|
2 |
|
3 |
public function add_success_message( $message ) { |
4 |
$this->success_messages[] = sanitize_text_field( $message ); |
5 |
}
|
Здесь следует отметить, что мы используем sanitize_text_field для очистки данных в массиве array. Вы можете провести полную очистку или поверхностную, как вам нравится. Я выбрал этот метод, потому как он помогает достичь результата, не отклоняясь от темы курса.
Теперь давайте определим метод, который позволит нам показывать сообщения на front-end:
1 |
<?php
|
2 |
|
3 |
public function get_success_messages() { |
4 |
|
5 |
if ( empty( $this->success_messages ) ) { |
6 |
return; |
7 |
}
|
8 |
|
9 |
$html = "<div class='notice notice-success'>"; |
10 |
$html .= '<ul>'; |
11 |
foreach ( $this->success_messages as $message ) { |
12 |
$html .= "<li>$message</li>"; |
13 |
}
|
14 |
$html .= '</ul>'; |
15 |
$html .= '</div><!-- .notice-success -->'; |
16 |
|
17 |
$allowed_html = array( |
18 |
'div' => array( |
19 |
'class' => array(), |
20 |
),
|
21 |
'ul' => array(), |
22 |
'li' => array(), |
23 |
);
|
24 |
|
25 |
echo wp_kses( $html, $allowed_html ); |
26 |
}
|
Конечно, такой метод нуждается в оптимизации и я остановлюсь на этом в заключение поста.
Пока что давайте проверим. Попробуйте код tutsplus-custom-message.php , а затем обновите экран панели администратора, который мы использовали до настоящего времени.
1 |
<?php
|
2 |
$messenger = new Settings_Messenger(); |
3 |
$messenger->init(); |
4 |
|
5 |
$messenger->add_success_message( 'This is a test message' ); |
6 |
$messenger->add_success_message( 'This is also a test message, too.' ); |
В случае, если всё было выполнено правильно, вы должны увидеть что-то вроде этого:
К счастью, приём добавления двух следующих типов сообщений очень похож на то, что мы сделали в этом разделе.
Предупреждающие сообщения
Добавление поддержки для предупреждающих сообщений будет почти таким же, что мы сделали раньше; однако вместо функции взаимодействий с успешной командой переименуем как для предупреждений.
Во-первых, давайте добавим массив для наших сообщений:
1 |
<?php
|
2 |
|
3 |
class Settings_Messenger { |
4 |
|
5 |
private $success_messages; |
6 |
|
7 |
private $warning_messages; |
8 |
|
9 |
public function __construct() { |
10 |
|
11 |
$this->success_messages = array(); |
12 |
$this->warning_messages = array(); |
13 |
}
|
14 |
}
|
Затем добавим функции, которые позволят нам добавить предупреждения для messenger:
1 |
<?php
|
2 |
|
3 |
public function add_warning_message( $message ) { |
4 |
$this->warning_messages[] = sanitize_text_field( $message ); |
5 |
}
|
И наконец, давайте добавим функцию для отображения функции при необходимости (обратите внимание, что мы используем класс notice-warning при создании тега div):
1 |
<?php
|
2 |
|
3 |
public function get_warning_messages() { |
4 |
|
5 |
if ( empty( $this->warning_messages ) ) { |
6 |
return; |
7 |
}
|
8 |
|
9 |
$html = "<div class='notice notice-warning'>"; |
10 |
$html .= '<ul>'; |
11 |
foreach ( $this->warning_messages as $message ) { |
12 |
$html .= "<li>$message</li>"; |
13 |
}
|
14 |
$html .= '</ul>'; |
15 |
$html .= '</div><!-- .notice-warning -->'; |
16 |
|
17 |
$allowed_html = array( |
18 |
'div' => array( |
19 |
'class' => array(), |
20 |
),
|
21 |
'ul' => array(), |
22 |
'li' => array(), |
23 |
);
|
24 |
|
25 |
echo wp_kses( $html, $allowed_html ); |
26 |
}
|
Обратите внимание, что выбор отображения этого конкретного набора сообщений зависит от вас. Вы можете выбрать его в сочетании с успешными сообщениями или совершенно отдельным образом.
В этом курсе я сделаю её отдельной для единовременного отображения только предупреждающего сообщения. Поэтому я пропишу следующую строку кода в файл основного плагина:
1 |
<?php
|
2 |
$messenger->add_warning_message( 'Warning! Danger Will Robinson!' ); |
Я обновлю hook в методе init Settings_Messenger:
1 |
<?php
|
2 |
public function init() { |
3 |
add_action( 'tutsplus_settings_messages', array( $this, 'get_warning_messages' ) ); |
4 |
}
|
И тогда обновлю страницу. Предполагая, что приведённый выше код записан правильно, вы должны увидеть нечто подобное:
Если нет, проверьте свой код или загрузите файл, вложенный в этот урок и мы пойдём дальше.
Сообщения об ошибках
Наконец, сделаем то же самое для наших сообщений об ошибках. Снова повторим то, что проделали в предыдущих разделах, так что это должно уже стать почти нашей второй натурой.
Во-первых нам нужно добавить атрибут, который будет содержать массив, где мы будем хранить наши сообщения об ошибках:
1 |
<?php
|
2 |
|
3 |
class Settings_Messenger { |
4 |
|
5 |
private $success_messages; |
6 |
|
7 |
private $warning_messages; |
8 |
|
9 |
private $error_messages; |
10 |
|
11 |
public function __construct() { |
12 |
|
13 |
$this->success_messages = array(); |
14 |
$this->warning_messages = array(); |
15 |
$this->error_messages = array(); |
16 |
}
|
17 |
}
|
Во-вторых, нужно добавить функцию, которая позволит нам делать добавления в список ошибок:
1 |
<?php
|
2 |
|
3 |
public function add_error_message( $message ) { |
4 |
$this->error_messages[] = sanitize_text_field( $message ); |
5 |
}
|
И тогда нам понадобится возможность их отображать:
1 |
<?php
|
2 |
|
3 |
public function get_error_messages() { |
4 |
|
5 |
if ( empty( $this->error_messages ) ) { |
6 |
return; |
7 |
}
|
8 |
|
9 |
$html = "<div class='notice notice-error'>"; |
10 |
$html .= '<ul>'; |
11 |
foreach ( $this->error_messages as $message ) { |
12 |
$html .= "<li>$message</li>"; |
13 |
}
|
14 |
$html .= '</ul>'; |
15 |
$html .= '</div><!-- .notice-error -->'; |
16 |
|
17 |
$allowed_html = array( |
18 |
'div' => array( |
19 |
'class' => array(), |
20 |
),
|
21 |
'ul' => array(), |
22 |
'li' => array(), |
23 |
);
|
24 |
|
25 |
echo wp_kses( $html, $allowed_html ); |
26 |
}
|
Чтобы оставлять свои собственные сообщения, вернитесь в файл основного плагина и добавьте следующий код:
1 |
<?php
|
2 |
|
3 |
$messenger->add_error_message( 'Believe what you want. But neither you nor I are special.' ); |
4 |
$messenger->add_error_message( 'In my life, as I was making my way, I always asked the question, am I the most powerful person in the room?' ); |
5 |
$messenger->add_error_message( 'People always told me growing up that it\'s never about the destination. It\'s about the journey. But what if the destination is you?' ); |
Далее обновите функцию init в Settings_Messenger, и вы должны увидеть что-то вроде этого после обновления страницы:
Вот как добавлять собственные сообщения на вашей странице администратора с помощью пользовательских hooks. Но у нас есть еще одна вещь и надо её представить перед тем, как с этой статьёй закруглиться.
Отклонённые сообщения
Прежде, чем мы завершим, я хочу показать, как мы можем сделать наши сообщения dismissible, или, проще говоря, удалёнными пользователем. Чтобы сделать это, мы можем воспользоваться функционалом, уже встроенным в WordPress.
Поскольку мы работаем на сообщениях об ошибках, я буду их использовать в качестве примера. При построении HTML для сообщений об ошибках, добавьте еще один атрибут для тега div, содержащего сообщение(я).
То есть добавьте is-dismissible:
1 |
<?php
|
2 |
|
3 |
$html = "<div class='notice notice-error is-dismissible'>"; |
4 |
$html .= '<ul>'; |
5 |
foreach ( $this->error_messages as $message ) { |
6 |
$html .= "<li>$message</li>"; |
7 |
}
|
8 |
$html .= '</ul>'; |
9 |
$html .= '</div><!-- .notice-error -->'; |
Совсем просто, не так ли? У вас получится иконка, при нажатии на которую сообщение исчезнет.
Приятное удобство функции для пользователей WordPress при малых затратах усилий.
Заключение
Теперь у нас есть довольно функциональный Settings_Messenger. Мы можем добавить успешные сообщения, сообщения об ошибках и предупреждающие сообщения. Мы можем отклонить сообщения. Мы можем управлять этим независимо от того, что делает WordPress.
Но если вы читали любой из моих предыдущих уроков my previous tutorials, вы знаете, что я не фанат дублирования кода. Не фанат того, что один класс делает много вещей. Но, к сожалению, именно этим мы здесь занимаемся.
В задачу данного курса не входит переработка кода на этом примере. Мы прошли этот материал раньше. Кроме того, наша цель - показать, как работать с пользовательскими сообщениями об ошибках, а не как применять наиболее передовые объектно-ориентированные методы (хотя было бы хорошо, не так ли?).
В зависимости от ваших отзывов, возможно, мы к этому курсу вернёмся и переделаем его так, чтобы увидеть, как много работы ещё может быть сделано и как много принципов может быть применено.
Пока вы ждёте, когда будет опубликован следующий урок, обратите внимание, что я всегда рад ответить на вопросы в комментариях, также вы можете проверить мой блог и зайти на мой Twitter. Всегда готов обсудить новости о софте в WordPress и всего, что с ним связано.
До тех пор загрузите исходный код, сравните его с тем, что мы сделали и не забудьте запустить на вашем локальном компьютере для освоения того, с чем мы познакомимся в заключительной части этой серии.
Ресурсы
