Campo de enlace ACF: Guía de uso y visualización

El campo Enlace ACF es uno de los muchos tipos de campo ACF y permite seleccionar y almacenar cualquier URL web dentro de una página. Los desarrolladores suelen utilizarlo para varios tipos de enlaces y botones.

El campo Enlace utiliza la ventana emergente de enlaces incorporada en WordPress. Y aparte del enlace en sí, también proporciona un campo para definir una etiqueta de enlace con algunos ajustes que controlan el enlace. Como la configuración, que controla si debe abrirse en una nueva pestaña o no.

Cuando necesite crear un enlace a un archivo interno, por ejemplo, un .pdf que esté subido a la Mediateca, deberá utilizar el campo Archivo ACF en lugar del campo Enlace.

El campo Enlace tiene un ajuste de Formato de retorno con dos opciones: "Link Array" y "Link URL". La opción que elija no afectará a la apariencia del campo para los administradores o editores. Como los campos de la ventana emergente seguirán siendo los mismos, esto se debe a que la configuración del formato de retorno controla la codificación. Aquí nos referimos a la respuesta que recibes en el código de la función get_field() cuando solicitas el campo.

Le recomendamos que utilice siempre la opción "Link Array". La segunda opción "Enlace URL" no te permitirá obtener la etiqueta ni tener la configuración de "destino" (abrir en nueva pestaña). Esto significa que tendrá que "codificar" estos argumentos en sus archivos de plantilla. Debido a ello, no podrá cambiarlos posteriormente a través de la ventana emergente.

Entre bastidores, el campo Enlace ACF almacena su elección en el Meta Post de la página (o post) actual. En la Base de Datos el campo meta almacena los datos como un array (independientemente del Formato de Retorno). Esto es para mantener todos los campos de enlace, es decir, la URL, el texto del enlace y la opción "abrir en una nueva pestaña" disponibles para su uso. Por eso sugerimos utilizar el formato de retorno "Matriz de enlaces". Ya que se ajusta al formato de la base de datos y proporciona toda la información disponible sobre el enlace.

La forma de código es bastante flexible pero tiene una fila de desventajas.

1. Te quita tiempo
2. Debes conocer el tipo de retorno
3. Debe recordar nombres de claves específicos en la matriz de respuesta
4. Tienes que encontrar manualmente la plantilla de página correcta en tu tema y modificarla

Sin embargo, existe otra forma de mostrar el campo Enlace ACF (o cualquier otro tipo de campo) sin codificarlo. Todo esto es posible gracias al plugin gratuito ACF Views que lo hace muy fácil y le ahorra mucho tiempo.

El plugin se encarga del marcado HTML. Sólo tenemos que elegir los campos ACF para mostrar, a continuación, copie el shortcode auto-generado y pegarlo en cualquier lugar de nuestra página. Entonces nada extra es requerido de nuestro lado. Lea cómo mostrar campos ACF sin codificar para conocer todas las ventajas del método shortcode.

A continuación adjuntamos un vídeo tutorial que muestra cómo mostrar campos ACF en una sola página utilizando el método shortcode. El vídeo es común para todos los tipos de campo ACF. Más tutoriales en vídeo en el canal oficial de en YouTube.

Pero no dude en saltarse el vídeo, ya que a continuación le ofrecemos una guía completa paso a paso exactamente para el campo Enlace ACF.

Vamos al grano.

En caso de que vayas a seguir adelante necesitarás instalar el plugin ACF Views en tu sitio web WordPress y activarlo. Ten en cuenta que el plugin es un complemento del plugin ACF. Así que asegúrese de que el plugin ACF está instalado y activo también. La buena noticia es que ambos plugins son gratuitos.

Ahora ya estás listo, continuemos.

Al activar el plugin ACF Views aparece 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".

Haga clic en ese elemento del menú para abrir la página Vistas y, a continuación, haga clic en el botón "Añadir nuevo" para crear una Vista.

Nota: El término "Vista" es el nombre dado al Post Type especial que proporciona el plugin. Cada Vistaes una lista de campos ACF a mostrar, por lo que puede tener muchas Vistas diferentes para mostrar diferentes campos (o conjuntos de campos) para diferentes entradas/páginas.

