В этой статье я расскажу два подхода к решению данного вопроса.
Переопределение стилей Skype на сайте.

Многие сталкиваются с тем, что в готовом сайте плагин 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-методы.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх