Campos personalizados en WordPress con ACF

Una de las cosas que más me gusta de ser informático es interiorizarme y captar conocimientos de los distintos tipos de negocios de mis clientes. Ellos me contactan y, como si estuvieran en un consultorio de psicología, me van detallando cómo funciona su circuito de información, lo que necesitan para acrecentar sus ventas, cómo buscan agilizar sus procesos o simplemente cómo quieren tener presencia en internet. Mientras los escucho voy generando una posible solución en mi cabeza: entidades, campos, relaciones y desde hace algunos años cómo implementar todo esto con WordPress.  En la mayoría de los casos los campos que ofrece WordPress por defecto en su tabla wp_post (título, descripción, fecha de alta, estado, etc) no son suficientes para brindar una buena solución. Es por eso que necesitamos extender la tabla wp_posts con nuevos campos personalizados y para ello utilizaremos un plugin llamado «ACF» (Advanced Custom Fields) el cual explicaré a continuación.

Este plugin fue creado por el australiano Elliot Condon y en su versión PRO (unos €17)  nos permite agregar una gran variedad de campos que nos facilita enormemente el desarrollo de cualquier solución WordPress:

• Campos básicos:
  • Texto, textarea, número, email, password.
• Campos de contenido:
  • Editor WYSIWYG, imagen, archivo.
• Campos Selectores:
  • Select, checkbox, true / false, radio.
• Campos relacionales:
  • Link de página, post object, relación, taxonomy, user.
• Campos jQuery:
  • Google Map, selector de fecha, selector de color.
• Campos de Layout:
  • Mensaje, tab.
• Campos PRO:
  • Repeater, gallery, options page, flexible content.

¿Cómo aplicar estos campos en un caso real?

Para mostrar la utilización de este plugin vamos a desarrollar un tema para una supuesta concesionaria de coches.

El dueño de la concesionaria nos pide una web en la que necesita mostrar sus datos institucionales, un formulario de contacto y un listado de los coches actuales en venta.

Indago un poco más sobre este listado para saber qué campos necesitamos agregar a esta nueva entidad «coche». El cliente nos cuenta que quiere indicar la marca, el modelo, el año de fabricación, una fotografía, una descripción de sus características y una casilla para indicar si se vendió y en qué fecha.

Luego de hacer el análisis de lo que necesita el cliente podemos esbozar un diagrama para plasmar una solución con WordPress:

Una vez encontrada la solución es hora de marcar prioridades  y desarrollar el código necesario:

1. Generamos el Custom Post Type «Coche» tal como hemos visto en el artículo wp_post el corazón de WordPress.
2. Registraremos para la entidad «coche» un taxonomía a la que llamaremos «modelos» utilizando la función register_taxonomy. Esta taxonomía tendrá como padre las marcas y como hijos los modelos propiamente.
3. Generamos los campos personalizados con ACF los cuales veremos cómo implementar a continuación.

Creando los campos del Custom Post Type «Coche»

Para los campos «titulo» y «descripcion» utilizaremos las columnas post_title y post_content de la tabla wp_post. Para la fotografía usaremos la funcionalidad Post Thumbnails propia de los posts. Para el resto generaremos los campos con el plugin ACF. En primer lugar debemos generar un nuevo conjunto de campos al que llamaremos «CPT Coche».

Luego damos de alta los campos con sus respectivos atributos:

• Año de fabricación:
  • Field Label: Año de fabricación
  • Field Name: anio_de_fabricacion (atentos a no dejar ‘ñ’ ni acentos en este campo)
  • Field Type: number
  • Field Instructions: Indique el año de fabricación del coche
  • Required: Yes
  • Step Size: 1
• ¿Está vendido?:
  • Field Label: ¿Está vendido?
  • Field Name: esta_vendido
  • Field Type: True / False
  • Field Instructions: ¿Se ha vendido el coche?
• Fecha de Venta:
  • Field Label: Fecha de venta
  • Field Name: fecha_de_venta
  • Field Type: Date Picker
  • Field Instructions: Indique la fecha de venta del coche
  • Conditional Logic: Yes – ¿Está vendido? – is equal to – checked
    • Este campo solo se mostrará si el campo ¿Está vendido? está marcado como verdadero.

Una vez generado los campos debemos indicar quién va a hacer uso de los mismos. El plugin nos permite asociarlo a un gran conjunto de entidades de WordPress: tipo de post, rol de usuario logueado, categoría de post, una determinada página, etc.
En nuestro caso debemos asociar el conjunto de campos al post type «Coche».

Eso es todo, al hacer click en «Publicar» tendremos nuestros grupo de campos asociado a nuestra entidad «Coche».

Vale aclarar que estas configuraciones se guardan en nuestra base de datos, en artículos posteriores explicaré cómo podemos utilizar la herramienta de exportación para generar el código PHP e incluirlo en el versionado del proyecto.

Podemos comprobar los campos generados dando de alta un nuevo coche en el administrador de WordPress.

Como podemos ver, aparte de los campos título y descripción propios de un post de WordPress tenemos los otros dos campos de ACF: «Año de Fabricación» y «¿Está vendido?». Y si seleccionamos el campo «¿Está vendido?» aparecerá el campo «Fecha de venta» tal como hemos especificado en sus condiciones lógicas.

Aplicando código para el Frontend

Ya tenemos nuestro primer «Coche» publicado con todos sus datos, ahora debemos escribir algo de código PHP para mostrar esta información en el frontend. En la plantilla single-coche.php usaremos las funciones get_field y the_field del plugin ACF.

<?php 
the_field('<nombre del campo>'); // Esta función imprime el valor del campo 
$variable = get_field('<nombre del campo>'); // Esta función obtiene el valor del campo 
?>

<?php get_header(); ?>
<?php if(have_posts()){ the_post(); ?>
	<p>Título del post: <?php the_title(); ?></p>
	<p><?php the_post_thumbnail('medium'); ?></p>
	Descripción del coche: <?php the_content(); ?>
	<?php
		$anioFabricacion = get_field('anio_de_fabricacion'); // Obtengo el campo y lo guardo en una variable
		if($anioFabricacion): // Si existe el campo y tiene un valor asignado...
	?>
	<p>Año de Fabricación: <?php echo $anioFabricacion; ?></p>
	<?php endif; ?>
	<?php
		$estaVendido = get_field('esta_vendido'); // Obtengo el campo y lo guardo en una variable
		if($estaVendido): // Si el campo es true entonces el coche está vendido.
			$fechaVendido = date_create_from_format('Ymd',get_field('fecha_de_venta')); // Obtengo el campo de fecha de venta y lo asigno a una variable.
	?>
	Estado: <span style="color:red">Vendido el día <?php echo $fechaVendido->format('d/m/Y'); ?></span> <!-- Doy formato a la fecha -->
	<?php }; //endif ?>
<?php endif; ?>
<?php get_footer(); ?>

Resultado

Y en el frontend obtenemos el siguiente resultado:

Conclusión

Como pueden ver el proceso para crear campos personalizados es muy simple. Basta con tener bien claro las necesidades del proyecto, plasmarlo en un diagrama, configurar los campos y aplicar las funciones PHP en la maqueta del tema que estemos desarrollando. Este fue un ejemplo con campos muy simples pero como hemos visto la lista de posibilidades es muy amplia. Por fortuna su página web tiene una documentación muy completa de cada uno de ellos y en la que a veces se acompaña con videotutoriales. En artículos posteriores veremos cómo implementar estos y algunos campos más complejos pero en lugar de configurarlos en base de datos los desarrollaremos usando código PHP.

Imagen de cabecera: Emilio Küffer