Как сделать кнопку загрузки на веб-сайте

Обновлено: 21.11.2024

Приложения заполнены кнопками, которые выполняют долгосрочные действия. Например, кнопка может инициировать загрузку, которая запускает процесс загрузки, получает данные с течением времени, а затем предоставляет доступ к загруженному активу. Полезно показывать пользователю ход выполнения длительного процесса, а сама кнопка — хорошее место для предоставления этой обратной связи. В этом рецепте вы создадите кнопку загрузки, которая переходит из нескольких визуальных состояний в зависимости от статуса загрузки приложения.

Следующая анимация показывает поведение приложения:

Определить новый виджет с отслеживанием состояния

Ваш виджет-кнопка должен со временем меняться. Поэтому вам нужно реализовать кнопку с помощью пользовательского виджета без сохранения состояния.

Определите новый виджет без сохранения состояния под названием DownloadButton .

Определить возможные визуальные состояния кнопки

Визуальное представление кнопки загрузки основано на заданном статусе загрузки. Определите возможные состояния загрузки, а затем обновите DownloadButton, чтобы принять DownloadStatus и Duration, указывающее, как долго кнопка должна переходить из одного состояния в другое.

Примечание. Каждый раз, когда вы определяете пользовательский виджет, вы должны решить, будет ли вся необходимая информация предоставляться этому виджету от его родителя или этот виджет управляет поведением приложения внутри себя. Например, DownloadButton может получить текущий DownloadStatus от своего родителя, или DownloadButton может сам организовать процесс загрузки в своем объекте State. Для большинства виджетов лучший ответ — передать соответствующую информацию в виджет от его родителя, а не управлять поведением внутри виджета. Передавая всю необходимую информацию, вы обеспечиваете возможность повторного использования виджета, упрощаете тестирование и упрощаете изменение поведения приложения в будущем.

Отобразить форму кнопки

Кнопка загрузки меняет форму в зависимости от статуса загрузки. Кнопка отображает серый прямоугольник со скругленными углами в состояниях «не загружен» и «загружен». Кнопка отображает прозрачный кружок в состояниях fetchingDownload и downloading.

На основе текущего DownloadStatus создайте AnimatedContainer с ShapeDecoration, который отображает прямоугольник со скругленными углами или круг.

Рассмотрите возможность определения дерева виджетов фигуры в отдельном виджете без сохранения состояния, чтобы основной метод build() оставался простым и допускал последующие добавления. Вместо создания функции для возврата виджета, такой как Widget _buildSomething() <> , всегда предпочтительнее создавать StatelessWidget или StatefulWidget, которые более производительны. Дополнительные соображения по этому поводу можно найти в документации или в специальном видео на канале Flutter на YouTube.

На данный момент дочерний элемент AnimatedContainer — это просто SizedBox, потому что мы вернемся к нему в другом шаге.

Вы можете задаться вопросом, зачем нужен виджет ShapeDecoration для прозрачного круга, если он невидим. Цель невидимого круга — организовать желаемую анимацию. AnimatedContainer начинается со скругленного прямоугольника. Когда DownloadStatus изменяется на fetchingDownload , AnimatedContainer необходимо анимировать из прямоугольника со скругленными углами в круг, а затем исчезать по мере выполнения анимации. Единственный способ реализовать эту анимацию — определить начальную форму прямоугольника со скругленными углами и конечную форму круга. Но вы не хотите, чтобы последний круг был виден, поэтому вы делаете его прозрачным, что вызывает анимированное затухание.

Отобразить текст кнопки

Кнопка DownloadButton отображает GET во время фазы notDownloaded, OPEN во время фазы загрузки и без текста между ними.

Добавьте виджеты для отображения текста на каждом этапе загрузки и анимируйте непрозрачность текста между ними. Добавьте дерево текстовых виджетов в качестве дочернего элемента AnimatedContainer в виджет-оболочку кнопки.

Отображать счетчик во время загрузки

Во время фазы fetchingDownload кнопка DownloadButton отображает круговой счетчик. Этот счетчик появляется из фазы notDownloaded и исчезает в фазе fetchingDownload.

Реализуйте радиальный счетчик, который находится поверх формы кнопки и постепенно появляется и исчезает в нужное время.

