Descubre los secretos de ACF WordPress

Introducción:

En artículos pasados hemos aprendido los pormenores de WordPress, cómo podemos concebir y desarrollar proyectos web livianos, robustos y muy optimizados, aprendiendo las características del núcleo de WordPress y desentrañando su estructura de scripts para entender cómo cada una de sus partes se integran para formar un CMS único y lleno de posibilidades. 

Todas estas posibilidades que nos brinda el CMS WordPress, las podemos extender aún más a través de un plugin, maravilloso, único y completo como ACF (Advanced Custom Fields). Te preguntarás, ¿por qué tanto alboroto por un plugin?,  la realidad es que este plugin merece estos y muchos más halagos, teniendo en cuenta que detrás del éxito de cada ocho de diez proyectos WordPress, se encuentra ACF.

Bien basta de halagos, te mostraremos de primera mano las bondades del plugin ACF. 

¿ Por qué ACF ?

El núcleo y la estructura del CMS WordPress, está basada en los post o entradas. Las páginas, las entradas de blog, los usuarios, productos y cada uno de estos componentes son custom post (post personalizados), los cuales son utilizados, en función de la productividad y funcionalidad de nuestro sitio. 

En la imagen anterior tenemos la vista de edición de una página de WordPress, la cual también es un custom post o tipo de post en WordPress, este cuenta con tres campos, el nombre de la página, el contenido de la página y la imagen destacada de la página. Imagina que quisiéramos tener un campo para seleccionar una categoría o taxonomía personalizada; o que tal vez quisiéramos tener un campo para insertar el nombre del autor, un shortcode, un campo para seleccionar imágenes de una galería, o tal vez un campo para seleccionar imágenes para un slider de imágenes. Pues bien, allí es donde entra nuestro plugin ACF (Advanced Custom Fields), ofreciéndonos la posibilidad de crear grupos de campos personalizados, para un tipo de post, entrada o página específica. Imagina las posibilidades! podrás hacer lo que venga a tu imaginación y llevar tu sitio a otro nivel. 

¿Que puedo construir con ACF? 

Con ACF puedes construir lo que venga a tu imaginación, no exageramos al decir que muchos de los sitios web y aplicaciones robustas desarrolladas con WordPress, cuentan con el soporte y mano amiga de ACF. No solamente se trata de lo que puedes construir con WordPress, se trata del ahorro de tiempo y alto performance que te ofrece ACF.

Imagina que desarrollamos un sitio web en el cual una persona que no tiene conocimientos técnicos en HTML, CSS O JavaScript, debe hacer el mantenimiento y actualización del sitio, de sus textos, imágenes y toda la información que puede estar alojada allí. Gracias a la flexibilidad de ACF y los grupos de campos, podremos adicionar a nuestras paginas opciones como cambiar el color de background, la imagen de background y extender el título y muchas más opciones que serán muy intuitivas y fácil de personalizar para cualquier persona. 

Descubre los secretos de ACF

Llegó la hora de hacer una disección y estudiar anatómicamente las bondades que ACF le brinda a nuestros proyectos web. Para ello es importante te concentres en este segmento y a medida que  avances pienses en las posibilidades y cómo ACF puede ofrecerte ese valor agregado que tu proyecto web merece.

• Instalación de ACF: ACF funciona como cualquier plugin de WordPress, el cual debes descargar, instalar y activar en tu instalación de WordPress para empezar a disfrutar se sus beneficios.

1. Ingresa en tu instalación de WordPress
2. Desde el panel de administracion ingresa en el menú plugins.
3. Vas a la opción agregar nuevo.
4. En el buscador de plugins, buscas Advanced Custom Fields.
5. WordPress te mostrará el plugin el plugin, alli vas a la opción “Instalar Ahora”
6. Después de la instalación, activas el plugin y listo!!!

• Tipos de campos ACF: Tendrás a tu disposición diferentes tipos de campos, los cuales podrás utilizar en función del objetivo.

1. Campo de texto: Ingresa cualquier tipo de texto.
2. Área de texto: Ingresa textos más amplios o con mayor cantidad de caracteres.
3. Rango: Selector de rangos, el cual retorna el número seleccionado dentro del rango personalizado.
4. Checkbox: Podrás seleccionar una o más opciones y retornar el valor de la opción seleccionada.
5. Radio button: Podrás seleccionar una opción y retornar el valor de la opción seleccionada.
6. Campo de selección: Podrás seleccionar una opción y retornar el valor de la opción seleccionada. Recuerda que a los campos de selección, podrás añadirle atributos personalizados como el atributo multiple, que te permitirá crear un campo de selección, en el cual podrás seleccionar uno o más valores.  
7. Booleano True o false:  Podrás seleccionar una opción y retorna un booleano (True – False).
8. Adjunto: Podrás seleccionar uno o más documentos. Estos documentos serán almacenados en la carpeta de media de WordPress (wp-content/uploads) y te retorna la URL con la ubicación del documento. 
9. Color picker: Podrás seleccionar colores y retornar el color seleccionado en Hexadecimal según como personalices el campo.
10. WYsiwyg Editor: Te permite crear un área de texto, con grupos de opciones adicionales como opciones de fuente, alineación del texto entre otros.

