Мы искали, как создать простую систему CRM в WordPress. В последней части этой серии мы использовали расширенные настраиваемые поля, чтобы добавить настраиваемые поля в пользовательский тип публикации контактов. Мы узнали, как использовать Advanced Custom Fields и настроить его для программной работы.
Сегодня мы рассмотрим, как отображать данные, хранящиеся в наших настраиваемых полях, прямо в нашей таблице контактов.
Все о WP_List_Table
Каждый тип WP_List_Table , имеющий панель мониторинга, использует класс WP_List_Table для визуализации знакомой таблицы и связанных с ней действий:
По умолчанию WordPress будет отображать следующие столбцы:
- флажок (используется для выбора / отмены выбора сообщений, к которым затем могут быть применены действия)
- заглавие
- автор
- Комментарии
- Дата
Для нашего пользовательского типа поста « Контакт » это не очень полезно, если мы хотим быстро просмотреть ключевые детали, такие как номер телефона или фотография контакта.
WordPress предоставляет фильтр и действие, которое можно использовать для добавления новых столбцов в WP_List_Table и определения его вывода для каждого сообщения.
Начнем с добавления manage_edit-{POST_TYPE}_columns в конструкцию класса нашего плагина. {POST_TYPE} будет именем нашего типа сообщения, который в данном случае является contact :
|
01
02
03
04
05
06
07
08
09
10
|
/**
* Constructor.
*/
function __construct() {
add_action( ‘init’, array( $this, ‘register_custom_post_type’ ) );
add_action( ‘plugins_loaded’, array( $this, ‘acf_fields’ ) );
add_filter( ‘manage_edit-contact_columns’, array( $this, ‘add_table_columns’ ) );
}
|
Нам также нужно определить нашу add_table_columns() , которая сообщает WordPress имена наших дополнительных столбцов, которые мы хотели бы отобразить в нашей таблице контактов. Эта функция принимает массив существующих столбцов, который мы можем расширить, добавив наши пользовательские столбцы таблицы.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
/**
* Adds table columns to the Contacts WP_List_Table
*
* @param array $columns Existing Columns
* @return array New Columns
*/
function add_table_columns( $columns ) {
$columns[’email_address’] = __( ‘Email Address’, ‘tuts-crm’ );
$columns[‘phone_number’] = __( ‘Phone Number’, ‘tuts-crm’ );
$columns[‘photo’] = __( ‘Photo’, ‘tuts-crm’ );
return $columns;
}
|
Мы удостоверяемся, что ключи массива соответствуют именам пользовательских полей ACF. Если у вас разные поля, убедитесь, что имена ключей ваших столбцов соответствуют настройкам имени поля.
Просмотрите таблицу контактов , нажав Контакты в меню панели инструментов WordPress, и вы увидите наши новые столбцы:
Однако данные для каждого контакта в таблице не отображаются. Нам нужно добавить действие manage_{POST_TYPE}_posts_custom_column в конструктор класса нашего плагина. {POST_TYPE} снова будет именем нашего Типа сообщения, который в данном случае является contact :
|
01
02
03
04
05
06
07
08
09
10
11
|
/**
* Constructor.
*/
function __construct() {
add_action( ‘init’, array( $this, ‘register_custom_post_type’ ) );
add_action( ‘plugins_loaded’, array( $this, ‘acf_fields’ ) );
add_filter( ‘manage_edit-contact_columns’, array( $this, ‘add_table_columns’ ) );
add_action( ‘manage_contact_posts_custom_column’, array( $this, ‘output_table_columns_data’), 10, 2 );
}
|
Нам также необходимо определить нашу output_table_columns_data() , которая сообщает WordPress, что отображать для каждой комбинации контактов и столбцов. Поскольку мы убедились, что имена ключей наших столбцов совпадают с именами полей ACF, это облегчает кодирование. Расширенные настраиваемые поля имеют функцию get_field() , которая принимает параметры имени поля и идентификатора поста для извлечения сохраненного значения:
|
1
2
3
4
5
6
7
8
9
|
/**
* Outputs our Contact custom field data, based on the column requested
*
* @param string $columnName Column Key Name
* @param int $post_id Post ID
*/
function output_table_columns_data( $columnName, $post_id ) {
echo get_field( $columnName, $post_id );
}
|
Перезагрузите таблицу контактов, и вы увидите свои пользовательские поля:
В зависимости от конфигурации PHP, столбец Photo будет пустым или выведет уведомление PHP:
Поле изображения в Advanced Custom Fields возвращает массив при использовании get_field() , состоящий из деталей изображения и URL каждого зарегистрированного размера изображения, ширины и высоты (зарегистрированный размер изображения обычно зависит от установленных тем и плагинов).
Давайте изменим нашу функцию для вывода правильных данных массива для отображения изображения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
/**
* Outputs our Contact custom field data, based on the column requested
*
* @param string $columnName Column Key Name
* @param int $post_id Post ID
*/
function output_table_columns_data( $columnName, $post_id ) {
// Field
$field = get_field( $columnName, $post_id );
if ( ‘photo’ == $columnName ) {
echo ‘<img src=»‘ . $field[‘sizes’][‘thumbnail’].'» width=»‘.$field[‘sizes’][‘thumbnail-width’] . ‘» height=»‘ . $field[‘sizes’][‘thumbnail-height’] . ‘» />’;
} else {
// Output field
echo $field;
}
}
|
Перезагрузите таблицу контактов, и вы должны увидеть фотографию каждого контакта:
Сортируемые столбцы
Что если нам нужно быстро отсортировать наши контакты по имени, номеру телефона или адресу электронной почты? Мы уже можем сортировать по названию (или, вернее, по названию) столбца, но сейчас нет никакой возможности сообщить WordPress, как сортировать по нашему номеру телефона и столбцам адреса электронной почты.
Вернуться к конструктору нашего плагина. Нам нужно добавить manage_{POST_TYPE}_posts_custom_column в конструкцию класса нашего плагина, чтобы сообщить WordPress, что мы хотим разрешить manage_{POST_TYPE}_posts_custom_column определенных столбцов. {POST_TYPE} снова будет именем нашего типа сообщения, который в данном случае является contact :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
/**
* Constructor.
*/
function __construct() {
add_action( ‘init’, array( $this, ‘register_custom_post_type’ ) );
add_action( ‘plugins_loaded’, array( $this, ‘acf_fields’ ) );
add_filter( ‘manage_edit-contact_columns’, array( $this, ‘add_table_columns’ ) );
add_action( ‘manage_contact_posts_custom_column’, array( $this, ‘output_table_columns_data’), 10, 2 );
add_filter( ‘manage_edit-contact_sortable_columns’, array( $this, ‘define_sortable_table_columns’) );
}
|
Как и в случае с нашими предыдущими действиями и фильтрами, нам также нужно определить нашу define_sortable_table_columns() , которая сообщает WordPress, какие столбцы можно сортировать:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/**
* Defines which Contact columsn are sortable
*
* @param array $columns Existing sortable columns
* @return array New sortable columns
*/
function define_sortable_table_columns( $columns ) {
$columns[’email_address’] = ’email_address’;
$columns[‘phone_number’] = ‘phone_number’;
return $columns;
}
|
Наведите курсор мыши на столбцы « Адрес электронной почты» и « Номер телефона» , и вы увидите стрелку, показывающую нам, что мы можем отсортировать данные в соответствующем столбце:
Прямо сейчас нажатие на заголовок столбца для сортировки по его данным ничего не даст, так как параметр orderby , установленный в URL, не распознается WordPress.
В конструкторе нашего плагина давайте добавим фильтр к методу request , а затем определим нашу функцию, чтобы проверить, пытаемся ли мы отсортировать по пользовательскому столбцу (и, если это так, измените запрос posts, чтобы WordPress мог его понять):
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
/**
* Constructor.
*/
function __construct() {
add_action( ‘init’, array( $this, ‘register_custom_post_type’) );
add_action( ‘plugins_loaded’, array( $this, ‘acf_fields’) );
add_filter( ‘manage_edit-contact_columns’, array( $this, ‘add_table_columns’) );
add_action( ‘manage_contact_posts_custom_column’, array( $this, ‘output_table_columns_data’), 10, 2 );
add_filter( ‘manage_edit-contact_sortable_columns’, array( $this, ‘define_sortable_table_columns’) );
if ( is_admin() ) {
add_filter( ‘request’, array( $this, ‘orderby_sortable_table_columns’ ) );
}
}
|
Поскольку фильтр request запускается при каждой загрузке страницы WordPress (будь то веб-сайт внешнего интерфейса или интерфейс панели мониторинга WordPress), мы хотим минимизировать частоту его вызова. Мы делаем это, только добавляя фильтр, если мы находимся в администрировании WordPress ( is_admin() ).
orderby_sortable_table_columns() давайте определим нашу orderby_sortable_table_columns() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/**
* Inspect the request to see if we are on the Contacts WP_List_Table and attempting to
* sort by email address or phone number.
* that custom meta key
*
* @param array $vars Request Variables
* @return array New Request Variables
*/
function orderby_sortable_table_columns( $vars ) {
// Don’t do anything if we are not on the Contact Custom Post Type
if ( ‘contact’ != $vars[‘post_type’] ) return $vars;
// Don’t do anything if no orderby parameter is set
if ( ! isset( $vars[‘orderby’] ) ) return $vars;
// Check if the orderby parameter matches one of our sortable columns
if ( $vars[‘orderby’] == ’email_address’ OR
$vars[‘orderby’] == ‘phone_number’ ) {
// Add orderby meta_value and meta_key parameters to the query
$vars = array_merge( $vars, array(
‘meta_key’ => $vars[‘orderby’],
‘orderby’ => ‘meta_value’,
));
}
return $vars;
}
|
Эта функция проверяет, что мы просматриваем наш пользовательский тип записи « Контакты », и если так, был ли установлен параметр email_address соответствующий email_address или phone_number . Они устанавливаются, если пользователь щелкнул столбец в таблице контактов для заказа по номеру телефона или адресу электронной почты.
Давайте нажмем на столбец «Адрес электронной почты» и увидим, что результаты упорядочены правильно:
Повторное нажатие приведет к изменению порядка результатов:
Следующий…
В следующей статье мы собираемся расширить возможности фильтра и поиска, чтобы мы могли осуществлять поиск в данных, хранящихся в наших расширенных настраиваемых полях.