Як зробити посилання клікабельним

Онлайн-посилання закладають основу для простої інтерактивності в Інтернеті, будь то надсилання користувачів на веб-сторінки, документи, що завантажуються, або інші програми.

Що чудово, так це те, що ви можете створювати інтерактивні посилання у багатьох додатках, у тому числі в системах керування контентом, конструкторах веб-сайтів, текстових процесорах та поштових клієнтах.

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

Основи гіперпосилань

Існують різні терміни для частини контенту, наприклад, тексту або зображення, які пропонують клікабельність або інтерактивну опцію, що дозволяє навести курсор на контент і перейти в інше місце.

Деякі з цих термінів включають:

• Зв'язок
• Гіперпосилання
• Клікабельне посилання

Здатність користувача взаємодіяти з контентом в Інтернеті залежить від цих гіперпосилань, де користувачі можуть прокручувати фрагмент тексту, зображення або кнопку та натискати на неї, тим самим перенаправляючи їх до іншого фрагменту контенту (наприклад, зовнішньої веб-сторінки) або виконати дію (наприклад, зателефонувати за номером телефону із смартфона).

Проста версія гіперпосилання в HTML-коді виглядає так:

<a href="https://example.com/">the hyperlink text</a>

Але все стає складніше, якщо враховувати необов'язкові елементи, такі як цілі та елементи nofollow:

 <a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>

Важливо: Щоб зробити інтерактивне посилання, потрібно замінити "https://example.com/" та "текст гіперпосилання" з наведеного вище прикладу власною інформацією.

Ось елементи, з яких складається гіперпосилання:

1. Контент
2. URL-адреса або постійне посилання
3. Мета
4. Nofollow, noreferrer і noopener

Контент

Ви можете створювати інтерактивні посилання з двома типами контенту:

1. Текст
2. Графіка

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

Текст із гіперпосиланням

Текст є одним із варіантів вмісту під час створення інтерактивних посилань.

Якщо ви використовуєте такий редактор, як WordPress, ви можете виділити будь-який текст на екрані редактора, а потім натиснути кнопку "Посилання".

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

Текстове гіперпосилання іноді змінюється, коли користувач наводить на неї покажчик миші, змінюючи колір або приховуючи підкреслення. Це свідчить про те, що це інтерактивний link.

Крім того, при наведенні вказівника миші на текстове посилання, браузери зазвичай показують попередній перегляд пов'язаної URL-адреси, щоб ви могли побачити, куди він веде.

Зображення з гіперпосиланнями

Багато програм, у тому числі WordPress, дозволяють створювати гіперпосилання з використанням онлайн-медіа, наприклад зображень.

Це працює шляхом вибору зображення на бекенді (замість тексту) та додавання потрібної URL-адреси за допомогою функції Посилання.

Після публікації стандартна стрілка курсора перетворюється на курсор у вигляді руки при наведенні курсору на зображення, і відвідувачі побачать, що браузер представляє попередній перегляд пов'язаної URL-адреси.

Будь то link на зображення або текстовий link, клацання по ній активує дію, наприклад, відправлення користувача на іншу URL-адресу.

Як виглядає код

Текст або зображення в гіперпосиланні представлено як «Текст посилання» у наведеному нижче прикладі:

<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>

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

Link-і на зображення трохи відрізняються, оскільки вони повинні включати URL-адресу зображення (найкраще, якщо вона завантажена в базу даних мультимедіа вашого веб-сайту).

Ця URL-адреса медіа знаходиться між лапками в розділі img src="" .

Є й інші елементи, які можна додати з link-ами на зображення, наприклад:

• Тег alt ( alt = "" ): текст, що описує зображення для пошукових роботів і людей з вадами зору.
• Клас ( class="" ): закодоване ім'я для використання зображення в іншому місці вашого коду або файлів веб-сайту.

URL-адресу

Як частина гіперпосилання, URL-адреса є місцем призначення або дією, яка відбувається, коли хтось клацає посилання.

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

