Cara Membuat Tombol Download Langsung (Satu Klik) di Divi Menggunakan Atribut Download

Tautan unduhan langsung adalah tautan yang mulai mengunduh file dengan mengklik alih-alih menautkannya di jendela browser Anda. Membuat tautan atau tombol unduhan langsung biasanya memerlukan penambahan PHP tingkat lanjut di sisi server, memodifikasi file .htaccess, dan/atau javascript. Kecuali Anda tahu apa yang Anda lakukan, ini dapat menimbulkan beberapa risiko keamanan.

HTML5 baru-baru ini memperkenalkan Atribut Unduhan sebagai solusi yang lebih disederhanakan untuk unduhan langsung. Atribut berusaha untuk mencapai dua hal utama: 1) atribut menentukan tautan target yang akan diunduh saat diklik dan 2) nilai atribut akan berfungsi sebagai nama file yang diunduh.

Fitur ini berguna ketika situasi membutuhkan penyimpanan file untuk dilihat nanti. Anda mungkin ingin membuat unduhan untuk penawaran eBuku, file media yang dibeli, atau sekadar gambar definisi tinggi.

Hari ini saya akan menunjukkan cara menambahkan atribut unduhan ke tautan atau tombol yang memungkinkan file diunduh langsung ke komputer pengguna.

Membuat Tombol Unduh Langsung Secara Manual

Menambahkan Atribut Unduh

Struktur tautan dengan atribut unduhan cukup mudah. Cukup tambahkan "unduh" di dalam tag < a > awal bersama dengan atribut "href" Anda yang berisi url ke file Anda.

<a href="/files/download-file.pdf" download >Download Link</a>

Menambahkan Nilai Atribut Unduhan (atau Nama File)

Atribut download juga memungkinkan Anda untuk menetapkan nama file selain nama file asli. Cukup tambahkan nama baru sebagai nilai atribut unduhan:

<a href="/files/download-file.pdf" download="newname" >Download Link</a>

Dalam contoh di atas, ketika pengguna mengklik untuk mengunduh tautan, file akan disimpan di komputer mereka dengan nama "nama baru" alih-alih nama file asli "download-file.pdf". Ini berguna ketika Anda memiliki file dengan nama panjang atau string karakter. Nilai nama file baru akan memberikan nama file yang sederhana dan mudah digunakan. untuk digunakan sebagai pengganti nama file yang lebih membingungkan.. Juga, dalam banyak kasus, tidak perlu menambahkan ekstensi file (mis. .pdf) ke yang baru nama file karena browser akan secara otomatis menambahkan ekstensi ke file.

Menambahkan fallback atribut target

Karena atribut download masih belum didukung oleh semua browser, sebaiknya tambahkan atribut target="_blank" ke link Anda. Ini akan membuka tautan di browser lain. Ini selalu merupakan praktik yang baik saat menautkan ke file. Dengan begitu jika browser tidak mendukung atribut download, itu hanya akan membuka file di jendela baru seperti tanpa atribut download. Plus, jika browser mendukung atribut unduh, itu akan mengunduh gambar tanpa membuka jendela baru. Jadi ini adalah opsi mundur yang bagus.

<a href="/files/download-file.pdf" download="newname" target="_blank" >Download Link</a>

Mengubah Tautan Anda menjadi Tombol Divi

Cara cepat untuk mengubah tautan Anda menjadi tombol Divi adalah dengan menambahkan kelas “et_pb_button” ke tautan Anda. Kelas akan menerapkan CSS yang sudah ada di dalam Divi. Tombol akan mewarisi warna warna tautan tubuh Anda, jadi jika Anda ingin mengubah gaya tombol, Anda perlu menambahkan beberapa gaya sebaris ke tautan Anda atau menambahkan kelas tambahan ke tautan dan menatanya menggunakan CSS.

Berikut adalah contoh tautan unduhan langsung kami dengan kelas "et_pb_button" ditambahkan.

<a href="/files/download-file.pdf" download="newname" target="_blank" class="et_pb_button" >Download Link</a>

Berikut adalah contoh atribut gaya sebaris yang akan mengubah warna tombol menjadi oranye:

<a href="/files/download-file.pdf" download="newname" target="_blank" class="et_pb_button" style="color: #dd9933;">Download Link</a>

Membuat tombol unduh langsung dengan Modul Tombol Divi

Membuat Tombol

Untuk menambahkan fungsionalitas unduhan langsung ke Modul Tombol, Anda harus terlebih dahulu membuat tombol yang menautkan ke file Anda seperti biasanya.

Masukkan Modul Tombol dari dalam Divi Builder.

Di Pengaturan Modul Tombol, perbarui pengaturan berikut:

Tambahkan URL Tombol (Ini harus menjadi url lengkap ke file untuk diunduh)
Url Opens : Di Tab Baru (ini penting sebagai fallback)
Tambahkan Teks Tombol

Di bawah Custom CSS, tambahkan Kelas CSS yang disebut "et-download-button". Kelas ini akan digunakan untuk menargetkan tombol dengan jQuery dan menambahkan atribut unduhan.

Simpan & Keluar

Lihat tombol baru Anda.

