in

Personalización de columnas de administración en WordPress

¿Cómo puedes obtener información sobre todo tu contenido de un vistazo? El área de administración de WordPress no te muestra mucho sobre tus páginas, publicaciones, usuarios y comentarios. Demostraremos algunas soluciones personalizadas simples y un complemento listo para implementar para superar este problema.

Si administras un sitio web de WordPress, probablemente te hayas enfrentado a un problema común. ¿Cómo puedes obtener información sobre todo tu contenido de un vistazo? El área de administración de WordPress no te muestra mucho sobre tus páginas, publicaciones, usuarios y comentarios. Eso puede hacer que sea difícil encontrar la página correcta, verificar si todos los campos asociados están correctamente llenos o simplemente tener una idea general del contenido de tu sitio web. ¿Esto te suena familiar? Sigue leyendo porque demostraremos algunas soluciones personalizadas simples y un complemento listo para implementar para superar este problema. Un sitio web moderno de WordPress generalmente consta de contenido mucho más rico que simplemente títulos y fragmentos de texto. Los complementos como Campos personalizados avanzados y WooCommerce introducen campos personalizados que almacenan piezas específicas de contenido, como precios, imágenes adicionales, subtítulos, etc. Esas funciones por sí solas son geniales, pero ¿cómo se realiza un seguimiento de todo ese contenido cuando todavía solo puedes ver el título, la fecha y el autor en las pantallas de administración? La respuesta es que no puedes. En este tutorial, abordaremos este problema mostrándote un código personalizado fácil de implementar. Para aquellos de vosotros que no queráis codificar, os mostraremos cómo configurar el complemento Admin Columns para que haga el trabajo por vosotros. Además, aprenderéis a:

  • agregar nuevas columnas a la descripción general de las publicaciones,
  • ordenar tus publicaciones por estas columnas,
  • crear un formulario de filtrado para encontrar tu contenido,
  • usar Admin Columns para editar el contenido en línea (sin tener que navegar hasta la publicación individual).

Un caso de uso motivador  #

Imagina que tienes la tarea de crear o administrar un sitio web que contenga la cartera de una agencia inmobiliaria. En el sitio web, muestra imágenes, direcciones de casas, ubicaciones, número de habitaciones y otros atributos. En la pantalla de administración, administras la cartera, agregando, eliminando y editando bienes inmuebles existentes. Las columnas que WordPress muestra de forma predeterminada (título, autor, fecha de publicación, número de comentarios) apenas son relevantes para tu sitio web de Real Estate, y estarías más interesado en ver las imágenes existentes y la información sobre los listados de Real Estate como un entero. Veamos una pantalla de descripción general de administrador estándar para tipos de publicaciones personalizadas:

Esto sería muy útil si se tratara de publicaciones de blog o noticias de nuestro sitio web, ¿verdad? Pero para nuestra cartera inmobiliaria, esto no nos da ninguna información. Lo mismo ocurre con las tiendas web, los concesionarios de automóviles, las carteras creativas, etc. Afortunadamente, existe una solución. Trabajaremos para obtener una descripción general mucho más agradable de nuestra cartera de Real Estate, que se verá así:

Como puedes ver, esto nos da mucha información sobre nuestra cartera de Real Estate. Ahora es mucho más fácil encontrar, validar y, como verás, editar el contenido. Te proporcionaremos una guía paso a paso para agregar columnas personalizadas a tus pantallas de administración de WordPress, clasificarlas y agregar filtros personalizados. También te mostraremos cómo hacer esto con el complemento Admin Columns. (Si no deseas codificar, puedes pasar a esa parte de inmediato).

Administrar columnas con código  #

En primer lugar, está la gestión de columnas para las pantallas de administración: agregar columnas que son específicas para tu tipo de contenido, eliminar columnas que están obsoletas y reordenar las columnas. Para este objetivo, WordPress ofrece la API de columnas. También está disponible para usuarios y taxonomías, pero nos centraremos en la pantalla de publicaciones.

