Crea campos personalizados avanzados con WordPress

Cuando hablamos de la gestión de campos personalizados, el plugin Advanced Custom Fields es el que se nos viene a la cabeza a todos. Es el plugin por excelencia para crear y gestionar nuestros campos personalizados.

En este curso aprenderás qué es ACF y todo lo relacionado con sus campos. ¿Y cómo lo haremos? Crearemos una web real, haremos una academia online.

Lo primero que haremos es crear los Tipos de Entradas Personalizadas que necesitaremos para la academia. Con ellas gestionaremos los cursos, clases y profesores.

Una vez tenemos esta base, pasaremos a crear los campos personalizados que necesitaremos para gestionar todos los datos y la información. Estos campos nos ayudarán a crear los contenidos de una forma más ágil y que sea más sencilla su gestión.

Por si esto fuera poco, aprenderás a crear un bloque de Gutenberg para así mostrar un curso allí donde quieras. Incluso crearás un Widget personalizado.

También aprenderás a crear una página de opciones desde la cual gestionar diferentes opciones. Entre estas opciones, crearás un banner para anunciar el último curso que has creado.

¿Te parece poco? Pues a todo esto le seguirá una clase para que aprendas a crear tus propios Widgets y así utilizarlos allá donde quieras.

Y, para rematar el curso, tendremos una clase con un ejemplo real y completo, desde cero, paso por paso. Crearemos una academia online (solo la parte de ACF) y podrás verlo con todo detalle.

Qué son los campos personalizados

En WordPress contamos con una funcionalidad/característica conocida como campos personalizados. Con ellos podemos añadir nuevos campos a nuestras entradas, páginas y tipos de entradas personalizadas.

Si, por ejemplo, queremos añadir un campo de precio a una entrada, podemos crear un campo personalizado y facilitar esta acción de introducir ese valor.

Qué es ACF

Advanced Custom Fields es uno de los plugins más conocidos y utilizados a la hora de desarrollar una página web en WordPress.

Gracias a él, podemos crear campos personalizados de forma sencilla desde el panel de administración de WordPress. Además, cuenta con unas opciones avanzadas que nos permiten crear una cantidad de campos muy diferentes y funcionales.

ACF Gratuito vs Pro

Advance Custom Fields es un plugin freemium, esto es, tiene una versión gratuita y otra versión de pago.

Es importante destacar que con la versión gratuita, podemos hacer desarrollos muy avanzados y con muchas funcionalidades diferentes. Para la gran mayoría de personas, y proyectos, la versión gratuita es más que suficiente.

En cuanto a la versión de pago, nos ofrece algunas funcionalidades extra como:

• Repetidor: para poder repetir campos

• Bloques: para crear bloques de Gutenberg

• Contenido flexible: para gestionar diferentes diseños de campos

• Páginas de opciones: para gestionar los ajustes de la página

• Galería: crea galerías de forma sencilla

• Clonado: clonar campos y grupos de campos con un clic.

Cómo instalar Advanced Custom Fields

Para la versión gratuita, tan solo tenemos que acceder a la sección de plugins de WordPress » añadir nuevo » buscar en el repositorio oficial de plugins.

En cuanto a la versión Pro, podremos descargar el archivo .zip de la página web de Advanced Custom Fields. Una vez lo tenemos, nos dirigimos a la sección de plugins » añadir nuevo » subir plugin » seleccionamos el archivo .zip y le damos a instalar.

La clave de Advanced Custom Fields son sus campos personalizados. Lo primero que tenemos que hacer es crearlos para así poder hacer uso de ellos.

Crear grupo de campos

Lo primero que tenemos que hacer es ir a la sección de Campos personalizados » Grupo de Campos

En este caso, haremos un grupo llamado «Charlas»

Tipos de campos

Con ACF podemos crear diferentes tipos de campos personalizados. Salvo el campo de Galería, todos los tipos de campos están disponibles en la versión gratuita de ACF.

Añadir campos al grupo

Una vez hemos creado el grupo de campos, es hora de añadir campos personalizados al mismo.

Hacemos clic en «+ Añadir Campo» y rellenamos los campos solicitados. Puedes ver un ejemplo en el vídeo del curso.

Añadiremos los siguientes campos:

• Presentación PDF (Tipo: url)

• YouTube ID (Tipo: texto)

Gestionar campos

ACF nos ofrece diferentes opciones a la hora de gestionar los campos personalizados. Entre ellos encontramos los siguientes:

• Condicional: podemos hacer que un campo se muestre o se oculte dependiendo de diferentes factores. Perfecto para ocultar aquellos campos no necesarios y evitar ruido visual.

• Pestañas: si tenemos muchos campos, podemos agruparlo en pestañas para facilitar su gestión.

• Exportar / Importar: podemos exportar campos y así importarlos en otros proyectos.

Añadir contenidos a los campos

Ahora lo que tenemos que hacer es acceder a nuestras entradas, que es el tipo de entrada que hemos seleccionado, y añadir los contenidos.

Creamos una nueva entrada y ahí, abajo del todo, encontraremos los diferentes campos que habíamos creado.

Podemos añadir la url de la presentación y la ID del vídeo de YouTube que queremos añadir.

Si guardamos el post y lo publicamos, veremos que los datos no se ven el artículo. En la próxima clase veremos cómo mostrar los contenidos de esos campos.

Hasta ahora hemos visto diferentes tipos de campos básicos… pero es hora de ver algunos tipos de campos más avanzados. En esta clase veremos qué son los campos relacionables y las diferentes opciones que tenemos.

