Página de opciones ACF: Guía de uso

Si está buscando mejorar su sitio web WordPress con campos personalizados y opciones, el plugin Advanced Custom Fields (ACF) es una herramienta fantástica a tener en cuenta. Una de sus características más destacadas es la página de opciones de ACF. Esta potente función le permite crear una página dedicada en su panel de administración de WordPress para gestionar la configuración global del sitio y otros campos relacionados.

Imaginemos que tiene un sitio web con un tema personalizable, y desea proporcionar una ubicación centralizada donde los administradores puedan controlar la configuración de todo el sitio. La página de opciones de ACF puede ser su solución.

Puede adjuntar cualquier campo de su rico conjunto: desde el campo de texto sin formato o el campo de imagen (por ejemplo, un logotipo) hasta el campo de repetición , lo que le permite gestionar fácilmente las opciones de todo el sitio. Las posibilidades son infinitas.

A diferencia de la forma 'dura' codificada, utilizando la página de opciones, agilizas la gestión de estos ajustes. De este modo, los administradores podrán mantener el aspecto del sitio de forma más cómoda y eficaz.

Nota: La página de opciones es una característica Pro, y requiere la versión Pro del plugin Advanced Custom Fields.

Para entender cómo funciona la página de opciones de ACF, es esencial saber cómo almacena ACF los datos. Mientras que ACF normalmente almacena campos asociados con entradas o páginas en la tabla wp_postmeta de su base de datos de WordPress, en este caso, el plugin maneja los campos de la página de opciones de forma diferente. ACF almacena los campos de la página de opciones en la tabla wp_options. Esta separación permite una mejor organización y recuperación de los datos.

En la práctica, para nosotros sólo significa un cambio sobre la obtención de valores: debe definir la fuente "options" como el get_field() segundo argumento, en lugar de un id de entrada.

Añadir una página de opciones a su panel de administración de WordPress utilizando ACF es un proceso sencillo. El proceso consta de dos partes:

1. Añadir una página de opciones
2. Crear un grupo de campos ACF y "adjuntarlo" a la página de opciones

Empecemos por la primera. Aquí tenemos 2 maneras de lograrlo: utilizando la función incorporada, o la codificación. Usted puede elegir lo que es preferido por usted.

Desde la versión 6.2, ACF Pro incluye una interfaz de usuario integrada para crear páginas de opciones. Anteriormente, se requería un addon para esta solución de interfaz de usuario. Aunque el uso de ese addon ya no es tan relevante como antes, sigue habiendo otros addons de ACF muy valiosos.

Vea el vídeo oficial a continuación para ver cómo añadir una nueva página de opciones utilizando la interfaz de usuario del plugin.

Si prefieres el método de codificación, abre el archivo functions.php de tu tema y pega el siguiente fragmento de código. Usamos la función acf_add_options_page() para crear la página de opciones:

add_action('acf/init', function () {
    acf_add_options_page([
        'page_title' => 'Global Site Settings',
        'menu_title' => 'Site Settings',
        'menu_slug' => 'site-settings',
        'capability' => 'manage_options',
        'position' => 30,
        'icon_url' => 'dashicons-admin-generic',
    ]);
});

En este ejemplo, creamos una página de opciones titulada "Configuración global del sitio" con un título de menú "Configuración del sitio". El slug del menú define la URL de la página de opciones. Establecemos la capacidad manage_options para garantizar que sólo los administradores puedan acceder a ella. El parámetro position determina la ubicación de la página de opciones en el menú de administración de WordPress. Finalmente, icon_url especifica el icono que se mostrará junto a la página de opciones en el menú. Puede utilizar cualquiera de los dashicons disponibles proporcionando el nombre de clase correspondiente.

Ahora guarda los cambios en el archivo functions.php, ¡y ya está! La página de opciones aparecerá ahora en el panel de administración de WordPress. Está lista para que añadas campos personalizados y gestiones la configuración global del sitio.

Ahora es el momento de asignar campos a nuestra página de opciones.

Cree un nuevo grupo de campos en ACF y añada los campos necesarios.

A continuación, en la configuración de "Ubicación" del grupo de campos, seleccione "Página de opciones" como regla para mostrar los campos en la página de opciones. Tal y como se muestra en la siguiente captura de pantalla.

Guarde el grupo de campos y ¡listo! Ahora puedes visitar tu página de opciones y ver allí los campos de tu grupo.

Hemos añadido la página de opciones y asignado los campos. Ahora, tenemos que mostrar estos campos, todos o algunos de ellos en la parte frontal de nuestro sitio web. A continuación vamos a compartir 2 enfoques, el enfoque shortcode (con un plugin) y el otro con la codificación. Elija el método que prefiera.

Otro addon de ACF, llamado ACF Views va a hacer el trabajo por nosotros. ACF Views es un addon gratuito e inteligente, que nos permite mostrar campos ACF seleccionados (o incluso Posts) en cualquier lugar usando shortcodes, el marcado HTML es creado automáticamente por el plugin.

El enfoque del plugin resuelve una serie de problemas a la vez, quitándonos muchas molestias de encima.