El cambio de las columnas existentes se puede lograr usando dos ganchos de WordPress:, manage_[post_type]_posts_columns que le permite eliminar, reordenar y agregar columnas, y manage_[post_type]_posts_custom_column. En lugar de [post_type], ingresa el tipo de publicación que deseas orientar. Para las páginas, por ejemplo, usarías manage_page_posts_columns y manage_page_posts_custom_column, respectivamente. Si no has oído hablar de los enlaces de WordPress, te recomendamos que pases a la sección «Gestión de columnas con el complemento de columnas de administración». Explica cómo puedes administrar tus columnas sin tocar ningún código. Pero si tienes ganas de aprender, lee más sobre los ganchos de WordPress (filtros y acciones).

«¿Dónde coloco mi código?» #

Para agregar toda esta funcionalidad personalizada, necesitamos un lugar para ejecutar nuestro código. Esto se hace mejor en un complemento. En este tutorial, por ejemplo, estamos creando un complemento personalizado para ejecutar todo este código. Si no sabes cómo crear un complemento, puedes aprender a hacerlo. Todos los fragmentos de código que proporcionaremos irán en nuestro complemento personalizado. Es recomendable colocar dicho código en un complemento, no en tu tema.

Agregar, eliminar y reordenar columnas  #

El primer gancho para administrar columnas (manage_posts_columns) es un filtro que maneja la matriz de columnas. La matriz estándar de filtros para la descripción general de las publicaciones es la siguiente:


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

Vamos a eliminar algunas columnas de esta lista y agregar algunas. Para hacerlo, agregaremos una devolución de llamada al filtro manage_posts_columns y agregaremos nuestras columnas personalizadas a la matriz de columnas. Ten en cuenta que estamos usando el gancho manage_realestate_posts_columns. Aquí está el nombre de nuestro tipo de publicación realestate, pasado como primer argumento a la función register_post_type para registrar tipos de publicación personalizados. Lo usamos en lugar de [post_type] en el filtro 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;
}

La primera línea agrega nuestra función smashing_filter_posts_columns como devolución de llamada al filtro que maneja las columnas que se muestran. La segunda línea define la función de devolución de llamada. Las líneas 2 a 4 agregan nuestras columnas personalizadas a la lista de columnas. Finalmente, la línea 6 devuelve la lista de columnas resultante. Nota: La parte anterior a nuestras funciones smashing_ es solo una buena práctica para asegurarnos de que el nombre de nuestra función sea único en WordPress. La __función se utiliza para traducir la cadena al idioma preferido del usuario. Ten en cuenta que tanto para «Precio» como para «Área», usamos smashing como dominio de texto, que WordPress usa para determinar qué fuente debe usarse para traducir la cadena. Podemos omitir esto para traducir «Imagen» porque WordPress ya incluye traducciones de esta palabra. Puedes leer más sobre dominios de texto en el Codex de WordPress. Hemos agregado columnas para mostrar una imagen, el precio y el área, y se ha devuelto la matriz con las nuevas columnas. La lista de Real Estate resultante se ve así:

Todavía tenemos que hacer dos cosas:

  • Eliminar las columnas «Autor», «Fecha» y «Comentarios», que son irrelevantes para nuestro contenido de Real Estate.
  • Reordenar las columnas para que «Imagen» sea lo primero.

Modificaremos nuestra función para lograr esto. Ten en cuenta que no eliminamos explícitamente las tres columnas mencionadas anteriormente, sino que simplemente construimos una nueva matriz completa de columnas precisamente cuando las necesitamos. Se resaltan las líneas modificadas.

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

Nuestra nueva pantalla de descripción general de Real Estate está comenzando a tomar forma: se han eliminado las columnas irrelevantes y se han agregado otras nuevas en las posiciones correctas.

Poblando columnas  #

El siguiente paso es llenar nuestras columnas. Nuevamente, WordPress proporciona un gancho bastante simple para hacerlo: la acción manage_[post_type]_posts_custom_column. A diferencia del gancho discutido anteriormente, éste no es un filtro, por lo que solo nos permite agregar contenido, no cambiarlo. Por lo tanto, en la devolución de llamada para esta acción, simplemente vamos al contenido echo de la columna que queremos mostrar. Comencemos agregando la columna «Imagen».


add_action( 'manage_realestate_posts_custom_column', 'smashing_realestate_column', 10, 2);
function smashing_realestate_column( $column, $post_id ) {
  // Image column
  if ( 'image' === $column ) {
    echo get_the_post_thumbnail( $post_id, array(80, 80) );
  }
}

