İndirme Özelliğini Kullanarak Divi'de Doğrudan (Tek Tıklama) İndirme Düğmesi Nasıl Oluşturulur

Doğrudan indirme bağlantısı, dosyayı tarayıcı pencerenizde bağlamak yerine tıkladığınızda indirmeye başlayan bir bağlantıdır. Doğrudan indirme bağlantısı veya düğmesi oluşturmak genellikle sunucu tarafında gelişmiş PHP eklemeyi, .htaccess dosyasını ve/veya javascript'i değiştirmeyi gerektirir. Ne yaptığınızı bilmiyorsanız, bu bazı güvenlik riskleri oluşturabilir.

HTML5 kısa süre önce İndirme Özelliğini doğrudan indirmeler için daha basitleştirilmiş bir çözüm olarak tanıttı. Öznitelik iki ana şeyi gerçekleştirmeyi amaçlar: 1) öznitelik, hedef bağlantının tıklandığında indirileceğini belirtir ve 2) özniteliğin değeri, indirilen dosyanın adı olarak işlev görür.

Bu özellik, durum dosyayı daha sonra görüntülemek üzere saklamayı gerektirdiğinde kullanışlıdır. Bir e-Kitap teklifi, satın alınan bir medya dosyası veya yalnızca yüksek çözünürlüklü bir görüntü için indirme oluşturmak isteyebilirsiniz.

Bugün size, bir dosyanın doğrudan kullanıcının bilgisayarına indirilmesine izin verecek bir bağlantıya veya düğmeye nasıl indirme özelliği ekleneceğini göstereceğim.

Manuel Olarak Doğrudan İndirme Düğmesi Oluşturma

İndirme Özelliğini Ekleme

İndirme özelliğine sahip bir bağlantının yapısı oldukça basittir. Dosyanızın url'sini içeren "href" özelliğinizle birlikte başlangıç ​​<a > etiketinin içine "indir" ifadesini eklemeniz yeterlidir.

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

İndirme Özelliği Değerini (veya Dosya Adını) Ekleme

İndirme özelliği, orijinal dosya adından farklı bir dosya adı belirlemenize de olanak tanır. İndirme özniteliğinin değeri olarak yeni adı eklemeniz yeterlidir:

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

Yukarıdaki örnekte, bir kullanıcı bağlantıyı indirmek için tıkladığında, dosya bilgisayarında orijinal dosya adı "download-file.pdf" yerine "yeniad" adıyla depolanacaktır. Bu, uzun bir ada veya karakter dizisine sahip bir dosyanız olduğunda kullanışlıdır. Yeni dosya adı değeri, daha kafa karıştırıcı dosya adı yerine kullanılacak basit ve kullanıcı dostu bir dosya adı sağlayacaktır. Ayrıca, çoğu durumda dosya uzantısını (yani. .pdf) yeni dosyaya eklemeye gerek yoktur. dosya adı, tarayıcı uzantıyı otomatik olarak dosyaya ekleyeceğinden.

Hedef öznitelik yedeğini ekleme

İndirme özniteliği hala tüm tarayıcılar tarafından desteklenmediğinden, bağlantınıza target=”_blank” özniteliğini eklemek iyi bir fikirdir. Bu, bağlantıyı başka bir tarayıcıda açacaktır. Bir dosyaya bağlanırken bu her zaman iyi bir uygulamadır. Bu şekilde, tarayıcı indirme özniteliğini desteklemiyorsa, dosyayı indirme özniteliği olmadan yaptığı gibi yeni bir pencerede açacaktır. Ayrıca, tarayıcı indirme özelliğini destekliyorsa, yeni bir pencere açmadan görüntüyü indirecektir. Dolayısıyla bu iyi bir geri dönüş seçeneğidir.

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

Bağlantınızı Divi Düğmesine Dönüştürme

Bağlantınızı Divi düğmesine dönüştürmenin hızlı bir yolu, bağlantınıza “et_pb_button” sınıfını eklemektir. Sınıf, Divi'de yerleşik olarak bulunan CSS'yi uygulayacaktır. Düğme, gövde bağlantı renginizin rengini devralır, bu nedenle düğmenin stilini değiştirmek istiyorsanız, bağlantınıza bazı satır içi stil eklemeniz veya bağlantıya ek bir sınıf eklemeniz ve CSS kullanarak stil eklemeniz gerekir.

İşte “et_pb_button” sınıfının eklendiği doğrudan indirme bağlantımızın bir örneği.

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

Düğmenin rengini turuncuya çevirecek satır içi stil özniteliğine bir örnek:

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

Divi'nin Düğme Modülü ile doğrudan indirme düğmesi oluşturma

Düğmeyi Oluşturma

Bir Düğme Modülüne doğrudan indirme işlevini eklemek için, önce normalde yaptığınız gibi dosyanıza bağlanan bir düğme oluşturmalısınız.

Divi Builder içinden bir Düğme Modülü yerleştirin.

Düğme Modülü Ayarlarında aşağıdaki ayarları güncelleyin:

Düğme URL'sini Ekle (Bu, indirilecek dosyanın tam URL'si olmalıdır)
Url Açılır : Yeni Sekmede (bu bir geri dönüş olarak önemlidir)
Düğme Metni Ekle

Özel CSS altında, "et-download-button" adlı bir CSS Sınıfı ekleyin. Bu sınıf, düğmeyi jQuery ile hedeflemek ve indirme özniteliğini eklemek için kullanılacaktır.