Інший варіант — показати карту, яка відкриває користувальницьку картографічну програму на телефоні.

Як виглядає код

URL-адреси інтерактивних посилань розміщуються між лапками в частині <a href="" гіперпосилання.

Наприклад, частина https://www.example.com наступного коду гіперпосилання є URL-адресою:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 

Деякі URL-адреси ведуть до завантажених документів, а інші вимагають спеціального кодування. Наприклад, URL «клацніть, щоб зателефонувати» вимагає, щоб ви помістили кількість: та номер телефону в лапки href="".

Цільове вікно

Цільове вікно є необов'язковим елементом гіперпосилання. Воно вказує, чи відкривається вміст у вкладці браузера або в новій вкладці браузера.

У WordPress та багатьох інших програмах можна додати цільове вікно за допомогою візуального редактора не торкаючись коду.

Просто вимкніть перемикач "Відкрити в новій вкладці", якщо хочете, щоб URL відкривався в тій же вкладці, яку зараз переглядає користувач.

Крім того, можна активувати перемикач "Відкрити в новій вкладці", який автоматично додає атрибут _blank до кодування гіперпосилання та відкриває URL-адресу у новій вкладці при натисканні.

Як виглядає код

Ці параметри запускаються при додаванні та редагуванні елемента target="" у гіперпосиланні.

Хоча цільовий атрибут має кілька значень, таких як _blank , _батько , _ себе и _top , ми зазвичай використовуємо тільки значення _blank.

Гіперпосилання без мети _blank виглядає так:
Ви помітите, що це не відрізняється від звичайного гіперпосилання. Це пов'язано з тим, що гіперпосилання за замовчуванням не відкриваються у новій вкладці. Таким чином, не потрібно нічого робити з URL, якщо не хочете, щоб вона відкривалася в окремій вкладці браузера.

Гіперпосилання з метою _blank, яке викликає відкриття URL-адреси в окремій вкладці, виглядає приблизно так:

<a href="https://www.example.com" target="_blank">View the entire menu.</a>

Атрибути nofollow, noreferrer і noopener

Ви також можете додати додаткові елементи до інтерактивних URL-адрес, більшість з яких забезпечують безпеку або маскування від пошукових систем:

• nofollow: атрибут, який блокує перехід SEO link juice на пов'язаний веб-сайт. Це допомагає захистити ваш сайт і може приховати URL-адресу від пошукових систем.
• noopener: це HTML-атрибут, який автоматично додається до URL-адрес WordPress з позначкою "Відкрити в новій вкладці". Він працює в парі з noreferrer, щоб звести до мінімуму певні проблеми безпеки під час відкриття посилань у нових вкладках.
• noreferrer: часто у поєднанні з noopener атрибут noreferrer блокує передачу всієї реферальної інформації на цільовий сайт, додаючи додаткову безпеку та потенційно блокуючи дані з сайтів відстеження та партнерських сайтів.

Ви не можете визначити жоден з цих атрибутів посилання, глянувши на link на сайті, що діє. Ви повинні використовувати HTML-код.

Як виглядає код

Всі ці атрибути посилання полягають у лапки в частині rel="" клікабельного link-а.

Можна включити їх у один link.

В якості альтернативи можна побачити, що деякі гіперпосилання включають лише атрибут noreferrer noopener або атрибут Nofollow без двох інших. Все залежить від того, чого хочете досягти.

Причини створення клікабельних посилань

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

Основні причини, з яких можете зробити URL клікабельним:

