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.

Logo de ACF Advanced Custom Fields
Al 19/03/2016 ACF tiene más de 1.000.000 de descargas activas.

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:

Diagrama con campos ACF

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».

Formulario para generar un nuevo grupo de campos ACF.

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.
ACF Coche grupo de campos
Resultado final de la configuración de los campos personalizados.

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».

ACF Location fields

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.

ford mustang coche admin

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.

campo esta vendido acf
campo jquery datepicker
Al seleccionar el campo «Fecha de venta» se despliega el DatePicker de jQuery para que podamos ingresar el valor.

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:

ACF coches frontend

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


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (2 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


13 thoughts on “Campos personalizados en WordPress con ACF”

  1. Muy buena ayuda, pero quisiera saber como puedo hacer que en lugar de mostrar el valor del campo, se muestre el campo para que el usuario lo llene por ejemplo caragar un archivo como una foto o imagen.

    Saludos

  2. Muy interesante el planteamiento de como estructurar el proyecto, se parece mucho a algo que estoy desarrollando me gustaria enviarte información y ver que consejo puedes dar… si es posible

    saludos y de nuevo felicidades por el post y por tu sitio en general, información muy interesante.

  3. Hola Mauricio, excelente aporte, se podria hacer que en el frontend el usuario o cliente puediera modificar el campo, por ejemplo tipo formulario que pusiera una fecha o un texto?
    gracias

    1. Ant: Todo depende de lo que estés desarrollando. Si es algo que puedes reutilizar hazlo en un plugin. Si es un desarrollo único, hazlo en un tema y si estás utilizando un tema comprado extiéndelo en un child theme. Para los temas que desarrollo suelo agregar las definiciones dentro de esta carpeta «/includes/cpts». Hecha un ojo a mi repositorio para temas => https://github.com/maugelves/mg-grunt-wp-theme

    2. Mmm… pero un tema y tema hijo tambien deberian ser reutilizables, no?

      Sigo sin tener claro que considera WordPress por buenas practicas que debe pertenecer al core, a un theme, a un child theme o a un plugin. Tan solo encontre algo de luz en una charla en un Wordcamp (tengo que encontrarla!).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

× ¿Puedo ayudarte?