Agregamos una función de devolución de llamada smashing_realestate_column, a la acción 'manage_realestate_posts_custom_column', tomando dos parámetros: el nombre de la columna y el ID de la publicación. Esto se indica mediante el cuarto parámetro add_action: Especifica el número de argumentos que espera la función de devolución de llamada. El tercer parámetro, llamado prioridad del gancho, determina en qué orden se deben ejecutar las funciones de devolución de llamada registradas en el gancho. Lo dejaremos en el valor predeterminado, que es 10. Esta función de devolución de llamada rellena la columna «Imagen» de una sola publicación.

Las dos columnas restantes, «Precio» y «Área», se almacenan como campos personalizados con las teclas price_per_month y area, respectivamente. Los mostraremos de la misma manera que lo hicimos con la imagen, mostrando «n / a» cuando un precio o un valor de superficie no esté disponible. La implementación es muy similar para ambas columnas. Comenzando con la columna de precio, las líneas cambiadas en nuestra función smashing_realestate_column se resaltan en el bloque de código a continuación.

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

  
  
  // Monthly price column
  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';
    }
  }
  
  
}

El siguiente es la columna area. Excepto por la unidad (metros cuadrados, m 2, en lugar de dólares), el código es prácticamente el mismo:

add_action( 'manage_realestate_posts_custom_column', 'smashing_realestate_column', 10, 2 );
function smashing_realestate_column( $column, $post_id ) {
  [...]

  
  
  // Surface area column
  if ( 'area' === $column ) {
    $area = get_post_meta( $post_id, 'area', true );

    if ( ! $area ) {
      _e( 'n/a' );
    } else {
      echo number_format( $area, 0, '.', ',' ) . ' m2';
    }
  }
  
  
}

¡Eso es todo! Nuestra página de descripción general de Real Estate ahora contiene toda la información relevante que queremos mostrar:

Pasemos a algunas de las cosas más originales. ¡Agreguemos algunas funciones de clasificación a nuestras columnas!

Haciendo columnas clasificables  #

Hacer que las columnas se puedan ordenar es relativamente fácil en WordPress, sin embargo, rara vez se implementa para columnas personalizadas. La clasificación te ayuda a organizar el contenido y te permite encontrar contenido rápidamente. Por ejemplo, podríamos ordenar nuestra descripción general de Real Estate por precio y luego encontrar nuestras propiedades más baratas y caras. Comenzaremos agregando nuestra columna «precio» a la lista de columnas ordenables:


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

Este código se conecta al filtro manage_edit-realestate_sortable_columns y se agrega smashing_realestate_sortable_columns como una función de devolución de llamada (línea 1). La columna «precio» se puede ordenar agregándola a la lista de columnas ordenables en la línea 3. Ten en cuenta que la clave de matriz, price es el nombre que le hemos dado a nuestra columna antes. El valor de la matriz se usa para decirle a WordPress qué debe ordenar. Podríamos, por ejemplo, utilizar las estrategias de ordenación nativas de WordPress para ordenar por título, fecha o recuento de comentarios. En nuestro caso, sin embargo, queremos ordenar por un campo personalizado. Esto requiere que creemos otra función, que necesita alterar la consulta de publicaciones si estamos tratando de ordenar por precio. Usaremos la acción pre_get_posts. Nos permite cambiar el objeto WP_Query (el objeto que WordPress usa para consultar publicaciones) y se activa antes de que se consulten las publicaciones. Verificamos si ordenar por precio y, de ser así, cambiamos la consulta en consecuencia:


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

Las líneas 1 y 2 agregan la función de devolución de llamada a la acción e inician la definición de la función de devolución de llamada, respectivamente. La línea 3 luego verifica si estamos en el panel de administración y si la consulta es la consulta de publicaciones principales (consulte el Codex para obtener más información). Si no es así, no cambiamos la consulta. Luego, verificamos si la estrategia de clasificación actual es por precio. Si es así, ajustamos la consulta en consecuencia: establecemos el valor meta_key en price_per_month, diciéndole a WordPress que recupere este campo personalizado para todos los bienes raíces, y establecemos la clave orderby en meta_value, que le dice a WordPress que ordene por el valor que pertenece a la meta clave especificada. Finalmente, le decimos a WordPress que ordene numéricamente en lugar de alfabéticamente, porque «precio» es una columna numérica. Nota: Es posible que hayas notado que el filtro al que nos enganchamos tiene un nombre manage_edit-realestate_sortable_columns, mientras que podría haber esperado que lo fuera manage_realestate_sortable_columns(sin edit-). Esto es simplemente una inconsistencia en la nomenclatura de los filtros en WordPress. El resultado es una columna de precios ordenable:

