WPLake > Blog > Campo de enlace ACF: Guía de uso y visualización
  • English
  • Deutsch
  • Français
  • Italiano

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

Hora de leer: 7 minutos

-

ACF Plugins Tutoriales

-

Actualizado 06.10.23

Aprenda cómo funciona y se comporta el campo Enlace. Muestre el valor del campo manualmente o mediante plantillas inteligentes, y benefíciese de la generación automática de marcas.

Índice

Sobre el campo Enlace

#enlace copiado

El campo Enlace ACF es uno de los muchos tipos de campo ACF y está diseñado para seleccionar y almacenar 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 enlace incorporada de WordPress y proporciona no sólo el enlace real, sino también un campo para definir una etiqueta de enlace. Además, ofrece ajustes que le permiten controlar el comportamiento del enlace, como si debe abrirse en una nueva pestaña o no.

Sin embargo, es importante tener en cuenta que cuando necesite crear un enlace a un archivo interno, como un .pdf subido a la Mediateca, debe utilizar el campo Archivo ACF en lugar del campo Enlace.

Puede incluir el campo Enlace en cualquier grupo ACF haciendo clic en el botón "Añadir campo" y seleccionando "Enlace" en el desplegable "Tipo de campo".

Formatos de retorno

#enlace copiado

El campo Enlace ofrece un ajuste de Formato de retorno con dos opciones: "Link Array" y "Link URL". Es importante tener en cuenta que cualquier opción que elija aquí no afectará a la apariencia del campo para los administradores o editores. Los campos de la ventana emergente seguirán siendo los mismos. Esta configuración afecta principalmente al aspecto de codificación, concretamente a la respuesta que se recibe en el código cuando se utiliza la función get_field() para solicitar el campo.

Recomendamos utilizar la opción "Link Array". La opción "Enlace URL" no permite acceder a la etiqueta ni a la opción "destino" (para abrir el enlace en una nueva pestaña). Esto significa que tendría que codificar estos argumentos en sus archivos de plantilla, lo que dificultaría su modificación posterior a través de la ventana emergente.

Tras añadir un campo Enlace a la página de destino, los administradores y editores pueden seleccionar una URL, que se almacenará dentro de la página.
La ventana emergente de enlace incorporada de WordPress le permite definir una etiqueta de enlace y el ajuste "abrir enlace en una nueva pestaña".
Después de configurar una URL, puede editar los detalles en cualquier momento. Haga clic en el icono "Lápiz" para editar los campos del enlace, o en el icono "X" para eliminarlo.

Entre bastidores del ACF

#enlace copiado

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. Este formato de matriz retiene todos los campos del enlace, incluyendo la URL, el texto del enlace y la opción "abrir en nueva pestaña" para su uso futuro. Por eso recomendamos utilizar el formato de retorno "Matriz de enlaces", ya que se ajusta al formato de la base de datos y proporciona acceso a toda la información disponible sobre el enlace.

Mostrar campo Enlace utilizando plantillas inteligentes

#enlace copiado

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

#enlace copiado

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 posts
    Creamos una Tarjeta y asignamos posts (o items CPT), elegimos una Vista (que se usará para mostrar cada item) y el plugin genera un shortcode que usaremos para mostrar el conjunto de posts. 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.

Paso 1. Creación de una vista

#enlace copiado

Cuando active el plugin Advanced Views, observará un nuevo elemento en su menú de administración titulado "Advanced Views".

Dentro del submenú, encontrará varios elementos, pero el que tendrá que utilizar se llama "Advanced Views".

ACF Views provides list management via the familiar interface.
Su lista tendrá la misma apariencia, pero no contendrá ningún elemento Vista.

Visite la pestaña Vistas ACF y haga clic en el botón 'Añadir nuevo' para crear una Vista.

Proporcione un nombre para su Vista. Puede ser cualquier cosa que describa la Vista, ya que este nombre se mostrará en la lista de Vistas, haciéndola más fácil de identificar. Por ejemplo, hemos llamado a nuestra Vista "Enlace de página".

ACF Views allow to assign multiple fields within your View.

Asignación de campos

#enlace copiado

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 se llama "Campos de página".

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

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

En este caso, debería ver el tipo de campo como "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 Vista puede alojar un número ilimitado de campos ACF, pero para nuestro caso, utilizaremos sólo uno.

Haga clic en "Publicar" para guardar y publicar su Vista. Una vez publicada, verá que se han generado Shortcodes en un bloque a la derecha de la pantalla de edición de su Vista. Cada Vista tiene 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.

Paso 2. Pegue el shortcode en su lugar

#enlace copiado

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 una URL seleccionada. A continuación, pegue el shortcode en cualquier lugar que desee del contenido de la página.

Si utilizas 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 haz clic en el botón "Actualizar" para guardar tu publicación/página.

Bloque Gutenberg que contiene un shortcode Advanced Views.

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 haya dejado vacío.

Campo ACF Link mostrado en una página.

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

Mostrar campo Enlace con código PHP

#enlace copiado

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 a continuación y lea el artículo oficial del ACF.

ACF Link field with code, video cover

Reflexiones finales

#enlace copiado

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 Advanced 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 aplicará a 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 Advanced Views. Allí encontrará enlaces al canal de YouTube del plugin (con tutoriales en vídeo) y a la documentación del plugin. Estos recursos son útiles para cualquier persona nueva en el plugin.

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