La semana pasada estuve trabajando en un proyecto que me hizo recaer en una duda que he tenido desde hace tiempo pero nunca me di el tiempo de investigar lo suficiente. La duda es, “¿¡Dónde demonios subo los logos y otros campos que se usarán en toda la web!?”. Después de investigar, mi equipo y yo decidimos crear un “custom options page” desde cero. El resultado fue el esperado para los campos de texto, pero luego vino el reto de crear un tipo de campo imagen, lo cual me llevó a tomarme más tiempo leyendo y desarrollándolo. Cuando por fin logré hacer todo esto, encontré que existía algo llamado ACF Options Page. Apenas lo vi, pensé “Qué maravilla! ¿Qué he estado haciendo todo este tiempo?”. Lo que me tomó horas de investigación y desarrollo podía ser logrado con el ACF Options Page de manera sencilla.

Qué es un ACF Options Page?

La función de página de opciones proporciona un conjunto de funciones para agregar páginas de administración adicionales para editar campos ACF. Cada página y sub-página de administración puede ser totalmente personalizada!

Todos los datos guardados en una página de opciones son globales. Esto significa que no está conectado a ninguna publicación o página en particular, sino que se guarda en la tabla wp_options. Esto permite que los datos se muestren en cualquier página en todo el sitio web (bueno para los datos de header y footer)!

A continuación explicaré cómo es que se usa:

Paso 1:

Para comenzar, debemos tener comprado e instalado el plugin llamado Advanced Custom Fields PRO.

Para activar el ACF Options page, se debe agregar esta pequeña línea de código en nuestro archivo functions.php de WordPress:


if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page();
	
}

Paso 2:

Una vez añadida esta línea y subido el archivo de nuevo, veremos que en nuestro querido dashboard de WordPress aparecerá una nueva opción llamada “Options”. Sin embargo estará vacía porque tenemos que asignarles “custom fields”, en el siguiente paso veremos cómo hacer esto.

Paso 3:

Ahora vamos al botón de “Campos Personalizados” en el dashboard para crear un nuevo grupo de campos. Allí se pueden agregar los tipos de campos deseados, lo importante es asignarle esos campos al options page. Para esto, luego de crear los campos deseados, debemos fijarnos en la parte inferior, en la sección de “ubicación” y añadirle la regla página de opciones -> es igual a  -> Options.

Con esto ya tenemos los campos para ser llenados desde el Options del dashboard, ahora aprenderemos a pintar los campos usados en nuestras páginas (php).

Para hacer esto, normalmente haríamos lo siguiente:

the_field('nombre_del_campo');

Pero en este caso lo correcto sería hacer lo siguiente:

the_field('nombre_del_campo','option');

Lo único que cambia es que tenemos que agregarle un string ‘option’ como segundo parámetro.

Esto lo que nos permite es, una vez creado el options page y sus campos, jalar el campo que hemos usado e imprimirlo en nuestro sitio, de manera que cada vez que se cambie el campo en el menú del options page, cambiará dinámicamente en nuestro sitio.

Quieres hacerlo con un Repeater? Fácil, aquí un ejemplo:

<?php
 if( have_rows('nombre_del_repeater','option') ):
 while ( have_rows('nombre_del_repeater','option') ) : the_row();?>
 <?php the_sub_field('nombre_del_campo_dentro_del_repeater') ?>//esta línea es el contenido impreso dentro del loop
 <?php endwhile;
 endif;
 ?>

Lo único que cambia es que donde mencionamos el nombre de nuestro repeater, al igual que en el ejemplo anterior, debemos agregar como segundo parámetro un string ‘option’.

Para quienes no saben qué es un repeater exactamente:

“El campo repeater le permite crear un conjunto de subcampos que pueden repetirse una y otra vez mientras edita contenido.
Cualquier tipo de campo se puede agregar como un campo secundario que le permite crear y administrar datos muy personalizados con facilidad!”

En resumen:
Así es como descubrir ACF Options Page me solucionó muchas cosas, no solo me ahorró una cantidad de tiempo enorme en los proyectos siguientes, sino que además me permitía hacer cosas que normalmente no hubiese programado fácilmente desde un custom options page creado por mí mismo.

Ventajas de hacerlo con ACF Options page:

  • La posibilidad de subir imágenes
  • El uso de repeaters
  • Campos relacionales
  • Un arsenal de opciones que trae ACF consigo mismo.

Para qué elementos he usado más esta opción?

  • Logos
  • Información de contacto
  • Elementos de header
  • Elementos de footer
  • Elementos de un sidebar
  • En general, cualquier elemento de la web que se repita en más de una página