Página de opciones del ACF

Si está buscando mejorar su sitio web WordPress con opciones y campos personalizados, 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 del ACF, es esencial saber cómo almacena los datos el ACF. 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 lo primero. Aquí tenemos 2 maneras de lograrlo: usando la característica incorporada, o codificando. Puedes elegir la que prefieras.

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 valiosos disponibles.

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, el 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.

Una vez configurada la página de opciones y asignados los campos, es hora de mostrar estos campos en la parte frontal de su sitio web. A continuación, describiremos dos enfoques: el primero aprovecha las plantillas Smart, mientras que el segundo sigue el enfoque manual clásico. Puede optar por el método que más le convenga.

Presentemos el complemento Advanced Views.

Advanced Views proporciona plantillas inteligentes para mostrar el contenido sin esfuerzo. Viene con consultas de entrada integradas y generación automática de plantillas, lo que permite un desarrollo rápido manteniendo la flexibilidad.

Aclaremos primero lo que entendemos por "plantillas" en el contexto de este plugin: Las plantillas de Advanced Views se basan en el motor Twig. Puede que estés pensando: "No está mal, pero sigue siendo necesario obtener los campos mediante PHP y escribir el marcado desde cero, por no hablar de leer la documentación de Twig".

Aquí es donde el plugin brilla: "Plantillas inteligentes". Esto significa que no tenemos que buscar campos o crear marcas manualmente desde cero. El plugin proporciona una base sólida que cubre la mayoría de los casos de uso. Si necesitamos algo específico, podemos personalizarlo fácilmente. ¿No es estupendo?

Veamos ahora cómo funciona.

El plugin introduce dos nuevos Custom Post Types (CPTs): ACF View y ACF Card.

• Vista para datos de entrada y Advanced Custom Fields
  Creamos una Vista y asignamos uno o más campos de entrada, el plugin genera un shortcode que usaremos para mostrar los valores de los campos a los usuarios. Podemos dar estilo a la salida con el campo CSS incluido en cada Vista.
• Tarjeta para selecciones de entradas
  Creamos una Tarjeta y asignamos entradas (o ítems CPT), elegimos una Vista (que se usará para mostrar cada ítem) y el plugin genera un shortcode que usaremos para mostrar el conjunto de entradas. La lista de posts se puede asignar manualmente o dinámicamente con filtros.

El plugin nos ofrece la comodidad de trabajar con los conocidos CPTs de WordPress a la vez que se encarga de consultar y generar automáticamente las plantillas de marcado Twig. Puedes encontrar más información sobre las ventajas del plugin aquí.

Para seguir adelante; instale el plugin Advanced Views en su sitio WordPress y recuerde activarlo. También necesitará el plugin ACF (gratuito) instalado y activo. A continuación, continúe con los siguientes pasos.

Al activar el plugin Advanced Views aparece un nuevo elemento en el menú de administración, llamado "Advanced Views". El elemento tiene varios sub-elementos, pero en nuestro caso, vamos a trabajar sólo con el llamado "Advanced Views".

Para visualizar los campos de la página de opciones, siga las instrucciones siguientes:

1. Haga clic en la opción de menú "Advanced Views" para acceder a la página Advanced 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="Ajustes 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 Advanced 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 usar la misma función get_field(), como en otros casos, sólo 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 específicas de cómo hacerlo.

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

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

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

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

Puede dar miedo, pero no te preocupes, la mayoría de los plugins multilingües ya se han encargado 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 Advanced Views como si opta por un enfoque de codificación PHP, la página de opciones desbloquea el potencial para 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.