El mismo procedimiento se puede repetir para la columna «área». Para las columnas de texto, que deben ordenarse alfabéticamente, asegúrate de omitir la parte $query->set('meta_type', 'numeric').

Administrar columnas con el complemento Admin Columns  #

Ahora que hemos cubierto la parte de programación de este tutorial, es hora de pasar al método mucho más simple: usar el complemento Admin Columns. Sin tocar ningún código y usando una interfaz simple de arrastrar y soltar, puedes administrar columnas con solo unos pocos clics. Existen más de 150 tipos de columnas. Viene con campos opcionales que te permiten personalizar el nombre y el comportamiento de una columna. En esta última parte del tutorial, te mostraremos cómo configurar las columnas de administración para crear exactamente la misma descripción general que antes. Además de eso, te mostraremos cómo puedes filtrar y editar contenido directamente desde las pantallas de descripción general del contenido. En primer lugar, instala Admin Columns como instalarías cualquier complemento y actívalo. Estás listo para usar de inmediato, así que comencemos a administrar nuestras columnas yendo a la página «Configuración de columnas». Admin Columns te permite controlar las columnas por tipo de contenido (por ejemplo, publicaciones, páginas, usuarios o comentarios) usando el cuadro desplegable resaltado en la imagen de arriba. En nuestro caso, seleccionaremos el tipo de publicación «Inmobiliaria». Verás la pantalla que muestra inmediatamente las columnas que están activas actualmente para este tipo de publicación.

Agregar, eliminar y reordenar columnas  #

Limpiemos un poco eliminando las columnas que no necesitamos para nuestra descripción general de Real Estate:

¿Fue fácil? Continuaremos agregando nuestra primera columna relevante: la imagen destacada que muestra una imagen de la propiedad. Para hacerlo, simplemente haz clic en el botón «Agregar columna», elige el tipo de columna «Imagen destacada» del menú desplegable y completa la configuración correspondiente:

Como puedes ver, Admin Columns muestra opciones de visualización relevantes para tus columnas a fin de brindarte un control total sobre su apariencia. Aquí, se pide que especifiques las dimensiones de la imagen para mostrar. Más adelante, veremos que Admin Columns muestra las opciones adecuadas cuando seleccionas un tipo de columna diferente. Para estas opciones, Admin Columns intenta presentar valores predeterminados razonables para minimizar el tiempo necesario para agregar nuevas columnas. La última parte nos mostró cómo arrastrar la columna a la primera posición. Admin Columns te permite reordenar las columnas simplemente arrastrándolas. Nuestra pantalla de Real Estate ahora se ve así:

Ahora vamos a agregar las dos columnas para mostrar el área de vivienda y el alquiler mensual de la propiedad. Debido a que hemos agregado estos campos personalizados usando el complemento Campos personalizados avanzados, usaremos el complemento de integración ACF de Admin Columns para esta tarea. Sin embargo, la columna «Campo personalizado» también habría sido suficiente para este propósito. La siguiente animación muestra el proceso de agregar las columnas «Área» y «Precio»:

Nota: Admin Columns ofrece complementos de integración para muchos otros complementos, incluidos WooCommerce, Ninja Forms y Yoast SEO. Para aquellos que siguieron los ejemplos de código y prestaron mucha atención, no agregamos la columna «Ciudad». Es un poco más complicado hacerlo con código, pero con Admin Columns es muy sencillo. Simplemente seleccionamos la columna «Taxonomía» y escogemos la taxonomía «Ciudad», ¡y listo! Nuestro resultado está ahí. ¿No te lo dijimos? ¡Es una brisa!

Dependiendo de la velocidad de manejo del mouse, hemos logrado este resultado, de arriba a abajo, ¡en algún lugar entre dos y tres minutos!

Ordenar y filtrar con columnas de administrador  #