Мы удалили конструктор ButtonShapeWidget, чтобы сосредоточиться на его методе сборки и добавленном виджете Stack.

Отображать ход загрузки и кнопку остановки во время загрузки

После фазы fetchingDownload следует фаза скачивания. На этапе загрузки DownloadButton заменяет круговой индикатор прогресса растущим радиальным индикатором выполнения. Кнопка DownloadButton также отображает значок кнопки остановки, чтобы пользователь мог отменить текущую загрузку.

Добавьте свойство хода выполнения в виджет DownloadButton, а затем обновите отображение хода выполнения, чтобы на этапе загрузки он переключался на круговой индикатор хода выполнения.

Далее добавьте значок кнопки остановки в центр радиального индикатора выполнения.

Добавить обратные вызовы касания кнопки

Последняя деталь, которая нужна вашей DownloadButton, — это поведение кнопки. Кнопка должна выполнять определенные действия, когда пользователь ее нажимает.

Добавьте свойства виджета для обратных вызовов, чтобы начать загрузку, отменить загрузку и открыть загрузку.

Наконец, оберните существующее дерево виджетов DownloadButton виджетом GestureDetector и перенаправьте событие касания в соответствующее свойство обратного вызова.

Поздравляем! У вас есть кнопка, которая меняет свое отображение в зависимости от того, в какой фазе находится кнопка: не загружена, загружается, загружается и загружается. Теперь пользователь может нажать, чтобы начать загрузку, нажать, чтобы отменить текущую загрузку, и нажать, чтобы открыть завершенную загрузку.

Интерактивный пример

Нажмите кнопку ПОЛУЧИТЬ, чтобы начать симулированную загрузку.
Кнопка изменится на индикатор выполнения, имитируя текущую загрузку.
Когда симуляция загрузки завершится, кнопка изменится на ОТКРЫТЬ, показывая, что приложение готово для того, чтобы пользователь мог открыть загруженный ресурс.

Если не указано иное, эта работа распространяется под лицензией Creative Commons Attribution 4.0 International License, а образцы кода распространяются под лицензией BSD.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Семантика, присущая элементам HTML, говорит нам, для чего мы должны их использовать. Нужен заголовок? Вам понадобится элемент заголовка. Хотите абзац? Наш верный друг

здесь, верный, как всегда. Хотите скачать? Ну, вам захочется… хм.

Что лучше всего описывает загрузку? Является ли это триггерным действием и, следовательно, должно быть в домене элемента? Или это пункт назначения, и поэтому его лучше всего описать с помощью элемента?

Кнопки нужны, а ссылки нужны

Кажется, существует много путаницы в отношении того, когда использовать кнопки, а когда ссылки. Подобно тому, как вкладки против пробелов или пуловеры с капюшоном против застежек-молний, эти споры могут бушевать без конца.

Однако W3C дает нам важную подсказку, кто прав: атрибут загрузки.

Интернет, каким мы его знаем, не мог бы существовать без ссылок. Они образуют семантическую паутину, ужасно чудесный, чудесно ужасный клубок запутанной информации, который позволяет вам читать эту статью прямо сейчас.

Как и все другие элементы, якорные ссылки можно изменять с помощью глобальных атрибутов HTML. Элементы ссылок привязки также обладают рядом уникальных атрибутов, помогающих управлять их подключением к другим документам и файлам.

Один из этих атрибутов называется загрузкой. Он сообщает браузеру, что пункт назначения ссылки должен быть сохранен на вашем устройстве, а не посещать его. Вы по-прежнему «переходите» к файлу, только вместо его просмотра вы получаете копию для собственного использования.

Любой файл можно загрузить! Сюда входит даже HTML, который обычно отображает браузер. Наличие атрибута фактически является созданным человеком флагом, который говорит браузеру пропустить попытку отобразить что-то, что он извлек, и просто сохранить это вместо этого:

Это поднимает очень важный вопрос: мы не можем знать, почему каждый пользователь посещает наш веб-сайт, но мы можем использовать предоставленные нам инструменты, чтобы помочь им на этом пути. Если это означает сохранение HTML-документа для использования в автономном режиме, мы можем сделать его максимально простым.

Все еще не убеждены? Вот еще пища для размышлений:

Надежное решение всегда желательно — во время кризиса оно может даже спасти жизнь. Это может показаться преувеличением, но наличие стабильной копии того, что работает в автономном режиме, может иметь решающее значение в трудную минуту.

Семантика и специальные возможности

Мой друг Скотт, которому платят за знание таких вещей, говорит нам:

Споры о том, следует ли использовать кнопку или ссылку для загрузки файла, немного глупы, поскольку основная цель ссылки всегда заключалась в загрузке контента. HTML — это файл, и, как и все другие файлы, его необходимо получить с сервера и загрузить, прежде чем он сможет быть представлен пользователю.

Разница между файлом Photoshop, HTML и другими понятными медиаданными файлов, заключается в том, что браузер автоматически отображает последние два. Если бы кто-то связался с файлом Photoshop .psd, браузер инициировал бы изменение документа для отображения файла, что, вероятно, было бы похоже на «лол, что?» а затем просто инициируйте запрос на загрузку ОС.

Похоже, путаница возникает из-за того, что разработчики используют сверхбуквальный смысл фразы «ссылки перемещаются, кнопки выполняют действия». Да, это правда, но ссылки на самом деле никуда не ведут. Они извлекают информацию и загружают ее. Кнопки выполняют действия, но они не «получают» документы.Хотя их можно использовать для получения данных, часто они используются для изменения состояния текущего документа, а не для извлечения и отображения нового. Они могут получать данные в отношении функциональности form s, но они по-прежнему находятся в контексте обновления веб-документа, а не загрузки отдельного файла.

Короче говоря, атрибут загрузки уникален. для привязки ссылок по какой-либо причине. download дополняет встроенную функциональность извлечения данных по ссылке. Он обходит попытку отобразить файл в браузере и вместо этого говорит: «Знаете что? Я просто оставлю это на потом…”

Создание хорошей ссылки для скачивания

Опыт загрузки файла по умолчанию может вызывать раздражение — обычно это не является частью нашего обычного поведения при просмотре. Пользователь должен переключить свою ментальную модель со страницы на страницу и заполнения форм на навигацию по файловой системе и извлечение сжатых архивов. Для менее технически подкованных людей это может дезориентировать и разочаровать смену контекста.

Как ответственные дизайнеры и разработчики, мы хотим сделать работу со ссылкой для скачивания максимально удобной. Поскольку мы не можем изменить то, как работает само поведение браузера при загрузке, мы должны сделать окружающий пользовательский интерфейс максимально прозрачным и оптимизированным.

Расскажите, что есть в магазине

Предоставьте пользователю как можно больше информации, чтобы проинформировать его о том, что должно произойти. Может помочь предвидение и ответы на следующие вопросы:

Глагол плюс существительное — выигрышная комбинация. Опишите, что делает ссылка и что она вам дает:

Сам по себе глагол Загрузить указывает только на то, какое поведение будет запущено при активации ссылки. Включение существительного Шрифты отлично подходит для устранения двусмысленности в отношении того, что вы получите.

В случаях, когда на странице есть несколько ссылок для скачивания, наличие существительного поможет пользователям перемещаться с помощью программы чтения с экрана. Вот как бы это звучало, если бы вы просматривали страницу с восемью ссылками для скачивания без существительных:

Знаете ли вы, какая из этих восьми ссылок дает вам то, что вы хотите? Нет? Это не здорово. Точно так же наличие атрибута загрузки у элемента не будет объявлено программами чтения с экрана, поэтому глагол не менее важен. Важно обеспечить контекст!

Помните, что очевидное всегда побеждает. Несмотря на то, что можно сделать ваши проверки соответствия удовлетворительными, используя визуально скрытый класс CSS, чтобы скрыть существительную часть вашей загрузки, это создает дополнительную когнитивную нагрузку на ваших пользователей. Скрытое существительное также приносит в жертву такие функции, как поиск в браузере на странице.

КБ, МБ, ГБ, ТБ. Мы не говорим о Kobe Beef, Mega Bloks, Ginkgo Biloba или Tuberculosis. Мы говорим о размере загрузки и, следовательно, о том, сколько времени потребуется для ее завершения.

Для больших файлов время ожидания может быть особенно проблематичным. Стандартная загрузка — это вопрос «все или ничего» — прерывания могут испортить их и сделать бесполезными. Хуже того, это может привести к потере ценных данных по тарифному плану со счетчиком данных, что, к сожалению, слишком актуально.

