Telefon Bağlantıları: Web Sitenize “Arayabilir” Bağlantılar ve CTA'lar Nasıl Eklenir

Birçok işletme web sitesi, müşterilerinin onlarla iletişim kurabilmesi için bir telefon numarası gösterir. Masaüstü bilgisayarlar sitelere erişmenin en popüler yolu olduğunda, kullanıcılar telefon numarasını not eder ve ayrı bir cihazdan ararlardı. Tabii ki, çoğu kullanıcı artık web sitesine erişiyor ve aynı cihazdan telefon görüşmesi yapıyor. Bu, bir arama bağlantısı ekleme, yani tıklanabilir bir HTML telefon numarası oluşturma fırsatı sunar.

Bu makalede, e-posta ve diğer CTA'lar gibi birkaç tıklanabilir bağlantının yanı sıra bir çağrı bağlantısının nasıl ekleneceğine bir göz atacağız.

Youtube Kanalımıza Abone Olun

Arama Bağlantıları Nasıl Çalışır?

Bir telefon numarasını tıklanabilir hale getirmek HTML ile kolayca yapılabilir. HTML5, tarayıcıların kullanabileceği tel: ve mailto: gibi protokolleri içerir. Tarayıcılar bu protokollere farklı yanıt verir. Bazıları telefon uygulamasını başlatacak ve Ara düğmesine tıklamanızı beklerken numarayı ekrana ekleyecektir. Diğerleri aramayı yapacak, diğerleri ise önce tamam olup olmadığını soracak.

HTML olduğu için, üstbilgi, altbilgi, kenar çubukları, yazıların ve sayfaların içeriği ve widget'lar dahil olmak üzere sitenizin herhangi bir yerine protokolleri ekleyebilirsiniz.

Web Sitenize HTML Telefon Numarası Çağrı Bağlantısı Ekleme

Kodu, bağlantının görünmesini istediğiniz konuma metin olarak ekleyin:

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

Href=tel: çağrı bağlantısını oluşturur. Bu, tarayıcıya numarayı nasıl kullanacağını söyler.

“Tel: 123-456-7890” HTML telefon numarasını oluşturur. Tırnak içindeki numara arayacağı numaradır.

>< etiketleri içindeki sayı görsel kısımdır ve telefon numarası, "Tıkla ve Ara" veya "Şimdi Ara" gibi bir metin satırı veya başka herhangi bir harekete geçirici mesaj dahil olmasını istediğiniz herhangi bir şey olabilir. istek. Tıkladıklarında ne olacağını açıklayıcı olmalıdır.

Numara yerine bir mesaj görüntülemek şöyle görünür:

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

Ziyaretçileriniz metni görecek, ancak tıkladıklarında telefonlarının arama ekranını, numaranızın arama düğmesine tıklamaları için hazır olduğunu görecekler.

Uzantı Ekleme

Bazı telefon numaralarının bir uzantısı vardır. Dahili numarayı çevirmeden önce kısa bir duraklama oluşturacak kodu ekleyebilirsiniz. Uzantının önüne P eklemek, bir saniyelik duraklama ekler. Kod şöyle görünebilir:

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

Bu numarayı çevirir, bir saniye bekler ve ardından dahili numarayı çevirir.

p yerine w kullanarak çevir sesini beklemesini sağlayabilirsiniz.

Ülke Kodları Ekleme

Ülke kodları, telefon numarasının önüne ülke kodunuzla birlikte + işareti konularak eklenebilir. Bir örnek şöyle görünebilir:

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

Yerel SEO için Mikro Veri Ekleme

Yanımda akıllı telefon taşımanın en sevdiğim kolaylıklarından biri, yerel bir işletme aradığım zaman Google'daki sonucun bana tıklanabilir bir telefon numarası vermesidir. Numarayı yazmak veya ezberlemeye çalışmak zorunda kalmadan arama yapmak için numaraya tıklayabilirim. Bu özellik artık bir zorunluluktur. Neyse ki, Google'ın yerel aramalarda telefon numaranızı sağlaması için web sitenize ekleyebilirsiniz.

Bu mikro verilerle yapılır. Mikro veriler, arama motorlarına numaraların bir telefon numarası olduğunu bildirir ve böylece tıklanabilir bir arama bağlantısı olarak gösterilir. Yerel aramalar için işaretlemeyi birkaç etiketle zenginleştirerek bunu oluşturabilirsiniz.

Örneğin, kod şöyle görünebilir:

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

Diğer Harekete Geçirici Çağrılar

HTML5 ile telefon numaralarıyla sınırlı değilsiniz. E-posta, mesajlaşma, faks vb. gibi başka harekete geçirici mesajlar ekleyebilirsiniz. HTML5 protokolleri şunları içerir:

• tel: – bir telefon görüşmesi yapın
• mailto: – bir e-posta uygulaması açın
• callto: Skype'ı açın
• sms: – bir metin mesajı gönderin
• faks: – bir faks gönder

Bu protokollerin tümü, yukarıda gördüğümüzle aynı şekilde kullanılır. Birkaç örneğe bakalım.

Kodu İletişim Sayfanıza Ekleme

Çağrı bağlantısı eklemek için en iyi yerlerden biri, Bize Ulaşın sayfanızdaki iletişim bilgilerinizdir.

İster Klasik Düzenleyiciyi, ister yeni Gutenberg düzenleyicisini kullanıyor olun, sayfanın Metin sürümünü görüntülemeniz gerekir. Klasik düzenleyicide Metin sekmesine tıklayın. Gutenberg'de sağ üstteki üç noktayı tıklayın ve Code Editor öğesini seçin.

Kodu telefon numaranızın yerine ekleyin.

Kod Düzenleyiciden çıkın veya sayfayı önizleyin ve telefon numaranızın artık tıklanabilir bir bağlantı olduğunu göreceksiniz.

E-posta Bağlantısı veya URL için Kod Oluşturma

E-posta için HTML kodu mailto'dur: E-posta adresi aşağıdaki gibi sona eklenir:

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

Telefon bağlantısında olduğu gibi, aşağıdaki gibi bir mesaj eklemek için görsel kısmı kullanabilirsiniz:

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

İşte Spa yerleşim paketinin iletişim sayfasından bir örnek. Bir simge ve E-posta Gönder metni içeren bir tanıtım yazısı modülü ekledim. Metin sekmesini seçtim ve e-posta HTML'sini ekledim. Metin artık tıklanabilir ve e-posta uygulamanızı açacaktır.

URL'leri Açmak için Kod Ekleme

İstediğiniz herhangi bir URL'yi açmak için HTML'ye sahip olabilirsiniz. Bu, okuyucuları bülten kayıtları, etkinlikler vb. için sayfalara göndermek istiyorsanız iyidir. Bunlara bağlantı vermek için HTML kodunuz URL'yi içerecektir. Örneğin:

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

Olaylar sayfasını görmek için kodlu başka bir tanıtım yazısı ekledim.

Masaüstünde ve Tablette Devre Dışı Bırak

Çağrı bağlantılarıyla ilgili bir sorun, bunların masaüstü bilgisayarlar veya tabletler için kullanışlı olmamasıdır. Bunu Divi ile her cihaz tipine özel modüller oluşturup diğer cihazlarda devre dışı bırakarak çözebilirsiniz.

Burada, telefon numarasıyla iki modül oluşturdum: biri HTML telefon numarası içeriyor, diğeri içermiyor. Tabletlerde ve masaüstlerinde tıklanabilir numaraya sahip olanı devre dışı bıraktım, böylece bağlantıyı asla göremezler. Ayrıca telefonlar için bağlantısı olmayan modülü devre dışı bıraktım, böylece telefon kullanıcıları sadece bağlantıya sahip modülü görecekler.

Kodu Üst Bilginize veya Alt Bilginize Ekleme

Kodu, tema düzenleyiciyi kullanarak üstbilginize veya altbilginize ekleyebilirsiniz. Daima bir alt tema kullanın, aksi takdirde temayı güncellediğinizde PHP kodunuzun üzerine yazılır. Bu, iyi görünmesi için bazı CSS stilleri gerektirecektir.

Panonuzdan Görünüm > Düzenleyici > Tema Üstbilgisi (veya Tema Altbilgisi ) seçeneğine gidin. Kodu, kodun <body> bölümüne yerleştirin. Bir bitiş etiketi </a> aradım, birkaç satır daha eklemek için enter'a tıkladım ve koduma yapıştırdım. Kodu burada 28 ve 29. satırlarda görebilirsiniz.

Çağrı bağlantısını ve e-posta bağlantısını Twenty Nineteen temasının başlığına yerleştirdiğimde şöyle görünüyor. Orada ve çalışıyor, ama çok güzel değil. Bu, renk ve kenar boşluğu ekleyerek düzeltilebilir, böylece birbirlerinden ayrı dururlar. Tabii ki, bu CSS'de yapılır.

Bağlantıları Şekillendirme

Özelleştirici'deki Ek CSS alanına kod eklemeniz gerekir.

Kodunuz şöyle görünebilir:

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

Bu, CSS'ye tel: ve mailto: metnine nasıl stil verileceğini söyler. Telefon numarası yazı tipini kahverengi, e-posta yazı tipini turuncu olarak değiştirir ve her bağlantının sağına küçük bir kenar boşluğu ekler.

CSS, widget'lar, gönderiler vb. içinde kodun olduğu her yerde çalışır. Metin yerine simgeler bile kullanabilirsiniz.

Kodu Divi İkincil Menüsüne Ekleme

Divi, telefon numaranızı ve e-postanızı başlığın üzerindeki İkincil Menü'ye ekleyebilir. E-posta düğmesi varsayılan olarak zaten tıklanabilir, ancak telefon numarası değil. Telefon numarası, önceki örneklerde kullandığımız benzer bir HTML telefon numarası kullanılarak bir arama bağlantısına dönüştürülebilir.

Tema Özelleştirici > Başlık ve Gezinme > Başlık Öğeleri'ne gidin . Bu size telefon numaranızı ekleyebileceğiniz bir metin kutusu verecektir. Neyse ki, sadece sayılarla sınırlı değilsiniz. HTML de ekleyebilirsiniz. HTML'yi önceki örneklerden ekledim. Ayrıca resimlerin görülmesini kolaylaştırmak için telefon numarasının yazı tipi boyutunu da artırdım.

Bağlantının görsel kısmına bir mesaj ekleyerek tıklanabilir olduğunu açıkça belirtebilirsiniz. Numarayı mesajla değiştirebilir veya mesajı numaranın sonuna ekleyebilirsiniz. Şuna benzeyebilir:

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

Bu örnek sadece metni gösterir.

Bu yazıda, telefon numarasını metinle birlikte ekledim.

Mobilde Test Etme

Çalıştığından emin olmak için bağlantıları mobil cihazlarla test etmenizi öneririm. Bir akıllı telefona erişiminiz yoksa Google Chrome'un Geliştirici Araçlarını kullanabilirsiniz.

Ana sayfanıza sağ tıklayın ve İncele öğesini seçin. Ekranınızın sol üst köşesinde bir cihaz listesi göreceksiniz. Web sitenizin o ekranda nasıl göründüğünü görmek için birini seçin. HTML telefon numarası bağlantısına tıklamak, bir uygulama seçmenizi isteyen bir iletişim kutusu açmalıdır. Bunu görürseniz, bağlantı çalışır. Yine de gerçek bir akıllı telefonda denemenizi tavsiye ederim, ancak bu, bağlantının bir şeyler yaptığını gösteren iyi bir göstergedir.

