Łącza telefoniczne: Jak dodać „możliwe do połączenia” łącza i CTA do swojej witryny?

Wiele witryn firmowych wyświetla numer telefonu, aby klienci mogli się z nimi skontaktować. Kiedy komputery stacjonarne były najpopularniejszym sposobem uzyskiwania dostępu do witryn, użytkownicy zapisywali numer telefonu i dzwonili z oddzielnego urządzenia. Oczywiście większość użytkowników uzyskuje teraz dostęp do witryny i wykonuje połączenia telefoniczne z tego samego urządzenia. Otwiera to możliwość dodania linku do połączenia – utworzenia numeru telefonu w formacie HTML, który można kliknąć.

W tym artykule przyjrzymy się, jak dodać link do rozmowy, a także kilka innych linków klikalnych, takich jak e-mail i inne wezwania do działania.

Subskrybuj nasz kanał YouTube

Jak działają łącza połączeń

Tworzenie klikalnego numeru telefonu jest łatwe dzięki HTML. HTML5 zawiera protokoły, takie jak tel: i mailto:, z których mogą korzystać przeglądarki. Przeglądarki różnie reagują na te protokoły. Niektórzy uruchomią aplikację telefoniczną i dodadzą numer do wyświetlacza, czekając na kliknięcie przycisku Połącz. Inni zadzwonią, a inni najpierw zapytają, czy wszystko w porządku.

Ponieważ jest to HTML, możesz dodać protokoły w dowolnym miejscu witryny, w tym nagłówek, stopkę, paski boczne, zawartość postów i stron oraz widżety.

Dodawanie linku telefonicznego w formacie HTML do Twojej witryny internetowej

Dodaj kod jako tekst do lokalizacji, w której ma się pojawić link:

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

Href=tel: tworzy link do rozmowy. To mówi przeglądarce, jak używać numeru.

„Tel: 123-456-7890” tworzy numer telefonu HTML. Numer w cudzysłowie to numer, pod który zadzwoni.

Numer w tagach >< jest częścią wizualną i może to być wszystko, co chcesz, w tym numer telefonu, wiersz tekstu, taki jak „Kliknij, aby zadzwonić” lub „Zadzwoń teraz” lub dowolne inne wezwanie do działania chcieć. Powinien zawierać opis tego, co się stanie po kliknięciu.

Wyświetlenie komunikatu zamiast numeru wyglądałoby tak:

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

Twoi goście zobaczą tekst, ale kiedy go klikną, zobaczą ekran wybierania swoich telefonów z Twoim numerem gotowym do kliknięcia przycisku połączenia.

Dodawanie rozszerzenia

Niektóre numery telefonów mają rozszerzenie. Możesz dodać kod, który utworzy krótką pauzę przed wybraniem numeru wewnętrznego. Dodanie P przed rozszerzeniem doda jednosekundową przerwę. Kod może wyglądać tak:

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

To wybiera numer, czeka jedną sekundę, a następnie wybiera numer wewnętrzny.

Możesz poczekać na sygnał wybierania, używając w zamiast p .

Dodawanie kodów krajów

Kody krajów można dodać, dodając znak + wraz z kodem kraju przed numerem telefonu. Przykład może wyglądać tak:

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

Dodawanie mikrodanych do lokalnego SEO

Jednym z moich ulubionych udogodnień związanych z noszeniem smartfona jest to, że wyszukuję lokalną firmę, a wynik w Google daje mi klikalny numer telefonu. Mogę kliknąć numer, aby zadzwonić bez konieczności zapisywania go lub próby zapamiętania. Ta funkcja jest teraz koniecznością. Na szczęście możesz dodać go do swojej witryny, aby Google mógł podać Twój numer telefonu w wyszukiwaniach lokalnych.

Odbywa się to za pomocą mikrodanych. Mikrodane informują wyszukiwarki, że numery są numerami telefonu, więc są wyświetlane jako link do połączenia, który można kliknąć. Możesz to stworzyć, wzbogacając znacznik o kilka tagów do wyszukiwania lokalnego.

Na przykład kod może wyglądać tak:

<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>

Inne wezwania do działania

Dzięki HTML5 nie ograniczasz się do numerów telefonów. Możesz dodać inne wezwania do działania, takie jak e-mail, wiadomości, faks itp. Protokoły HTML5 obejmują:

• tel: – zadzwoń
• mailto: – otwórz aplikację e-mail
• callto: otwórz Skype
• sms: – wyślij sms
• fax: – wyślij fax

Wszystkie te protokoły są używane w taki sam sposób, jak widzieliśmy powyżej. Spójrzmy na kilka przykładów.

Dodawanie kodu do swojej strony kontaktowej

Jednym z najlepszych miejsc do dodania linku do rozmowy jest informacja kontaktowa na stronie Kontakt.

Niezależnie od tego, czy używasz edytora klasycznego, czy nowego edytora Gutenberg, musisz wyświetlić wersję tekstową strony. W edytorze klasycznym kliknij kartę Tekst . W Gutenberg kliknij trzy kropki w prawym górnym rogu i wybierz Edytor kodu .

Dodaj kod zamiast swojego numeru telefonu.

Wyjdź z edytora kodu lub podglądu strony, a zobaczysz, że Twój numer telefonu jest teraz łączem, które można kliknąć.

Tworzenie kodu dla łącza e-mail lub adresu URL

Kod HTML dla wiadomości e-mail to mailto: Adres e-mail jest dodawany na końcu, w następujący sposób:

<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>

Podobnie jak w przypadku linku telefonicznego, możesz użyć części wizualnej, aby dodać wiadomość, taką jak:

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

Oto przykład ze strony kontaktowej pakietu układu Spa. Dodałem moduł notki z ikoną i tekstem Wyślij e-mail. Wybrałem kartę Tekst i dodałem kod HTML e-maila. Tekst jest teraz klikalny i otworzy aplikację poczty e-mail.

Dodawanie kodu do otwartych adresów URL

Możesz mieć kod HTML, aby otworzyć dowolny adres URL. Jest to dobre, jeśli chcesz wysyłać czytelników na strony w celu rejestracji w biuletynie, wydarzeń itp. Aby utworzyć do nich link, Twój kod HTML będzie zawierał adres URL. Na przykład:

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

Dodałem kolejną notkę z kodem, aby zobaczyć stronę wydarzeń.

Wyłącz na komputerze stacjonarnym i tablecie

Jednym z problemów z linkami do połączeń jest to, że nie są one przydatne na komputerach stacjonarnych lub tabletach. Możesz rozwiązać ten problem za pomocą Divi, tworząc moduły specyficzne dla każdego typu urządzenia, a następnie wyłączając je na innych urządzeniach.

Tutaj stworzyłem dwa moduły z numerem telefonu: jeden zawiera numer telefonu HTML, a drugi nie. Wyłączyłem ten z klikalnym numerem na tabletach i komputerach stacjonarnych, więc nigdy nie zobaczą linku. Wyłączyłem również moduł bez linku dla telefonów, więc użytkownicy telefonów będą widzieć tylko moduł z linkiem.

Dodawanie kodu do nagłówka lub stopki

Możesz dodać kod do nagłówka lub stopki za pomocą edytora motywów. Zawsze używaj motywu potomnego, w przeciwnym razie kod PHP zostanie nadpisany podczas aktualizacji motywu. Będzie to wymagało pewnych stylów CSS, aby wyglądały dobrze.

Na pulpicie nawigacyjnym przejdź do Wygląd > Edytor > Nagłówek motywu (lub Stopka motywu ). Umieść kod w części kodu <body>. Poszukałem końcowego tagu </a>, kliknąłem Enter, aby dodać kilka dodatkowych wierszy, i wkleiłem kod. Możesz zobaczyć kod tutaj w wierszach 28 i 29.

Oto jak to wygląda, gdy umieściłem link do rozmowy telefonicznej i link do e-maila w nagłówku motywu Twenty Nineteen. Jest i działa, ale nie jest zbyt ładna. Można to naprawić, dodając przestrzeń kolorów i marginesów, aby oddzieliły się od siebie. Oczywiście odbywa się to w CSS.

Stylizowanie linków

Musisz dodać kod do pola Dodatkowy CSS w programie Customizer.

Twój kod może wyglądać tak:

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

To mówi CSS, jak stylizować tekst dla tel: i mailto:. Zmienia czcionkę numeru telefonu na brązową, czcionkę wiadomości e-mail na pomarańczową i dodaje mały margines po prawej stronie każdego łącza.

CSS działa wszędzie tam, gdzie kod znajduje się w widżetach, postach itp. Możesz nawet używać ikon zamiast tekstu.

Dodawanie kodu do drugorzędnego menu Divi

Divi może dołączyć Twój numer telefonu i adres e-mail w dodatkowym menu nad nagłówkiem. Przycisk e-mail jest już domyślnie klikalny, ale numer telefonu już nie. Numer telefonu można przekształcić w link do połączenia, używając podobnego numeru telefonu HTML, którego używaliśmy w poprzednich przykładach.

Przejdź do Dostosowywanie motywu > Nagłówek i nawigacja > Elementy nagłówka . To da ci pole tekstowe, w którym możesz dodać swój numer telefonu. Na szczęście nie ograniczasz się tylko do liczb. Możesz także dodać kod HTML. Dodałem kod HTML z poprzednich przykładów. Zwiększyłem również rozmiar czcionki numeru telefonu, aby łatwiej było zobaczyć obrazy.