1. Time picker – Data picker:  Te permite seleccionar entre un rango de fechas, fecha específica u hora y fecha y retornar así, la fecha seleccionada en diferentes formatos según tu necesidad. 
2. Galería de imágenes o imagen única: Tal vez uno de los tipos de campos más poderosos del plugin, te permite seleccionar en su versión PRO varias imágenes y retornar un arreglo o la url de las mismas y así poderlas insertar en el lugar que desees en tu sitio web. En la versión FREE del plugin ACF, solo podrás encontrar la opción de seleccionar una única imagen. Sin embargo más adelante te enseñare un truco para que puedas insertar tu galería de imágenes con la versión FREE.
3. oEmbed: Te permite insertar un tipo de campo el cual recibe una url y te retorna un iframe o url la cual podrás utilizar por ejemplo para mostrar un video en tu sitio web.

La versión PRO del plugin ACF te permite crear otros tipos de contenido flexibles, como relaciones, taxonomías, repetidores entre otros. Sin embargo no pienses que la versión FREE no te permitirá llevar tu sitio a otro nivel, por el contrario te mostraremos cómo la versión FREE es más que suficiente. 

Vamos a la acción:

Ya conoces para que te puede servir el plugin ACF, como lo puedes instalar y los tipos de campos, ahora conocerás cómo empezar con el plugin ACF y desplegar su funcionamiento en tu sitio web. 

¿Como crear grupos de campos?

ACF es una poderosa herramienta para gestionar campos adicionales y te ofrece la posibilidad de personalizar la forma y el tipo de post en el que serán mostrados estos campos personalizados, esto gracias a la agrupación de campos. Empezaremos creando un grupo de campos:

1. Ingresamos al dashboard de WordPress.
2. Vamos al menú de nuestro plugin ACF, en este caso por ser en español, lo encontraras como Campos Personalizados. 

1. Vamos a la opción Añadir nuevo.  Encontraras un campo de texto que te permite insertar el nombre para el grupo de campos, Te recomiendo usar nombres que te permitan identificar muy bien, donde se desplegará el grupo de campos, por experiencia te digo que puedes llegar a tener muchos grupos de campos y confundirte. Encontrarás en la parte derecha un botón llamado + Añadir Campo, al seleccionar esta opción, encontrarás la siguiente ventana:

Entre las diferentes opciones que encontrarás las más destacadas son, la etiqueta o label del campo, el nombre del campo (te recomendamos que sea un nombre muy claro y en minúscula), en el tipo de campo podrás seleccionar el campo que deseas (texto, área de texto, rango, número, imagen, etc..), en el campo instrucciones, ingresas un texto descriptivo que permita al usuario que diligenciara el campo, conocer algún tipo de instrucción que debe conocer antes de. La opción requerido, te permite marcar el campo como obligatorio, límite de caracteres que puede llegar a tener el campo, lógica condicional; el cual te permite mostrar u ocultar el campo, en función del valor que pueda tener un campo anterior y finalmente los atributos del contenedor, el cual te permite insertar nombres de clases o ID’S personalizados, para el contenedor de los campos, con los cuales podrás posteriormente insertar estilos CSS personalizados o manipularlos con JS.

5.  Cuando tienes todas estas opciones, tendrás una configuración muy parecida a la siguiente, claro está en función de la cantidad de campos . 

En este ejemplo contamos con 3 campos, uno de tipo área de texto, otro de tipo imagen y otro de tipo texto. Cada uno podrá almacenar un valor diferente, el cual podremos utilizar en el loop de un custom post o post para realizar diferentes acciones o simplemente mostrar su valor. En la opción reglas, especificamos que el grupo de campos debe mostrarse solo si el post type es igual a testimonial, el cual es un custom post creado en este caso, para mostrar los testimonios de los clientes.  Fíjate que en la última opción (Esconder pantalla) tenemos marcadas todas las opciones, esto nos genera el siguiente resultado.

WordPress en el momento que creamos un custom post, agrega campos como el contenido, imagen destacada, categorías, taxonomías, entre otros campos que en este caso no utilizamos, por ello cuando creamos un grupo de campos, en las opciones de (Esconder pantalla), marcamos estos campos para ocultarlos del custom post.

