Mange business nettsteder viser et telefonnummer, slik at deres kunder kan kontakte dem. Når desktops var den mest populære måten å få tilgang til områder, brukere vil gjøre oppmerksom på telefonnummer, og ring fra en separat enhet. Selvfølgelig, de fleste brukere har nå tilgang til nettstedet og få telefonen til å ringe fra den samme enheten. Dette åpner en mulighet for å legge til en samtale link – lage en HTML-telefonnummer som er klikkbare.,
I denne artikkelen vil vi ta en titt på hvordan du kan legge til et anrop link, samt et par andre klikkbare lenker slik som e-post og andre CTAs.
Abonner på Vår Youtube-Kanal
Hvordan Samtalen Lenker Arbeid
Gjør et telefonnummer klikkbart er enkelt gjøres med HTML. HTML5 omfatter protokoller, for eksempel tlf: og mailto: at nettlesere kan bruke. Lesere reagerer forskjellig på disse protokollene. Noen vil lansere telefonen app og legge til nummeret i displayet mens du venter på deg til å klikke på Ring-knappen. Andre vil foreta et anrop, mens andre vil spørre om det er greit først.,
Siden det er HTML, kan du legge til protokollene hvor som helst på nettstedet, inkludert topp-og bunntekst, sidebars, innen innholdet i innlegg og sider, og i løpet av widgets.
Legge til en HTML-telefonnummeret Samtalen Link til din Hjemmeside
Legg til koden som tekst til stedet du vil ha koblingen:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tlf: skaper ringer link. Dette forteller nettleseren hvordan å bruke nummeret.
«Tel: 123-456-7890 «skaper HTML telefonnummer. Antall innenfor anførselstegnene er nummeret det vil ringe.,
antall innenfor >< – kodene er den visuelle delen, og det kan være alt du vil den skal være inkludert telefonnummer, en linje med tekst, for eksempel «Klikk for å Ringe» eller «Ring Nå», eller noen annen oppfordring til handling du vil. Det bør være beskrivende for hva som kommer til å skje når de klikker.,
Vise en melding i stedet for tallet ville se ut som dette:
<a href="tel:123-456-7890">CLICK TO CALL</a>
Dine besøkende vil se teksten, men når de klikker på det de ser oppringing skjermen på sine telefoner med dine nummer er klar for dem å klikke på ring-knappen.
Legge til en Utvidelse
Noen telefonnumre har en utvidelse. Du kan legge til koden som du vil lage en kort pause før du ringer internnummeret. Å legge til Side i front av utvidelsen vil legge til en en-sekunders pause., Koden kan se ut som dette:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Dette ringer nummeret, venter ett sekund, og slår deretter talesignalets extension.
Du kan få det til å vente på en summetone ved hjelp av w i stedet for p.
Legge til landskoder
landskoder kan legges til ved å inkludere a + sammen med landets koden før telefonnummeret., Et eksempel kan se ut som dette:
<a href="tel:+1123-456-7890">123-456-7890</a>
Legge til Mikrodata for Lokal SEO
En av mine favoritt fasilitetene bære rundt en smarttelefon er når jeg søker etter en lokal bedrift, og resultatet i Google gir meg en klikkbare telefonnummeret. Jeg kan klikke på nummeret for å ringe uten å måtte skrive det ned eller prøve å huske det. Denne funksjonen er nå en nødvendighet. Heldigvis, kan du legge det til din nettside, slik at Google kan oppgi telefonnummeret ditt i lokale søk.
Dette er gjort med mikrodata., Mikrodata forteller søkemotorene at tallene er et telefonnummer, slik de er vist som en klikkbar ring-kobling. Du kan lage dette ved å berike markup med noen koder for lokale søk.
For eksempel, koden kan se ut som dette:
Andre Samtaler til Handling
Med HTML5, du er ikke begrenset til telefonnumre. Du kan legge til andre samtaler til handling, for eksempel e-post, meldinger, faks, etc., HTML5-protokoller er:
- tel: – legg en samtale
- mailto: – åpne en e-post-appen
- callto: åpne Skype
- sms: – send en tekstmelding
- faks: – du kan sende en faks
Alle av disse protokollene er brukt på samme måte som vi så ovenfor. La oss se på et par eksempler.
å Legge til Koden på Kontakt-Siden
En av de beste stedene for å legge til en samtale linken er innenfor din kontakt info på Kontakt Oss siden.,
Enten du bruker den Klassiske Editor eller nye Gutenberg editor, vil du trenger for å vise Tekst-versjonen av siden. I den Klassiske redaktør klikk kategorien Tekst. I Gutenberg, klikk på de tre prikkene oppe til høyre og velg Kode Editor.
Legg til koden i stedet for telefonnummeret.
Avslutt Koden Editor eller Forhåndsvise siden og du vil se at telefonnummeret ditt er nå en klikkbar lenke.,
Opprette Koden for en E-Link (URL)
HTML-koden for e-post mailto: e-postadressen er lagt til slutten, som dette:
Akkurat som telefonen link kan du bruke den visuelle delen til å legge til en melding, for eksempel:
< href="mailto: "; Click here to send me an email</a>
Her er et eksempel fra Spa-layout pack kontakt-side. Jeg har lagt til en blurb-modul med et ikon og tekst for å Sende en E-post. Jeg valgte kategorien Tekst og lagt til den e-post i HTML. Teksten er nå klikkbare og vil åpne din e-post-appen.,
Legge til Kode for å Åpne Webadresser
Du kan ha HTML for å åpne en URL du ønsker. Dette er bra hvis du vil sende leserne til sider for nyhetsbrev registreringer, events, osv. For å koble til dem, HTML-kode vil inkludere URL-adressen. For eksempel:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
jeg har lagt til en annen blurb med kode for å se eventer-siden.
Deaktiver på Desktop og Nettbrett
Ett problem med samtale lenker er at de ikke er nyttige for stasjonære datamaskiner eller nettbrett., Du kan løse dette med Divi ved å lage moduler som er spesifikke for hver type enhet, og deretter deaktivere dem på andre enheter.
Her har jeg laget to moduler på telefonnummer: en inkluderer en HTML telefonnummer og andre ikke. Jeg har deaktivert en med det klikkbare telefonnummeret på nettbrett og datamaskiner, så de vil aldri se link. Jeg har også deaktivert modul uten linken for telefoner, så phone-brukere kan bare se modul med koblingen.
Legge til Koden din topp-eller Bunntekst
Du kan legge inn koden på din topp-eller bunntekst ved å bruke temaet redaktør., Bruk alltid et barn tema eller din PHP-kode vil bli overskrevet når du oppdaterer temaet. Dette vil kreve noen CSS styling for å se bra ut.
I Oversikten din, gå til Utseende > Editor > Tema Header (eller Tema Bunntekst). Plassere koden i <kroppen> – delen av koden. Jeg så for en slutt-tag </en>, klikket inn for å legge til et par ekstra linjer, og limes inn i koden min., Du kan se kode her på linjer 28 og 29.
Her er hvordan det ser ut når jeg satt ring link og e-post linken i overskriften på Nitten Tjue tema. Det er det og det fungerer, men det er ikke veldig pen. Dette er fixable ved å legge til farge og margin plass slik at de vil stå fra hverandre. Selvfølgelig, dette er gjort i CSS.
Styling Lenker
Du trenger å legge til kode for Ekstra CSS-feltet i Customizer.
– koden Din kan se ut som dette:
Dette forteller CSS hvordan stil teksten for tel: og mailto:., Det endrer telefon nummer skrift til brun, e-skrift oransje, og legger til en liten margin til høyre for hver link.
CSS fungerer uansett hvor koden er inkludert i moduler, innlegg, etc. Du kan også bruke ikoner i stedet for tekst.
Legge til Koden til Divi Sekundære Menyen
Divi kan inkludere din e-post og telefonnummer i den Sekundære Menyen over hodet. E-knappen er allerede klikkbare standard, men det telefonnummer som ikke er det., Telefonnummeret kan bli omgjort til en ring-kobling ved hjelp av en lignende HTML telefonnummer som vi har brukt i tidligere eksempler.
Gå til Temaet Customizer > Overskrift & Navigering > Header Elementer. Dette vil gi deg en tekstboks der du kan legge til ditt telefonnummer. Heldigvis, du er ikke begrenset til bare tall. Du kan også legge til HTML. Jeg har lagt til HTML fra de tidligere eksemplene. Jeg økte også telefonnummeret er skriftstørrelse for å gjøre det enklere å se for bilder.,
Du kan gjøre det tydelig at det er klikkbare ved å legge en melding til den visuelle delen av koblingen. Du kan bytte ut nummeret med meldingen, eller legge meldingen til slutten av nummeret. Det kan se ut som dette:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Dette eksemplet viser bare tekst.
I dette, jeg har lagt inn telefonnummer sammen med teksten.
Testing på Mobil
jeg anbefaler å teste koblinger med mobile enheter for å sikre at det fungerer., Hvis du ikke har tilgang til en smarttelefon kan du bruke Google Chrome utviklerverktøy.
Høyre klikk på hjemmesiden din, og velg Inspisere. Øverst i venstre hjørne av skjermen, vil du se en liste over enheter. Velg en å se hvordan nettstedet ser ut på skjermen. Ved å klikke HTML telefonnummer linken skal åpnes en dialogboks som ber deg om å velge en app. Hvis du ser denne koblingen fungerer. Jeg anbefaler likevel å prøve det på en vanlig smarttelefon, men dette er en god indikasjon på at koblingen det gjør noe.,
Legge til Samtale Lenker med Plugins
Du kan også legge til en samtale link til header med en plugin. De inkluderer vanligvis har for styling, legge til flere samtaler til handling, og muligheten til å bli slått på eller av, basert på den enheten de besøkende. De er også enkelt å sette opp og bruke. Disse er gode valg hvis du ikke ønsker å håndtere kode. Her er noen av de beste alternativene.
Ring Nå-Knappen
Ring Nå-Knappen legger en klikk-for-å-ringe-knappen nederst på skjermen for din mobile besøkende. Det trenger ikke vises på andre enheter., Du kan også legge til tekst hvis du vil. Knappen er en telefon ikonet slik at det er lett å forstå hva det er for. Alt du trenger å gjøre er å aktivere knappen og skriv inn ditt telefonnummer. Du kan endre standard virkemåte i de avanserte innstillingene.
få Mer Informasjon
Klebrig Side-Knappene
Denne plugin kan du legge til knapper som holder seg til siden på nettstedet ditt, og forblir på skjermen når brukeren ruller. Du kan legge til et klikkbart telefonnummer, e-postadresse, social media ikoner, og store steder., Sett dem på høyre eller venstre, velg animasjon og rollover stiler, kan du tilpasse farger, og velge hvor de vises.
få Mer Informasjon
Hastighet Kontakt Bar
Dette man legger til en kontakt i baren, som inneholder klikkbare linker for et telefonnummer, faksnummer, en overskrift, adresse, e-post, sosiale nettverk og tilpassede Nettadresser. Satt i baren til toppen eller bunnen og justere størrelse, farge, farge på tekst og lenker, og hvordan det bar reagerer. Du kan også justere størrelsen. du kan legge til mer innhold ved hjelp av filter kroker.,
få Mer Informasjon
Mobile Kontakt Bar
Denne plugin legger linker til ditt nettsted når de vises på mobile enheter. Du kan velge hvilke koblinger som er vist fra 13 alternativer, inkludert telefon, e-post, Skype, tilpassede Nettadresser, og sosiale nettverk. Det har FontAwesome integrasjon for ikonene. Du kan stil lenkene og velg størrelse, ramme, tetthet, etc. Sett i menyen på toppen eller bunnen av skjermen. Menyen vises på skjermen når brukeren ruller. Det inkluderer også bla til toppen og WooCommerce vogn med element teller knapper.,
få Mer Informasjon
Siste Tanker
populariteten av smarttelefoner å få tilgang til nettsteder øker hver dag. Denne populariteten tar samtale lenker fra å være en enkel tjeneste til en komplett nødvendighet. Å legge til klikkbare telefonnumre kan gjøre forskjellen mellom brukere å ringe din bedrift eller dine konkurrenter. Heldigvis, det er ikke så vanskelig å lage klikkbare linker for å legge til HTML telefonnumre til topptekst, bunntekst, widgets, sider og innlegg av din WordPress nettstedet.