Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te Tarayıcı Sekmesi Bildirimi Nasıl Kolayca Eklenir

Ziyaretçilerinizin sekme değiştirdiklerinde bile içeriğinizle ilgilenmelerini sağlamak için yaratıcı bir yol arıyorsanız, WordPress’e tarayıcı sekmesi bildirimleri eklemek mükemmel bir fikirdir.

Tarayıcı sekmesi bildirimleri, bir tarayıcı sekmesinin kendisinde görünen dinamik mesajlar veya uyarılardır. İnsanların dikkatini çekmeye ve onları sitenize geri getirmeye yardımcı olabilirler. Bu ince özellik, etkileşimi artırabilir ve hedeflerinize ulaşmanıza yardımcı olabilir.

WPForms gibi birçok ortak markamızda tarayıcı sekmesi bildirimlerini kullanıyoruz. Deneyimlerimize göre, web sitesinden ayrılan birçok kullanıcının tarayıcı sekmesinde bir bildirim gördükten sonra geri dönme eğiliminde olduğunu fark ettik.

Bu makalede, WordPress’te tarayıcı sekmesi bildirimlerini nasıl kolayca ekleyebileceğinizi göstereceğiz.

How to Add Browser Tab Notification in WordPress

Tarayıcı Sekmesi Bildirimi Nedir?

Tarayıcı sekmesi bildirimi, ziyaretçilerimizden biri tarayıcılarında farklı bir siteye bakarken web sitenizin sekmesinde görünen bir mesajdır.

WordPress web sitenize bir tarayıcı sekmesi bildirim özelliği ekleyerek, sayfanızdan çıkmak için başka bir sekme açtıkları anda kullanıcının dikkatini çekebilirsiniz.

Örneğin, web sitenizin favicon’unu değiştirebilir, canlandırabilir, özel bir mesaj yazabilir veya sadece sekmeyi flaşlayabilirsiniz.

Bir online mağazanız varsa, tarayıcı sekmesi bildirimleri size gerçekten yardımcı olabilir. Bu bildirimler dikkati dağılan müşterileri geri getirecek, alışveriş sepetini terk etme oranlarını düşürecek ve müşteri etkileşimini artıracaktır.

Bu özelliği kullanarak müşterilerinizi alışveriş sepetini terk etme konusunda uyarabilir, hatta sitenize tekrar gelmeleri halinde indirim teklif edebilirsiniz.

İşte bir tarayıcı sekmesi bildirimi örneği.

Browser tab notification example gif

Bununla birlikte, WordPress’te farklı türde tarayıcı sekmesi bildirimlerini nasıl kolayca ekleyebileceğinizi göstereceğiz.

Seçtiğiniz yönteme geçmek için aşağıdaki bağlantıları kullanabilirsiniz:

Tarayıcı Sekmesi Bildirimleri Eklemek için WPCode’u Yükleyin

WordPress’e özel kod ekleyerek sitenize tarayıcı sekmesi bildirimlerini kolayca ekleyebilirsiniz. Genellikle temanızın functions.php dosyasını düzenlemeniz gerekir, ancak bu küçük bir hatada bile web sitenizi bozabilir.

Bu nedenle piyasadaki en iyi WordPress kod parçacıkları eklentisi olan WPCode‘u kullanmanızı öneririz. Sitenize özel kod eklemenin en güvenli ve en kolay yoludur.

İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakabilirsiniz.

Not: WPCode’un bu eğitim için kullanabileceğiniz ücretsiz bir sürümü de vardır. Ancak, ücretli plana yükseltmek size daha fazla özelliğe erişim sağlayacaktır.

Etkinleştirmenin ardından WordPress yönetici kenar çubuğunuzdan Code Snippets ” + Snippet Ekle sayfasını ziyaret edin.

Şimdi, farenizi ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin üzerine getirin ve altındaki ‘Snippet Kullan’ düğmesine tıklayın.

Add new snippet

Bu sizi ‘Özel Snippet Oluştur’ sayfasına götürecektir.

Hangi tür tarayıcı sekmesi bildirimi kullanırsanız kullanın, kodu buraya gireceksiniz.

Create Custom Snippet page

Tip 1: Yeni Güncellemeleri Tarayıcı Sekmesi Bildirimi Olarak Gösterme

Kullanıcılarınızın sitenizde yayınlanan yeni güncellemeler hakkında uyarılmasını istiyorsanız bu yöntem tam size göre. Kaç yeni öğeyi kaçırdıklarını bildirmek için sekmede bir sayı görünecektir.

Örneğin, bir WooCommerce mağazanız varsa ve envantere yeni ürünler eklediyseniz, kullanıcı tarayıcı sekmesi bildiriminde kaç yeni ürün eklendiğini gösteren bir sayı görecektir.

Bunu aşağıdaki resimde görebilirsiniz:

New Updates as browser tab notification

‘Özel Snippet Oluştur’ sayfasına geldiğinizde, snippet’inizi adlandırmanız gerekir. Kodu tanımlamanıza yardımcı olacak herhangi bir şey seçebilirsiniz.

Ardından, sağdaki açılır menüden ‘Kod Türü’ olarak ‘JavaScript Snippet’i seçin.

Select JavaScript as Code Type

Ardından, tek yapmanız gereken aşağıdaki kod parçacığını kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırmaktır:

let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

Bunu yaptıktan sonra, ‘Ekleme’ bölümüne ilerleyin. İki seçenek bulacaksınız: ‘Otomatik Ekle’ ve ‘Kısa Kod’.

Sadece ‘Otomatik Ekle’ seçeneğini seçin ve kodunuz otomatik olarak sitenize eklensin ve çalıştırılsın.

Yeni güncellemeleri yalnızca kısa kodu eklediğiniz belirli sayfalarda göstermek istiyorsanız ‘Kısa Kod’ yöntemini kullanabilirsiniz.

Choose an insertion method

Bundan sonra, sayfanın en üstüne geri gidin ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin.

Son olarak, ayarlarınızı kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.

Save your code snippet

Bu işlem tamamlandığında, özel kod parçacığınız sitenize eklenecek ve çalışmaya başlayacaktır.

Tip 2: Favicon’ları Tarayıcı Sekmesi Bildirimi Olarak Değiştirme

Bu yöntemle, kullanıcılar başka bir sekmeye geçtiğinde sitenizin tarayıcı sekmesinde farklı bir favicon göstereceksiniz.

Favicon, web tarayıcılarında görünen küçük bir resimdir. Çoğu işletme logosunun daha küçük bir versiyonunu kullanır.

Favicon as web browser notification

Tarayıcı sekmenizdeki faviconları değiştirmek için WPCode eklentisini kullanacağız.

Öncelikle WordPress yönetici panelinizdeki Code Snippets ” + Add Sn ippets sayfasını ziyaret edin ve ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’ düğmesine tıklayın.

Bu sizi kod parçacığınız için bir başlık girerek başlayabileceğiniz ‘Özel Snippet Oluştur’ sayfasına götürecektir.

Şimdi, sağdaki açılır menüden ‘Kod türü’ olarak ‘HTML Snippet’i seçmeniz yeterlidir.

Choose HTML as your Code Type

Bunu yaptıktan sonra, aşağıdaki kodu kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırın:

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>

<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

Kodu yapıştırdıktan sonra, örnek favicon bağlantılarını koddan kaldırın ve kendi resim bağlantılarınızla değiştirin.

Kodumuzda vurgulanan bağlantıları aşağıda görebilirsiniz.

Paste the HTML code and remove the example favicon image links

Unutmayın, favicon olarak seçtiğiniz görseller WordPress sitenizin medya kütüphanesine zaten yüklenmiş olmalıdır.

Aksi takdirde, kod çalışmaz ve favicon’unuz değişmez.

Change favicon image links

Bunu yaptıktan sonra, ‘Ekleme’ bölümüne ilerleyin.

Kodu her sayfaya otomatik olarak yerleştirmek istiyorsanız ‘Otomatik Ekle’ seçeneğini belirleyebilirsiniz.

Choose an insertion method

Yalnızca belirli sayfalardaki favicon’u değiştirmek için ‘Kısa kod’ seçeneğini seçin ve kenar çubuğu widget’ları veya içerik düzenleyicinin alt kısmı gibi kısa kod özellikli herhangi bir alana yapıştırın.

Ardından, sayfanın en üstüne gidin ve sağ üst köşedeki anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve ardından ‘Snippet’i Kaydet’ düğmesine tıklayın.

Bundan sonra, faviconunuz bir tarayıcı sekmesi bildirimi olarak değişmeye başlayacaktır.

Tip 3: Site Başlığını Tarayıcı Sekmesi Bildirimi Olarak Değiştirme

Ziyaretçilerinizin dikkatini yeniden çekmek için site başlığını değiştirmek istiyorsanız bu yöntem tam size göre.

Bu kod parçacığını kullanarak, kullanıcılar tarayıcıda başka bir sekmeye geçtiğinde sitenizin başlığı göz alıcı bir mesaj gösterecek şekilde değişecektir.

Changing site title in a browser

Site başlığınızı bir tarayıcı sekmesi bildirimi olarak değiştirmek için WPCode eklentisini kullanacağız.

‘Özel Snippet Oluştur’ sayfasına ulaşmak için, yönetici kenar çubuğundan Code Snippets ” +Add Sn ippets sayfasını ziyaret edin ve ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’a tıklayın.

Add new snippet

Artık ‘Özel Snippet Oluştur’ sayfasında olduğunuza göre, kod parçacığınız için bir başlık girerek başlayın.

Ardından, sağdaki açılır menüden ‘Kod Türü’ olarak ‘JavaScript’i seçin.

Select JavaScript as Code Type

Ardından, tek yapmanız gereken aşağıdaki kod parçacığını kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırmaktır:

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

Kodu yapıştırdıktan sonra düzenleyebilir ve tarayıcı sekmenizde görüntülemek istediğiniz mesajı kodun içine yazabilirsiniz.

İstediğiniz mesajı yazmak için var altTitle = "Return to this page!"; satırına gidin ve tarayıcı sekmesi bildiriminiz için mesaj içeren yer tutucu metni kaldırın.

Type a sentence of your choosing

Ardından, ‘Ekleme’ bölümüne ilerleyin ve her sayfada tarayıcı sekmesi bildiriminizi etkinleştirmek için ‘Otomatik Ekleme’ modunu seçin.

Ancak, göz alıcı mesajınızın yalnızca belirli sayfalarda yer almasını istiyorsanız, ‘Kısa Kod’ seçeneğini tercih edebilirsiniz.

Örneğin, bu kodu yalnızca ‘Sepete Ekle’ sayfasına eklemek isteyebilirsiniz, böylece web sitenizdeki alışveriş sepetini terk etme oranlarını düşürebilirsiniz.

Bu durumda Kısa Kod seçeneğini tercih edebilirsiniz.

Choose an insertion mode

Bundan sonra, ‘Konum’ seçeneğine ilerleyin ve yanındaki açılır menüye tıklayın.

Buradan, ‘Site Genelinde Altbilgi’ seçeneğini seçin.

Choose Site Wide Footer as location

Son olarak, sayfanın en üstüne geri gidin ve anahtarı ‘Etkin Değil’den ‘Etkin’e getirin.

Ardından, ayarlarınızı kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.

Click on the Save Snippet button

İşte bu kadar! Artık tarayıcı sekmesi bildiriminiz sitenizden ayrılan kullanıcıları uyaracaktır.

Bonus: WordPress Sitenize Web Push Bildirimleri Ekleyin

Ziyaretçileri geri getirmenin ve alışveriş sepetini terk etme oranlarını düşürmenin bir başka yolu da kullanıcılarınıza web push bildirimleri göndermektir. Bu bildirimler, ziyaretçileriniz web sitenizde değilken bile onlara gönderilen tıklanabilir kısa mesajlardır.

Piyasadaki en iyi anlık bildirim yazılımı olan PushEngage ile bunu kolayca yapabilirsiniz.

PushEngage

Yeni blog yazısı bildirimlerini veya özel mesajları otomatik olarak göndermenize ve herhangi bir kod olmadan damla kampanyaları oluşturmanıza olanak tanır.

Eklenti ayrıca önceden hazırlanmış şablonlar, A/B testi, kullanıcı segmentasyonu, akıllı katılım hatırlatıcıları, özel tetiklenen kampanyalar ve etkileşimli mesaj seçenekleri gibi başka özellikler de sunuyor.

Tüm bu özellikleri kullanarak terk edilmiş sepet bildirimleri oluşturabilir, mesajlar planlayabilir ve fiyat düşüşü uyarıları göndererek daha fazla site trafiği sağlayabilirsiniz.

Toggle auto push switch

Daha fazla bilgi için WordPress’te web push bildirimlerinin nasıl ekleneceğine ilişkin başlangıç kılavuzumuza bakın.

Umarız bu makale WordPress’te tarayıcı sekmesi bildirimlerinin nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca WordPress’te simgeli özellik kutularının nasıl ekleneceği hakkındaki eğitimimize ve sitenizi büyütmek için en iyi WordPress jQuery eklentileri için en iyi seçimlerimize göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

3 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carole

    Is it possible to make the alternate tabs have a longer time between changes? I think that constant flashing would get annoying and people might just close out the tab.

    • WPBeginner Support

      Yes, it would depend on the methods you were using, you would change the numbers that are in the thousands for the code snippets as those determine how many milliseconds to wait for the code.

      Yönetici

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.