¿Como desplegar los valores insertados en un custom field, en mi sitio web?

Ahora que ya conocemos cómo podemos agregar y configurar los campos personalizados, vamos a revisar cómo podemos mostrar estos valores en nuestro sitio web.

• Mostrar valores dentro de un loop: Un loop de WordPress es un fragmento de código que procesa codigo HTML y PHP y  nos permite mostrar contenidos; en nuestro caso y para continuar con nuestro ejemplo, vamos a mostrar nuestro custom post testimonials. Ya tenemos creados tres testimonials en nuestro dashboard.

Para mostrar nuestros tres testimonials en el sitio web, podríamos seguir muchos caminos. En este caso lo que haremos sera crear un shortcode de WordPress, que retorne un template part, el cual contiene nuestro loop para mostrar los testimonials. Iniciemos creando nuestro shortcode:

add_shortcode(‘testimonials’,’carousel_testimonials’); function carousel_testimonials(){     get_template_part(‘loop-templates/loop’,’testimonials’); }

En la anterior función (recuerda que este tipo de funciones se crean en el functions.php), creamos un shortcode llamado testimonials, el cual invoca una función llamada carousel_testimonials, esta función a su vez retorna por medio de la función get_template_part() una plantilla o parcial de plantilla llamado loop-testimonials.php ubicado en la carpeta loop-templates, en este script se encontrará toda la lógica que nos permitirá dibujar nuestros testimonials. 

<div id=”ms-slider-testimonials”>         <?php  $loop = new WP_Query( array( ‘post_type’ => ‘testimonials’));         if ( $loop->have_posts() ) :           while ( $loop->have_posts() ) : $loop->the_post(); ?>             <div class=”ms_content_testi”>             <span class=”ms-quotes-testi”></span>             <span class=”ms-quotes-testi”></span>              <p class=”largest” class=”ms-testi-des”><?php the_field(‘testimonial_clients’)?></p>              <?php             $image = get_field(‘image_testimonial’);             if( !empty($image) ): ?>               <img src=”<?php echo $image[‘url’]; ?>” class=”ms-image-testimonials”alt=”<?php echo $image[‘alt’]; ?>” />             <?php endif; ?>             <div class=”ms-yellow-line”></div>             <span class=”ms-title-testimonial”><?php the_title();?></span>             <span class=”ms-position-testimonial”><?php the_field(‘position_testimonial_client’)?></span>           </div>         <?php endwhile;         endif;?>       </div> <?php wp_reset_postdata(); ?>

La anterior función nos permite pintar nuestros testimonials a través de un loop, no te preocupes si no entiendes muy bien, te explicaremos detenidamente. Tenemos un div con un id ms-slider-testimonials el cual será el wrapper principal de nuestros testimonials, creamos una variable llamada $loop a la cual le asignamos a través de la función WP_Query una consulta de los post que sean del tipo testimonials. A través de estructuras de control específicamente con if( $loop->have_posts() ) preguntamos si la consulta retorna valores, si es así, a través de while ( $loop->have_posts() ) : $loop->the_post(); ?> iteramos en cada uno de los valores (en este caso 1 valor es un testimonial) y empezamos a mostrar su información. Fijate en esta linea de codigo <p class=”largest” class=”ms-testi-des”><?php the_field(‘testimonial_clients’)?></p>  El plugin ACF equipa nuestra instalación de WordPress con algunas funciones las cuales podemos usar para traer nuestra información. En este caso a través de la función the_field(), retornamos el valor que tiene el campo personalizado con nombre testimonial_clients. Ahora fíjate en esta parte del código 

$image = get_field(‘image_testimonial’);             if( !empty($image) ): ?>               <img src=”<?php echo $image[‘url’]; ?>” class=”ms-image-testimonials”alt=”<?php echo $image[‘alt’]; ?>” />             <?php endif; ?>

En este caso creamos una variable llamada $image y le asignamos el valor de la funcion get_field(‘image_testimonial’) la cual nos va a retornar un array asociativo (llave => valor) que  contiene el nombre de la imagen, la url entre otros valores que podrás consultar en la documentación. A través de la estructura de control if ( !empty($image) ): preguntamos si el valor de la variable $image es diferente de vació, si es así, empezamos a pintar nuestra imagen. Fíjate ahora en esta linea <img src=”<?php echo $image[‘url’]; ?>” class=”ms-image-testimonials”alt=”<?php echo $image[‘alt’]; ?>” /> ¿Recuerdas que hace unos momentos te dije que la función get_field(‘image_testimonial’) retorna un array asociativo? pues bien lo que hacemos es pintar la imagen a través de la etiqueta html <img> y en su atributo src pasamos el valor del array $image llave => url <?php echo $image[‘url’]; ?> el cual me retornara la url de la imagen. De esta misma forma pasa en nuestro atributo alt. Un aspecto a tener en cuenta es que no significa que la función get_field() de ACF siempre nos retorne un array, esto dependerá de la configuración que tiene el campo, en este caso el campo image_testimonial esta configurado para que me retorne un array.

