Tablas de la lista de administradores de WordPress: extienda la función de edición rápida

Hasta ahora, en nuestra serie de artículos sobre las tablas de administración en WordPress, hemos analizado varias formas de personalizar el diseño de las tablas de administración de WordPress, incluida la forma de agregar nuevas columnas. En este artículo final de la serie, vamos a echar un vistazo a una personalización más que tal vez desee considerar... ampliar la función "Edición rápida" que se encuentra en las tablas de administración.

¡Empecemos!

Ampliación del campo de edición rápida

Para nuestro ejemplo en este tutorial, agregaremos un campo personalizado que mostrará una URL que se describirá como una 'Fuente' que completaremos con una URL que vincula a información adicional relacionada con nuestro artículo. Veremos cómo se puede agregar en el área de edición rápida de la pantalla de administración de publicaciones y cómo guardar las actualizaciones realizadas en este campo.

Paso uno: agregue el campo personalizado

Analizamos cómo crear el campo 'Fuente' en nuestro artículo Primeros pasos con los campos personalizados de WordPress. En aras de la brevedad, no repetiremos esas instrucciones aquí. Por supuesto, puede crear cualquier campo personalizado que desee.

Si no está familiarizado con la forma en que agregamos el campo personalizado 'Fuente' o cualquier otro campo personalizado, consulte nuestro artículo sobre esto. Una vez que haya agregado un campo personalizado apropiado, es hora de pasar al siguiente paso.

Paso dos: agregue la columna personalizada

Necesitamos agregar una columna personalizada a nuestra tabla de administración. Explicamos cómo hacer esto en profundidad en nuestro artículo Personalización de las tablas de administración de WordPress: Primeros pasos. Echa un vistazo y sigue los pasos.

En última instancia, debería terminar con un código en functions.php de su tema activo que se ve así:

 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; } }

A estas alturas, debería ver la nueva columna en la tabla de administración de publicaciones.

Agregue el cuadro de edición rápida personalizado

Vayamos a nuestra tabla de lista de Publicaciones y haga clic en el enlace 'Edición rápida' debajo de una de nuestras publicaciones.

Lo que veremos aquí son todas las opciones disponibles predeterminadas que WordPress proporciona en la pantalla de edición rápida. Por el momento no veremos nuestro nuevo campo 'Fuente'.

Agregaremos esto usando el gancho quick_edit_custom_box que proporciona WordPress. Esta acción analiza todas las acciones predeterminadas en el modo 'Edición rápida' ejecutándose una vez para cada columna, incluidas las columnas personalizadas.

Está estructurado de la siguiente manera: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Los parámetros son $column_name , que es el nombre de la columna a editar, $post_type , que es el slug del tipo de publicación y $taxonomy para el nombre de la taxonomía, si es necesario.

En su archivo functions.php , agregue las siguientes líneas:

 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; } }

Tenga en cuenta que obtenemos el valor del campo 'fuente' en el código PHP haciendo eco de $post->source; .

Ahora, si actualiza la página y vuelve a hacer clic en "Edición rápida", debería ver el campo "fuente" con un valor correcto.

Paso tres: guardar la edición en línea

Para guardar la entrada de datos en nuestro campo personalizado, usaremos la acción save_post que se activa cuando se actualiza una publicación.

En nuestro ejemplo en el que trabajamos en ediciones rápidas, los datos de la publicación se almacenan en $_POST después de que se ejecuta save_post .

Que el código requerido para lograr esto es el siguiente y debe ser insertado en el archivo 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; }

No, esto se ha hecho, intentemos cambiar el valor de entrada del campo a algo más como "https://random.url" y presione el botón de actualización en la parte inferior derecha.

Observa que el valor en nuestro campo de origen se actualiza como se esperaba. Sin embargo, si vuelve a hacer clic en el botón Edición rápida y vuelve a mirar su campo personalizado (en nuestro caso, 'Fuente'), verá que el valor no ha cambiado en el cuadro de edición.

Cada vez que cambie el valor, siempre verá el cambio en la celda de la columna de la tabla Admin, pero esta entrada no se reflejará en el campo Edición rápida.

Entonces, ¿por qué sucede esto?

Recuerde que obtenemos el valor del campo 'fuente' haciendo eco de $post->source; . El contenido de edición rápida se completa cuando el usuario presiona el botón 'editar', lo que significa que se crea dinámicamente y no se completa automáticamente cuando se carga la pantalla de administración posterior. No podemos mostrar nuestros metadatos correctamente recuperándolos a través de nuestro código PHP, ya que siempre veremos el valor que se completó cuando ingresamos a la pantalla de administración en lugar del nuevo valor.

En cambio, tenemos que recopilar nuestros valores usando JavaScript. Entonces, antes de continuar, ingresaremos a nuestro código PHP anterior y eliminaremos el valor repetido reemplazando esta línea …

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

…Con este:

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

Paso cuatro: Recuperar valores de entrada usando JS

Primero, tendremos que incluir nuestro script JS agregando estas líneas a su archivo 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' )); }

Entonces, si, por ejemplo, crea un archivo extend-quick-edit.js y lo coloca en la carpeta de su tema activo, entonces en el código anterior debe reemplazar 'UNIQUE-SCRIPT-NAME' con algo como 'extend-quick-edit-script ' y '/PATH-TO-YOUR-JS-FILE' con 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' )); }

En la array('jquery','inline-edit-post' ) hemos agregado jQuery ya que nuestro script usa jQuery, y definimos que la función original inline-edit-post se modificará.

En extend-quick-edit.js el contenido se verá así:

 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); } } });

Analicemos un poco lo que hicimos aquí.

Al principio, tomamos el objeto inlineEditPost.edit , que se introduce en el archivo central de WordPress /wp-admin/js/inline-edit-post.js si desea profundizar en él. Ahora tenemos una copia del objeto en la variable $inline_editor .

Después de eso, modificamos la funcionalidad inlineEditPost.edit aplicando la existente en $inline_editor.apply( this, arguments); y agregando la funcionalidad adicional que queremos justo después.

Entonces, en las siguientes líneas de nuestro código JS, lo que eventualmente haremos es reemplazar el valor del campo de entrada 'Fuente' del área de edición rápida con el valor de la celda de la columna 'Fuente'.

Ahora todo debería funcionar como se esperaba. Si guarda el valor y vuelve a abrir el área de edición rápida, la entrada de origen también debería modificarse.

Siempre que un campo personalizado ya esté registrado junto con su columna personalizada, nuestro flujo de trabajo se vería así:

Conclusión

Agregar un campo personalizado al módulo de edición rápida de las tablas de la lista de administradores no es fácil. Sin embargo, si está agregando un campo que se actualiza regularmente, obviamente puede ahorrar mucho tiempo a largo plazo. Como siempre, lo que se puede lograr en WordPress es bastante ilimitado. Directamente listo para usar, permite una amplia personalización, pero con un poco de codificación adicional, ¡no hay mucho que no pueda hacer!