Многие сталкиваются с тем, что в готовом сайте плагин Skype Click To Call (если он установлен в браузере) заменил телефоны, а иногда и другие номера, которые не являются телефонными, сделав их интерактивными. При этом Skype заменяет номер с вашим дизайном своей стандартной синей ссылкой с иконкой. В этой статье я расскажу два подхода к решению данного вопроса.
Начну с простого.
Первый подход. Мешаем распознать телефон.
Сразу отметаем вариант использования картинки, т.к. это не позволяет пользователю нормально выделить и скопировать телефон.
Вставляем скрытый тег span внутри телефона:
<p>+7 (123) <span style="display:none;">.</span>456-78-90</p>Этот метод прост, но при копировании телефон может копироваться с точкой.
CSS метод. Добавьте следующие стили:
.phone-block span[class^='skype_pnh_container'] {
display:none !important; /* отключение кликабельности */
}
.phone-block span[class^='skype_pnh_print_container'] {
display:inline !important; /* включение простого текста */
}Или LESS, если вы используете его вместо CSS:
.phone-block {
span[class^='skype_pnh_container'] {
display:none !important; /* отключения кликабельности */
}
span[class^='skype_pnh_print_container'] {
display:inline !important; /* включение простого текста */
}
}.phone-block – это обёртка вокруг телефона, для того чтобы можно было отключать отдельные телефоны на сайте, а другие оставлять без изменения.
Т.е. HTML может быть таким:
<div class=”phone-block”>
<p>+7 (123) 456-78-90</p>
</div>Второй подход. Приручаем Skype.
Теперь самое интересное. Функционал плагина Skype полезен пользователю, нас не устраивает только оформление. Переопределим стили Skype:
CSS:
.phone-block span[class^='skype_pnh_container'] span.skype_pnh_highlighting_inactive_common span.skype_pnh_text_span {
/*телефон*/
color: #0f7a95 !important;
font-size: 24px !important;
}
.phone-block span[class^='skype_pnh_container'] img.skype_pnh_logo_img {
/*иконка*/
visibility: hidden !important;
}
.phone-block span[class^='skype_pnh_container']:hover img.skype_pnh_logo_img {
/*иконка*/
visibility: visible !important;
}LESS:
.phone-block {
span[class^='skype_pnh_container'] {
/*display:none !important; /* отключение кликабельности */
span.skype_pnh_highlighting_inactive_common span.skype_pnh_text_span {
/*телефон*/
color: #0f7a95 !important;
font-size: 24px !important;
}
img.skype_pnh_logo_img {
/*иконка*/
visibility: hidden !important;
}
&:hover {
img.skype_pnh_logo_img {
/*иконка*/
visibility: visible !important;
}
}
}
}Здесь мы поменяли цвет и размер шрифта телефона, а также спрятали иконку Skype и отображаем её только при наведении мышью на телефон. Если вы хотите добавить какие-либо дополнительные свойства, не забывайте добавлять в каждом значении стиля !important иначе стили Skype будут главнее и всё останется без изменений. Также не забываем про пользователей, у которых плагин не установлен: добавляем стили, которые будут работать без плагина. Например:
.phone-block {
font-size: 24px;
color: #0f7a95;
}Заключение
Есть и другие способы, не упомянутые в данной статье, как менее удачные, по мнению автора. Это специальные метатеги и JavaScript-методы.