Настройка столбцов в панели администрирования WordPress

Сайт на WordPress состоит из гораздо большего количества компонентов, чем только заголовки и фрагменты текста. Такие плагины, как Advanced Custom Fields и WooCommerce, внедряют пользовательские поля, в которых хранятся определенные фрагменты контента: цены, дополнительные изображения, подзаголовки и т. д. Эти функции сами по себе замечательны, но как отслеживаете весь этот контент, когда в панели администрирования можно видеть только заголовок, дату и автора?

В этой статье мы приведем простой пользовательский код для решения этой проблемы. А для тех, кто не хочет иметь дело с кодом, мы покажем, как настроить плагин Admin Columns, который выполнит всю работу за вас.

Мотивационный пример использования

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

В панели администрирования вы управляете портфолио, добавляете, удаляете и редактируете существующие объекты. По умолчанию столбцы WordPress (название, автор, дата публикации, количество комментариев) вряд ли соответствуют направлению сайта, и вас больше интересует просмотр изображений и информации об объектах в целом.

Давайте посмотрим на стандартную панель администрирования для пользовательских типов записей:

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

Теперь гораздо проще найти, просмотреть и отредактировать содержимое.

Управление столбцами с помощью кода

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

Изменение существующих столбцов можно выполнить с помощью двух хуков WordPress: manage_[post_type]_posts_columns, который позволяет удалять, изменять порядок и добавлять столбцы, и manage_[post_type]_posts_custom_colum. Вместо [post_type] введите тип записей, для которого необходимо настроить управление. Например, для страниц нужно использовать manage_page_posts_columns и manage_page_posts_custom_column.

«Где я могу разместить свой код?»

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

Все фрагменты кода, которые мы предоставим в рамках этой статьи, войдут в пользовательский плагин.

Добавление, удаление и реорганизация столбцов

Первый хук для управления столбцами (manage_posts_columns) - это фильтр, который обрабатывает массив столбцов. Стандартный массив фильтров для обзора записей:

[  [cb]          => <input type="checkbox" />  [title]       => Title  [author]      => Author  [categories]  => Categories  [tags]        => Tags  [comments]    => [..] Comments [..]  [date]        => Date]

Мы хотим удалить несколько столбцов из этого списка, а также добавить новые. Для этого нужно разместить обратный вызов фильтра manage_posts_columns и вставить настраиваемые столбцы в массив столбцов.