La mayor parte de lo que ha visto hasta ahora es parte de la versión gratuita de Admin Columns, que se puede descargar de WordPress.org. Sin embargo, también existe Admin Columns Pro, que ofrece funciones adicionales. Discutiremos las características más destacadas para este caso de uso: clasificación, filtrado y edición. Estas funciones te ayudarán a encontrar y actualizar rápidamente tu contenido directamente desde la pantalla de descripción general. Aunque las funciones pueden explicarse por sí mismas, las explicaré muy rápidamente en el contexto de las columnas de administración. La clasificación mostrará tu contenido en un orden particular según el valor de una columna. Es genial para obtener información sobre tu contenido muy rápidamente. Por ejemplo, te permite ver qué páginas tienen una plantilla de página y ordenarlas alfabéticamente. Para un blog normal, puedes averiguar rápidamente qué usuarios han escrito el mayor número de publicaciones clasificando a los usuarios de acuerdo con tu recuento de publicaciones. El filtrado te ayuda a encontrar contenido más rápido. Puedes filtrar columnas que tienen un valor específico o un valor dentro de algún rango (para columnas numéricas) o sin ningún valor establecido. Por ejemplo, puedes encontrar productos de comercio electrónico dentro de un rango de precios o publicaciones a las que les falta una imagen destacada o un campo personalizado. Incluso podrías usar varios filtros juntos para orientar el contenido con mayor precisión. Volvamos a nuestro caso de uso y consideremos un ejemplo simple: queremos encontrar casas con la mayor superficie. Esto nos llevará solo unos segundos porque simplemente podemos hacer que la columna «Área» se pueda ordenar y ordenar por esa columna en la pantalla de descripción general de Real Estate:

Ahora, vayamos un paso más allá agregando un filtro: queremos encontrar las 10 mejores casas con las áreas de superficie más grandes, pero solo aquellas con un precio de alquiler mensual entre 300 $ y 500 $. Nuevamente, unos pocos clics son suficientes:

Por supuesto, hay muchas otras formas de ordenar y filtrar. Combinadas, las funciones son una herramienta poderosa para obtener información sobre su contenido.

Edición con columnas de administrador  #

La pantalla de descripción general de Real Estate ahora muestra toda la información relevante y te permite encontrar el contenido que necesitas. Sin embargo, falta una cosa: para editar nuestro contenido, tenemos que ir a la página de edición, buscar los campos que queremos cambiar, actualizarlos, hacer clic en «Actualizar» y volver a nuestra pantalla de resumen. ¿Qué pasaría si pudiéramos hacer el mismo proceso en solo tres simples pasos: hacer clic, editar, guardar? Con Admin Columns Pro, podemos.

La captura de pantalla anterior muestra el modo de «edición directa» para el título de la propiedad y está disponible para casi todas las columnas personalizadas. En Admin Columns Pro, la edición en línea se puede alternar desde la pantalla de configuración de columnas. Detecta automáticamente su tipo de contenido y agrega editabilidad en consecuencia. Con imágenes, por ejemplo, aparecerá la galería multimedia. En este ejemplo, usamos el complemento Advanced Custom Fields para Admin Columns, que viene con todas las licencias comerciales y de desarrollador. Detecta sus campos ACF y los agrega como posibles columnas. Son automáticamente ordenables, filtrables y editables, simplemente cambia el icono correspondiente. El resultado es bastante bueno: nuestra pantalla de descripción general de Real Estate agrega íconos de edición a todas las celdas, y con solo hacer clic, editar y guardar, podemos actualizar nuestro contenido. Veamos eso en la práctica: habilitamos la edición directa para todas nuestras columnas personalizadas, y usaremos esa funcionalidad para actualizar rápidamente nuestro contenido:

Los cambios se guardan instantáneamente. Si algo sale mal, los botones de deshacer y rehacer están disponibles para revertir rápidamente. La edición directa es compatible con casi todas las columnas. Con los complementos Advanced Custom Fields y WooCommerce, Admin Columns te brinda una experiencia de edición nativa como si estuvieras editando desde la página de detalles.

Terminando  #

Admin Columns puede hacer cosas mucho más interesantes, pero no hay suficiente espacio en este artículo. ¿Por qué no echas un vistazo y compruebas algunas de las increíbles funciones por ti mismo? ¡Esperamos verte!

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

GetResponse vs Mailchimp: ¿Cuál es la mejor herramienta de marketing? (2022)

Cómo aumentar el tamaño máximo de carga de archivos en WordPress (5 métodos)