1. Загальні внутрішні/зовнішні посилання на URL-адреси: можна створювати текстові посилання, які виводять із вашого веб-сайту (наприклад, для цитування джерел або підкріплення аргументу стороннім дослідженням) або на інші сторінки вашого сайту (особливо корисно для відправки читачів на релевантний контент та збереження його на вашому сайті більш тривалий час).
2. Зв'язування зображень: можна додавати гіперпосилання на URL-адреси, медіафайли або сторінки вкладень до будь-якого зображення WordPress і багатьох інших конструкторах веб-сайтів.
3. Кнопки посилань: кнопки CSS пропонують варіанти додавання гіперпосилань, додаючи більш привабливий візуальний досвід до клікабельного link-ку порівняно зі звичайним текстом.
4. Телефонні номери. Гіперпосилання, які ведуть до номерів телефонів, часто звані функцією «Натисніть і дзвони», відкривають програми з можливостями виклику, такі як фактична програма для телефону на вашому пристрої або Skype.
5. Адреса: Гіперпосилання на певні координати Google або Apple Maps означає, що користувач, який клацне URL, автоматично помістить цю інформацію у свою програму GPS/картки для навігації.
6. Адреси електронної пошти: це схоже на посилання «натисни та зателефонуй», але з адресами електронної пошти. Він запускає програму електронної пошти на телефоні або комп'ютері разом із новою композицією електронної пошти з певною адресою електронної пошти, доданою в поле « Кому».
7. Щоб створити якірні посилання: можете посилатися на контент на тій самій сторінці, використовуючи якірні linkи; вони дуже популярні для створення змісту на початку довгого посту у блозі. Їх іноді називають «гіперпосиланнями закладок».
8. Щоб запропонувати завантажений файл: WordPress та інші конструктори веб-сайтів пропонують інструменти для завантаження файлів SVG, PDF, HTML та багато іншого. Після цього можна створювати гіперпосилання в записах/сторінках, щоб користувачі могли завантажувати файли безпосередньо на пристрої.

Ми розглянули типи гіперпосилань та причини, через які вони створюються. Нижче дізнаєтеся про те, як це зробити.

Як зробити посилання клікабельним

Метод, який оберете, залежить від вашого досвіду. Можна вибрати простіший візуальний метод або розглянути можливість використання HTML-коду.

Існує чотири основні способи:

1. Використання класичного редактора WordPress.
2. Використання редактора блоків WordPress (Gutenberg).
3. Використання HTML.
4. Використання будь-якого графічного інтерфейсу (GUI).

Майте на увазі, що всі ці методи працюють однаково для постів та сторінок WordPress. Ці посібники (особливо Метод 4) корисні і для інших розробників додатків/сайтів, але деяка термінологія/функціональність можуть відрізнятися.

Спосіб 1: Використання класичного редактора WordPress

Якщо працюєте з класичним редактором WordPress, найпростіший спосіб зробити клікабельне посилання на публікацію або сторінку через вкладку «Візуальний редактор».

Для цього перейдіть до розділу «Записи»або «Сторінки» на панелі керування WordPress і виберіть окрему сторінку або запис, який потрібно відредагувати, використовуючи вкладку «Візуальні».

Крок 1: виділіть текст, який потрібно зробити клікабельним

Для текстового link найкраще мати текст, набраний в візуальному редакторі. Після цього скористайтеся курсором, щоб виділити рядок тексту.
Якщо перетворюєте зображення на клікабельний link:

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

Крок 2: Натисніть кнопку "Вставити/редагувати link".

Не знімаючи виділення з тексту, прокрутіть кнопку "Вставити/редагувати link" на панелі інструментів візуального редактора. Кнопка значок виглядає як ланцюг ланцюга.

Якщо перетворюєте зображення на клікабельне посилання:

Не знімаючи виділення із зображення, натисніть кнопку "Вставити/редагувати link" (Та, яка виглядає як ланцюжок).

Крок 3. Вставте URL-адресу

З'являється поле URL. Скопіюйте (Command+C або Ctrl+C) потрібна URL-адреса посилання в буфер обміну вашого пристрою. Це посилання може бути зовнішньою URL-адресою, яку знайшли десь в Інтернеті, або URL-адресою вашого веб-сайту.

Після копіювання вставте його (Command+V або Ctrl+V) в полі.