Кроме того, невероятно сложно точно определить чью-либо текущую скорость соединения. Хотя Network Information API выглядит многообещающе, текущая поддержка браузеров не так хороша.

Существует скрытый нюанс, живущий в промежутке между сообщаемой и фактической связью. Высокоскоростное соединение 5G может прерваться, как только кто-то войдет в туннель или дойдет до места в своем доме, где покрытие не очень хорошее. Это даже не начало охвата сложностей, связанных с регулированием скорости, к сожалению, слишком серьезной проблемой.

Чтобы решить эти проблемы, примените небольшую микрокопию:

Ваш пользователь будет знать особенности качества соединения лучше, чем вы когда-либо. Теперь у них есть все необходимое для принятия взвешенного решения с небольшой преднамеренной двусмысленностью, чтобы умерить ожидания.

А как насчет индикаторов выполнения?

Сообщите пользователю, почему его это должно волновать. Устранит ли это разочарование, решив существующую проблему? Увеличит ли это удовольствие, добавив новую функцию? Успокоит ли это, сделав вещи более безопасными? Хотя не каждая загрузка нуждается в «почему?» ответ на вопрос, полезно иметь для полезных нагрузок со сложной или эзотерической целью.

Если я загружаю прошивку маршрутизатора, я могу не понимать (или не интересоваться) тонкостями того, что обновление делает за кулисами. Тем не менее, некоторая информация на высоком уровне о том, почему мне нужно предпринять усилия, будет иметь большое значение.

Инструкции о том, что делать после завершения загрузки, могут оказаться полезными. Опять же, важно знать свою аудиторию.

В нашем примере с маршрутизатором вполне возможно, что менее технически подкованные люди окажутся на странице поддержки продукта. Также весьма вероятно, что они находятся в подавленном эмоциональном состоянии, когда прибывают.После начала загрузки пошаговая информация о том, как установить новую прошивку, а также ссылки на соответствующие ресурсы поддержки могут в значительной степени облегчить негативные чувства.

Это практическое сочувствие. Предвидение потребностей и эмоционального состояния пользователя и заблаговременное предложение решений напрямую влияет на такие вещи, как сокращение дорогостоящих обращений в службу поддержки. Эта экономия означает, что организационные ресурсы можно перераспределить на другие важные дела.

Перейти к коду

Покажите, что все по-другому

Хорошая практика как с точки зрения пользовательского опыта, так и с точки зрения специальных возможностей — проводить различие между внутренними и внешними ссылками. Это означает создание индикатора того, что ссылка не ведет вас в другое место на вашем веб-сайте или веб-приложении. Для ссылок, уходящих за пределы сайта, обычной практикой является использование стрелки, выходящей из рамки. Для загрузок стандартом де-факто является направленная вниз стрелка.

Некоторым может показаться, что наличие атрибута загрузки является излишним применительно к ссылкам, которые браузер уже знает для хранения. Я не согласен.

Атрибут загрузки не только является однозначным семантическим маркером в HTML, но и может служить простым и элегантным элементом стиля. Селекторы атрибутов CSS — код, который позволяет нам создавать стили на основе качеств, которые помогают описывать элементы HTML, — позволяют нам ориентироваться на любую ссылку, которая является загрузкой, и стилизовать ее без необходимости прикреплять специальный класс:

В сочетании с текстом, описывающим загрузку, наличие значка ясно указывает на то, что при активации этой ссылки последует процесс загрузки. Он также обеспечивает дополнительную целевую область, отлично подходящую для сенсорных устройств.

Нацеливание как на наличие атрибута загрузки , так и на расширение файла в конце строки в атрибуте href позволяет нам стать еще более изощренными. Мы можем воспользоваться преимуществом каскада, чтобы настроить согласованную обработку для всех значков, но изменить сам значок для каждого типа файла. Это отлично подходит для ситуаций, когда на одной странице можно загрузить несколько вещей:

Я веду список распространенных типов файлов, если вы ищете отправную точку. Не забудьте включить только те селекторы, которые вам нужны, чтобы не создавать ненужного раздувания вашего рабочего CSS. Если на вашем веб-сайте или в веб-приложении много значков и/или много причудливого управления состоянием, рассмотрите возможность использования вместо этого системы значков SVG. Это повысит производительность — просто не забудьте сделать его доступным!

