Campo de archivo ACF: Guías de uso y visualización

El campo Archivo es uno de los muchos tipos de campo ACF, permite "añadir" archivos adjuntos de la Mediateca a cualquier página.

A diferencia del campo Imagen, que sólo permite seleccionar imágenes (.png, .jpg, . gif y similares) el campo Archivo le permite elegir un archivo con cualquier extensión de su Mediateca, incluidos varios tipos de archivo, como .pdf y .doc

Además, a diferencia del campo Imagen no proporciona una vista previa del archivo seleccionado, por lo que sólo se puede ver el Nombre del archivo y el Tamaño del archivo. Normalmente, los desarrolladores utilizan este tipo de campo para crear un enlace de descarga o "abrir" el archivo.

El campo admite muchas extensiones de archivo diferentes. Puedes encontrar la lista de extensiones permitidas para todos los tipos de archivo en la página relacionada de wordpress.org.

El campo Archivo ACF tiene 3 opciones en la configuración Tipo de retorno: Matriz de archivos, URL de archivos e ID de archivos. Esta configuración no afecta al aspecto del campo para los editores administradores. Pero controla el formato del valor que se devuelve en código cuando se solicita el valor del campo a la base de datos.

Por lo tanto, le sugiero que utilice la opción "ID de archivo". Es la mejor opción para el rendimiento y le permite obtener cualquier dato adicional sobre el archivo adjunto seleccionado, como el nombre del archivo o la fecha de carga. Evita la opción "URL de archivo", a menos que la necesites para algún objetivo específico. Ya que no permite obtener ningún dato adicional sobre el archivo adjunto.

Como ya hemos mencionado, el campo Archivo funciona con la Mediateca y permite añadir todo tipo de archivos adjuntos a las páginas. Pero debes saber que cuando "añades" un archivo en realidad significa "adjuntar", no copiar. El campo es sólo el intermediario entre una página y la Mediateca y asocia el ID del archivo que has elegido a Post Meta de la página actual. Significa sin crear duplicados o copias físicas del archivo.

Incluso en el caso de que esté subiendo un nuevo archivo adjunto a través del cuadro de diálogo de carga de campos, el archivo se subirá a la Mediateca como un archivo adjunto ordinario, con el campo de archivo almacenando únicamente el ID del archivo adjunto. De este modo, puede "adjuntar" un archivo a muchas páginas y no se crearán copias.

Tendrás que dar nombres claros a los archivos adjuntos y evitar subir el mismo archivo varias veces. La Mediateca no sabe si el archivo adjunto que se está cargando es completamente nuevo o si ya existe. Así que si no estás seguro, haz una búsqueda rápida en la Mediateca antes de subirlo. De lo contrario, tendrás muchos dolores de cabeza con el tiempo con múltiples copias de la misma cosa.

Además, la configuración del Formato de Retorno tampoco afecta al valor almacenado. Siempre es un ID de adjunto. En caso de que no haya seleccionado el Formato de Retorno 'ID de Archivo', entonces cada vez que solicite el campo el plugin ACF hará un trabajo extra para convertir el ID de Adjunto guardado a otro formato, por eso es mejor para el rendimiento utilizar la opción nativa "ID de Archivo".

Los shortcodes son una de las funciones más potentes y fáciles de usar de WordPress. Los shortcodes te permiten "llamar" a funciones PHP directamente en tu editor, como Gutenberg. Esto le permite mostrar piezas de contenido dinámico.

Para crear un shortcode necesitarías escribir código PHP. Pero no vamos a hacer eso hoy, vamos a utilizar un plugin gratuito llamado ACF Views. Que va a hacer todo el trabajo por nosotros, y le permitirá mostrar cualquier campo ACF, utilizando códigos cortos generados automáticamente. Lea cómo mostrar campos ACF sin codificar para conocer todas las ventajas del enfoque 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 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 Archivo ACF.

Si quieres seguir la guía necesitas:

1. instalar el plugin ACF Views en su sitio WordPress. Y no olvide activarlo. Es un complemento de ACF, por lo que también tendrá que
2. Instalar el complemento gratuito Advanced Custom Fields (ACF) y activarlo.

Después de activar el plugin ACF Views, verá un nuevo elemento en su menú de administración, llamado "ACF Views".

Ese elemento tiene un submenú, con varios elementos, pero sólo necesitaremos utilizar el que se llama "ACF Views".

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 Vistasdiferentes para mostrar diferentes campos (o conjuntos de campos) para diferentes entradas/páginas.

A continuación, asigne a su Vista un nombre, puede utilizar cualquier cosa que describa la Vista. Este nombre sólo se mostrará en la lista de Vistas, facilitando su localización. He llamado a mi Vista "Catálogo de páginas".

Ahora tendrás que asignar un nuevo campo a tu 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, continúe seleccionando el campo de destino de la lista, yo he seleccionado "Catálogo (archivo)".

Nota: el tipo de campo aparece entre paréntesis después del nombre del archivo. Así podrá identificar fácilmente el tipo de cualquier campo en el desplegable.

También debería ver el tipo como "archivo". Defina una "Etiqueta de enlace" para nuestro futuro enlace. O déjela vacía, si quiere que el plugin la recoja del adjunto seleccionado.

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

Haga clic en el botón 'Publicar' para guardar y publicar su Vista. En cuanto 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 tenemos que copiar el código corto. Para ello haga clic en el botón "Copiar al portapapeles" en el primer shortcode.

Ahora que hemos preparado todo estamos listos para mostrar el campo Archivo.

Visita tu página de destino, aquí será donde tengas el campo archivo. Recuerde comprobar que hay un archivo adjunto en su campo Archivo, y pegue el shortcode en cualquier lugar que desee en el contenido de la página.

Para pegar el shortcode con el editor de Gutenberg, solo tienes que hacer clic en el botón más de la barra superior y elegir 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 post/página.

Visite la página para ver el resultado. Y si ha hecho todo correctamente, debería ver el archivo seleccionado mostrado en el contenido como un enlace, con la etiqueta definida. O con el nombre del archivo adjunto en caso de que lo haya dejado vacío.

Si no puedes ver tu enlace, vuelve atrás y edita la página. Asegúrese de que ha adjuntado un archivo al campo de archivo ACF porque si el campo está vacío no tendrá nada que mostrar.

En la mayoría de los casos, necesitaríamos convertir el campo Archivo en un enlace para mostrar a los usuarios. Así, cuando intenten descargar el archivo adjunto o abrirlo en una nueva pestaña del navegador, les resultará más fácil. Para ello, tendrías que obtener la URL del archivo (y probablemente también el nombre) y luego crear el HTML para el enlace.

El código será diferente dependiendo del Tipo de Retorno seleccionado. A continuación proporcionamos ejemplos.

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

<?php

// don't forget to replace 'file' with your field name
$fileID = get_field('file');
if ($fileID) {
   // $fileID is an ID (integer) of a Post with the Attachment type. 
   // we need to use the built-in WP functions to get necessary data
    $url = wp_get_attachment_url($fileID);
    $name = get_post($fileID)->post_title ?? '';
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='%s'>%s</a>", esc_attr($url), esc_attr($name), esc_html($name));
}

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

<?php

// don't forget to replace 'file' with your field name
$fileData = get_field('file');
if ($fileData) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='%s'>%s</a>", 
     esc_attr($fileData['url']), esc_attr($fileData['filename']), esc_html($fileData['filename']));
}

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

<?php

// don't forget to replace 'file' with your field name
$fileUrl = get_field('file');
if ($fileUrl) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='prices.pdf'>Prices.pdf</a>", esc_attr($fileUrl));
}

Hemos utilizado el atributo download (read more) para que el navegador de un cliente sepa, que en lugar de abrir este archivo debe ser descargado. El valor del atributo se utilizará como el nombre del archivo de descarga. Elimine el atributo si desea que este archivo se abra en lugar de descargarse.

Con el formato de retorno "URL" tenemos que codificar el nombre del archivo. No hay manera de utilizar este código para diferentes archivos o modificarlo sin editar el código. Por eso es mejor elegir siempre el formato de retorno "ID".

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

Ha visto más de cerca el campo Fichero ACF y cómo utilizarlo y visualizarlo. Hemos mostrado los aspectos importantes que debe recordar al utilizar este tipo de campo.

Es útil saber que puedes tener múltiples campos (incluso de diferentes grupos) en una única Vista, y puedes dar estilo a la salida de los campos usando el campo de código CSS (ver la pestaña Avanzado de la Vista). El plugin añadirá ese CSS sólo en las páginas en las que estés usando el shortcode. Así que no necesitas buscar un lugar para ponerlo.

Visita el sitio web oficial de ACF Views para obtener más información sobre el plugin, también puedes encontrar enlaces al canal de YouTube del plugin que tiene tutoriales en vídeo y la Documentación del plugin. Estos recursos te ayudarán a familiarizarte con el plugin más rápidamente.