Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Crear un sencillo CRM en WordPress: Adición de columnas a WP_List_Table

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Create a Simple CRM in WordPress.
Create a Simple CRM in WordPress: Advanced Custom Fields
Create a Simple CRM in WordPress: Extending WordPress Search

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Hemos estado viendo cómo crear un sencillo sistema CRM en WordPress. En la última parte de esta serie, usamos Advanced Custom Fields para añadir campos personalizados a nuestro tipo de entrada personalizada Contactos. Aprendimos a usar Advanced Custom Fields y a configurarlo para que funcione mediante programación.

Hoy, veremos cómo mostrar directamente los datos almacenados en nuestros campos personalizados dentro de nuestra tabla de contactos.

Todo sobre WP_List_Table

Cada tipo de entrada que tenga un panel utiliza la clase WP_List_Table para representar la familiar tabla y sus acciones asociadas:

De forma predeterminada, WordPress mostrará las siguientes columnas:

  • casilla de verificación (utilizada para seleccionar/deseleccionar entradas, que luego pueden tener acciones aplicadas a ellas)
  • título
  • autor
  • comentarios
  • fecha

Para nuestro tipo de entrada personalizada Contacto, esto no es muy útil si queremos ver rápidamente los detalles clave de un vistazo, como el número de teléfono o la foto del contacto.

WordPress proporciona un filtro y una acción que puedes utilizar para añadir nuevas columnas al WP_List_Table y determinar su salida para cada entrada.

Comencemos añadiendo el filtro manage_edit-POST_TYPE-_columns a la construcción de clase de nuestro plugin. {El POST_TYPE} nombre de nuestro Post Type, que en este caso es contact:

También necesitamos definir nuestra función add_table_columns(), que le indica a WordPress los nombres de las columnas adicionales que nos gustaría mostrar en nuestra tabla Contactos. Esta función acepta una matriz de columnas existentes, que podemos ampliar añadiendo nuestras propias columnas de tabla personalizadas.

Nos aseguramos de que las claves de matriz coincidan con los nombres de campo personalizados de ACF. Si tienes diferentes campos, asegúrate de que los nombres de clave de columna coincidan con los ajustes de nombre de campo de tus campos.

Visualiza tu tabla Contactos haciendo clic en Contactos en el menú del escritorio de WordPress, y verás nuestras nuevas columnas:

Aunque, no se muestran datos para cada Contacto de la tabla. Tenemos que añadir la acción manage_ POST_TYPE _posts_custom_column al constructor de clase de nuestro plugin. El {POST_TYPE} será nuevamente el nombre de nuestro tipo de entrada, que en este caso es contact:

También necesitamos definir nuestra función output_table_columns_data(), que le Indica a WordPress qué mostrar para cada combinación de Contacto y columna. Debido a que nos hemos aseguramos de que nuestros nombres de clave de columna coincidan con nuestros Nombres de Campo ACF, esto hace que nuestra codificación sea más fácil. Advanced Custom Fields tiene una función get_field(), que acepta los parámetros Field Name (nombre de campo) y Post ID (ID de entrada) para recuperar el valor almacenado:

Vuelve a cargar la tabla Contactos y verás los campos personalizados:

Dependiendo de tu configuración PHP, la columna Foto estará en blanco o emitirá un aviso php:

El campo de imagen de Advanced Custom Fields devuelve una matriz cuando se utiliza get_field(), que comprende los detalles de la imagen y la URL de cada tamaño de imagen registrado, el ancho y el alto (el tamaño registrado de una imagen se basa normalmente en los temas y plugins instalados).

Vamos a modificar nuestra función para generar los datos de la matriz correcta para mostrar una imagen:

Vuelve a cargar la tabla de contactos y deberías ver la foto de cada contacto:

Columnas ordenables

¿Qué pasa si necesitamos ordenar rápidamente nuestros Contactos por nombre, número de teléfono o dirección de correo electrónico? Ya podemos ordenar en la columna de nombre (o, más bien, el título), pero en este momento no hay ninguna funcionalidad para decirle a WordPress cómo ordenar nuestras columnas de número de teléfono y dirección de correo electrónico.

Volvamos al constructor de nuestro plugin. Necesitamos añadir el filtro manage_ POST_TYPE _posts_custom_column a la construcción de nuestra clase de plugin, para indicarle a WordPress que queremos permitir que ciertas columnas puedan ser ordenadas. El {POST_TYPE} será de nuevo el nombre de nuestro tipo de entrada, que en este caso es contact:

Al igual que con nuestros anteriores acciones y filtros, también necesitamos definir nuestra función define_sortable_table_columns(), que le indica a WordPress qué columnas se pueden ordenar:

Pasa el cursor del ratón sobre las columnas Dirección de correo electrónico y Número de teléfono, y verás que aparece una flecha, mostrándonos que podemos ordenar en base a los datos de la correspondiente columna:

En este momento, al hacer clic en el encabezado de la columna para ordenarla en base a sus datos no pasará nada, ya que el parámetro orderby que se establece en la URL no es uno que WordPress vaya a reconocer.

En el constructor de nuestro plugin, vamos a añadir un filtro en el método request, y luego definiremos nuestra función para comprobar si estamos tratando de ordenar una columna personalizada (y si es así, modificaremos la consulta de entradas para que WordPress pueda entenderlo):

Debido a que el filtro request se ejecuta en cada carga de página de WordPress (ya sea el front-end del sitio web o en la interfaz del escritorio de WordPress), queremos minimizar la frecuencia con la que se llama. Hacemos esto añadiendo el filtro únicamente si estamos en la Administración de WordPress (is_admin()).

A continuación, definamos nuestra función orderby_sortable_table_columns():

Esta función comprueba que estamos viendo nuestro tipo de entrada personalizada Contactos y, si es así, que se ha establecido un parámetro orderby que coincide con email_address o phone_number. Estos se establecen si el usuario ha hecho clic en una columna de la tabla Contactos para ordenar en base al Número de teléfono o a la Dirección de correo electrónico.

Hagamos clic en la columna Dirección de correo electrónico, y veremos que los resultados se ordenan correctamente:

Al hacer clic de nuevo se invertirá el orden de los resultados:

Qué viene a continuación...

En el siguiente artículo, vamos a ampliar el filtro y la funcionalidad de búsqueda, lo que nos permitirá buscar los datos almacenados en nuestros campos personalizados avanzados.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.