WPLake > Centro de aprendizaje > Página de opciones del ACF
  • English
  • Deutsch
  • Français
  • Italiano

Página de opciones del ACF

Gestione eficazmente la configuración global con las páginas de opciones de ACF: Página de administración dedicada, soporte multilingüe y métodos de visualización flexibles.

Resumen de los puntos clave

  1. Visión general de la Página de Opciones de ACF: El plugin ACF incluye una potente función llamada Páginas de Opciones, que permite crear una página dedicada en el panel de administración de WordPress para gestionar los ajustes globales del sitio y los campos relacionados de forma eficiente.
  2. Almacenamiento de datos entre bastidores: A diferencia de los típicos campos ACF asociados a entradas o páginas almacenados en la tabla wp_postmeta, los campos de página de opciones ACF se almacenan en la tabla wp_options, lo que permite una mejor organización y recuperación de los datos.
  3. Dos métodos de configuración: Los administradores pueden añadir páginas de opciones utilizando la interfaz de usuario integrada que proporciona ACF Pro o codificándola manualmente mediante funciones como acf_add_options_page(), lo que ofrece flexibilidad en los métodos de configuración.
  4. Soporte multilingüe: La gestión de contenidos multilingües plantea un reto para los campos de las páginas de opciones, ya que se almacenan de forma diferente en la base de datos. Sin embargo, plugins multilingües populares como Polylang y WPML ofrecen soluciones para que estos campos sean traducibles.
  5. Métodos de visualización: Los campos de la página de opciones se pueden mostrar en el front-end utilizando plantillas Smart proporcionadas por plugins como Advanced Views o codificando plantillas PHP, lo que permite una personalización basada en las preferencias del usuario y la experiencia de codificación.

Índice

Acerca de la 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.

Entre bastidores

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.

Cómo configurar

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

1. Añadir una 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.

Añadir una página de opciones utilizando la función incorporada

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.

ACF Options Page UI - video cover

Añadir una página de opciones manualmente

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.

2. Añadir un grupo ACF

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.

Seleccione la 'Página de opciones' en las Reglas de ubicación y elija el título de su página de opciones en el selector

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

Cómo mostrar los campos

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.

A) Uso de plantillas inteligentes

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?

Lo básico

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 framework 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 framework 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".

ACF Views provides list management via the familiar interface.
La página de Vistas ACF contiene una lista de Vistas, seguro que al principio no habrá elementos de Vista ACF.

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

B) Utilizar código PHP

Aunque el framework 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.

ACF options page with code, video cover

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.

Soporte multilingüe

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.

Resumen

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

¿Le ha resultado útil este artículo?

Totalmente inútil

Ligeramente útil

Muy útil

Modo FAQ

/

Modo de aprendizaje

  1. ¿Qué es una página de opciones del ACF?

    Una página de opciones ACF es una página dedicada dentro del panel de administración de WordPress creada con el plugin Advanced Custom Fields (ACF), que permite a los administradores gestionar la configuración global del sitio y los campos relacionados de forma eficiente.

  2. ¿Cómo se almacenan los campos de la página de opciones del ACF?

    A diferencia de los típicos campos ACF asociados a entradas o páginas, los campos de página de opciones ACF se almacenan en la tabla wp_options de la base de datos de WordPress, lo que proporciona una mejor organización y recuperación de los datos.

  3. ¿Cómo se crea una página de opciones del ACF?

    Configurar una página de opciones ACF implica dos pasos principales: añadir la propia página de opciones utilizando la interfaz de usuario integrada o un método de codificación, y crear un grupo de campos ACF para adjuntarlo a ella y gestionar los campos.

  4. ¿Es compatible la página de opciones de ACF con los sitios web multilingües?

    Sí, aunque los campos de la página de opciones ACF se almacenan de forma diferente en la base de datos, los plugins multilingües más populares como Polylang y WPML ofrecen soluciones para hacer que estos campos sean traducibles, garantizando la compatibilidad con sitios web multilingües.

  5. ¿Cómo puedo mostrar los campos de la página de opciones en la portada de mi sitio web?

    Los campos de la página de opciones se pueden mostrar en el front-end utilizando plantillas inteligentes proporcionadas por plugins como Advanced Views o codificando manualmente plantillas PHP, lo que ofrece flexibilidad en los métodos de visualización.

Navegación por el curso: Plugin ACF

Enlaces de contenido (20)

Sobre el autor

Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comentarios

    Deja un comentario

    Responder a 

    Por favor, sea considerado al dejar un comentario.

    No expuesto al público

    Got it