Как добавить кликабельные номера телефонов для смартфонов в WordPress

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

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

Правильный формат для указания телефона следующий:

<Код страны> <(код оператора) > <Номер телефона >

Например: +1 (555) 555-1212

Однако, большинство смартфонов распознаю и такие вариации:

+15555551212
+1.555.555.1212
555-555-1212
555 555 1212

phone-number-link[1]

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

<!--Эта ссылка сработает на Android и iPhone. Она будет видима для десктоп-пользователей, но при клике по ссылке возникнет ошибка -->
<a href="tel://+15555551212">+1 (555) 555-1212</a>

<a href="tel://15555551212">Позвонить мне</a>

Проблема со ссылке выше в том, что она будет видна для пользователей на всех устройствах. Если кто-то на ПК кликнет по ней, то в Google Chrome ничего не произойдет, а в Firefox отобразится ошибка.

<!-- Эта ссылка откроется в Skype на десктопах и ноутбуках, на смартфонах же у пользователя спросят, хочет ли он открыть skype или позвонить с помощью телефонного вызова -->
<a href="callto://15555551212">+1 (555) 555-1212</a>

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

<!--Связываем номер с картинкой -->
<a href="callto://15555551212" title="Позвонить мне"><img src="/images/call-me.png" alt="Позвонить мне" /></a>

Пример выше связывает изображение с номером, используя протокол Skype callto: Проблема в таком синтаксисе в том, что смартфон может распознать протокол Skype, но может не справится с телефонным номером. Более того, мобильная ОС может и вовсе не предложить выбор для совершения звонка.

Также вы можете создавать ссылки с именами пользователей Skype и предоставлять поддержку в чате, или же голосовую поддержку для своих посетителей.