Когда-то давно мне приходилось администрировать сайт, тематика которого предполагала раздачу читателям бланков и шаблонов документов. Их было множество, поскольку сайт был тесно связан с юридической тематикой. Его встроенный функционал не позволял сделать именно эстетически привлекательную кнопку, которая бы не просто перебрасывала на какую-то страницу, а запускала бы процесс скачивания файла. Пришлось разобраться с настройкой дизайна и функции download основательно.
Создать кнопку для скачивания файла плагином
Существует плагин MaxButtons, который обладает такими настройками, что можно URL сделать скачиваемым. В большинстве других плагинов генерации кнопок по заданному адресу можно только направить пользователя, чтобы он перешел на какую-то страницу, но загрузить ничего не получится.
Поэтому из немногочисленных оставшихся пришлось выбрать MaxButtons. Основное преимущество, помимо опции скачивания, состоит в том, что он не генерирует текста авторства рядом со своими творениями, нечто типо Created by MaxButtons. Так вот этой портящего весь внешний вид подписи он не дает.
Интерфейс настроек весьма понянет. В разделе “Текст” пишем текст, который хотим видеть на кнопке. В строке URL вставляем адрес того файла, который читатели будут скачивать. Предварительно файл загружаем в Библиотеку медиафайлов, а затем, кликнув по нему, откроется окно с изображением и URL-адресом. Вот его и копируем, чтобы вставить в кнопку.
Под ним есть бегунок “URL для загрузки”: прокручиваем его вправо, чтобы он стал цветным (окрасился из серого в бирюзовый). Вот мы и создали не просто переход к файлу, а настроили его скачивание при нажатии. Браузер еще раз потом спросит у пользователя, действительно ли он хочет его скачать. Но здесь уже выбор за ним.
Создать кнопку кодом html
Html идеально подходит для сайтов на языке php, коими являются все творения на WordPress. Поэтому рассмотрим, как возможно написать код от руки, чтобы обойтись без плагина. Слишком много плагинов могут мешать исправной работе сайта. То, что доступно для настройки вручную, именно так делать и рекомендуется. Ввести соответствующий блок помогает директива form:
<form>
Здесь будут подробности кода
</form>
Занимательный тег <input type > рассказывает, какого типа содержимое мы хотим в сгенерированный блок поместить. type=”submit” будет для кнопки. Если его не указать, то браузеры поймут его как значение по умолчанию, а по умолчанию оно просто текстовое type=”text”. Но после свежей модернизации для кнопки лучше указывать button, а не submit. Последнее больше подходит для кнопки с отправкой формы. Мы же настраиваем такую, чтобы запускала скачивание файла.
Итак, код будет следующим:
<form>
<input type=”button” value=”button text”
onClick=”window.location.href=’Download Location'”>
</form>
В корне сайта (обычно это папка www) создаем файл download button.html, а в него копируем созданный выше код.
После href= в одиночных кавычках пишем URL файла для скачивания. Но кнопка будет выглядеть профессиональнее, если это картинка, поэтому создайте это изображение в формате .jpg и загрузите на хостинг. Например, обзовите его knopka.jpg с надписью на красивом фоне “Скачать файл”.
Поставьте на нее путь через href=”ghhffd.com/picture123.jpg” И это только ее адрес местонахождения. Еще понадобится сделать ее ссылкой через тег <a> </a>, заать alt и назначить ширину с высотой. Поскольку это все — одна детальная ссылка, указываем сначала ссылочный синтаксис:
<a
/a>
Следующим шагом вписываем ему ‘внутренности’:
<a href=”Download Location”
<img src=”ghhffd.com/picture123.jpg” alt=”Скачать полезный файл” width=”380″ “height=”80″
/a>
Спереди ссылочной массы отметим, что это документ в html:
<html>
<a href=”Download Location”
<img src=”ghhffd.com/picture123.jpg” alt=”Скачать полезный файл” width=”380″ “height=”80″
/a>
</html>
Хотя это примечание может быть излишним, поскольку в WordPress все файлы создаются в Doctype. Они синонимичны. Теперь сделаем последний штрих: фразу Download Location заменяем на реальную ссылку, по которой найдут файл.
<html>
<form>
<input type=”button” value=”button text”
onClick=”window.location.href=’https://moj-sajt.ru/wp-content/uploads/2024/07/wmh6-dqxizc.png'”>
Слова “button text” я заменяю на “Посмотреть и скачать что-то интересное”. А теперь взгляните, как это выглядит на сайте (вот так оно выглядит на салатовом фоне моей темы Вордпресс, т.е. добавляет тонкую серую кнопку):
Если мы хотим внедрить кликабельную картинку-кнопку в текстовом редакторе статьи:
<a href=”https://moj-sajt.ru/wp-content/uploads/2024/07/wmh6-dqxizc.png”
<img src=”https://moj-sajt.ru/wp-content/uploads/2024/07/4ztz7vkp_jr955cptsjfdqjajqxqulxyrfbca-vp-3v3j-6z-6xonyfu3v0zhadjbhsmowsxqgs900-c-k-c0x00ffffff-no-rj.png” alt=”Скачать занимательный файл” width=”380″ “height=”80″
/a>
Правда этот вариант работает не на всех темах-шаблонах Вордпресс. Лучше использовать такой код:
<!DOCTYPE html>
<html>
<body>
<span>Нажать на картинку и открыть файл:
<a href=”https://moj-sajt.ru/wp-content/uploads/2024/07/zapisi.png” target=”_blank”>
<img src=”https://da-ohrane-tryda.ru/wp-content/uploads/2024/07/4ztz7vkp_jr955cptsjfdqjajqxqulxyrfbca-vp-3v3j-6z-6xonyfu3v0zhadjbhsmowsxqgs900-c-k-c0x00ffffff-no-rj.png” />
</a>
</span>
</body>
</html>
target=”_blank” обозначает, что файл будет открываться в новом окне. После img src= указываем УРЛ картинки-конопки, а после href= заполняем путь до файла, который должен открыться или скачаться. Визуально выглядит так:
Моя картинка оказалась слишком большой. Поэтому постарайтесь откорректировать размеры изображения еще до загрузки его в библиотеку медиафайлов.
Задать скачивание через директиву download
В html5 есть директива download, через которую запускается скачивание файла:
<a href=”https://moj-sajt.ru/wp-content/uploads/2024/07/zapisi.png” download=”https://da-ohrane-tryda.ru/wp-content/uploads/2024/07/zapisi.png”>Скачать полезный документ</a>
На сайте выглядеть это будет так:
Отладка внешнего вида кнопки через style.css
В файле стилей style.css важно задать визуальное оформление новоиспеченной кнопки. Это достижимо вставкой туда такого кода:
/* Кнопка стиль */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Более темный фон при наведении курсора мыши */
.btn:hover {
background-color: RoyalBlue;
}
Скажем так: настройки CSS обновляются обычно два дня: около 48 часов. Поэтому сразу эффект будет увидеть сложно. Вдруг ошибка? Тогда откорректировать получится лишь через двое суток. Неудобно, правда?
Настройка вывода кнопки через JS
Чтобы красиво стилизовать кнопку и не маяться с CSS, запустите дизайн кнопки через JS: в текстовом редакторе html вставляем следующий JS-код:
<!– Добавить библиотеку иконок –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<!– Автоматическая ширина –>
<button class=”btn”><i class=”fa fa-download”></i> <button onclick=”location.href=’https://moj-sajt.ru/wp-content/uploads/2024/07/zapisi.png'”>Скачать</button>
<!– Полная ширина –>
<button class=”btn” style=”width:100%”><i class=”fa fa-download”></i> <button onclick=”location.href=’https://moj-sajt.ru/wp-content/uploads/2024/07/zapisi.png'”>Скачать</button>
Так документ будет при нажатии открываться в окне. Но не скачиваться на локальное устройство пользователя. Как сделать, чтобы скачивалось?
<button class=”btn”><i class=”fa fa-download”></i> <button onclick=”location.href=’https://moj-sajt.ru/wp-content/uploads/2024/07/zapisi.png'”>Скачать</button>
И вариант для полной ширины кнопки:
<button class=”btn” style=”width:100%”><i class=”fa fa-download”></i> <button onclick=”triggerDownload(‘https://moj-sajt.ru/wp-content/uploads/2024/07/zapisi.png’)”>Скачать</button>
Последний вариант (через JS) предпочтительнее, потому что если вы установили некую тему-шаблон WordPress, то стилизация кнопки будет совпадать с общим стилем темы. Не придется снова подбирать цвет кнопки, текста, все это отлаживать для достижения гармоничного вида, который бы вписывался в общий дизайн. JS сам выведет нужные значения настроек из основного ШАБЛОНА-ТЕМЫ (там это все заранее предусмотрено).
У меня получилось так:
Что по стилю совпадает с остальными похожими элементами используемой мной темы.