Назовите полезную нагрузку

Атрибут загрузки может принимать необязательное значение, позволяя автору создать пользовательское, удобное для человека имя для загруженного файла. В этом примере мы меняем название эпизода подкаста на то, что имеет смысл при загрузке на устройство пользователя, сохраняя при этом то, что имеет смысл для производителя подкаста:

Для сложных сайтов этот атрибут позволяет нам создавать загрузки, понятные запрашивающему их человеку, а также использовать такие функции, как CDN и динамически генерируемые файлы. Здесь не так много сложного внутреннего колдовства, просто немного шаблонной логики:

Сохранение внешнего вида и поведения содержимого, похожего на элементы HTML, используемые для его описания, отлично подходит для усиления внешней согласованности. Внешне согласованный контент отлично подходит для обеспечения того, чтобы люди могли и будут использовать ваш веб-сайт или веб-приложение. Использование отлично подходит для вовлечения, а это показатель, который делает бизнес-типы счастливыми.

Мы можем возложить вину за этот семантический дрейф прямо на тенденции. Дизайнеры и разработчики, стремящиеся попробовать новейшие и самые лучшие решения, с распростертыми объятиями приглашают к себе двусмысленность. Лидеры гонятся за воспринимаемой ценностью, чтобы оставаться актуальными.

Так быть не должно. Сайты могут быть красивыми и доступными. Семантика и текущие рамки/эстетика не исключают друг друга. Потратьте немного времени на изучение основ. Возможно, вы обнаружите что-то простое, что поможет каждому получить то, что ему нужно, с меньшими усилиями.

Во многих случаях вы можете захотеть, чтобы ваши посетители загружали файл с вашего веб-сайта: каталог в формате PDF, архив изображений, музыкальный трек, электронную книгу или программное обеспечение. В таких случаях следует использовать объект кнопки загрузки. Проверьте это на этой странице предварительного просмотра.

Хотите узнать, как работает кнопка загрузки? Посмотрите это видео или продолжайте читать:

Как определить стиль кнопки и связать файл для загрузки

Дважды щелкните объект кнопки загрузки, который вы добавили на страницу, чтобы открыть окно настроек.
Нажмите кнопку, чтобы импортировать файл для загрузки: вы можете использовать самые популярные форматы.
Определите Ярлык, который будет связан с кнопкой.
Используйте параметры в разделе Стиль, чтобы определить, как кнопка должна выглядеть в исходном состоянии. Вы можете работать с цветами, толщиной, границами и размером.
Используйте параметры в разделе Эффекты, чтобы определить, как должна выглядеть кнопка при наведении курсора мыши.
Нажмите ОК, когда будете довольны результатом.

Как добавить счетчик загрузок

Вы также можете настроить счетчик загрузок, отображающий число во всплывающем окне, связанном с кнопкой.

В окне Кнопка загрузки используйте параметр Стиль всплывающего окна, чтобы решить, где должно отображаться всплывающее окно. Если выбрать Нет, счетчик отображаться не будет.
Используйте параметры, доступные в разделе Пузырь, чтобы определить его стиль. Вы можете форматировать текст, выбирать цвета элементов и устанавливать размер в пикселях.
Если вы не хотите, чтобы первый номер счетчика был равен 0, задайте другой начальный номер.

4 совета по созданию эффективных кнопок

Кнопки обычно очень важны для веб-страницы. Чтобы сделать их более эффективными, необходимо соблюдать следующие правила:

Тщательно выбирайте CTA (призыв к действию) для подписи к кнопке: он должен быть кратким, прямым и четким, чтобы читатели сразу поняли, что произойдет при нажатии.
Приложите некоторые усилия к графическому стилю: выберите несколько цветов, которые хорошо сочетаются с остальной частью шаблона, но убедитесь, что они создают контраст с фоном.
Используйте анимацию и эффекты: микровзаимодействия помогут посетителю распознать и использовать ваши кнопки.
Попробуйте разные призывы к действию, цвета и эффекты: не забывайте, что самое эффективное решение — это не всегда то, которое вам нравится больше всего.

Хотите ли вы использовать этот объект на страницах своего веб-сайта? Установить кнопку загрузки сейчас