Якщо перетворюєте зображення на клікабельний link:

Вставте потрібну URL-адресу в поле, а потім натисніть кнопку "Застосувати"активувати його.

Крок 4: Активувати

Натисніть кнопку "Застосувати", щоб активувати link та зробити його текст клікабельним.

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

Якщо клацнути гіперпосилання в редакторі, відкриється активна URL-адреса для тестування, а також інструменти редагування на випадок, якщо потрібно змінити гіперпосилання.

Додаткові опції

Ми розглянемо більш складні інтерактивні URL в наступних розділах, але варто зазначити, що кожне посилання, яке створюєте в класичному редакторі WordPress, має кнопку «Параметри Link» для додаткових налаштувань.

Тут можете:

• Коригувати URL-адресу
• Змінити текст
• Відкрити в новій вкладці
• Пошук та лінк на існуючий контент на вашому сайті.

Якщо ви перетворюєте зображення на клікабельний link:

Класичний редактор WordPress надає додатковий спосіб зробити зображення клікабельним. Для цього виберіть зображення, а потім натисніть кнопку "Редагувати" (виглядає як олівець) на панелі інструментів.

Прокрутіть до поля "Посилання на», що дозволяє створити link на користувальницька URL-адреса. Просто вставте потрібну URL-адресу в поле нижче та натисніть «Оновити».
Також можна вибрати меню, що розкривається Посилання на, щоб зробити гіперпосилання на:

• Медіафайли
• Сторінки вкладень
• URL-адреси користувача
• Нікуди.

Спосіб 2: Використання редактора блоків WordPress (Gutenberg)

Гіперпосилання працюють однаково як на постах, так і на сторінках редактора блоків WordPress.

Для початку перейдіть до розділу «Записи» або «Сторінки» на панелі інструментів WordPress Виберіть окрему публікацію або сторінку для редагування, а потім виконайте наведені нижче дії.

Крок 1: виділіть текст

Введіть текст у редактор. За допомогою курсору виділіть частину цього тексту, яку потрібно зробити клікабельною. На панелі інструментів натисніть кнопку посилання.

Якщо перетворюєте зображення на клікабельний link:

Створення клікабельного зображення у редакторі блоків WordPress починається з фактичного додавання зображення до редактора.

Для цього натисніть кнопку «Додати блок», потім виберіть блок «Зображення». Завантажте будь-яке зображення, яке потрібно зв'язати.

Натисніть на зображення, щоб воно було виділено/вибрано, а потім натисніть кнопку «Вставити link » у спливаючому вікні панелі інструментів.

Крок 2: Вставте URL-адресу та надішліть посилання

З'явиться спливаюче вікно з порожнім полем. Вставте URL-адресу, на яку хочете зробити посилання, потім натисніть «Введення» на клавіатурі чи кнопку «Надіслати», щоб активувати інтерактивний link.

В результаті текст гіперпосилання відображається іншим кольором. Можна клацнути link, щоб зробити попередній перегляд вмісту та додати додаткові параметри посилання.

Якщо перетворюєте зображення на клікабельне посилання:

Якщо хочете, є варіанти для посилань на медіафайли та сторінки вкладень.

Інакше вставте URL-адресу в порожнє поле link. Натисніть кнопку застосувати для активації. Після публікації будь-хто, хто натисне на зображення, потрапить на вказаний вами link.

Щоб переглянути додаткові параметри, натисніть стрілку вниз. З'являться такі опції:

• Відкрити link у новій вкладці.
• Додати link.
• Додати клас CSS.

Додаткові опції

Розглянемо докладніше розширені структури гіперпосилань у наступних розділах, але ви повинні знати, що кнопка «Редагувати» доступна, якщо натиснете курсор на новостворений link.

На цій сторінці редагування відображаються поля для:

• Змінити текст
• Змінити URL-адресу
• Відкрити у новій вкладці.

Інші інтерактивні посилання, які можна зробити у редакторі блоків

Редактор блоків WordPress розширює доступні варіанти посилань. Фактично, десятки вбудованих блоків дозволяють створювати інтерактивну структуру посилань, зокрема:

• кнопки: стильний спосіб пов'язати контент у порівнянні з простими текстовими link-ами.
• файли: швидко завантажувати файли та додавати кнопку, яку користувачі можуть натиснути та завантажити.
• Соціальні значки: вставити соціальні іконки з інтерактивними посиланнями.
• Навігація: Розмістити навігаційні кнопки у будь-якому місці сайту за допомогою інтерактивних посилань.
• Докладніше: можна використовувати для скорочення контенту та надання посилання більш розширену версію.
• Вхід вихід: додати швидкий link для входу на сайт.
• Наступний пост: додати клікабельний link/кнопку до наступної посади у блозі.
• Попередній пост: додати клікабельний link у/кнопку, яка веде до попереднього посту у блозі.

Спосіб 3: Використання HTML

Зробіть клікабельний link за допомогою HTML-функцій незалежно від інтерфейсу редактора.

Ви можете редагувати HTML за допомогою:

Панель "Текст" у класичному редакторі WordPress.

Редактор коду у редакторі блоків WordPress

HTML/текстовий редактор на вашому пристрої

Текстові редактори, такі як Atom, Sublime Text та Coda, надають інтерфейс, необхідний для написання та редагування HTML, особливо для інтерактивних посилань.

Після роботи з текстовим редактором зможете:

• Завантажити файли для публікації в Інтернеті через FTP або SFTP. Рекомендуємо використовувати FileZilla для більш плавного процесу.
• Масово завантажити файли HTML у каталог файлів WordPress.
• Використовувати один із багатьох інших FTP-клієнтів для завантаження HTML-файлів у WordPress.

Після того, як знайдете текстовий редактор і навчитеся завантажувати HTML у WordPress - перейдіть до кроків нижче, щоб зробити link активним за допомогою HTML.

Цей формат використовується для основних гіперпосилань у HTML:

<a href="https://www.example.com">Link Text</a>

Примітки:

1. Замініть "https://www.example.com" на потрібну URL-адресу.
2. Замініть Link Text на потрібний текст посилання.

Коли у вас буде готовий link, можете опублікувати пост/сторінку або завантажити HTML-код на свій сайт. Також можна отримати візуальний попередній перегляд посилання, перейшовши на вкладку «Візуальні» у WordPress.

Опублікована версія цього HTML-посилання є підкресленою, а іноді й іншим кольором. Наведення курсору миші на link показує його ціль у нижній частині браузера.

Спосіб 4: Використання будь-якого графічного інтерфейсу користувача (GUI)

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

Загалом кожен графічний інтерфейс може використовувати трохи інше ім'я кнопки або значок для створення гіперпосилання.

Але загальний процес має виглядати так:

1. Виділіть будь-який текст, який потрібно зв'язати посиланням.
2. Клацніть піктограму link (може мати іншу назву) у редакторі.
3. Вставте потрібну URL-адресу.
4. Натисніть на кнопку «Додати link» (також може мати іншу назву).

Як базовий приклад творець інтернет-магазину, такий як Shopify, дозволяє зробити посилання доступним на будь-якій сторінці або в публікації, виділивши текст і натиснувши кнопку «Вставити link».

Потім ви повинні вставити цільову URL-адресу та натиснути кнопку "Вставити link".

Це створює клікабельне посилання.

Як зробити, щоб посилання відкривалися у новій вкладці

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

Відкрити посилання на новій вкладці за допомогою класичного редактора WordPress.

Якщо у вас є інтерактивний link у класичному редакторі WordPress, натисніть кнопку "Параметри link".

Встановіть прапорець, щоб відкрити нову вкладку.
Потім натисніть кнопку «Оновити».

Відкрити посилання в новій вкладці за допомогою редактора блоків WordPress

Припускаючи, що вже додали посилання редактор блоків WordPress, натискання на link відкриває спливаюче вікно попереднього перегляду цільового контенту.

Кнопка "Редагувати" забезпечує доступ до додаткових налаштувань (включаючи параметр «Відкрити в новій вкладці»), але простіше перемикати перемикач «Відкрити в новій вкладці»> прямо в нижній частині спливаючого вікна.

Довідка: Редактор блоків WordPress автоматично додає атрибут rel=”noreferrer noopener” під час активації перемикача «Відкрити у новій вкладці», підвищуючи безпеку посилання.

Відкрити посилання в новій вкладці за допомогою HTML

У текстовому редакторі WordPress, редакторі WordPress або звичайному HTML-редакторі можете використовувати наступний код:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>

1. Замініть "https://www.example.com" на бажану цільову URL-адресу.
2. Замініть Link Text будь-яким текстом, який хочете зв'язати.
3. Атрибут target =“_blank” — це сегмент коду, який фактично відкриває посилання на новій вкладці. Це єдина частина, яка дійсно потрібна для цієї простої функції.
4. Настійно рекомендуємо додати атрибути та значення rel="noreferrer noopener" для блокування поширених проблем безпеки при відкритті посилань у нових вкладках. Однак цілком можливо виключити їх з коду і, як і раніше, відкривати link в новій вкладці.

Після публікації посилання виглядає так само; але при натисканні цільової URL-адреси відкривається в новій вкладці.

Як додати nofollow до гіперпосилання

HTML-значення Nofollow вказує пошуковим системам ігнорувати інтерактивне посилання та запобігає передачі кредиту пошукової системи (посилальної ваги) на цільовий веб-сайт. основна ціль Nofollow — зменшити кількість спам-посилань, але творці контенту використовують його для платних посилань, коментарів, контенту користувача.

WordPress не має вбудованого способу додавання посилання Nofollowале це можливо, натиснувши на HTML.

Наступний код відбиває базове посилання зі значенням Nofollow :

<a href="https://www.example.com" rel="nofollow">The Link Text.</a>

Що ви бачите:

1. Замініть текст «https://www.example.com» бажаною цільовою URL-адресою.
2. Замінити частину Link Text будь-яким текстом посилання, який хочете.
3. Використати атрибут rel="nofollow" та значення у HTML-коді.

При публікації або у візуальному поданні Nofollow нічим не відрізняється від стандартного гіперпосилання, проте функціональність Nofollow зберігається у внутрішньому коді.

Як зробити посилання на існуючий контент

Посилання на існуючий контент – це ексклюзивна функція WordPress, де можна шукати раніше створені записи та сторінки блогу прямо у редакторі WordPress. Це позбавляє необхідності відкривати їх URL-адреси в іншому вікні браузера, щоб скопіювати та вставити їх в інтерактивне посилання.

Посилання на існуючий контент у класичному редакторі WordPress

Створіть посилання, виділівши потрібний текст та натиснувши кнопку «Вставити/редагувати link» у редакторі. Це покаже спливаюче поле, де можете натиснути кнопку "Link options" (значок шестерні).

1. Перейти до розділу «Або посилання на існуючий контент».
2. Введіть ключове слово в рядок пошуку, потім вибирайте існуючу сторінку або публікацію з результатів.
3. Переглянути, як посилання на існуючий контент автоматично розміщується у полі URL.

Переконайтеся, що натисніть кнопку «Додати link», коли закінчите.

Так створюється внутрішнє посилання інший власний контент у редакторі.

Посилання на наявний контент у редакторі блоків WordPress

Виділіть будь-який текст/зображення, яке хочете зв'язати, потім натисніть кнопку «Link» на панелі інструментів.

Дане поле має дві функції: можна вставити URL-адресу або використовувати її як панель пошуку. Тому введіть будь-яке ключове слово, яке стосується вашого існуючого контенту, щоб показати відповідні результати.

Як тільки ви побачите потрібну сторінку або запис, натисніть на нього.

