Jak utworzyć przycisk bezpośredniego pobierania (pojedynczym kliknięciem) w Divi za pomocą atrybutu pobierania

Bezpośrednie łącze pobierania to łącze, które rozpoczyna pobieranie pliku po kliknięciu, zamiast linkowania do niego w oknie przeglądarki. Utworzenie bezpośredniego łącza lub przycisku pobierania zwykle wymaga dodania zaawansowanego PHP po stronie serwera, zmodyfikowania pliku .htaccess i/lub JavaScript. Jeśli nie wiesz, co robisz, może to stwarzać pewne zagrożenia bezpieczeństwa.

HTML5 niedawno wprowadził Download Attribute jako uproszczone rozwiązanie do bezpośredniego pobierania. Atrybut ma na celu osiągnięcie dwóch głównych rzeczy: 1) atrybut określa, że ​​docelowy link zostanie pobrany po kliknięciu oraz 2) wartość atrybutu będzie służyć jako nazwa pobranego pliku.

Ta funkcja jest przydatna, gdy sytuacja wymaga przechowywania pliku do późniejszego przeglądania. Możesz utworzyć plik do pobrania dla oferty e-booka, zakupionego pliku multimedialnego lub po prostu obrazu w wysokiej rozdzielczości.

Dzisiaj pokażę, jak dodać atrybut pobierania do linku lub przycisku, który umożliwi pobranie pliku bezpośrednio na komputer użytkownika.

Ręczne tworzenie przycisku bezpośredniego pobierania

Dodawanie atrybutu pobierania

Struktura linku z atrybutem download jest dość prosta. Po prostu dodaj „pobierz” wewnątrz początkowego tagu < a > wraz z atrybutem „href” zawierającym adres URL do pliku.

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

Dodawanie wartości atrybutu pobierania (lub nazwy pliku)

Atrybut pobierania umożliwia również wyznaczenie nazwy pliku innej niż oryginalna nazwa pliku. Po prostu dodaj nową nazwę jako wartość atrybutu pobierania:

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

W powyższym przykładzie, gdy użytkownik kliknie, aby pobrać łącze, plik zostanie zapisany na jego komputerze pod nazwą „nowa nazwa” zamiast oryginalnej nazwy pliku „pobierz-plik.pdf”. Jest to przydatne, gdy masz plik z długą nazwą lub ciągiem znaków. Nowa wartość nazwy pliku zapewni prostą i przyjazną dla użytkownika nazwę pliku.do użycia zamiast bardziej mylącej nazwy pliku. Ponadto w większości przypadków nie ma potrzeby dodawania rozszerzenia pliku (np. .pdf) do nowej nazwy pliku. filename, ponieważ przeglądarka automatycznie doda rozszerzenie do pliku.

Dodanie awaryjnego atrybutu docelowego

Ponieważ atrybut pobierania nadal nie jest obsługiwany przez wszystkie przeglądarki, dobrym pomysłem jest dodanie atrybutu target="_blank" do linku. Spowoduje to otwarcie linku w innej przeglądarce. Jest to zawsze dobra praktyka przy łączeniu do pliku. W ten sposób, jeśli przeglądarka nie obsługuje atrybutu pobierania, po prostu otworzy plik w nowym oknie, tak jak bez atrybutu pobierania. Dodatkowo, jeśli przeglądarka obsługuje atrybut pobierania, pobierze obraz bez otwierania nowego okna. Więc to jest dobra opcja awaryjna.

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

Przekształcenie łącza w przycisk Divi

Szybkim sposobem na przekształcenie linku w przycisk Divi jest dodanie do linku klasy „et_pb_button”. Klasa zastosuje CSS już wbudowany w Divi. Przycisk odziedziczy kolor Twojego linku w treści, więc jeśli chcesz zmienić styl przycisku, musisz dodać do linku pewną stylizację lub dodać dodatkową klasę do linku i nadać mu styl za pomocą CSS.

Oto przykład naszego bezpośredniego łącza pobierania z dodaną klasą „et_pb_button”.

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

Oto przykład atrybutu stylu wbudowanego, który zmieni kolor przycisku na pomarańczowy:

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

Tworzenie bezpośredniego przycisku pobierania za pomocą modułu przycisków Divi

Tworzenie przycisku

Aby dodać funkcję bezpośredniego pobierania do modułu przycisku, musisz najpierw utworzyć przycisk, który łączy się z twoim plikiem, tak jak zwykle.

Wstaw moduł przycisku z poziomu Divi Builder.

W Ustawieniach modułu przycisków zaktualizuj następujące ustawienia:

Dodaj adres URL przycisku (powinien to być pełny adres URL pliku do pobrania)
URL otwiera się : na nowej karcie (jest to ważne jako rozwiązanie awaryjne)
Dodaj tekst przycisku

W obszarze Niestandardowy CSS dodaj klasę CSS o nazwie „et-download-button”. Ta klasa będzie używana do kierowania przycisku za pomocą jQuery i dodania atrybutu download.

Wyjście bezpieczeństwa