• Mostrar valores fuera de un loop

En el ejemplo anterior vimos como podemos retornar los valores de nuestros campos personalizados ACF dentro de un loop de WordPress, pero no siempre necesitaremos mostrar su valor dentro de un loop. Para mostrar el valor de un campo, fuera de un loop, podemos usar la función get_field() o the_field() ACF de la misma forma que lo hicimos en el anterior capitulo, lo único que cambia es que como argumento de la función ya no solo pasamos el nombre del campo sino también el ID del post   de the_field(‘testimonial_clients’, 3476)  esta forma le especificamos explícitamente a la función, que retorne el valor del campo ‘testimonials_clients’ del post id 3476. Dentro del loop no es necesario pasar como argumento el id del post, porque ACF y WordPress ya lo realizan implícitamente por nosotros.  

• Insertar galería de imágenes con ACF FREE

Anteriormente mencionamos que el plugin ACF en su versión free, no cuenta con la posibilidad de integrar galería de imágenes, sin embargo existe un plugin que extiende esta funcionalidad y nos permite crear galerías y después insertarlas en nuestro sitio web. El nombre del plugin es ACF photo galerry, ¿recuerdas cómo pintamos nuestra imagen en el bloque de código de testimonials? pues bien de la misma forma que pintamos una imagen, podremos pintar la galería. Lo único que cambia es que ahora tendremos una opción Photo Gallery, disponible en nuestros tipos de campos ACF.

¿Funciones eficaces de ACF ?

A lo largo del artículo hemos trabajado con algunas funciones de ACF, sin embargo    no son todas las que tenemos a disposición, estas son otras funciones que se destacan y pueden ser de mucha utilidad para tus proyectos web.

• get_field(): Retorna el valor de un campo especifico. get_field($selector, [$post_id], [$formato_valor]); donde: $selector(Requerido) = El nombre del campo $post_id(Opcional) = El post id donde el campo personalizado es almacenado. Por defecto es el id del post actual, en el caso de usarlo dentro de un loop.

• the_field(): Muestra el valor de un campo específico. La diferencia entre get_field() y the_field() es que get_field() es usada para almacenar el valor dentro de una variable y posteriormente realizar acciones con el mismo, the_field() muestra o pinta directamente el valor. Esta función recibe los mismos argumentos que get_field()
• get_field_object(): Retorna la configuración de un campo específico. Recuerda que cada campo personalizado contiene configuraciones como el label, el nombre, el tipo entre otros. Esta función retorna todos estos valores, como un arreglo
• acf_form_head():  Esta función junto con acf_form() te permiten  crear nuevas entradas, desde el front end o layout de tu sitio web. Puede sonar un poco confuso pero todo se resume a lo siguiente; siempre que queremos crear un post personalizados, tenemos que hacerlo a través del dashboard, pero imagínate que tienes un sitio web donde cuentas con campos personalizados para que cada uno de los usuarios pueda modificar su perfil, no sería una buena idea que ingresen desde el dahboard y modifiquen el mismo. Por ello gracias a estas funciones puedes pintar los campos que creaste con ACF a modo de formulario y permitir que los usuarios modifique su perfil desde donde insertes el mismo. acf_form_head() es la función que permite renderizar el formulario invocando los scripts y funciones necesarias para que la función acf_form() funcione correctamente. Se recomienda insertar esta función antes de la etiqueta get_header().
• acf_form(): Esta función crea un formulario para agregar o editar un post. Recibe un arreglo de configuraciones que te permiten seleccionar el grupo de campos que quieres mostrar como formulario, editar el layout del botón, mensajes de validación, ocultar o mostrar el campo de titulo, entre muchas más opciones que podrás encontrar en la documentacion.

Conclusión 

Siempre que hablemos del plugin ACF de WordPress nos quedaremos cortos, son tantas las posibilidades y las funcionalidades que podemos crear para nuestro sitio web, que la única forma de conocerlo por completo es conocer y explorar su documentación. Cuenta con una amplia variedad de funciones, hooks, filtros e integraciones que llevan cualquier proyecto web a un estado superior. Si quieres conocer más acerca de este plugin, si tienes dudas y si quieres ser un verdadero maestro en ACF, comparte, comenta este post y llevemos tu proyecto WordPress a nuevos niveles.