Así pues, instale el plugin ACF Views del repositorio de WordPress.org, y actívelo.

Cuando active el plugin ACF Views, aparecerá un nuevo elemento en el menú de administración, llamado "ACF Views". El elemento tiene varios sub-elementos, pero en nuestro caso, vamos a trabajar sólo con el llamado "ACF Views".

El siguiente vídeo ofrece una visión general de cómo añadir una nueva Vista ACF a una sola página. Mientras lo ve, se hará una idea de cómo funciona el plugin. Sin embargo, tenga en cuenta que nuestro objetivo específico es ligeramente diferente. Nuestra intención es mostrar los campos de la página de opciones.

Para visualizar los campos de la página de opciones, siga las instrucciones de texto que aparecen a continuación:

1. Haga clic en la opción de menú "ACF Views" para acceder a la página ACF Views.
2. Haga clic en el botón "Añadir nuevo" para crear una nueva Vista.
3. En la nueva página, asigne a la vista un nombre descriptivo. Por ejemplo, llamémosla "Configuración del sitio".
4. Elija los campos que desea mostrar en el menú desplegable.
5. Pulse el botón "Publicar" para generar el shortcode para la Vista.
6. Copie el shortcode generado y modifíquelo, para pasar la cadena 'options' al parámetro 'object-id' como argumento. Así que su shortcode se verá así: [acf_views view-id="5" name="Configuración del sitio" object-id="opciones"]. Pero seguro que los argumentos view-id y name contendrán sus valores específicos.
7. Pega el shortcode en la ubicación apropiada. Puede ser cualquier página de Gutenberg o incluso un widget. Recuerda usar el elemento correcto, como el bloque shortcode del editor Gutenberg.
8. Guardar y visitar la página, para ver el resultado.
9. ¡Enhorabuena! Ha visualizado correctamente los campos de la página de opciones.

A diferencia del uso de código personalizado, no necesita preocuparse por el nombre, tipo o formato de retorno del campo. El plugin genera automáticamente el marcado HTML por usted.

Además, puede aplicar reglas CSS para dar estilo a la salida directamente dentro de la Vista. El campo Código CSS se encuentra en la pestaña "Avanzado".

Aunque el plugin ACF Views proporciona una solución excelente para mostrar campos desde la página de opciones, algunos desarrolladores pueden preferir un enfoque de codificación más práctico. En tales casos, el uso de código PHP para recuperar y mostrar los datos es una opción viable.

Sin embargo, es importante tener en cuenta que este método requiere un mayor nivel de conocimientos de codificación y puede no ser tan fácil de usar para los principiantes. Implica el uso de funciones como get_field() para obtener los valores de los campos de la página de opciones y luego hacer eco manualmente o manipularlos dentro de sus archivos de plantilla PHP.

He aquí un ejemplo sencillo de cómo puede mostrar un campo de página de opciones utilizando código PHP:

// the code below expects the 'Image URL' Return Format 
$logoUrl = get_field('logo', 'options')?? '';
printf('<img src="%s" alt="logo">', $logoUrl);

Puede utilizar la misma función get_field(), como en otros casos, simplemente pasando la cadena 'options' como segundo argumento.

La complejidad de este enfoque radica en que ACF tiene más de 30 tipos de campo, y la respuesta de get_field depende no sólo del tipo de campo, sino también del formato de retorno del campo. Consulte la lista de los principales tipos de campo para obtener guías prácticas específicas.

Para obtener información adicional, vea el vídeo que figura a continuación y lea el artículo oficial de la ACF.

Aunque este enfoque ofrece más control y posibilidades de personalización, requiere un conocimiento más profundo de PHP y del desarrollo de WordPress, lo que lo hace menos accesible para aquellos que prefieren una solución más intuitiva.

Esta es una nota esencial para los sitios web multilingües, que tienen (o tendrán) contenido en varios idiomas.

Como mencionamos en el capítulo "Entre bastidores", ACF almacena los valores de los campos de página de opciones en la tabla wp_options. Esta diferencia significa que no puedes traducirlos de la misma forma que las páginas o entradas normales, creando "otra" entrada en un idioma específico.

Puede sonar aterrador, pero no te preocupes, la mayoría de los plugins multilingües ya se encargan de ello.

Por ejemplo, si usas Polylang, hay un addon que se encarga de ello. Si utiliza WPML, la solución está incorporada, y sólo tiene que seleccionar la opción de traducción adecuada para su grupo ACF para que los campos sean traducibles.

La función de página de opciones ACF permite a los administradores de WordPress gestionar fácilmente la configuración global del sitio y los campos relacionados.

Al crear una página de opciones dedicada, puede agilizar el proceso de personalización y mejorar la experiencia general del usuario. Tanto si decide utilizar el plugin ACF Views como si opta por un enfoque de codificación PHP, la página de opciones le ofrece la posibilidad de centralizar y controlar aspectos esenciales de su sitio WordPress.

Experimente con la página de opciones y descubra cómo puede hacer que la gestión de su sitio web sea más eficiente y agradable.