Створення кнопки «СКАЧАТИ» для сайту WordPress

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

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

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

Читайте також: Як намалювати кнопку в CorelDRAW

Відкриваємо Paint. Малюємо прямокутник довільного кольору (в нашому випадку – зелений). Розмір прямокутника повинен відповідати приблизним розмірам нашої кнопки.

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

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

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

Завантажуємо зображення кнопки на сторінку.

Вибираємо редагування «Текст»

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

Вставляємо html код на сторінку:

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

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

Код ссылки

Примітка: Не видаляйте лапки – міняйте тільки текст.

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

Таким чином ви можете вставити різні файли – Зображення, Документи Microsoft Word, PDF тощо.

4 листопада 2017 року
www.merkator.org.ua

Leave a Reply

Your email address will not be published. Required fields are marked *

eleven + 13 =