Обратите внимание, что мы используем хук hook_realestate_posts_columns. Realestate здесь - это имя типа записей, переданное в качестве первого аргумента функции register_post_type. Она служит для регистрации пользовательских типов записей. Мы используем его вместо [post_type] в фильтре manage_[post_type_posts_columns.

add_filter( 'manage_realestate_posts_columns', 'smashing_filter_posts_columns' );function smashing_filter_posts_columns( $columns ) {  $columns['image'] = __( 'Image' );  $columns['price'] = __( 'Price', 'smashing' );  $columns['area'] = __( 'Area', 'smashing' );  return $columns;}

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

Примечание. smashing_ в начале имен функций - это всего лишь рекомендованная практика, позволяющая обеспечить уникальность имени функции в WordPress. Функция __ используется для перевода строк на предпочтительный для пользователя язык. Обратите внимание, что для "Price" и "Area" мы используем smashing в качестве домена, который WordPress использует, чтобы определить, какой источник следует применять для перевода строки. Мы можем опустить это для перевода «Image», потому что WordPress включает в себя переводы этого слова. Больше о текстовых доменах вы можете узнать в кодексе WordPress.

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

Кроме этого нам нужно:

• Удалить столбцы "Author," "Date" и "Comments", которые не имеют отношения к нашему контенту.
• Изменить порядок столбцов так, чтобы столбец "Image" был первым.

Изменим нашу функцию, чтобы сделать это. Обратите внимание, что мы не удаляем три столбца, упомянутые выше, а формируем новый массив столбцов.

add_filter( 'manage_realestate_posts_columns', 'smashing_realestate_columns' );
function smashing_realestate_columns( $columns ) {
$columns = array(
'cb' => $columns['cb'],
'image' => __( 'Image' ),
'title' => __( 'Title' ),
'price' => __( 'Price', 'smashing' ),
'area' => __( 'Area', 'smashing' ),
);
return $columns;
}

Наша новая панель обзора объектов недвижимости начинает формироваться: ненужные столбцы были удалены, а новые добавлены на необходимые позиции.

Заполнение столбцов

Затем мы заполняем столбцы. WordPress предоставляет для этого простой хук: action_[post_type]_posts_column. В отличие от ранее рассмотренного хука, это не фильтр, поэтому он позволяет добавлять контент, а не изменять его. Исходя из этого, в обратном вызове для данного действия просто отобразим содержимое столбца.

Начнем с добавления столбца "Image".

add_action( 'manage_realestate_posts_custom_column', 'smashing_realestate_column', 10, 2);
function smashing_realestate_column( $column, $post_id ) {
// Столбец изображений
if ( 'image' === $column ) {
echo get_the_post_thumbnail( $post_id, array(80, 80) );
}
}

Мы добавили функцию обратного вызова smashing_realestate_column в действие 'manage_realestate_posts_custom_column', используя два параметра: имя столбца и идентификатор записи. Это определяется четвертым параметром add_action: он указывает количество аргументов, ожидаемых функцией обратного вызова. Третий параметр, называемый приоритетом хука, определяет, в каком порядке должны выполняться функции обратного вызова, зарегистрированные в хуке. Оставим для него значение по умолчанию, которое равно 10. Эта функция обратного вызова заполняет столбец "Image" для одной записи.

Остальные два столбца “Price” и “Area” хранятся в виде пользовательских полей с ключами price_per_month и area. Мы будем выводить их так же, как делали с изображением, указывая «n / a», когда цена или площадь недоступны. Для обоих столбцов реализация схожа. Начинаем со столбца цены.

add_action( 'manage_realestate_posts_custom_column', 'smashing_realestate_column', 10, 2);
function smashing_realestate_column( $column, $post_id ) {
// Image column
if ( $column == 'image' ) {
echo get_the_post_thumbnail( $post_id, array( 80, 80 ) );
}
// Цена в месяц
if ( 'price' === $column ) {
$price = get_post_meta( $post_id, 'price_per_month', true );
if ( ! $price ) {
_e( 'n/a' );
} else {
echo '$ ' . number_format( $price, 0, '.', ',' ) . ' p/m';
}
}
}

Следующий столбец площади. За исключением единиц измерения (квадратные метры, вместо долларов), код почти идентичен:

add_action( 'manage_realestate_posts_custom_column', 'smashing_realestate_column', 10, 2 );
function smashing_realestate_column( $column, $post_id ) {
[...]
// Столбец площади
if ( 'area' === $column ) {
$area = get_post_meta( $post_id, 'area', true );
if ( ! $area ) {
_e( 'n/a' );
} else {
echo number_format( $area, 0, '.', ',' ) . ' m2';
}
}
}

На странице обзора объектов недвижимости теперь содержится вся необходимая информация, которую нужно отобразить:

Теперь добавим функции сортировки столбцов.

Сортировка столбцов

Создание сортировки столбцов реализуется в WordPress просто, но она редко используется для пользовательских столбцов. Сортировка помогает организовать контент и быстро его находить. Например, мы могли бы отсортировать строки нашего обзора объектов недвижимости по цене, а затем найти самые дешевые и дорогие объекты.

Начнем с добавления столбца "price" в список сортируемых столбцов:

add_filter( 'manage_edit-realestate_sortable_columns', 'smashing_realestate_sortable_columns');
function smashing_realestate_sortable_columns( $columns ) {
$columns['price'] = 'price_per_month';
return $columns;
}

Этот код подключается к фильтру manage_edit-realestate_sortable_columns и добавляет smashing_realestate_sortable_columns в качестве функции обратного вызова (строка 1).

Столбец "price" становится сортируемым путем добавления в список сортируемых столбцов (строка 3). Обратите внимание, что ключ массива price - это имя, которое мы ранее задали для столбца. Значение массива используется, чтобы сообщить WordPress, что он должен сортировать. Например, можно использовать встроенные алгоритмы WordPress для сортировки по заголовку, дате или количеству комментариев.

Но нам нужно отсортировать столбцы по пользовательскому полю. Для этого требуется создать другую функцию, которая должна изменить запрос записей, если мы пытаемся сортировать их по цене. Мы будем использовать действие pre_get_posts. Оно позволяет изменять WP_Query (объект, который WordPress использует для запроса записей), и срабатывает перед запросом записей. Сначала проверяем, нужно ли сортировать записи по цене. Если да, изменяем запрос соответствующим образом:

add_action( 'pre_get_posts', 'smashing_posts_orderby' );
function smashing_posts_orderby( $query ) {
if( ! is_admin() || ! $query->is_main_query() ) {
return;
}
if ( 'price_per_month' === $query->get( 'orderby') ) {
$query->set( 'orderby', 'meta_value' );
$query->set( 'meta_key', 'price_per_month' );
$query->set( 'meta_type', 'numeric' );
}
}

Строки 1 и 2 добавляют функцию обратного вызова к действию и запускают определение функции обратного вызова. Строка 3 проверяет, находимся ли мы в панели администрирования, и является ли запрос основным запросом записей (дополнительную информацию можно найти в Кодексе). Если нет, не будем изменять запрос.

Затем проверяем, является ли текущая стратегия сортировки сортировкой по цене. Если это так, корректируем запрос: устанавливаем для meta_key значение price_per_month, указывая WordPress получить это пользовательское поле для всех объектов недвижимости. Устанавливаем для ключа orderby значение meta_value, что указывает WordPress сортировать строки по значению, принадлежащему указанному ключу. Наконец, мы указываем WordPress сортировать записи по числам, а не в алфавитном порядке, потому что «цена» - это числовой столбец.

В результате мы получаем сортируемый столбец цены:

Та же процедура может быть повторена для столбца "area". Для текстовых столбцов, которые необходимо сортировать в алфавитном порядке, не забудьте указать часть $query->set( 'meta_type', 'numeric' ).

Управление столбцами с помощью плагина Admin Columns

Теперь, пришло время перейти к гораздо более простому способу реализации: с помощью плагина Admin Columns. Не имея дела с кодом и используя простой drag-and-drop интерфейс, вы сможете управлять столбцами всего в несколько кликов.

Плагин поддерживает более 150 типов столбцов. Он поставляется с полями, в которых можно настроить название и поведение столбца. В этой части статьи мы покажем, как настроить столбцы панели администрирования, чтобы создать тот же раздел, который разработали ранее.

Установите и активируйте плагин. Затем перейдите на страницу «Настройки столбцов».

Плагин Admin Columns позволяет управлять столбцами в разделах различных типов контента. Мы выберем тип записей "Real Estate". Вы увидите, что на экране сразу отображаются столбцы, которые в данный момент активны для этого типа записей.

Добавление, удаление и реорганизация столбцов

Почистим раздел, удалив столбцы, которые не нужны:

Теперь добавим необходимый нам столбец, который показывает изображение объекта. Для этого нажмите кнопку "Add Column", выберите из раскрывающегося списка тип столбца "Featured Image" и заполните соответствующие поля:

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

Admin Columns позволяют сортировать столбцы, просто перетаскивая их. Теперь панель обзора объектов недвижимости выглядит следующим образом:

Теперь нужно добавить два столбца для отображения площади и арендной платы. Поскольку мы добавили эти пользовательские поля с помощью Advanced Custom Fields, то будем использовать плагин Admin Columns для интеграции ACF. Но для этой цели было бы достаточно и столбца “Custom Field”.

В приведенной ниже анимации показан процесс добавления столбцов "Area" и "Price":

Примечание. Admin Columns предлагает модули для интеграции с другими плагинами, включая WooCommerce, Ninja Forms и Yoast SEO.

Мы еще не добавили столбец "City". Выбираем столбец "Taxonomy", задаем таксономию "City". Все готово.

Сортировка и фильтрация с помощью плагина Admin Columns

Большая часть функционала, о котором мы рассказали до сих пор, включено в бесплатную версию плагина Admin Columns. Ее можно загрузить с WordPress.org.

Существует плагин Admin Columns Pro, который предлагает дополнительные функции: сортировка, фильтрация и редактирование. Эти функции помогут быстро найти и обновить контент прямо в панели обзора.

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

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

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

Рассмотрим простой пример: нужно найти дома с самой большой площадью. Это займет всего несколько секунд, потому что мы можем отсортировать объекты недвижимости по столбцу "Area":

Пойдем еще дальше и добавим фильтр: найдем 10 домов с наибольшей площадью и с арендной платой в диапазоне от 300 до 500 долларов.

Редактирование с помощью Admin Columns

В панели обзора объектов недвижимости теперь отображается вся необходимая информация. Но чего-то не хватает: для редактирования контента нужно перейти на страницу редактирования, найти поля отредактировать их, нажать «Обновить».

Что, если бы мы могли выполнить эти же действия в три простых шага: кликнуть, отредактировать, сохранить? С помощью плагина Admin Columns Pro это возможно.

На скриншоте, приведенном выше, показан режим прямого редактирования названия свойства. Он доступен для всех пользовательских столбцов. С помощью плагина Admin Columns Pro активировать редактирование можно прямо в панели настройки столбцов. Он автоматически определяет тип контента и изменяет его соответствующим образом. Например, для изображений появится медиа-галерея.

В этом примере мы использовали расширение Advanced Custom Fields для Admin Columns. Оно обнаруживает поля ACF и добавляет их как столбцы. Они автоматически сортируются, фильтруются и редактируются.

В результате в панель обзора объектов недвижимости добавляются иконки редактирования для всех ячеек, Просто кликнув, отредактировав и сохранив, можно обновить наш контент. Как это реализуется на практике: мы включили прямое редактирование для всех пользовательских столбцов, и теперь используем этот функционал для быстрого обновления контента:

Изменения сохраняются мгновенно. Если что-то пойдет не так, для быстрого отката есть кнопка отмены.

Заключение

Плагин Admin Columns может еще много чего крутого, но в этой статье недостаточно места. Почему бы вам самим не попробовать некоторые из удивительных возможностей этого плагина?

Вадим Дворниковавтор-переводчик статьи «Customizing Admin Columns In WordPress»