Advanced Custom Fields en el desarrollo de temas de WordPress

Por Ernesto Jiménez · 8 mayo, 2014
Publicado en Diseño web

como-usar-advanced-custom-fields-acf-wordpress

Advanced Custom Fields (ACF) ha supuesto un cambio importante en mi forma de crear temas de WordPress. Hasta ahora, si quería facilitarle a mis clientes la tarea de trabajar con campos personalizados (para relacionar artistas con sus obras, por ejemplo) escribía el código necesario en el archivo functions.php del tema. Gracias a ACF esto forma parte del pasado.

Los campos personalizados son elementos nativos de WordPress. Están ahí desde el momento en que instalas el CMS. ¿Entonces qué hace de Advanced Custom Fields una herramienta genial para la creación de temas? Pues varias cosas:

1. crear y editar el contenido de estos campos se hace en un entorno gráfico y no escribiendo pares de nombres y valores

2. facilita la creación de los custom fields. Se acabó eso de escribir tanto código.

3. te permite decidir en qué partes del gestor aparecen determinados campos personalizados

4. mostrar estos campos en tu tema es muy sencillo con su colección de funciones (su API está basada en funciones nativas de WordPress)

Para el usuario es muy fácil definir un subtítulo o un estilo para un post, por ejemplo.

Para el usuario es muy fácil definir un subtítulo o un estilo para un post, por ejemplo.

Hasta ahora escribía yo mismo el código que mostraba cajas adicionales y desplegables en la edición de los posts para gestionar los campos personalizados. No me gusta depender de plugins para crear características que puedo programar. ¿Por qué entonces decido usar ACF? ¿Qué me ha hecho cambiar de idea? Sus ventajas.

Ventajas

Básicamente han sido las ventajas que ofrece en dos grandes áreas:

1. como desarrollador dispongo de una herramienta gráfica para crear los posts personalizados. Mucho más rápido que incluir mi código en functions.php. No es solo cuestión de lo fácil o difícil, se trata, sobre todo, de lo potente que es ACF (gestor de imágenes nativo, editores wysiwyg, relaciones entre post…).

2. mis clientes lo encuentran muy sencillo. Si uso WordPress y no otros CMS o desarrollos a medida es por lo fácil que les resulta a mis clientes su uso. ACF permite añadir complejidad a la estructura de datos manteniendo la sencillez del editor.

Otro punto importante es la integración de ACF en los temas que desarrollo. Aparte de incluirlo en el tema sin tener que instalarlo como plugin externo podemos usarlo como una herramienta para crear los campos que necesitemos y ocultarlo cuando hayamos acabado. De este modo concibo ACF como un recurso para el desarrollo de temas más que como una característica de los mismos.

En resumen:

  • Facilidad de uso extrema
  • API genial para obtener los datos
  • Flexibilidad
  • Integración total con el tema

 

Cómo se usa

En el último tema que he creado para el relanzamiento de ErnestoJimenez.net, que verá la luz el próximo 27 de mayo y que lleva por nombre Marta’s Playground, he usado ACF en varios lugares. Veamos un ejemplo real.

En el nuevo diseño muestro un post destacado en la cabecera de la página de inicio. Se trata de relacionar el ID de un post con la página de inicio. Bastante sencillo. Si escribiéramos nosotros el código tendríamos que crear por un lado las meta-boxes con sus formularios para luego recoger estos valores y guardarlos en la base de datos. También nos tendríamos que encargar de escribir las funciones necesarias para consultar el ID de ese post y mostrar su título, fecha, etiquetas, etc. en el tema.

creando-un-custom-field-wordpress

Creando un campo personalizado para mostrar un post destacado en la página de inicio

Con ACF es un suspiro:

1. creamos un nuevo grupo de campos. En el ejemplo del post en la cabecera he llamado a este grupo «Post destacado de portada», al grano y descriptivo.

2. en ese grupo creamos un nuevo campo de tipo «Relación» que lleva por nombre «featured_post» (me gusta usar nombres de variables en inglés, los motivos darían para otro post).

3. indicamos que se puede relacionar con todos los posts (podemos elegir un tipo de post personalizado o páginas…).

4. Lo configuramos para que este grupo de campos aparezca en la edición de la página de inicio y lo guardamos todo.

5. Y ya está. Cuando editemos nuestra portada veremos esta caja en la que podemos buscar el post que queramos llevar a Inicio:

relacion-advanced-custom-fields

Tipos de campos

ACF ofrece un extenso catálogo de tipos de campos que nos permiten hacer de todo. Estos son los que suelo utilizar pero hay muchos más:

Texto

El tipo más básico. Puedes mostrar una cita, por ejemplo, en la página de inicio. Para usarlo en tu tema solo tienes que incluir  donde quieras que aparezca: <?php the_field(‘cita_portada’); ?>

Textarea

Igual que texto pero con un campo más amplio para escribir. En el tema lo usamos también con the_field(‘nombre_campo’)

Editor visual (wysiwyg)

¿Quieres dar formato a tu texto con la misma potencia que el editor nativo de WordPress (tinymce)? Sin problema, esta es tu opción.

Escribir todo el código de manera manual para la creación de custom fields estaba muy bien pero usar ACF es infinitamente más rápido e increíblemente potente.

Verdadero o falso

Bastante intuitivo lo que hace este tipo de campo, ¿verdad? Imagina que tienes una sección con el formulario de registro a tu newsletter que querrás mostrar en algunos posts y en otros no. Crea un campo muestra_newsletter y en tu tema evalúalo con

if(get_field(‘muestra_newsletter’)){

//muestra el formulario

}

Relación

La de tiempo que habría ahorrado si hubiera usado antes ACF. La relación entre posts y sobre todo entre tipos de post es una de las funcionalidades que más veces he tenido que desarrollar (relacionar artistas con obras, grupos de música con conciertos…). Con este tipo de campo simplemente indicas con qué tipo de elemento quieres establecer la relación (posts, páginas, posts personalizados) y ACF se encarga de mostrar una caja de selección muy potente en el editor. En tu tema recoges el contenido de este campo con $posts_destacados = get_field(‘posts_destacados’); y ya puedes hacer un loop para mostrar los posts vinculados. Una maravilla.

Imagen

Si necesitas especificar imágenes especiales para un post más allá de la imagen destacada puedes usar el tipo de campo imagen. En el tema la muestras con:

$imagen = get_field(‘imagen’);

<img src=“<?php echo $imagen[‘url’]; ?>” alt=“<?php echo $imagen[‘alt’];?>”>

Los campos personalizados (custom fields) de WordPress son uno de los pilares básicos que hacen de WordPress un excelente gestor de contenido para la web. Aumentan su potencia y rompen definitivamente la barrera entre un sistema de blog y un CMS completo para gestionar sitios web complejos.

Esto es solo una introducción. Hay mucho más. De lo más interesante que me he dejado en el tintero para otro post: los campos que se repiten (repeater), módulos adicionales, pestañas…

Escribir todo el código de manera manual para la creación de custom fields estaba muy bien pero usar ACF es infinitamente más rápido e increíblemente potente. Si, como yo antes, prefieres crear tú mismo todo el sistema de gestión de estos campos, te animo a que hagas una prueba con ACF. Es probable que sonrías cuando veas lo bueno que es.

Advanced Custom Fields (ACF): http://www.advancedcustomfields.com/

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de estrategia de contenidos y marketing digital