У вас недостаточно кредитов для покупки этого объекта? Ознакомьтесь с нашими пакетами кредитов.

Прямая ссылка для скачивания — это ссылка, по которой файл загружается по щелчку, а не в окне браузера. Создание прямой ссылки или кнопки для загрузки обычно требует добавления расширенного PHP на стороне сервера, изменения файла .htaccess и/или javascript. Если вы не знаете, что делаете, это может представлять некоторую угрозу безопасности.

HTML5 недавно представил атрибут загрузки как более упрощенное решение для прямой загрузки. Атрибут выполняет две основные функции: 1) атрибут указывает, что целевая ссылка будет загружена по клику, и 2) значение атрибута будет служить именем загруженного файла.

Эта функция полезна, когда ситуация требует сохранения файла для последующего просмотра. Вы можете создать загрузку для предложения электронной книги, приобретенного медиафайла или просто изображения высокой четкости.

Сегодня я покажу вам, как добавить атрибут загрузки к ссылке или кнопке, которая позволит загрузить файл непосредственно на компьютер пользователя.

Создание кнопки прямой загрузки вручную

Добавление атрибута загрузки

Структура ссылки с атрибутом загрузки довольно проста. Просто добавьте «скачать» в начальный тег вместе с атрибутом «href», содержащим URL-адрес вашего файла.

Добавление значения атрибута загрузки (или имени файла)

Атрибут загрузки также позволяет указать имя файла, отличное от исходного имени файла. Просто добавьте новое имя в качестве значения атрибута загрузки:

В приведенном выше примере, когда пользователь щелкает ссылку для загрузки, файл будет сохранен на его компьютере с именем «newname» вместо исходного имени файла «download-file.pdf». Это полезно, когда у вас есть файл с длинным именем или строкой символов. Новое значение имени файла обеспечит простое и удобное для пользователя имя файла, которое будет использоваться вместо более запутанного имени файла. Кроме того, в большинстве случаев нет необходимости добавлять расширение файла (например, .pdf) к новому имя файла, так как браузер автоматически добавит расширение к файлу.

Добавление резервного варианта целевого атрибута

Поскольку атрибут загрузки по-прежнему поддерживается не всеми браузерами, рекомендуется добавить к ссылке атрибут target="_blank". Это откроет ссылку в другом браузере. Это всегда хорошая практика при создании ссылки на файл.Таким образом, если браузер не поддерживает атрибут загрузки, он просто откроет файл в новом окне, как и без атрибута загрузки. Кроме того, если браузер поддерживает атрибут загрузки, он загрузит изображение, не открывая новое окно. Так что это хороший запасной вариант.

Превращение ссылки в кнопку Divi

Быстрый способ превратить ссылку в кнопку Divi — добавить к ней класс et_pb_button. Класс применит CSS, уже встроенный в Divi. Кнопка унаследует цвет вашей основной ссылки, поэтому, если вы хотите изменить стиль кнопки, вам нужно будет добавить некоторые встроенные стили к вашей ссылке или добавить дополнительный класс к ссылке и стилизовать ее с помощью CSS.< /p>

Вот пример нашей прямой ссылки для скачивания с добавленным классом «et_pb_button».

Вот пример встроенного атрибута стиля, который изменит цвет кнопки на оранжевый:

Создание кнопки прямой загрузки с помощью модуля кнопок Divi

Создание кнопки

Чтобы добавить функцию прямой загрузки в модуль кнопок, сначала необходимо создать кнопку, которая ссылается на ваш файл, как обычно.

Вставьте модуль кнопки из Divi Builder.

В настройках модуля кнопок обновите следующие настройки:

Добавить URL-адрес кнопки (это должен быть полный URL-адрес файла для загрузки)
URL-адрес открывается: в новой вкладке (это важно в качестве запасного варианта)
Добавить текст кнопки

В разделе «Пользовательский CSS» добавьте класс CSS с именем «et-download-button». Этот класс будет использоваться для таргетинга кнопки с помощью jQuery и добавления атрибута загрузки.

Проверьте новую кнопку.

В настоящее время кнопка открывает файл только в новом окне. Чтобы добавить атрибут загрузки к ссылке кнопки, нам нужно добавить jQuery.

Добавление jQuery

