wiele stron firmowych pokazuje numer telefonu, aby ich 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łączenie telefoniczne z tego samego urządzenia. Otwiera to możliwość dodania łącza do połączenia-utworzenia numeru HTML, który można kliknąć.,
w tym artykule przyjrzymy się, jak dodać link do połączenia, a także kilka innych klikalnych linków, takich jak e-mail i inne CTA.
zasubskrybuj nasz kanał na Youtube
jak działają linki połączeń
klikanie 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 inaczej reagują na te protokoły. Niektórzy uruchamiają aplikację na telefon i dodają numer do wyświetlacza, czekając na kliknięcie przycisku połączenia. Inni wykonają telefon, podczas gdy inni zapytają, czy jest w porządku.,
ponieważ jest to HTML, możesz dodać protokoły w dowolnym miejscu na swojej stronie, w tym nagłówek, stopkę, paski boczne, zawartość postów i stron oraz widżety.
dodanie HTML numeru telefonu link połączenia na swojej stronie internetowej
Dodaj kod jako tekst do lokalizacji, w której link ma się pojawić:
<a href="tel:123-456-7890">123-456-7890</a>
href=tel: tworzy link połączenia. To mówi przeglądarce, Jak korzystać z numeru.
„Tel: 123-456-7890 „tworzy numer telefonu HTML. Numer w cudzysłowach to numer, który będzie wywoływał.,
numer w znacznikach>< jest częścią wizualną i może to być wszystko, co chcesz, to być, w tym numer telefonu, wiersz tekstu, taki jak „Kliknij, aby zadzwonić” lub „Zadzwoń teraz”, lub każde inne wezwanie do działania, które chcesz. Powinno być opisowe, co się stanie, gdy klikną.,
wyświetlenie wiadomości zamiast numeru będzie wyglądać tak:
<a href="tel:123-456-7890">CLICK TO CALL</a>
Twoi odwiedzający zobaczą tekst, ale po kliknięciu na niego zobaczą ekran wybierania numerów 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 spowoduje krótką przerwę przed wybraniem numeru wewnętrznego. Dodanie P przed rozszerzeniem spowoduje jednosekundową pauzę., Kod może wyglądać tak:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
wybierze numer, czeka na sekundę, a następnie wybierze rozszerzenie.
możesz czekać na sygnał wybierania, używając w zamiast P.
dodawanie kodów krajów
kody krajów można dodawać, dodając + 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 dla lokalnego SEO
jednym z moich ulubionych udogodnień noszenia smartfona jest wyszukiwanie lokalnej firmy, a wynik w Google daje mi klikalny numer telefonu. Mogę kliknąć numer, aby wykonać połączenie bez konieczności zapisywania go lub próbować go zapamiętać. Ta funkcja jest teraz koniecznością. Na szczęście możesz dodać go do swojej witryny, aby Google mogło podać Twój numer telefonu w lokalnych wyszukiwaniach.
odbywa się to za pomocą mikrodanych., Mikrodane informują Wyszukiwarki, że numery są numerem telefonu, więc są wyświetlane jako klikalny link do połączenia. Możesz to utworzyć, wzbogacając znaczniki o kilka tagów dla wyszukiwań lokalnych.
na przykład kod może wyglądać tak:
Inne wywołania do akcji
dzięki HTML5 nie ograniczasz się do numerów telefonów. Możesz dodać inne połączenia do akcji, takie jak e-mail, wiadomości, faks itp., Protokoły HTML5 obejmują:
- tel: – miejsce połączenia telefonicznego
- mailto: – otwórz aplikację e – mail
- callto: otwórz Skype
- sms: – Wyślij wiadomość tekstową
- fax: – Wyślij faks
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 strony kontaktowej
jednym z najlepszych miejsc do dodania linku telefonicznego jest Twoje dane kontaktowe na stronie Kontakt.,
niezależnie od tego, czy używasz edytora klasycznego, czy nowego edytora Gutenberga, musisz wyświetlić wersję tekstową strony. W edytorze klasycznym Kliknij kartę Tekst. W programie Gutenberg kliknij trzy kropki w prawym górnym rogu i wybierz Edytor kodu.
Dodaj kod zamiast swojego numeru telefonu.
Wyjdź z edytora kodu lub przejrzyj stronę, a zobaczysz, że Twój numer telefonu jest teraz klikalnym linkiem.,
Tworzenie kodu dla linku e-mail lub URL
kod HTML dla wiadomości e-mail to mailto: adres e-mail jest dodawany na końcu, w ten sposób:
podobnie jak link telefonu, możesz użyć części wizualnej, aby dodać wiadomość, na przykład:
< href="mailto: "; Click here to send me an email</a>
oto przykład ze strony kontaktowej pakietu Spa layout Pack. Dodałem moduł blurb z ikoną i smsem wyślij e-mail. Wybrałem zakładkę tekst i dodałem e-mail HTML. Tekst można teraz kliknąć i otworzy aplikację 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 do zapisywania się do newslettera, wydarzeń itp. Aby połączyć się z nimi, Twój kod HTML będzie zawierał adres URL. Na przykład:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
dodałem kolejny blurb z kodem, aby zobaczyć stronę zdarzeń.
Wyłącz na pulpicie i tablecie
jednym z problemów z połączeniami jest to, że nie są one przydatne na komputerach stacjonarnych lub tabletach., Możesz to rozwiązać 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 jeden 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 podrzędnego lub Twój kod PHP zostanie nadpisany podczas aktualizacji motywu. Będzie to wymagało trochę stylów CSS, aby dobrze wyglądać.
na pulpicie nawigacyjnym przejdź do Wygląd> edytor> nagłówek motywu (lub Stopka motywu). Umieść kod w <body> część kodu. Szukałem znacznika zakończenia </a>, kliknąłem enter, aby dodać kilka dodatkowych linii i wkleiłem mój kod., Możesz zobaczyć kod tutaj w liniach 28 i 29.
Oto Jak to wygląda, gdy umieściłem link połączenia i link e-mail w nagłówku tematu Twenty Nineteen. Jest tam i działa, ale nie jest zbyt ładna. Można to naprawić, dodając przestrzeń kolorów i marginesów, aby wyróżniały się od siebie. Oczywiście odbywa się to w CSS.
stylizowanie linków
musisz dodać kod do dodatkowego pola CSS w Dostosowywaczu.
Twój kod może wyglądać tak:
To mówi CSS, jak stylować tekst dla tel: i mailto:., Zmienia czcionkę numeru telefonu na brązową, czcionkę e-mail na pomarańczową i dodaje niewielki margines po prawej stronie każdego linku.
CSS działa wszędzie tam, gdzie kod znajduje się w widżetach, postach itp. Możesz nawet używać ikon zamiast tekstu.
dodanie kodu do dodatkowego Menu Divi
Divi może zawierać Twój numer telefonu i e-mail w dodatkowym Menu nad nagłówkiem. Przycisk E-Mail jest już domyślnie klikalny, ale numer telefonu nie jest., Numer telefonu można przekształcić w łącze połączenia za pomocą podobnego numeru HTML, który był używany w poprzednich przykładach.
przejdź do dostosowywania motywu> nagłówek& 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 również dodać HTML. Dodałem HTML z poprzednich przykładów. Zwiększyłem również rozmiar czcionki numeru telefonu, aby ułatwić wyświetlanie obrazów.,
możesz pokazać, że można go kliknąć, dodając wiadomość do wizualnej części linku. Możesz zastąpić numer Komunikatem 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 testowanie linków 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 na swojej stronie głównej i wybierz opcję 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 łącza numer telefonu 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 jest to dobra wskazówka, że link robi coś.,
dodawanie linków do połączeń za pomocą wtyczek
Możesz również dodać link do swojego nagłówka za pomocą wtyczki. Zazwyczaj obejmują one funkcje stylizacji, dodawania wielu wywołań do akcji oraz możliwość włączania lub wyłączania w zależności od urządzenia odwiedzającego. Są również łatwe w konfiguracji i użyciu. Są to świetne wybory, jeśli nie chcesz obsługiwać kodu. Oto kilka najlepszych opcji.
przycisk Zadzwoń teraz
przycisk Zadzwoń teraz dodaje przycisk Kliknij, aby zadzwonić na dole ekranu dla użytkowników telefonów komórkowych. Nie pokazuje się na innych urządzeniach., Możesz również dodać tekst, jeśli chcesz. Przycisk jest ikoną telefonu, więc łatwo zrozumieć, do czego służy. Wszystko, co musisz zrobić, to włączyć przycisk i wprowadzić swój numer telefonu. Domyślne zachowanie można zmienić w ustawieniach zaawansowanych.
Więcej informacji
lepkie przyciski boczne
Ta wtyczka pozwala dodać przyciski, 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, gdzie są wyświetlane.
Więcej informacji
Pasek szybkiego kontaktu
ten dodaje pasek kontaktu, który zawiera klikalne linki do numeru telefonu, numeru faksu, nagłówka, adresu, poczty e-mail, sieci społecznościowych i niestandardowych adresów URL. Ustaw pasek na górze lub na dole i dostosuj rozmiar, kolor, kolor tekstu i łączy oraz sposób reakcji paska. Możesz również dostosować rozmiar. możesz dodawać więcej treści za pomocą hooków filtrów.,
Więcej informacji
mobilny Pasek kontaktowy
Ta wtyczka dodaje linki do twojej strony internetowej podczas przeglądania na urządzeniach mobilnych. Możesz wybrać, które linki są wyświetlane z 13 opcji, w tym Telefon, E-mail, Skype, niestandardowe adresy URL i sieci społecznościowe. Posiada integrację FontAwesome dla ikon. Możesz stylizować łącza i wybrać rozmiar, obramowanie, krycie itp. Ustaw menu u góry lub u dołu ekranu. Menu pozostaje na ekranie, gdy użytkownik przewija. Zawiera również przewijanie do góry i koszyk WooCommerce z przyciskami licznika przedmiotów.,
Więcej informacji
myśli końcowe
popularność smartfonów do dostępu do stron internetowych rośnie z dnia na dzień. Ta popularność bierze połączenia z bycia prostą wygodą do całkowitej konieczności. Dodawanie klikalnych numerów telefonów może sprawić różnicę między użytkownikami dzwoniącymi do Twojej firmy lub konkurencji. Na szczęście nie jest tak trudno stworzyć klikalne linki, aby dodać numery telefonów HTML do nagłówków, stopek, widżetów, stron i postów witryny WordPress.