Eklentilerle Çağrı Bağlantıları Ekleme

Bir eklenti ile başlığınıza bir çağrı bağlantısı da ekleyebilirsiniz. Tipik olarak, stil oluşturma, birden fazla harekete geçirici mesaj ekleme ve ziyaretçinin cihazına göre açılıp kapatılma özelliklerini içerirler. Ayrıca kurulumu ve kullanımı kolaydır. Kodla uğraşmak istemiyorsanız bunlar harika seçeneklerdir. İşte en iyi seçeneklerden birkaçı.

Şimdi Ara Düğmesi

Şimdi Ara Düğmesi, mobil ziyaretçileriniz için ekranın alt kısmına bir tıkla ve ara düğmesi ekler. Diğer cihazlarda görünmüyor. İsterseniz metin de ekleyebilirsiniz. Düğme bir telefon simgesidir, bu nedenle ne için olduğunu anlamak kolaydır. Tek yapmanız gereken düğmeyi etkinleştirmek ve telefon numaranızı girmek. Gelişmiş ayarlarda varsayılan davranışı değiştirebilirsiniz.

Daha fazla bilgi

Yapışkan Yan Düğmeler

Bu eklenti, web sitenizin yanına yapışan ve kullanıcı kaydırdığında ekranda kalan düğmeler eklemenize olanak tanır. Tıklanabilir bir telefon numarası, e-posta adresi, sosyal medya simgeleri ve mağaza konumları ekleyebilirsiniz. Bunları sağa veya sola ayarlayın, animasyon ve rollover stillerini seçin, renkleri özelleştirin ve nerede gösterileceğini seçin.

Daha fazla bilgi

Hız İletişim Çubuğu

Bu, telefon numarası, faks numarası, başlık, adres, e-posta, sosyal ağlar ve özel URL'ler için tıklanabilir bağlantılar içeren bir iletişim çubuğu ekler. Çubuğu yukarı veya aşağı ayarlayın ve metnin ve bağlantıların boyutunu, rengini, rengini ve çubuğun nasıl tepki vereceğini ayarlayın. Boyutu da ayarlayabilirsiniz. filtre kancalarını kullanarak daha fazla içerik ekleyebilirsiniz.

Daha fazla bilgi

Mobil İletişim Çubuğu

Bu eklenti, mobil cihazlarda görüntülendiğinde web sitenize bağlantılar ekler. Telefon, e-posta, Skype, özel URL'ler ve sosyal ağlar dahil olmak üzere 13 seçenek arasından hangi bağlantıların gösterileceğini seçebilirsiniz. Simgeler için FontAwesome entegrasyonuna sahiptir. Bağlantıları biçimlendirebilir ve boyutu, sınırı, opaklığı vb. seçebilirsiniz. Menüyü ekranın üstünde veya altında ayarlayın. Kullanıcı kaydırdığında menü ekranda kalır. Ayrıca, öğe sayacı düğmeleriyle yukarı kaydırma ve WooCommerce sepetini de içerir.

Daha fazla bilgi

Son düşünceler

Akıllı telefonların web sitelerine erişim popülaritesi her geçen gün artıyor. Bu popülerlik, arama bağlantılarını basit bir kolaylıktan tam bir gereklilik haline getiriyor. Tıklanabilir telefon numaraları eklemek, işletmenizi arayan kullanıcılar veya rakipleriniz arasında fark yaratabilir. Neyse ki, WordPress web sitenizin başlıklarına, alt bilgilerine, widget'larına, sayfalarına ve gönderilerine HTML telefon numaraları eklemek için tıklanabilir bağlantılar oluşturmak o kadar da zor değil.

Senden duymak istiyoruz. Web sitenize arama bağlantıları eklediniz mi? Aşağıdaki yorumlarda deneyiminizi bize bildirin.

Jane Kelly / Shutterstock.com aracılığıyla Öne Çıkan Görsel