Sprawdź swój nowy przycisk.

Obecnie przycisk otworzy plik tylko w nowym oknie. Aby dodać atrybut download do linku przycisku, musimy dodać trochę jQuery.

Dodawanie jQuery

Aby dodać atrybut download do modułu przycisku, możemy dodać trochę jQuery, aby wstawić atrybut download do linku modułu przycisku z określoną klasą. W tym przykładzie dodamy atrybut download do modułu przycisku z klasą CSS „et_download-button” (ta sama klasa, którą dodaliśmy wcześniej do modułu przycisku).

Aby dodać jQuery, przejdź do Divi → Opcje motywu. Na karcie Integracja wstaw następujący kod w polu tekstowym „dodaj kod do nagłówka bloga”:

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

Ten kod doda atrybut pobierania do dowolnego linku utworzonego przez moduł przycisku z klasą „et_download_button”. Jednak ten kod nie dodaje nowej wartości nazwy pliku do atrybutu pobierania, który zastępuje oryginalną nazwę pliku. Pominąłem to, aby można było dodać klasę „et_download_button” do przyszłych modułów przycisków bez nadawania tej samej nowej nazwy każdemu plikowi do pobrania.

Jeśli chcesz dodać nową wartość nazwy pliku do modułu przycisku, możesz dodać ją do kodu jQuery. Na przykład, jeśli chcę, aby mój moduł przycisku zmienił nazwę mojego pliku do pobrania na „plik obrazu”, zamiast tego użyłbym tego fragmentu kodu jQuery:

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

Teraz po kliknięciu przycisku pobrany plik (bez względu na oryginalną nazwę) otrzyma nazwę „plik obrazu”. I jak wspomniałem wcześniej, przeglądarka automatycznie wykryje i doda rozszerzenie pliku.

Otóż ​​to. Teraz możesz dodać funkcję bezpośredniego pobierania do dowolnego przycisku za pomocą modułu przycisku.

Bieżąca obsługa przeglądarek

W chwili pisania tego posta atrybut pobierania nie jest obsługiwany przez Safari (iOS i OXS), Opera Mini ani Internet Explorer. Sprawdź tę aktualną obsługę przeglądarki dla atrybutu pobierania.

Firefox obsługuje tylko linki do pobierania tego samego pochodzenia ze względów bezpieczeństwa, co w zasadzie oznacza, że ​​nie możesz kierować linków do pobierania z inną nazwą domeny lub linków hostowanych na różnych serwerach.

Powroty

Ponieważ atrybut pobierania nie obsługuje szerokiej przeglądarki, sugeruję zaimplementowanie opcji awaryjnej dla innych przeglądarek. Wspaniałą rzeczą w Atrybucie pobierania jest to, że łącze będzie nadal działać w przeglądarkach, które go nie obsługują. Nadal będzie linkował do pliku jak zwykle. Dlatego sugerowałbym użycie „target=_blank” (atrybutu, który otwiera Twój link w nowym oknie lub karcie) w strukturze linków. W ten sposób, jeśli przeglądarka nie obsługuje atrybutu pobierania, otworzy plik w innej karcie.

Korzystanie z plików skompresowanych

Jeśli całkowicie sprzeciwiasz się Atrybutowi pobierania ze względu na niespójną obsługę przeglądarki, możesz spróbować skompresować pobrany plik do pliku zip, który zwykle zmusza odwiedzających do pobrania pliku zamiast jego przeglądania.

Pobierz wyskakujące okienka

W zależności od przeglądarki, Twój bezpośredni link do pobrania może wywołać wyskakujące okienko pobierania, które pyta o coś w stylu „Co chcesz zrobić z tym plikiem?”. Nie oznacza to, że link nie działa. Powiadomienie jest konieczne ze względów bezpieczeństwa. Oto przykład wyskakującego okienka pobierania po kliknięciu bezpośredniego łącza pobierania pliku pdf:

Końcowe przemyślenia

Zdaję sobie sprawę, że istnieją bardziej tradycyjne i skomplikowane rozwiązania wymuszania pobierania. Postanowiłem zachować prostotę i zaoferować rozwiązanie bez kłopotów z bardziej zaawansowanymi rozwiązaniami php lub js.

Dodanie atrybutu pobierania do łącza jest tak proste, jak dodanie „pobierz” do tagu < a >. A opcjonalna wartość może ustawić nazwę pliku na dowolną.

Dodatkowo, przy odrobinie jQuery, dodanie funkcjonalności do modułu Divi Button jest tak proste, jak dodanie niestandardowej klasy do modułu.

Chociaż Download Attribute nie jest jeszcze w pełni obsługiwany przez wszystkie przeglądarki, nadal jest to proste i praktyczne rozwiązanie. Ponieważ atrybut jest ignorowany przez nieobsługiwane przeglądarki, łącze będzie nadal działać i otwierać się w oknie przeglądarki.

Mam nadzieję, że będzie to przydatne źródło dla następnego klienta, który poprosi o bezpośredni link do pobrania.

Czekam na kontakt z Państwem w komentarzach.