Чтобы добавить атрибут загрузки в модуль кнопки, мы можем добавить jQuery, чтобы вставить атрибут загрузки в ссылку модуля кнопки с определенным классом. В этом примере мы добавим атрибут загрузки в модуль кнопок с помощью класса CSS «et_download-button» (того же класса, который мы добавили ранее в модуль кнопок).

Чтобы добавить jQuery, перейдите в Divi → Параметры темы. На вкладке «Интеграция» вставьте следующий код в текстовое поле «Добавить код в заголовок блога»:

Этот код добавит атрибут загрузки к любой ссылке, созданной модулем кнопки с классом «et_download_button». Однако этот код не добавляет новое значение имени файла к атрибуту загрузки, который переопределяет исходное имя файла. Я исключил его, чтобы вы могли добавить класс «et_download_button» в будущие модули кнопок, не присваивая каждому загружаемому файлу одно и то же новое имя файла.

Если вы хотите добавить новое значение имени файла в модуль кнопки, вы можете добавить его в код jQuery. Например, если я хочу, чтобы мой модуль кнопок переименовал загружаемый файл в «файл изображения», я бы вместо этого использовал этот фрагмент кода jQuery:

Теперь при нажатии кнопки загруженный файл (независимо от его исходного имени) будет называться «файл изображения». И, как я упоминал ранее, браузер автоматически обнаружит и добавит расширение файла.

Вот и все. Теперь вы можете добавить функцию прямой загрузки к любой из ваших кнопок с помощью модуля кнопок.

Текущая поддержка браузера

Из соображений безопасности Firefox поддерживает только ссылки для скачивания того же происхождения, что в основном означает, что вы не можете напрямую ссылаться на скачивание с другим доменным именем или ссылками, размещенными на разных серверах.

Резервы

Поскольку атрибут загрузки не поддерживается широко распространенными браузерами, я предлагаю реализовать резервный вариант для других браузеров. Отличительной особенностью атрибута загрузки является то, что ссылка по-прежнему будет работать в браузерах, которые его не поддерживают. Он по-прежнему будет ссылаться на файл, как обычно. Вот почему я бы предложил использовать «target=_blank» (атрибут, который открывает вашу ссылку в новом окне или вкладке) в вашей структуре ссылок. Таким образом, если браузер не поддерживает атрибут загрузки, он откроет файл на другой вкладке.

Использование сжатых файлов

Если вы вообще против атрибута загрузки из-за непоследовательной поддержки браузера, вы можете попробовать сжать загружаемый файл в zip-файл, который обычно вынуждает посетителя загружать файл, а не просматривать его.

Загрузить всплывающие окна

В зависимости от вашего браузера ваша прямая ссылка для скачивания может вызвать всплывающее окно загрузки, которое спрашивает что-то вроде «Что вы хотите сделать с этим файлом?». Это не значит, что ссылка не работает. Уведомление необходимо из соображений безопасности. Вот пример всплывающего окна загрузки при нажатии на прямую ссылку для скачивания pdf-файла:

Заключительные мысли

Я знаю, что есть более традиционные и сложные решения для принудительной загрузки. Я решил не усложнять и предложить решение без суеты более продвинутых решений php или js.

Добавить атрибут загрузки к ссылке так же просто, как добавить слово «загрузить» к тегу. И необязательное значение может установить имя файла по вашему желанию.

Кроме того, при наличии небольшого количества jQuery добавление функциональности к модулю Divi Button так же просто, как добавление пользовательского класса в модуль.

Хотя атрибут загрузки еще не полностью поддерживается всеми браузерами, это все же простое и практичное решение. Поскольку этот атрибут игнорируется неподдерживаемыми браузерами, ссылка по-прежнему будет работать и открываться в окне вашего браузера.

Надеюсь, это будет полезным ресурсом для следующего клиента, который попросит прямую ссылку для скачивания.

Я с нетерпением жду ваших комментариев.

Джейсон Шампань

Джейсон начал карьеру в сфере образования, а затем стал соучредителем веб-агентства, специализирующегося на веб-сайтах Divi. Сейчас он старший создатель контента в Elegant Themes, где ему нравится публиковать сообщения в блогах, учебные пособия и документацию обо всем, что связано с Divi и WordPress.

Читайте также: