Телефонные ссылки: как добавить на ваш сайт ссылки и призывы к действию

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

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

Подпишитесь на наш канал Youtube

Как работают ссылки для звонков

Сделать номер телефона интерактивным можно легко с помощью HTML. HTML5 включает такие протоколы, как tel: и mailto:, которые могут использовать браузеры. Браузеры по-разному реагируют на эти протоколы. Некоторые запустят телефонное приложение и добавят номер на дисплей, ожидая, пока вы нажмете кнопку «Позвонить». Другие позвонят, а другие сначала спросят, нормально ли.

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

Добавление ссылки на телефонный номер в формате HTML на ваш веб-сайт

Добавьте код в виде текста в то место, где должна отображаться ссылка:

<a href="tel:123-456-7890">123-456-7890</a>

Href = tel: создает ссылку для звонка. Это сообщает браузеру, как использовать номер.

«Tel: 123-456-7890» создает номер телефона в формате HTML. Число в кавычках - это номер, по которому он позвонит.

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

Отображение сообщения вместо номера будет выглядеть так:

<a href="tel:123-456-7890">CLICK TO CALL</a>

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

Добавление расширения

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

<a href="tel:123-456-7890p123">CLICK TO CALL</a>

Это набирает номер, ждет одну секунду, а затем набирает добавочный номер.

Вы можете заставить его ждать гудка, используя w вместо p .

Добавление кодов стран

Коды страны можно добавить, поставив + вместе с кодом страны перед номером телефона. Пример может выглядеть так:

<a href="tel:+1123-456-7890">123-456-7890</a>

Добавление микроданных для локального SEO

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

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

Например, код может выглядеть так:

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

Другие призывы к действию

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

• тел: - позвонить по телефону
• mailto: - открыть почтовое приложение
• callto: откройте Skype
• sms: - отправить текстовое сообщение
• факс: - отправить факс

Все эти протоколы используются так же, как мы видели выше. Давайте посмотрим на несколько примеров.

Добавление кода на страницу контактов

Одно из лучших мест для добавления ссылки для звонка - это ваша контактная информация на странице «Свяжитесь с нами».

Независимо от того, используете ли вы классический редактор или новый редактор Гутенберга, вам необходимо просматривать текстовую версию страницы. В классическом редакторе перейдите на вкладку Текст . В Gutenberg щелкните три точки в правом верхнем углу и выберите « Редактор кода» .

Добавьте код вместо своего номера телефона.

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

Создание кода для ссылки или URL-адреса электронной почты

HTML-код для электронной почты - mailto: адрес электронной почты добавляется в конец, например:

<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>

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

< href="mailto: [email protected]"; Click here to send me an email</a>

Вот пример со страницы контактов пакета макетов Spa. Я добавил модуль аннотации со значком и текстом «Отправить электронное письмо». Я выбрал вкладку «Текст» и добавил HTML-код электронного письма. Теперь текст можно щелкнуть, и откроется ваше почтовое приложение.

Добавление кода в открытые URL-адреса

У вас может быть HTML для открытия любого URL-адреса. Это хорошо, если вы хотите отправлять читателей на страницы для подписки на информационные бюллетени, событий и т. Д. Для того, чтобы ссылаться на них, ваш HTML-код будет включать URL-адрес. Например:

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

Я добавил еще одну аннотацию с кодом, чтобы увидеть страницу событий.

Отключить на рабочем столе и планшете

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

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

Добавление кода в верхний или нижний колонтитул

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

На панели инструментов выберите « Внешний вид»> «Редактор»> « Верхний колонтитул темы» (или « Нижний колонтитул темы» ). Поместите код в часть кода <body>. Я поискал конечный тег </a>, нажал "Enter", чтобы добавить несколько дополнительных строк, и вставил свой код. Вы можете увидеть код здесь, в строках 28 и 29.

Вот как это выглядит, когда я разместил ссылку для звонка и ссылку для электронной почты в заголовке темы Twenty Nineteen. Он есть, и работает, но не очень красиво. Это можно исправить, добавив цвет и отступ, чтобы они стояли отдельно друг от друга. Конечно, это делается в CSS.

Стилизация ссылок

Вам нужно будет добавить код в поле Additional CSS в настройщике.

Ваш код может выглядеть так:

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

Это сообщает CSS, как стилизовать текст для tel: и mailto :. Он изменяет шрифт телефонного номера на коричневый, шрифт электронного письма - на оранжевый, а также добавляет небольшое поле справа от каждой ссылки.

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

Добавление кода во вторичное меню Divi

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

Перейдите в Настройщик темы > Заголовок и навигация > Элементы заголовка . Это даст вам текстовое поле, в которое вы можете добавить свой номер телефона. К счастью, вы не ограничены только числами. Вы также можете добавить HTML. Я добавил HTML из предыдущих примеров. Я также увеличил размер шрифта телефонного номера, чтобы изображения было легче разглядеть.

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

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

В этом примере просто показан текст.

В этом я добавил номер телефона вместе с текстом.

Тестирование на мобильном

Я рекомендую проверить ссылки на мобильных устройствах, чтобы убедиться, что они работают. Если у вас нет доступа к смартфону, вы можете использовать Инструменты разработчика Google Chrome.

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

Добавление ссылок на звонки с помощью плагинов

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

Кнопка "Позвонить сейчас"

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

Больше информации

Липкие боковые кнопки

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

Больше информации

Панель быстрого контакта

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

Больше информации

Мобильная панель контактов

Этот плагин добавляет ссылки на ваш сайт при просмотре на мобильных устройствах. Вы можете выбрать, какие ссылки будут отображаться, из 13 вариантов, включая телефон, электронную почту, Skype, настраиваемые URL-адреса и социальные сети. Он имеет интеграцию с FontAwesome для иконок. Вы можете стилизовать ссылки и выбрать размер, границу, непрозрачность и т. Д. Установите меню вверху или внизу экрана. Меню остается на экране, когда пользователь прокручивает. Он также включает прокрутку вверх и корзину WooCommerce с кнопками счетчика товаров.

Больше информации

Последние мысли

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

Ждем вашего ответа. Вы добавили на свой сайт ссылки для звонков? Сообщите нам о своем опыте в комментариях ниже.

Избранные изображения через Джейн Келли / shutterstock.com