Saat ini, tombol hanya akan membuka file di jendela baru. Untuk menambahkan atribut unduhan ke tautan tombol, kita perlu menambahkan beberapa jQuery.

Menambahkan jQuery

Untuk menambahkan atribut unduhan ke modul tombol, kita dapat menambahkan beberapa jQuery untuk memasukkan atribut unduhan ke tautan Modul Tombol dengan kelas tertentu. Untuk contoh ini, kita akan menambahkan atribut unduhan ke Modul Tombol dengan kelas CSS “et_download-button” (kelas yang sama yang kita tambahkan sebelumnya ke Modul Tombol).

Untuk menambahkan jQuery, buka Divi → Opsi Tema. Di bawah tab Integrasi, masukkan kode berikut ke kotak teks “tambahkan kode ke kepala blog Anda”:

<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.et-download-button');
   
  downloadButton.each(function(index) {
    jQuery(this).attr('download', '');
  });
});
</script>

Kode ini akan menambahkan atribut unduhan ke tautan apa pun yang dibuat oleh modul tombol dengan kelas “et_download_button”. Namun, kode ini tidak menambahkan nilai nama file baru ke atribut unduhan yang menggantikan nama file asli. Saya meninggalkannya sehingga Anda dapat menambahkan kelas "et_download_button" ke Modul Tombol mendatang tanpa harus memberikan nama file baru yang sama untuk setiap file unduhan.

Jika Anda ingin menambahkan nilai nama file baru ke modul tombol Anda, Anda dapat menambahkannya ke kode jQuery. Misalnya, jika saya ingin modul tombol saya mengganti nama file unduhan saya sebagai "file gambar", saya akan menggunakan cuplikan jQuery ini sebagai gantinya:

<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.et-download-button');
  
  downloadButton.each(function(index) {
    jQuery(this).attr('download', 'image-file');
  });
});
</script>

Sekarang ketika tombol diklik, file yang diunduh (terlepas dari nama aslinya) akan diberi nama "file gambar". Dan seperti yang saya sebutkan sebelumnya, browser akan secara otomatis mendeteksi dan menambahkan ekstensi file.

Itu dia. Sekarang Anda dapat menambahkan fungsionalitas unduhan langsung ke salah satu tombol Anda menggunakan Modul Tombol.

Dukungan Peramban Saat Ini

Pada saat menulis posting ini, Atribut Unduhan tidak didukung oleh Safari (iOS dan OXS), Opera Mini atau Internet Explorer. Lihat dukungan browser terbaru ini untuk atribut unduhan.

Firefox hanya mendukung tautan unduhan asal yang sama untuk alasan keamanan, yang pada dasarnya berarti Anda tidak dapat mengarahkan tautan unduhan dengan nama domain yang berbeda atau tautan yang dihosting di server yang berbeda.

The Fallback

Karena atribut unduhan tidak memiliki dukungan browser yang luas, saya sarankan untuk menerapkan opsi mundur untuk browser lain. Hal hebat tentang Atribut Unduhan adalah tautannya akan tetap berfungsi di browser yang tidak mendukungnya. Itu masih akan menautkan ke file seperti biasa. Itulah mengapa saya menyarankan untuk menggunakan “target=_blank” (atribut yang membuka tautan Anda di jendela atau tab baru) di dalam struktur tautan Anda. Dengan begitu jika browser tidak mendukung Download Attribute maka file akan terbuka di tab lain.

Menggunakan File Terkompresi

Jika Anda menentang Atribut Unduhan sama sekali karena dukungan browser yang tidak konsisten, Anda dapat mencoba mengompresi file unduhan Anda menjadi file zip yang biasanya memaksa pengunjung untuk mengunduh file alih-alih melihatnya.

Unduh Popup

Bergantung pada browser Anda, tautan unduhan langsung Anda dapat memicu munculan unduhan yang menanyakan sesuatu di sepanjang baris "Apa yang ingin Anda lakukan dengan file ini?". Ini tidak berarti tautan tidak berfungsi. Pemberitahuan diperlukan untuk alasan keamanan. Berikut adalah contoh popup unduhan saat mengklik tautan unduhan langsung dari file pdf:

Pikiran Akhir

Saya sadar bahwa ada solusi yang lebih tradisional dan rumit untuk memaksa unduhan. Saya telah memutuskan untuk membuatnya tetap sederhana dan menawarkan solusi tanpa repot dengan solusi php atau js yang lebih canggih.

Menambahkan Atribut Unduhan ke tautan semudah menambahkan “unduh” ke tag < a >. Dan nilai opsional dapat mengatur nama file menjadi apa pun yang Anda inginkan.

Plus, dengan sedikit jQuery, menambahkan fungsionalitas ke Modul Tombol Divi semudah menambahkan kelas khusus ke modul.

Meskipun Download Attribute belum sepenuhnya didukung oleh semua browser, namun tetap merupakan solusi yang sederhana dan praktis. Karena atribut diabaikan oleh browser yang tidak didukung, tautan akan tetap berfungsi dan terbuka di jendela browser Anda.

Semoga ini akan menjadi sumber yang berguna untuk klien berikutnya yang meminta tautan unduhan langsung.

Saya berharap untuk mendengar dari Anda di komentar.