Создание кнопки «СКАЧАТЬ» для сайта WordPress

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

Для создания кнопки мы используем очень простой html код и стандартную программу Paint. Принцип очень простой: создадим изображение кнопки и вставим его в html код; вставим ссылку на файл, который надо скачать.

Для создания изображения кнопки можно использовать другие редакторы графики – CorelDRAW, Photoshop т. д. Наша задача – показать сам принцып.

Читайте также: Как нарисовать кнопку в CorelDRAW

Открываем Paint. Рисуем прямоугольник произвольного цвета (в нашем случае — зеленый). Размер прямоугольника должен соответствовать приблизительным размерам нашей кнопки.

Прямоугольник зеленого цвета

Закрашиваем прямоугольник тем же цветом, что и его края. Вводим текст – «СКАЧАТЬ». Размещаем его приблизительно в центре кнопки. Уменьшаем поле документа к размерам кнопки. Сохраняем файл.

Готовая кнопка

Загружаем изображение кнопки на страницу.

Выбираем редактирование «Текст»

Редактирование "Текст"

Вставляем html код на страницу:

<a href="файл для скачивания" download>скачать файл</a>

Выделенный красным текст кода переменный: на месте файл для скачивания вставляем ссылку на свой файл, который должен быть скачан; на месте скачать файл вставляем не просто ссылку, а код ссылки на изображение кнопки, которую мы создали и загрузили на сайт. Код ссылки – это отображение изображения в редакторе «Текст» в текстовом виде.

Код ссылки

Примечание: Не удаляйте кавычки – меняйте только текст.

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

Таким образом вы можете вставить разные файлы – Изображения, Документы Microsoft Word, PDF и тд.

2 ноября 2017 года
www.merkator.org.ua

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

10 − 4 =