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

Crear un simple CRM en WordPress: Campos personalizados avanzados

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Create a Simple CRM in WordPress.
Create a Simple CRM in WordPress: Creating Custom Fields
Create a Simple CRM in WordPress: Adding Columns to WP_List_Table

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, añadimos un campo personalizado de dirección de correo electrónico a nuestro tipo de entrada personalizada Contactos. Aprendimos a escribir y leer los datos de este campo personalizado e implementamos un nonce para garantizar que los envíos de nuestros formularios sean seguros.

Hoy, vamos a cubrir cómo utilizar Advanced Custom Fields, un popular plugin de WordPress, para generar rápidamente campos personalizados.

Advanced Custom Fields

La creación de campos personalizados para un tipo de entrada consume mucho tiempo y hemos identificado consideraciones de seguridad claves durante el proceso. Para un CRM, donde podemos tener varios tipos de distintos campos, como un menú desplegable de selección o casillas de verificación, la creación manual de campos en un plugin nos llevaría una cantidad significativa de tiempo.

Advanced Custom Fields es un plugin de WordPress que proporciona una interfaz de usuario y métodos programáticos para crear meta boxes personalizados y campos personalizados en cualquier tipo de entrada.

También proporciona una mayor gama de tipos de campos de formulario, como por ejemplo:

  • editores visuales
  • número / rango
  • contraseña
  • correo electrónico
  • imagen
  • selección
  • casilla de verificación
  • objetos de entrada
  • Google Maps

Los meta boxes personalizados y sus campos pueden tener condiciones asociadas a ellos, de manera que solo se muestren en función del tipo de entrada o del valor de otro campo. Esto es realmente útil si solo queremos mostrar un campo cuando se haya marcado previamente una casilla de verificación, por ejemplo.

Instalar Advanced Custom Fields

Dirígete a Plugins > Añadir nuevo en tu escritorio de WordPress. En el campo de búsqueda, escribe Advanced Custom Fields y haz clic en Buscar plugins:

En la pantalla de resultados de búsqueda, localiza Advanced Custom Fields y haz clic en Instalar ahora.

Una vez instalado, activa el plugin.

Eliminar nuestro campo personalizado

Como vamos a usar Advanced Custom Fields para generar nuestros meta boxes y campos personalizados, la forma más rápida de eliminar el campo personalizado que generamos en la segunda parte de esta serie consiste en descargar el código de la Parte 1 de esta serie de tutoriales.

Espera, ¿de qué trataba la Parte 2?

En lugar de pasar simple y directamente al empleo de Advanced Custom Fields, explicamos en detalle cómo funciona el proceso para registrar meta boxes personalizados, campos personalizados, y cómo guardar datos y recuperarlos.

Al hacer esto, tenemos una idea más clara de cómo funciona Advanced Custom Fields, además de comprobar lo mucho más rápido que es (por no hablar de una mejor interfaz de usuario).

Crear un grupo de campos

Haz clic en Campos personalizados en el menú de Administración de WordPress:

Verás la pantalla Grupos de Campos. Piensa en un grupo de campos como un meta box personalizado que describimos en la Parte 2. Vamos a crear nuestro primer grupo de campos, haciendo clic en Añadir nuevo junto al título del grupo de campos:

Llama al grupo de campos Contact Details (detalles de contacto) y, a continuación, haz clic en el botón Añadir campo para agregar nuestro primer campo:

Introduce los siguientes detalles:

Campo Valor
Etiqueta de campo Dirección de correo electrónico
Tipo de campo Correo electrónico
¿Requerido?

Desplázate hacia abajo hasta el cuadro Ubicación. Queremos que este grupo de campos solo se muestre en nuestro tipo de entrada personalizada Contacto, así que vamos a añadir una condición seleccionando Mostrar este grupo de campos si Post Type es igual al contacto:

Desplázate hacia abajo hasta el cuadro de opciones. Establece el Número de orden a 1, Estilo a Estándar y marca todas las casillas para Esconder en pantalla, excepto la opción Editor de Contenido:

Haz clic en Publicar y el grupo de campos se guardará.

Vamos a comprobar que nuestro campo está disponible en nuestro tipo de entrada Contacto, yendo a Contactos > Añadir nuevo del escritorio de WordPress:

Sigue adelante e introduce un nombre y una dirección de correo electrónico para tu Contacto y haz clic en Publicar. Verás cómo Advanced Custom Fields controla toda la validación de los campos, el guardado y la lectura de los datos de campos personalizados.

Vamos a añadir algunos campos más a nuestro actual Grupo de Campos. Edita el grupo de campos Detalles de Contacto que creaste antes y añade los siguientes campos:

Número de teléfono
Campo Valor
Etiqueta de campo Número de teléfono
Tipo de campo Número
¿Requerido?
Foto
Campo Valor
Etiqueta de campo Foto
Tipo de campo Imagen
¿Requerido? No
Tipo
Campo Valor
Etiqueta de campo Tipo
Tipo de campo Selección
¿Requerido?
Opciones Prospecto: Prospecto
Cliente : Cliente

Siéntete libre de añadir cualquier otro campo o información que normalmente almacenarías sobre tus clientes y clientes potenciales.

Cuando hayas terminado, haz clic en Actualizar y empieza a añadir, editar y administrar tus contactos:

Evita cambios en el campo personalizado

No queremos que otros administradores de WordPress cambien estos campos (o peor aún, los eliminen), ya que significaría que no podremos ver o editar la información de un contacto.

Abre el archivo del plugin que creamos anteriormente, y añade lo siguiente antes de class WPTutsCRM {:

Guarda el archivo del plugin y vuelve a cargar la interfaz de administración de WordPress. Verás que la entrada de menú Campos personalizados ha desaparecido:

Definir campos personalizados de forma programática

Podríamos ir un paso más allá y definir mediante programación nuestros campos personalizados, en lugar de confiar en la interfaz de usuario del plugin Advanced Custom Fields para definirlos.

Esto sería útil si, por ejemplo, distribuimos nuestro plugin CRM entre múltiples instalaciones de WordPress. Llevaría mucho tiempo:

  • instalar el plugin CRM,
  • Instalar Advanced Custom Fields
  • definir nuestros grupos de campos y campos personalizados

Elimina el siguiente código de nuestro plugin, para que podamos acceder de nuevo a través de la administración de WordPress:

En la Administración de WordPress, haz clic en Campos personalizados y, a continuación, haz clic en la opción Exportar.

A partir de aquí, seleccionemos el grupo Detalles de contacto y haz clic en la opción Exportar a PHP:

Haz clic en el código que aparece en la pantalla, lo que lo resaltará todo. Copia esto en tu portapapeles y pégalo dentro de una nueva función de tu plugin:

A continuación, desactiva el plugin Advanced Custom Fields y, a continuación, mueve la carpeta del plugin advanced-custom-fields a nuestra carpeta tuts-crm:

Al mover Advanced Custom Fields fuera del directorio Plugins, tendremos que activarlo manualmente desde nuestro plugin. Vamos a hacerlo añadiendo el siguiente código antes de la clase WPTutsCRM {:

Por último, necesitamos indicarle a Advanced Custom Fields que tenemos grupos de campos y campos personalizados definidos mediante programación. Cambia la construcción de nuestro plugin a lo siguiente:

Vuelve a cargar el escritorio de WordPress y crea y/o edita un contacto. Verás que nuestros grupos de campos y campos personalizados permanecen en su lugar.

Desventajas

Agrupar un plugin dentro de un plugin no siempre es el mejor enfoque. Si bien nos permite distribuir nuestro plugin rápidamente a través de múltiples instalaciones de WordPress en un solo paso, tendríamos que emitir una actualización a nuestro plugin cada vez que:

  • los campos se creen, editen o destruyan
  • Advanced Custom Fields tenga una actualización disponible

Dependiendo de tu caso de uso, es posible que prefieras este enfoque combinado. Si estás ejecutando esto en un único sitio, el uso de la interfaz de usuario para definir los grupos de campos y los campos personalizados puede que sea un enfoque más rápido y sencillo.

A continuación...

En el siguiente artículo, vamos a editar la tabla Administración de WordPress (conocida también como WP_List_Table) para mostrar 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.