Estos campos te permite relacionar el campo personalizado con otro contenido que tengas en tu página web.

Tipos de campos relacionales:

• Enlace: utiliza el mismo menú contextual que tienes a la hora de añadir un enlace en un post/página.

• Objeto Post: puedes relacionar un post/página y poder así coger toda la información del mismo (título, contenido, campos personalizados, etc.)

• Link de página: sería para escoger un post/página directamente, sin menú contextual como en «enlace».

• Relación: te permite seleccionar post/páginas relacionados. Perfecto para hacer los típicos bloques de «artículos relacionados…»

• Taxonomía: podrás escoger entre las diferentes taxonomías que tienes en la web.

• Usuario: podrás escoger un usuario y así poder utilizar toda la información asociada a él/ella.

Los campos repetibles son una funcionalidad increíble que nos ofrece Advanced Custom Fields. Es importante destacar que esta funcionalidad solo está disponible en la versión PRO del plugin… pero merece mucho la pena.

Hasta ahora hemos visto cómo podemos crear campos y añadirlos a los post, páginas y contenidos que necesitemos. Pero… ¿qué pasa si queremos usar los mismos campos más de una vez en un mismo contenido?

En el vídeo de esta clase, podemos ver cómo podemos crear y hacer uso de este tipo de campo personalizado. Como breve resumen, estos son los pasos:

• Añadir un nuevo campo de tipo «Repeater»

• Insertar en él los campos que queremos que sean repetibles

Gutenberg fue una de esas novedades importantes dentro del ecosistema de WordPress. Aún está en fase de desarrollo y tiene mucho que mejorar… pero ha venido para quedarse.

Crear un Bloque de Gutenberg puede no ser tan sencillo como se pudiera esperar. Ya no tenemos que saber solo PHP, si no que tenemos que tener conocimientos de JavaScript.

Pero aquí es donde entra el plugin de Advanced Custom Fields. Gracias a él, podremos crear Bloques de Gutenberg de forma sencilla y solo utilizando PHP.

Este es un ejemplo real de cómo mostramos los vídeos en Trinchera WP. El vídeo de esta clase se está mostrando utilizando este Bloque de Gutenberg, al igual que los vídeos de los artículos.

Registrar el bloque

Lo primero de todo, es registrar el bloque.

Importante destacar que el siguiente código es un ejemplo real de Trinchera WP y está creado en un plugin. Por favor, lee la documentación oficial que ofrece ACF.

Crear el grupo de campos

Una vez tenemos el bloque listo, es hora de crear el Grupo de Campos en nuestro wp-admin. Ahora podremos escoger el bloque como «lugar» donde mostrar estos campos.

Mostrar el contenido del Bloque

Ya tenemos el bloque creado y le hemos añadido los campos personalizados. Ahora mismo podríamos utilizar ese bloque, pero los contenidos del mismo no se estarían mostrando en el frontend.

Tenemos que «renderizar» ese contenido. Para ello, haremos algo parecido a como hacemos con el resto de campos personalizados.

Importante destacar que el siguiente código es un ejemplo real de Trinchera WP y está creado en un plugin. Por favor, lee la documentación oficial que ofrece ACF.

Seguramente te habrás dado cuenta que, al instalar un tema o un plugin, estos te crean un elemento en el menú principal del wp-admin. Gracias a este enlace, puedes acceder a los ajustes de dicho tema o plugin.

¿Pero qué pasa si nosotros también queremos hacer algo del estilo para gestionar nuestra página web?

Advanced Custom Fields nos ofrece una opción muy sencilla de crear esta página de opciones y de añadirle campos y contenidos.

Registrar la página de opciones

En este caso tenemos dos opciones:

Sencilla:

Este nos ofrece la opción de añadir nuestro elemento al menú, con su icono, título y enlace.

Importante: este es un ejemplo real de Trinchera WP. Para saber todas las opciones y funcionalidades, revisa la documentación oficial.

Con este código hemos establecido:

• page_title: el título de la página de opciones, lo que se ve en la parte superior.

• menu_title: el título que se verá en el enlace del menú.

• menu_slug: la url de la página de opciones.

Avanzado:

Podemos añadir «sub-páginas» a esta página de opciones.

Crear el Grupo de Campos

Una vez tenemos la página de opciones listo, es hora de crear el Grupo de Campos en nuestro wp-admin. Ahora podremos escoger la página de opciones como «lugar» donde mostrar estos campos.

En la clase anterior vimos cómo podíamos crear Bloques de Gutenberg con Advancend Custom Fields. Pero eso no es todo lo que este gran plugin nos ofrece… ¡también podemos crear widgets!

Crear un widget personalizado

Lo primero que haremos es crear un widget para nuestro proyecto, será un widget a medida que nos permitirá poner un mensaje de tipo banner para anunciar algo.

Importante destacar que el siguiente código es un ejemplo real de Trinchera WP y está creado en un plugin y no en el tema principal.

Crear el Grupo de Campos

Una vez tenemos el widget listo, es hora de crear el Grupo de Campos en nuestro wp-admin. Ahora podremos escoger el widget como «lugar» donde mostrar estos campos.

Añadir formulario al widget

Si queremos poder añadirle un título al Widget y poder guardar los datos, tenemos que añadirle la funcionalidad de «formulario».

Registrar Widget

Una vez tenemos todo listo, es hora de registrar el Widget para que nos aparezca en la lista de widgets disponibles.