En este tutorial te vamos a explicar cómo crear botones para descargar archivos en WordPress. Y te vamosa a explicar a cómo crearlos de 4 formas distintas: DIVI, Gutenberg, Elementor y el editor clásico.
Índice de contenidos
Subimos el archivo a descargar a la biblioteca de medios
Este paso es igual para todos los ejemplos que vamos a explicar en este tutorial. Subiremos nuestro archivo a descargar a la biblioteca de medios y nos guardaremos la URL del archivo.
En el caso de que almacenemos el archivo en un servicio externo a nuestra web deberemos guardar la URL del archivo que nos ofrezca dicho servicio.
Botón para descargar archivos en WordPress con Gutenberg
Para crear un botón para descargar archivos con Gutenberg buscaremos el módulo y lo insertamos.
Una vez realizados todos los ajustes de personalización (texto, color, fuente, etc) definiremos en enlace del botón. Para ello clicamos sobre el icono de la cadena y en el popup emergente pegaremos el enlace del archivo.
Después de definir el enlace clicaremos sobre el icono de los 3 puntos y seleccionamos la opción editar como HTML.
Lo siguiente que haremos será añadir un atributo a la etiqueta HTML <a>. Para ello nos pondremos después del inicio de la etiqueta y añadiremos el atributo download=»true» (marcado de color rojo). El código quedará asi:
a download="true" class="ws-block-button__link" href="https://enlace al archivo">Haz click para descargar aquí
Publicamos la entrada y ya tenemos nuestro botón para descargar archivos con Gutenberg.
Al final del tutorial tienes un post en el que repasamos todos los pasos.
Botón para descargar archivos con el editor clásico.
a download="true" href="https://enlacealarchivo.com" class="myButton">Click aquí para descargar
Una vez actualices y visites la página podrás comprobar que aparece un enlace en lugar del botón que habíamos personalizado. Para darle los estilos del botón nos iremos a apariencia/personalizar/ css adicional y pegaremos el código CSS (recuadro azul de la imagen)
Y ya tenemos creado nuestro botón para descargar archivos con el editor clásico.
Puedes seguir todos los pasos en el vídeo que hay al final del post.
Botón para descargar archivos con DIVI.
Para crear un botón para descargar archivos con DIVI insertamos el módulo de botón, personalizamos el botón al gusto y insertamos la URL del archivo a descargar y guardamos los cambios.
El siguiente paso será ir a divi / opciones del tema / integración. Habilitamos la opción de insertar código en la cabecera y pegamos este script:
<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.download-button');
downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
</script>
Guardamos los cambios y ya tenemos habilitado nuestro botón para descargar archivos con DIVI.
En el vídeo también podrás seguir los pasos.
Botón para descargar archivos con Elementor
Sobre cómo crear un botón para descargar archivos con Elementor ya tenemos un tutorial creado por lo que invitamos a que cliques en el siguiente enlace:
Cómo crear un botón para descargar archivos con Elementor
De igual forma, si no quieres visitar en enlace tambíen lo explicamos en el siguiente vídeo.
Bien pues hasta aquí este tutorial en el que os hemos explicado 4 formas sobre cómo crear botones para descargar archivos en WordPress. Si tenéis cualquier duda o pregunta os invitamos a dejarla en los comentarios.