Таблицы списка администратора WordPress: расширение функции быстрого редактирования

До сих пор в нашей серии статей о таблицах администрирования в WordPress мы рассматривали различные способы настройки макета таблиц администрирования WordPress, включая добавление новых столбцов. В этой последней статье серии мы рассмотрим еще одну настройку, которую вы, возможно, захотите рассмотреть… расширение функции «Быстрое редактирование», найденной в таблицах администратора.

Давайте начнем!

Расширение поля быстрого редактирования

Для нашего примера в этом руководстве мы добавим настраиваемое поле, в котором будет отображаться URL-адрес, который будет описан как «Источник», который мы заполним URL-адресом, связанным с некоторой дополнительной информацией, относящейся к нашей статье. Мы увидим, как его можно добавить в область быстрого редактирования на экране администратора сообщений и как сохранить изменения, внесенные в это поле.

Шаг первый: добавьте настраиваемое поле

Мы рассмотрели, как создать поле «Источник» в нашей статье «Начало работы с пользовательскими полями WordPress». Для краткости мы не будем повторять здесь эти инструкции. Конечно, вы можете создать любое пользовательское поле, которое вам нравится.

Если вы не знакомы с тем, как мы добавляем настраиваемое поле «Источник» или любое другое настраиваемое поле в этом отношении, ознакомьтесь с нашей статьей на эту тему. После того, как вы добавили соответствующее настраиваемое поле, пришло время перейти к следующему шагу.

Шаг второй: добавьте пользовательский столбец

Нам нужно добавить пользовательский столбец в нашу таблицу администратора. Мы подробно объяснили, как это сделать, в нашей статье «Настройка таблиц администратора WordPress: начало работы». Посмотрите и следуйте инструкциям.

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

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

К настоящему времени вы должны увидеть новый столбец в таблице администратора сообщений.

Добавьте пользовательское поле быстрого редактирования

Давайте перейдем к нашей таблице со списком сообщений и щелкните ссылку «Быстрое редактирование» под одним из наших сообщений.

Здесь мы увидим все доступные по умолчанию параметры, которые WordPress предоставляет на экране быстрого редактирования. На данный момент мы не видим нашего нового поля «Источник».

Мы добавим это с помощью хука quick_edit_custom_box , который предоставляет WordPress. Это действие анализирует все действия по умолчанию в режиме «Быстрое редактирование», выполняя один раз для каждого столбца, включая настраиваемые столбцы.

Он имеет следующую структуру: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Параметрами являются $column_name , которое является именем столбца для редактирования, $post_type , который является слагом типа сообщения, и $taxonomy для имени таксономии, если это необходимо.

В файл functions.php добавьте следующие строки:

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

Пожалуйста, имейте в виду, что мы получаем значение поля «источник» в PHP-коде, повторяя $post->source; .

Теперь, если вы обновите страницу и снова нажмете «Быстрое редактирование», вы должны увидеть поле «источник» с правильным значением.

Шаг третий: сохраните встроенное редактирование

Чтобы сохранить введенные данные в наше пользовательское поле, мы будем использовать действие save_post , которое запускается при обновлении сообщения.

В нашем примере, где мы работаем над быстрыми изменениями, данные для сообщения сохраняются в $_POST после выполнения save_post .

Код, необходимый для достижения этого, выглядит следующим образом и должен быть вставлен в файл functions.php :

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

Нет, это не было сделано, давайте попробуем изменить входное значение поля на что-то другое, например «https://random.url», и нажмите кнопку обновления в правом нижнем углу.

Вы заметили, что значение в нашем исходном поле обновляется, как и ожидалось. Однако, если вы снова нажмете кнопку «Быстрое редактирование» и еще раз взглянете на свое пользовательское поле (в нашем случае «Источник»), вы увидите, что значение в поле редактирования не изменилось.

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

Итак, почему это происходит?

Помните, что мы получаем значение поля «источник», повторяя $post->source; . Содержимое быстрого редактирования заполняется, когда пользователь нажимает кнопку «редактировать», что означает, что оно создается динамически и не заполняется предварительно при загрузке экрана администратора сообщения. Мы не можем правильно отобразить наши метаданные, извлекая их через наш PHP-код, поскольку мы всегда будем видеть значение, которое было заполнено при входе на экран администратора, вместо нового значения.

Вместо этого мы должны собирать наши значения с помощью JavaScript. Итак, прежде чем мы продолжим, мы перейдем к нашему предыдущему PHP-коду и удалим эхо-значение, заменив эту строку…

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…с этим:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

Шаг четвертый: получение входных значений с помощью JS

Во-первых, нам нужно будет включить наш JS-скрипт, добавив эти строки в ваш файл functions.php :

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

Итак, если, например, вы создаете файл extend-quick-edit.js и помещаете его в папку с активной темой, то в приведенном выше коде вы должны заменить «UNIQUE-SCRIPT-NAME» на что-то вроде «extend-quick-edit-script». ' и '/PATH-TO-YOUR-JS-FILE' с помощью get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

В array('jquery','inline-edit-post' ) мы добавили jQuery, так как наш скрипт использует jQuery, и определили, что исходная функция inline-edit-post будет изменена.

В extend-quick-edit.js содержимое будет выглядеть так:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

Давайте немного разберем, что мы здесь сделали.

Сначала мы берем объект inlineEditPost.edit , который представлен в основном файле WordPress /wp-admin/js/inline-edit-post.js , если вы хотите изучить его подробнее. Итак, теперь у нас есть копия объекта в переменной $inline_editor .

После этого мы модифицируем функциональность inlineEditPost.edit , применив существующую в $inline_editor.apply( this, arguments); и добавление дополнительных функций, которые мы хотим сразу после этого.

Итак, в следующих строках нашего JS-кода мы в конечном итоге заменим значение поля ввода «Источник» области быстрого редактирования значением ячейки столбца «Источник».

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

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

Вывод

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