Як зробити клікабельні посилання на телефон, SMS та електронну пошту

Є кілька способів додати спеціальні дії до інтерактивних посилань, замінивши стандартну структуру URL на щось інше, наприклад:

• Номер телефону, який відкриває програму «Телефон».
• Номер телефону, з якого відкривається програма обміну текстовими повідомленнями.
• Адреса електронної пошти, яка автоматично відкриває поштову програму користувача.

Як зробити клікабельне телефонне посилання

«Натисніть, щоб зателефонувати» або телефонне посилання автоматично додає певний номер телефону до телефонної програми користувача або навіть до програми, яка підтримує телефонні номери, наприклад Skype.

Замість використання URL-адреси потрібно вставити код кількість: у HTML, за яким слідує номер телефону, наприклад:

<a href="tel:555-555-5555">Click To Call</a>

Примітки до показаного коду:

1. Замініть номер телефону на номер, за яким користувачі повинні дзвонити.
2. Замініть текст "Click To Call" на той, який відображатиметься в тексті посилання.

У візуальних редакторах, таких як WordPress Block та WordPress Classic, просто введіть Тел: 555-555-5555 (з потрібним номером телефону) у полі URL для лінка. Натисніть клавішу Enter, щоб автоматично згенерувати телефонний link.

Коли хтось натискає на це посилання, він або перенаправляється прямо в найбільш відповідний додаток (додаток для телефону на смартфоні), або бачить запрошення відкрити програму, таку як Skype.

Як зробити клікабельне посилання в СМС

Інтерактивні SMS-link працюють так само, як телефонні посилання, але вони воліють автоматично відкривати програми для обміну повідомленнями, а не програми для виклику.

Щоб додати link для SMS, використовуйте sms:555-555-5555 замість URL.

<a href="sms:555-555-5555">Click To Text</a>

Примітка:

1. Замініть "555-555-5555" на свій номер телефону.
2. Замініть «Click To Text» на той, який відображатиметься у тексті лінка.

Як класичний, так і блоковий редактор WordPress підтримують SMS-посилання, якщо помістите значення sms: 555-555-5555 у полі URL-адреси для посилань.

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

Як зробити клікабельне посилання електронної пошти

При натисканні гіперпосилання електронної пошти автоматично пропонують пристрою користувача відкрити найбільш підходящу поштову програму разом із розділом «Створити», що переходить на певну адресу електронної пошти.

Для цього додайте код mailto:, а потім адресу електронної пошти, де зазвичай розміщуєте цільову URL-адресу.

<a href="mailto:mail@example.com">Click To Email</a>

Примітки:

1. Замініть адресу електронної пошти "mail@example.com" бажаною цільовою адресою електронної пошти.
2. Замініть текст "Click To Email" тим, що хочете, щоб відображався.

Якщо ви використовуєте редактори WordPress Classic або Block Editor, просто введіть значення mailto: mail@example.com у полі URL-адреси під час створення посилання.

Після того, як опублікуєте link, користувачі, які натиснуть на неї, будуть перенаправлені у свою поштову програму із вказаною вами адресою електронної пошти, включеною в поле «Кому:».

Додавання інтерактивних посилань (також відомих як гіперпосилання або просто посилання) може покращити інтерактивність вашого веб-сайту, призвести людей до більшої кількості контенту та посилатися на важливу інформацію з інших джерел в Інтернеті. Таким чином, вивчення того, як зробити клікабельне посилання, є одним із основоположних уроків дизайну веб-сайтів та створення контенту.

Прочитавши цю статтю, зможете визначити зовнішній вигляд клікабельного посилання і точно знати, як її зробити, додавання її до тексту або зображень. А також знатимете, що існують різні способи зробити її доступною для кліків, наприклад, за допомогою класичного редактора WordPress, редактора блоків, HTML або будь-якого доступного графічного інтерфейсу користувача.

Джерело: kinsta.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/