Здравствуйте, дамы и господа, в этой статье расскажу о том, как сделать номер телефона в WordPress кликабельным. Чтобы человеку достаточно было нажать на номер и набрать его. Фактически будем оформлять телефон в виде ссылки. Дам инструкцию для классического редактора, а также для нового редактора Gutenberg. Ну и объясню, как его встраивать в виджеты и шаблоны.
Делаем из номера телефона ссылку в WordPress
Учтите, я не смогу рассказать все сценарии, например, для разных тем для WP добавление номера в Header или Footer может кардинально различаться. Например, где-то это можно сделать просто в кастомайзере, а в другой теме придётся создавать кликабельный номер телефона с помощью редактирования шаблона.
Так что в данном случае будет объяснение про сам процесс, возможно, вам придётся адаптировать инструкцию по свои задумки.
Сначала сам формат. Для номера телефона в виде исходного HTML ссылка будет выглядеть так:
<a href="tel:+70123456789">+7 (012) 345-67-89</a>Обратите внимание в чём разница. В блоке tel номер нужно указывать слитно, лучше в международном формате. Например, в России или Казахстане это +7, никаких 8. В Германии +49, а не 0 или 00. Конечно, можно и внутренний код указать, ссылка всё равно будет рабочей, но это создаст проблемы для международных звонков, а также при идентификации контакта в мессенджерах. Так что лучше соблюдать простые правила:
указывать международный код;
писать номер слитно, никаких пробелов;
никаких дефисов или скобок.
А в месте, где указываете номер в виде текста, можете изгаляться как хотите, хоть буквами все цифры напишите. Ссылка всё равно будет работать. Текст может быть любой, например, можно написать фразу «Связаться с нами».
Именно в таком формате ссылку нам и нужно добавлять. О том, как это сделать, поведаю дальше.
Делаем номер телефона кликабельным в Классическом редакторе и Gutenberg
В принципе, здесь ничего сложного нет. Достаточно использовать предоставленные инструменты.
Для начала сам процесс превращения номера телефона в ссылку в классическом редакторе. Я буду использовать для этого блок классического редактора, отличий от самого классического редактора никаких.
Итак, есть у нас номер, выделяем его.
А после нажимаем кнопку «Вставить/Изменить ссылку» или сочетание клавиш Ctrl+K. И перед вами появится диалоговое окно.
Здесь нажимаете на шестерёнку. И дальше используете стандартное окно для редактирования ссылок в классическом редакторе.
Отличие заключается только в том, что вместо ссылки нужно добавить номер телефона в формате:
tel:+70123456789А остальное остаётся без изменений, можете поставить разные rel, сделать, чтобы ссылка открывалась в новом окне. Кстати, чтобы ссылка открывалась в новом окне для телефонов лучше не делать. Это только создаст лишнюю пустую вкладку.
В Gutenberg отличий никаких, разве что внешне диалоговое окно отличается.
Выделяете номер телефона, а дальше нажимаете на Link или сочетание клавиш Ctrl+K.
Дальше ссылку вводите в формате:
tel:+70123456789
Нажимаете Enter, при желании можете потом отредактировать, для этого снова нажмите на ссылку, потом кнопку «Изменить».
И в следующем окне вы уже можете добавить для ссылки, например, rel, сделать, чтобы открывалась в новом окне. Но повторюсь, для номеров телефона лучше этого не делать, так как создаётся бесполезная лишняя вкладка.
Как видите, что в классическом редакторе, что в Gutenberg, очень просто сделать номер телефона кликабельным. Достаточно правильно оформить его в виде ссылки, процесс не отличается от создания обычных ссылок.
Как сделать виджет с кликабельным номером телефона в WordPress
Эта задача очень простая. Наверное, варианта проще не придумаешь. Если вы используете новый редактор виджетов, то процесс не отличается от добавления номера в редакторе Gutenberg.
Если используете классические виджеты, то задача немного меняется. Но можно не переживать, ничего сложного.
Вам нужно зайти в панель администратора WordPress на вашем сайте, далее перейти во вкладку «Внешний вид» → «Виджеты».
Для создания виджета с кликабельным номером телефона подойдут следующие виджеты:
HTML-код;
Текст.
Рекомендую использовать именно вариант HTML-код.
В разделе «Виджеты» выберите виджет HTML-код и перетащите его в нужную область виджетов.
Дальше разместите номер телефона в формате HTML.
То есть вам нужно указать именно в таком формате:
<a href="tel:+70123456789">+7 (012) 345-67-89</a>Виджет будет наследовать стили темы, но вы можете добавить класс для тега, чтобы отредактировать внешний вид, например, так:
<a class="tnumber-widget" href="tel:+70123456789">+7 (012) 345-67-89</a>А после добавить CSS для этого класса в файле style.css.
Когда добавите номер, нажмите кнопку сохранить, и появится такой же виджет, как был на первом скриншоте.
Как видите, ничего трудного нет.
Как добавить кликабельный номер в другие области сайта на WordPress
Предположим, вам нужно добавить номер телефона в Header или Footer. Тут всё немного сложнее, ибо всё будет зависеть от вашей темы, а также её возможностей.
Например, некоторые темы позволяют добавлять виджеты в области Header или Footer, тогда проблем никаких, делаете то же самое, что и при добавлении обычного виджета с номером телефона.
Но бывают и более проблемные случаи, например, областей для виджетов в подвале или шапке нет, тогда придётся редактировать непосредственно шаблон темы.
Рекомендую делать это в рамках дочерней темы, в противном случае при обновлении темы ваши изменения в шаблонах будут потеряны.
Самым лучшим вариантом будет, если в самом шаблоне есть копирайт автора, это отличная подсказка о том, куда можно вставить номер телефона.
В таком случае достаточно будет заменить текст автора и ссылку на свои. Ну и отредактировать CSS, чтобы выглядело так, как вы желаете.
Но универсального способа нет, если нет копирайта, и вообще автором в Footer ничего не предусмотрено, то придётся дорабатывать шаблон с нуля и писать код самостоятельно. С разделом Header примерно то же самое.
Шаблоны данных разделов могут находиться в файлах:
Для Footer. В footer.php, в отдельном шаблоне в папке templates. Иногда Footer можно редактировать через файл functions.php.
Для Header. В index.php, в header.php, может быть отдельный шаблон в папке templates, а также Header можно редактировать через файл functions.php.
В общем, вам придётся изучить тему, понять, как отредактировать шаблоны, а потом добавить ссылку с кликабельным номером телефона в нужное место. Такую задачу лучше, конечно, поручить специалистам, если сами не умеете подобное делать.
Простая и одновременно сложная задача
Если вам нужно просто добавить номер телефона в текст статьи, виджет или если автором темы предусмотрены простые способы добавления номеров и ссылок в нужные области, то это очень простая задача. Как правило достаточно оформить телефон в формате ссылки и готово.
Но если вам придётся редактировать шаблоны, добавлять новые области для контактов самостоятельно, то задача становится несколько сложнее и уже требуется понимание HTML, CSS, а зачастую и PHP.
И это при условии, что автор темы не использует фреймворки, препроцессоры и другие языки программирования. Тогда задача может стать на порядок сложнее.
На этом с вами прощаюсь, желаю успехов и рабочего кода, всего доброго!