Kaydet çık

Yeni düğmenizi kontrol edin.

Şu anda, düğme dosyayı yalnızca yeni bir pencerede açacaktır. Buton bağlantısına download özniteliğini eklemek için biraz jQuery eklememiz gerekiyor.

jQuery'yi ekleme

Button modülüne download özniteliği eklemek için, belirli bir sınıfla Button Module bağlantısına download özniteliğini eklemek için biraz jQuery ekleyebiliriz. Bu örnek için, CSS sınıfı “et_download-button” (Düğme Modülüne daha önce eklediğimiz sınıfın aynısı) ile Button Modülüne download özniteliğini ekleyeceğiz.

jQuery'yi eklemek için Divi → Tema Seçenekleri'ne gidin. Entegrasyon sekmesi altında, "blogunuzun başlığına kod ekleyin" metin kutusuna aşağıdaki kodu ekleyin:

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

Bu kod, "et_download_button" sınıfı ile düğme modülü tarafından oluşturulan herhangi bir bağlantıya indirme özniteliğini ekleyecektir. Ancak bu kod, orijinal dosya adını geçersiz kılan indirme özniteliğine yeni dosya adı değerini eklemez. Her indirme dosyasına aynı yeni dosya adını vermeden gelecekteki Düğme Modüllerine “et_download_button” sınıfını ekleyebilmeniz için bunu dışarıda bıraktım.

Düğme modülünüze yeni dosya adı değerini eklemek istiyorsanız, onu jQuery koduna ekleyebilirsiniz. Örneğin, düğme modülümün indirme dosyamı "image-file" olarak yeniden adlandırmasını istersem, bunun yerine bu jQuery snippet'ini kullanırdım:

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

Şimdi butona tıklandığında, indirilen dosya (orijinal adı ne olursa olsun) “image-file” olarak adlandırılacaktır. Ve daha önce bahsettiğim gibi, tarayıcı dosya uzantısını otomatik olarak algılayacak ve ekleyecektir.

Bu kadar. Artık Düğme Modülünü kullanarak düğmelerinizden herhangi birine doğrudan indirme işlevini ekleyebilirsiniz.

Mevcut Tarayıcı Desteği

Bu gönderiyi yazarken, İndirme Özelliği Safari (iOS ve OXS), Opera Mini veya Internet Explorer tarafından desteklenmemektedir. İndirme özelliği için bu güncel tarayıcı desteğine göz atın.

Firefox, güvenlik nedenleriyle yalnızca aynı kaynaktan indirme bağlantılarını destekler; bu, temel olarak, farklı bir alan adıyla veya farklı sunucularda barındırılan bağlantılarla indirme bağlantılarını yönlendiremeyeceğiniz anlamına gelir.

Geri Dönüşler

İndirme özelliği yaygın tarayıcı desteğine sahip olmadığından, diğer tarayıcılar için bir geri dönüş seçeneği uygulamanızı öneririm. İndirme Özelliği ile ilgili harika olan şey, bağlantının onu desteklemeyen tarayıcılarda çalışmaya devam etmesidir. Yine de normal gibi dosyaya bağlanacaktır. Bu yüzden link yapınızda “target=_blank” (bağlantınızı yeni bir pencerede veya sekmede açan özellik) kullanmanızı öneririm. Bu şekilde, tarayıcı İndirme Özelliğini desteklemiyorsa dosyayı başka bir sekmede açacaktır.

Sıkıştırılmış Dosyaları Kullanma

Tutarsız tarayıcı desteği nedeniyle İndirme Özelliğine tamamen karşıysanız, indirme dosyanızı genellikle ziyaretçiyi dosyayı görüntülemek yerine indirmeye zorlayan bir zip dosyasına sıkıştırmayı deneyebilirsiniz.

Pop-up'ları İndir

Tarayıcınıza bağlı olarak, doğrudan indirme bağlantınız, "Bu dosyayla ne yapmak istiyorsunuz?" satırında bir şey soran bir indirme açılır penceresini tetikleyebilir. Bu, bağlantının çalışmadığı anlamına gelmez. Bildirim güvenlik nedeniyle gereklidir. Bir pdf dosyasının doğrudan indirme bağlantısına tıklandığında açılan indirme penceresinin bir örneği:

Son düşünceler

İndirmeleri zorlamak için daha geleneksel ve karmaşık çözümler olduğunun farkındayım. Bunu basit tutmaya ve daha gelişmiş php veya js çözümlerinin karmaşası olmadan bir çözüm sunmaya karar verdim.

Bir bağlantıya İndirme Özelliği eklemek, <a > etiketine “indirme” eklemek kadar basittir. Ve isteğe bağlı değer, dosya adını istediğiniz gibi ayarlayabilir.

Artı, yerinde küçük bir jQuery ile, Divi Düğme Modülüne işlevsellik eklemek, modüle özel bir sınıf eklemek kadar basittir.

İndirme Özelliği henüz tüm tarayıcılar tarafından tam olarak desteklenmese de, yine de basit ve pratik bir çözümdür. Özellik, desteklenmeyen tarayıcılar tarafından yok sayıldığından, bağlantı çalışmaya devam edecek ve tarayıcı pencerenizde açılacaktır.

Umarım bu, doğrudan indirme bağlantısı isteyen bir sonraki müşteri için yararlı bir kaynak olacaktır.

Yorumlarda sizden haber bekliyorum.