Una de las funcionalidades de WordPress que cuando descubres y te acostumbras a utilizar te acaba resultando imprescindible son los campos personalizados o custom fields. En este artículo repasaremos qué son y cómo podemos sacarle el mejor partido en nuestra web.
¿Qué son los campos personalizados?
Como su nombre indica, son campos de entrada de contenido personalizados, que podemos añadir al editor de nuestras páginas o entradas para poder introducir información de forma diferenciada.
WordPress por defecto ya soporta los campos personalizados. Seguro que los has visto en tus páginas o entradas:
En muchas ocasiones, el tema o plantilla que utilizamos trae estos campos predefinidos para especificar variables de estilo o funcionalidad.
El problema es que la usabilidad de estos campos de WordPress es realmente mala y trabajar con ellos puede llegar a ser muy incómodo y difícil. Por eso en este artículo vamos a utilizar un plugin gratuito que nos va a facilitar mucho esta tarea: Advanced Custom Files.
ACF nos permite crear y editar campos personalizados para nuestra web de una forma muy visual e intuitiva.
¿Por qué queremos utilizar campos personalizados?
Imagínate que quieres añadir en tu web un directorio de empresas, de libros, cursos, profesionales, un portfolio, una lista de colaboradores, etc. Lo que sea que se parezca a un listado de entradas que tengan un diseño homogéneo, con unos campos comunes en cada uno de ellos.
Está claro que podemos utilizar una página estándar e ir poniendo un elemento debajo de otro, intentando que queden todas iguales. Pero a medida que vayas añadiendo, la página será cada vez más y más extensa, poco práctica de visualizar. El usuario no podrá realizar búsquedas por campos concretos, no podrás ordenarlos automáticamente ni filtrarlos.
También podemos hacerlo con entradas, una para cada elemento, añadiéndolas todas a una categoría concreta y así pudiendo filtrarlas y mostrarlas en una página diferenciada del resto. Podrás utilizar el editor visual para maquetarlo, intentando que queden todas lo más iguales posibles, pero tampoco podrás filtrar por los campos internos que necesites ni realizar búsquedas avanzadas.
Si eres desarrollador y estás preparando una web para un cliente, todavía se acentuará más el problema. ¿Cómo explicarle cómo debe hacer para introducir un nuevo elemento y que quede igual que el resto?
Los campos personalizados resuelven este problema pudiendo crear la estructura de los posts o entradas que necesitas creando un campo para cada uno de esos datos que serán comunes en todos los elementos y que querremos recuperar para búsquedas o filtros.
Por ejemplo, en el caso de un directorio de cursos, necesitaremos campos para:
- Título del curso
- Descripción
- Academia o formador del curso
- Fechas
- Tipo de curso (online / presencial)
- Precio
- Enlace para más información
- etc.
¿Por qué no utilizar un theme que ya traiga esos campos personalizados?
Existen muchos temas o plantillas de WordPress específicos para un tipo de web que ya vienen con tipos de post predefinidos para, por ejemplo, portfolio, cartera de servicios, testimonios, etc. Aunque visualmente son muy atractivos y pueden parecer la mejor opción, no es lo más recomendado.
Los temas deberían limitarse a añadir diseño a nuestro WordPress, estilos como tipografía, colores, maquetación de posts, de layouts de páginas, sidebars, etc. y deben dejar las funcionalidades para plugins, de forma que sea independiente una cosa de la otra, porque en el caso contrario nos vamos a ver atados a ese tema, y si en algún momento lo decidimos cambiar, perderemos toda la información que hayamos añadido en esos tipos de post y campos del tema.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
¿Cómo crear campos personalizados?
Una vez instalado el plugin Advanced Custom Fields, tendremos en el menú la opción para crear los campos personalizados fácilmente.
Lo primero será crear un grupo de campos personalizados. Podemos tener los grupos que queramos y especificar en que tipo de posts los querremos utilizar. De esta forma podemos utilizar diferentes tipos de campos personalizados separados y agrupados para diferentes categorías o etiquetas.
Podremos indicar que ese grupo de campos se aplique a un tipo de post, a una categoría, a páginas, a una categoría de página en concreto, asociarlo a una etiqueta, etc.
Las otras opciones que tenemos para el grupo de campos es:
- Orden: si tenemos varios grupos podemos escoger en que orden han de aparecer.
- Posición: Si queremos que aparezcan después del título, después del editor visual o en la barra lateral.
- Estilo: Si se mostrará los campos de este grupo agrupados en una metabox (la típica caja del editor de WordPress que muestra campos dentro de ella y se puede minimizar o desplegar) o no.
- Ocultar: Qué campos de los que vienen por defecto con WordPress queremos que no se muestren en ese tipo de post o entradas.
Una vez establecidas las características genéricas del grupo, podemos empezar a añadir cada uno de los campos que contendrá
ACF nos solicitará los datos para cada uno de ellos: etiqueta, título, el tipo de campo, si es obligatorio o no, las instrucciones para rellenarlo, etc. En función del tipo de campo que escojamos nos solicitará una información u otra.
Además de los tipos más comunes, como texto, numérico, checkbox, email o password, también podemos escoger algunos más avanzados, para adjuntar archivos o imágenes, editor visual (wysiwyg), selector de fecha o de color. Otros tipos de campo especiales serían los de estructura, para agrupar campos en pestañas o incluso de relación, para vincular el campo con otro post, una taxonomía, un link de página o un usuario.
Otra de las opciones que nos permite es mostrar el campo condicionalmente, es decir, que se muestre o no en función del valor de otro campo.
Por ejemplo, en el caso del directorio de cursos que estábamos viendo, ¿qué tipo campos podríamos crear?
- Título del curso -> podríamos utilizar directamente el título del post o crear uno personalizado de texto.
- Descripción -> campo wysiwyg para poder darle algo de formato a la descripción.
- Academia o formador del curso: podríamos crear un checkbox para diferenciar si es una academia o un formador y otro campo de texto para el nombre.
- Fechas: 2 campos de selector de fecha, uno para la inicial y otro para la fecha de finalización
- Tipo de curso (online / presencial): en este caso podríamos crear un select con opciones múltiples, por si el curso se imparte tanto presencial como online
- Precio: campo numérico
- Enlace para más información: campo de url
Podríamos ademas añadir un campo condicional para en el caso de que el curso fuera presencial nos mostrara un campo adicional para la dirección del centro donde se imparte, un campo de imagen para añadir el logo del centro, o un banner del curso, etc.
Determinando por separado cada uno de estos campos nos permitirá en la web, con algo de programación a medida, crear filtros para que el usuario pueda buscar el tipo de curso que más le interesa.
Como podéis ver, las posibilidades para crear un gestor avanzado de contenidos son enormes gracias a todas las opciones que tenemos al crear los campos personalizados.
¿Cómo mostrar los campos personalizados en nuestra web?
Una vez creados los campos, lo interesante es poder insertarlos en nuestra página de forma que podamos darles un estilo determinado y que siempre se muestren de la misma manera.
La forma más fácil, pero también menos práctica, es hacerlo mediante shortcodes dentro del editor visual de la entrada. Introduciendo el código [acf field=»nombre_campo»] se mostrará en nuestra web el valor de ese campo en concreto.
Pero si lo que buscamos con estos campos es poder maquetar y dar un estilo concreto para mostrarlos, la opción de los shortcodes no nos servirá.
La segunda forma, es modificar el tema correspondiente introduciendo los campos y el html que queramos para poder personalizarlo. Para ello, deberemos editar el archivo de página (usualmente page.php, pero dependerá de tu tema) o de entradas (single.php o content.php, también en función del tema) y añadir donde queramos que se muestre el valor del campo el código correspondiente:
<?php echo the_field("nombre_del_campo"); ?>
Es difícil generalizar, ya que cada theme o plantilla puede tener archivos propios y especiales, así que deberemos buscar aquel archivo donde se muestre el contenido del post o consultar con sus desarrolladores para que nos indiquen cómo hacerlo.
Otra opción, muy recomendada, es combinar los campos personalizados con Custom Post Types, tipos de post personalizados donde podremos agrupar todos esos campos que hemos creado.
Conclusión
Ya sea porque eres desarrollador y quieres facilitar la entrada de datos a tus clientes o porque estás desarrollando tu propia web y quieres ir un paso más allá en cuanto a la organización de los datos y su forma de mostrarlos, los campos personalizados te pueden ser muy útiles, y el plugin Advanced Custom Files te puede facilitar mucho el trabajo para llevar tu WordPress un paso más allá, personalizando cualquier plantilla que utilices, sin necesidad de que incorpore los tipos de entradas o campos que necesitas.
Deja una respuesta