sok üzleti webhely mutat egy telefonszámot, hogy ügyfeleik kapcsolatba léphessenek velük. Amikor az asztali számítógépek voltak a legnépszerűbb módja, hogy hozzáférjen a helyszínek, a felhasználók tudomásul veszi a telefonszámot, majd hívja egy külön eszköz. Természetesen a legtöbb felhasználó most már hozzáférhet a weboldalhoz, és ugyanarról az eszközről kezdeményezheti a telefonhívást. Ez lehetőséget ad egy híváshivatkozás hozzáadására-kattintható HTML telefonszám létrehozása.,
ebben a cikkben megnézzük, hogyan lehet hozzáadni egy hívás linket, valamint néhány más kattintható linket, például e-mailt vagy más CTA-t.
iratkozzon fel Youtube-csatornánkra
hogyan működnek a Híváshivatkozások
a telefonszám kattinthatóvá tétele könnyen elvégezhető a HTML segítségével. A HTML5 olyan protokollokat tartalmaz, mint a tel: and mailto: amelyeket a böngészők használhatnak. A böngészők eltérően reagálnak ezekre a protokollokra. Néhányan elindítják a telefonalkalmazást, majd hozzáadják a számot a kijelzőhöz, miközben arra várnak, hogy kattintson a Hívás gombra. Mások kezdeményezik a hívást, míg mások először megkérdezik, hogy rendben van-e.,
mivel ez HTML, a protokollokat bárhová felveheti a webhelyén, beleértve a fejlécet, láblécet, oldalsávokat, a bejegyzések és oldalak tartalmán belül, valamint a widgeteken belül.
HTML telefonszám Híváshivatkozás hozzáadása a webhelyéhez
adja hozzá a kódot szövegként a link megjelenítéséhez:
Href=tel: létrehozza a híváshivatkozást. Ez megmondja a böngészőnek, hogyan kell használni a számot.
“Tel: 123-456-7890” létrehozza a HTML telefonszámot. Az idézetekben szereplő szám az a szám, amelyet hívni fog.,
a>< A címkék a vizuális rész, és bármi lehet, amit szeretne, beleértve a telefonszámot, egy sor szöveget, mint például a “Click to Call Now” vagy a “Call Now”, vagy bármely más cselekvésre kívánt hívást. Meg kell leíró, hogy mi fog történni, ha rákattint.,
egy üzenet megjelenítése a szám helyett így néz ki:
<a href="tel:123-456-7890">CLICK TO CALL</a>
a látogatók látni fogják a szöveget, de amikor rákattintanak, látják telefonjuk tárcsázási képernyőjét, a szám készen áll arra, hogy rákattintsanak a hívás gombra.
kiterjesztés hozzáadása
egyes telefonszámok kiterjesztéssel rendelkeznek. Hozzáadhat olyan kódot, amely rövid szünetet hoz létre a kiterjesztési szám tárcsázása előtt. A P hozzáadása a kiterjesztés előtt egy másodperces szünetet eredményez., A kód így nézhet ki:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Ez tárcsázza a számot, vár egy másodpercet, majd tárcsázza a kiterjesztést.
lehet, hogy várni a tárcsahang segítségével w helyett p.
hozzátéve országkódok
országkódok lehet hozzáadni, beleértve a + együtt az ország kódját, mielőtt a telefonszámot., Egy példa így nézhet ki:
<a href="tel:+1123-456-7890">123-456-7890</a>
Microdata hozzáadása a helyi SEO
az okostelefon hordozásának egyik kedvenc kényelme az, amikor helyi vállalkozást Keresek, és a Google eredménye egy kattintható telefonszámot ad nekem. Rákattinthatok a számra a hívás kezdeményezéséhez anélkül, hogy le kellene írnom, vagy meg kellene tanulnom. Ez a funkció most szükségszerű. Szerencsére felveheti azt a webhelyére, így a Google megadhatja telefonszámát a helyi keresésekben.
Ez mikrodatákkal történik., A Microdata tájékoztatja a keresőmotorokat, hogy a számok telefonszámok, így kattintható híváshivatkozásként jelennek meg. Ezt úgy hozhatja létre, hogy a jelölést néhány címkével gazdagítja a helyi keresésekhez.
például a kód így nézhet ki:
Egyéb cselekvésre irányuló hívások
HTML5 esetén nem korlátozódik a telefonszámokra. Más hívásokat is hozzáadhat a műveletekhez, például e-mail, üzenetküldés, fax stb., A HTML5 protokollok a következők:
- tel: – tegyen egy telefonhívást
- mailto: – nyisson meg egy e – mail alkalmazást
- callto: nyissa meg a Skype
- sms – t: – küldjön szöveges üzenetet
- fax: – küldjön faxot
minden ilyen protokollt ugyanúgy használunk, mint fent láttuk. Nézzünk néhány példát.
A kód hozzáadása a kapcsolattartó oldalához
a híváshivatkozás hozzáadásának egyik legjobb helye a kapcsolatfelvételi oldalon található elérhetőségek között található.,
akár a klasszikus szerkesztőt, akár az új Gutenberg szerkesztőt használja, meg kell tekintenie az oldal szöveges verzióját. A klasszikus szerkesztőben kattintson a szöveg fülre. A gutenbergben kattintson a jobb felső sarokban található három pontra, majd válassza a Code Editor lehetőséget.
adja hozzá a kódot a telefonszám helyett.
Kilépés a Kódszerkesztőből vagy tekintse meg az oldal előnézetét, és látni fogja, hogy a telefonszám most kattintható link.,
Kódot az e-Mail Link, vagy URL
A HTML-kódot az e-mail mailto: Az e-mail cím bekerül a vége, így:
mint a telefon link, akkor használja a vizuális részét hozzáadni egy üzenetet, mint például:
< href="mailto: "; Click here to send me an email</a>
Itt egy példa a Gyógyfürdő elrendezés csomag kapcsolat oldalon. Hozzáadtam egy blurb modult egy ikonnal, A szöveg pedig e-mailt küld. Kiválasztottam a szöveg fület, majd hozzáadtam az e-mail HTML-t. A szöveg Most kattintható, majd megnyitja az e-mail alkalmazást.,
kód hozzáadása az URL-ek megnyitásához
a HTML megnyithatja a kívánt URL-t. Ez jó, ha olvasókat szeretne küldeni a hírlevélre való feliratkozáshoz, eseményekhez stb. A hozzájuk való hivatkozáshoz a HTML-kód tartalmazza az URL-t. Például:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
hozzáadtam egy másik blurb kódot az események oldal megtekintéséhez.
Disable on Desktop and Tablet
a híváshivatkozásokkal kapcsolatos egyik probléma az, hogy nem hasznosak asztali számítógépekhez vagy táblagépekhez., Ezt a Divi segítségével megoldhatja az egyes típusú eszközökre jellemző modulok létrehozásával, majd letilthatja azokat a többi eszközön.
itt két modult hoztam létre a telefonszámmal: az egyik tartalmaz egy HTML-telefonszámot, a másik nem. letiltottam a kattintható számot a táblagépeken és az asztali számítógépeken, így soha nem fogják látni a linket. Letiltottam a modult a telefonok linkje nélkül is, így a telefonhasználók csak a linket tartalmazó modult fogják látni.
A kód hozzáadása a fejléchez vagy lábléchez
a kódot hozzáadhatja a fejléchez vagy lábléchez a témaszerkesztő segítségével., Mindig használjon gyermek témát, vagy a PHP-kód felül lesz írva, amikor frissíti a témát. Ehhez szükség lesz néhány CSS stílusra, hogy jól nézzen ki.
a műszerfalon lépjen a megjelenés > szerkesztő > téma fejléc (vagy téma lábléc). Helyezze a kódot a<test> kódrészletbe. Kerestem egy végződő tag </a>, kattintott enter hozzá néhány extra sort, majd beillesztett a kódot., A kódot itt, a 28-as és a 29-es vonalon tekintheti meg.
így néz ki, amikor a Híváshivatkozást és az e-mail linket a húsz tizenkilenc téma fejlécébe helyeztem. Ott van és működik, de nem túl szép. Ez javítható a szín és a margó tér hozzáadásával, így elkülönülnek egymástól. Természetesen ez a CSS-ben történik.
A hivatkozások formázása
kódot kell hozzáadnia a testreszabó további CSS mezőjéhez.
a kód így nézhet ki:
Ez megmondja a CSS-nek, hogyan kell stílusosítani a szöveget tel: and mailto:., Ez megváltoztatja a telefonszámot betűtípus barna, az e-mail betűtípus narancssárga, majd hozzáad egy kis mozgásteret a jobb minden link.
a CSS bárhol működik, beleértve a widgeteket, hozzászólásokat stb. A szöveg helyett ikonokat is használhat.
A kód hozzáadása a Divi másodlagos menübe
Divi a fejléc feletti másodlagos menüben megadhatja telefonszámát és e-mail címét. Az e-mail gomb alapértelmezés szerint már kattintható, de a telefonszám nem., A telefonszám híváshivatkozássá alakítható egy hasonló HTML telefonszám használatával, amelyet az előző példákban használtunk.
ugrás a téma testreszabó> fejléc &navigáció > fejléc elemek. Ez ad egy szövegdobozt, ahol hozzáadhatja telefonszámát. Szerencsére nem korlátozódik csak a számokra. HTML-t is hozzáadhat. Hozzáadtam a HTML-t az előző példákból. Megnöveltem a telefonszám betűméretét is, hogy könnyebben láthassam a képeket.,
nyilvánvalóvá teheti, hogy kattintható egy üzenet hozzáadásával a link vizuális részéhez. A számot helyettesítheti az üzenettel, vagy hozzáadhatja az üzenetet a szám végéhez. Így nézhet ki:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Ez a példa csak a szöveget mutatja.
ebben hozzáadtam a telefonszámot a szöveghez.
tesztelés mobilon
azt javaslom, hogy tesztelje a linkeket a mobil eszközökkel, hogy megbizonyosodjon arról, hogy működik., Ha nincs hozzáférése okostelefonhoz, használhatja a Google Chrome fejlesztői eszközeit.
jobb egérgombbal kattintson a kezdőlapra, majd válassza az ellenőrzés lehetőséget. A képernyő bal felső sarkában megjelenik az eszközök listája. Válassza ki az egyiket, hogy megnézze, hogyan néz ki webhelye a képernyőn. A HTML telefonszám linkre kattintva megnyílik egy párbeszédpanel, amely felkéri Önt, hogy válasszon egy alkalmazást. Ha ezt látja, a link működik. Még mindig azt javaslom, hogy kipróbáljam egy tényleges okostelefonon, de ez jó jelzés arra, hogy a link csinál valamit.,
Híváshivatkozások hozzáadása a bővítményekkel
a fejléchez egy híváshivatkozást is hozzáadhat egy bővítménnyel. Ezek jellemzően olyan funkciókat tartalmaznak a stílushoz, több hívás hozzáadásához a művelethez, valamint a látogató eszközén alapuló be-vagy kikapcsoláshoz. Ezeket is könnyű beállítani és használni. Ezek nagyszerű választás, ha nem akarja kezelni a kódot. Íme néhány a legjobb lehetőségek közül.
hívás most gomb
hívás most gomb hozzáad egy kattintással hívható gombot a képernyő alján a mobil látogatók számára. Nem jelenik meg más eszközökön., Azt is hozzá szöveget, ha szeretné. A gomb egy telefon ikon, így könnyű megérteni,hogy mi az. Csak engedélyeznie kell a gombot, és be kell írnia a telefonszámát. Az alapértelmezett viselkedést a speciális beállításokban módosíthatja.
További információ
ragadós oldalsó gombok
Ez a plugin lehetővé teszi, hogy gombokat adjon hozzá, amelyek a webhely oldalához tapadnak, és a képernyőn maradnak, amikor a felhasználó gördül. Kattintható telefonszámot, e-mail címet, közösségi média ikonokat, valamint tárolóhelyeket adhat hozzá., Állítsa be őket a jobb vagy a bal, válassza animáció és borulás stílusok, testre a színeket, és válassza ki, hol mutatják.
További információ
Speed Contact Bar
Ez hozzáad egy kapcsolattartó sávot, amely kattintható linkeket tartalmaz egy telefonszámhoz, faxszámhoz, címsorhoz, e-mailhez, közösségi hálózatokhoz és egyéni URL-ekhez. Állítsa a sávot a felső vagy alsó, majd állítsa be a méret, szín, szín a szöveg, linkek, valamint, hogy a sáv reagál. A méretet is beállíthatja. a szűrőhorgok segítségével több tartalmat is hozzáadhat.,
További információ
mobil kapcsolat bár
Ez a plugin linkeket ad a webhelyére, amikor mobileszközökön nézik. Kiválaszthatja, hogy mely linkek jelennek meg a 13 lehetőség, beleértve a telefon, e-mail, Skype, egyéni URL-ek, valamint a szociális hálózatok. Ez FontAwesome integráció az ikonok. A linkeket formázhatja, kiválaszthatja a méretet, a szegélyt, az átlátszatlanságot stb. Állítsa be a menüt a képernyő tetején vagy alján. A menü a képernyőn marad, amikor a felhasználó gördül. Ez magában foglalja a görgetést a tetejére, a WooCommerce kosarat pedig az elemszámláló gombokkal.,
további információk
végső gondolatok
az okostelefonok népszerűsége a webhelyek eléréséhez minden nap növekszik. Ez a népszerűség a híváshivatkozásokat egyszerű kényelemtől a teljes szükségességig veszi igénybe. A kattintható telefonszámok hozzáadása különbséget tehet a vállalkozását vagy versenytársait hívó felhasználók között. Szerencsére nem olyan nehéz kattintható linkeket létrehozni, hogy HTML telefonszámokat adjon hozzá a WordPress webhely fejléceihez, lábléceihez, widgetjeihez, oldalaihoz és hozzászólásaihoz.