En la nueva página, dale un nombre a tu Vista. Puede ser cualquier cosa que describa la Vista, este nombre sólo se mostrará en la lista de Vistas del administrador para que sea más fácil de encontrar. He llamado a mi Vista "Enlace de página".

Ahora necesita asignar un nuevo campo a su Vista. Haz clic en el botón "Añadir campo" y selecciona tu "Grupo" en el desplegable. En mi caso, el grupo tiene el nombre de "Campos de página".

A continuación, siga seleccionando el campo de destino de la lista. En mi caso, el campo se llama "Leer más".

Nota: El tipo de campo aparece entre paréntesis para facilitar su identificación.

En este caso, debería ver que el tipo es un "enlace". Puedes definir una "Etiqueta de enlace" si es necesario o dejarla vacía si quieres que el plugin la recoja dinámicamente de los datos del enlace.

En general cada Vistapuede tener una cantidad ilimitada de campos ACF, para nuestro caso, usaremos solo uno.

Haga clic en 'Publicar' para guardar y publicar su Vista. Cuando se publique, verá que se han generado códigos cortos en un bloque a la derecha de la pantalla de edición de su vista. Cada Vistatiene su propio shortcode con un ID único (la estructura del shortcode es la misma para todas las Vistas, pero los argumentos son únicos).

[acf_views view-id="xxxx" name="x"]

Ahora copie el shortcode, y haga clic en el botón 'Copiar al portapapeles' del primer shortcode.

Todo está listo para mostrar el campo Enlace ACF. Visite su página de destino (con el campo Enlace), y asegúrese de que el campo tiene alguna URL seleccionada. A continuación, pegue el shortcode en cualquier lugar que desee del contenido de la página.

En caso de que estés utilizando el editor Gutenberg: haz clic en el botón más de la barra superior y elige el bloque "Shortcode" de la lista. A continuación, pega tu shortcode en el bloque y pulsa el botón 'Actualizar' para guardar tu post/página.

A continuación, visite su página para ver el resultado. Si ha hecho todo correctamente, debería ver el enlace con la etiqueta definida. O con la etiqueta recogida del campo en caso de que lo hayas dejado vacío.

Si no ve su enlace, vuelva atrás y edite la página. Asegúrese de haber seleccionado una URL en el campo de enlace ACF y guarde la página porque si el campo está vacío no tendrá nada que mostrar.

Para mostrar el campo Enlace tendrá que crear un marcado HTML para el enlace e insertar los datos de su campo. El código será diferente dependiendo del Tipo de Retorno seleccionado. A continuación le ofrecemos algunos ejemplos.

1. Código PHP para mostrar el campo Enlace con el "Array" Formato de retorno:

<?php

// don't forget to replace 'link' with your field name
$linkData = get_field('link');

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format  
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title']));
}

2. Código PHP para mostrar el campo Enlace con la "URL" Formato de retorno:

<?php

// don't forget to replace 'link' with your field name
$linkUrl = get_field('link');

if ($linkUrl) {
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='_blank'>Read more</a>",
        esc_url($linkUrl));
}

Con el formato de retorno "URL" tenemos que codificar la etiqueta de nuestro enlace. Esto significa que no podrás cambiarla sin modificar el código. Por eso es mejor elegir siempre el formato de retorno "Array".

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

Le hemos mostrado cómo utilizar el campo Enlace ACF, sus opciones y dos formas de mostrarlo. Así que ahora puede utilizar fácilmente el campo en cualquier lugar.

No olvides que una Vista en el plugin ACF Views soporta múltiples campos, lo que significa que puedes añadir más campos a tu Vista en cualquier momento. El complemento también admite todos los tipos de campo disponibles.

De hecho, puede dar estilo a la salida de los campos sin modificar su tema: utilice el campo de código CSS (consulte la pestaña Avanzado de la vista). El CSS añadido allí sólo se imprimirá en las páginas en las que esté utilizando el shortcode. Así que ya no tendrás que buscar un lugar para pegar tu código CSS.

Para obtener más información sobre el plugin, visite el sitio web oficial de ACF Views. Allí encontrará enlaces al canal de YouTube del plugin (con tutoriales en vídeo) y a la Documentación del plugin. Esos recursos son útiles para cualquiera que sea nuevo en el plugin.