Możesz pokazać, że można go kliknąć, dodając wiadomość do wizualnej części linku. Możesz zastąpić numer wiadomością lub dodać wiadomość na końcu numeru. Może to wyglądać tak:

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

Ten przykład pokazuje tylko tekst.

W tym dodałem numer telefonu wraz z tekstem.

Testowanie na urządzeniach mobilnych

Polecam przetestować linki z urządzeniami mobilnymi, aby upewnić się, że działa. Jeśli nie masz dostępu do smartfona, możesz skorzystać z Narzędzi programistycznych Google Chrome.

Kliknij prawym przyciskiem myszy swoją stronę główną i wybierz Sprawdź . W lewym górnym rogu ekranu zobaczysz listę urządzeń. Wybierz ten, aby zobaczyć, jak wygląda Twoja witryna na tym ekranie. Kliknięcie linku numeru telefonu w formacie HTML powinno otworzyć okno dialogowe z prośbą o wybranie aplikacji. Jeśli to widzisz, link działa. Nadal polecam wypróbowanie go na prawdziwym smartfonie, ale to dobry znak, że link to coś robi.

Dodawanie łączy połączeń za pomocą wtyczek

Możesz także dodać link do połączenia do nagłówka za pomocą wtyczki. Zazwyczaj zawierają funkcje stylizacji, dodawania wielu wezwań do działania oraz możliwość włączania i wyłączania w zależności od urządzenia odwiedzającego. Są również łatwe w konfiguracji i obsłudze. To świetny wybór, jeśli nie chcesz obsługiwać kodu. Oto kilka najlepszych opcji.

Przycisk Zadzwoń teraz

Przycisk Zadzwoń teraz dodaje przycisk „kliknij, aby połączyć” u dołu ekranu dla odwiedzających mobilnych. Nie wyświetla się na innych urządzeniach. Możesz także dodać tekst, jeśli chcesz. Przycisk to ikona telefonu, więc łatwo zrozumieć, do czego służy. Wystarczy, że włączysz przycisk i wprowadzisz swój numer telefonu. Możesz zmienić domyślne zachowanie w ustawieniach zaawansowanych.

Więcej informacji

Przyklejone przyciski boczne

Ta wtyczka umożliwia dodawanie przycisków, które przyklejają się do boku witryny i pozostają na ekranie, gdy użytkownik przewija. Możesz dodać klikalny numer telefonu, adres e-mail, ikony mediów społecznościowych i lokalizacje sklepów. Ustaw je po prawej lub lewej stronie, wybierz style animacji i najazdu, dostosuj kolory i wybierz miejsce ich wyświetlania.

Więcej informacji

Pasek kontaktowy prędkości

Ten dodaje pasek kontaktowy, który zawiera klikalne linki do numeru telefonu, numeru faksu, nagłówka, adresu, e-maila, sieci społecznościowych i niestandardowych adresów URL. Ustaw pasek na górze lub na dole i dostosuj rozmiar, kolor, kolor tekstu i linków oraz sposób reakcji paska. Możesz także dostosować rozmiar. możesz dodać więcej treści za pomocą haków filtrów.

Więcej informacji

Mobilny pasek kontaktowy

Ta wtyczka dodaje linki do Twojej witryny podczas przeglądania na urządzeniach mobilnych. Możesz wybrać, które łącza są wyświetlane spośród 13 opcji, w tym telefonu, poczty e-mail, Skype, niestandardowych adresów URL i sieci społecznościowych. Posiada integrację FontAwesome dla ikon. Możesz nadać styl linkom i wybrać rozmiar, obramowanie, krycie itp. Ustaw menu u góry lub u dołu ekranu. Menu pozostaje na ekranie podczas przewijania przez użytkownika. Zawiera również przewijanie do góry i koszyk WooCommerce z przyciskami licznika przedmiotów.

Więcej informacji

Końcowe przemyślenia

Popularność smartfonów do uzyskiwania dostępu do stron internetowych rośnie z każdym dniem. Ta popularność sprawia, że ​​łącza telefoniczne stają się zupełną koniecznością. Dodanie klikalnych numerów telefonów może wpłynąć na różnicę między użytkownikami dzwoniącymi do Twojej firmy a konkurencją. Na szczęście tworzenie klikalnych linków w celu dodania numerów telefonów HTML do nagłówków, stopek, widżetów, stron i postów w witrynie WordPress nie jest trudne.

Chcemy usłyszeć od Ciebie. Czy dodałeś linki do połączeń na swojej stronie? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

Polecane zdjęcie za pośrednictwem Jane Kelly / shutterstock.com