WordPress Siteye Bildirim Çubuğu Ekleme

Web sitede bildirim çubukları kullanmak, herhangi bir duyuru, teklif, indirim vb. gibi durumlar için son derece kullanışlı ve katılımı artırma konusunda oldukça etkilidir. Bu yazıda, WordPress bildirim çubuğu nasıl eklenir sorusunu yanıtladık…

Notification Bar, Hello Bar, Akıllı Çubuk, Kayan Çubuk ve Uyarı Çubuğu olarak da adlandırılan bildirim çubuğu genellikle web sitelerinin en üstünde bazen de en altında görebileceğiniz dikkat çekici çubuklardır. Bildirim çubuğu, hedef kitlenizle daha iyi etkileşim kurmanıza yardımcı olabilecek önemli bir bileşendir.

Önemli bilgilendirmeler, duyurular, teklifler, aboneliğe teşvik, sosyal medya hesaplarına davet, indirim haberleri , belirli eylemleri gerçekleştirmeye yönlendirmek gibi aklınıza gelebilecek birçok amaç için bildirim çubukları kullanılabilir.

WordPress siteye bildirim çubuğu eklemenin birçok faydası vardır, ancak en önemlisi dönüşüm oranlarını artırmasıdır.

Peki, WordPress bildirim çubuğu nasıl eklenir? Sitenize hem bildirim çubuğu eklentileri kullanarak hem de eklenti kullanmadan bildirim çubuğu ekleyebilirsiniz. Aşağıdaki seçenekleri inceleyip sizin için en uygun olanı kullanabilirsiniz.

Eklenti Kullanarak WordPress Siteye Bildirim Çubuğu Ekleme

WordPress eklentileri işleri daha kısa sürede halletmenizi kolaylaştırarak zamandan tasarruf etmenizi sağlar. Bildirim çubuğu eklentileri de işinize değer katacak hızlı çözüm eklentilerindendir. WordPress’e bildirim çubuğu eklemenize yardımcı olabilecek en popüler eklentilerden üçünü aşağıya ekledik.

1. WPFront Bildirim Çubuğu Eklentisi

WPFront, sade ve pratik bir bir bildirim çubuğu eklentisidir. Kurulumu da kullanımı da gayet kolaydır. Çok hafif olduğu için web sitenizi yavaşlatmaz. Sadece birkaç adımda web siteniz için mükemmel bir bildirim çubuğu oluşturabilirsiniz.

Öncelikle WordPress admin panelden Eklentiler Yeni Ekle bölümüne gidin ve arama kısmına WPFront yazın. Eklentiyi kurup etkinleştirin (bkz- WordPress Eklenti Yükleme)

WPFront Notification Bar

Etkinleştirmenin ardından eklentinin ayarlar sayfasına yönlendirileceksiniz (ayarlara daha sonra bakmak isterseniz (WordPress menüden Ayarlar>Notification Bar yolunu izleyebilirsiniz).

  • Eklentinin ayarlarını yapılandırmak için önce Enabled seçeneğini işaretleyin.
WPFront Notification Bar Ayarları

Dilerseniz etkinleştirmeden önce alttaki seçeneği (Preview Mode) kullanarak bildirim çubuğu için yapacağınız ayarları test edebilirsiniz. Sayfanın üst kısmındaki bildirim çubuğu önizlemesini fark edeceksiniz. Yapacağınız düzenlemeleri buradan önizleyin.

WPFront Bildirim Çubuğu Önizleme

Ayarlar sayfasındaki tüm ayarları (WordPress bildirim çubuğu pozisyonunu, renkleri, kullanmak istediğiniz metni, statik veya hareketli çubuk seçimi, bildirim çubuğunun ne zaman ve hangi sayfalarda görüneceği gibi ) ihtiyacınıza göre yapılandırabilirsiniz.

2. Easy Notification Bar – Kolay Bildirim Çubuğu Eklentisi

WordPress siteye bildirim çubuğu eklemek için kullanabileceğiniz hafif ve kullanışlı aynı zamanda ücretsiz olan bir diğer eklenti Easy Notification Bar eklentisidir.

Öncelikle Easy Notification Bar eklentisini kurun ve etkinleştirin.

Easy Notification Bar

Ardından ‘Eklentiler>Yüklü Eklentiler‘ bölümüne gidin. Kolay Bildirim Çubuğu eklentisinin altındaki ‘Settings‘ bağlantısını tıklayın. Böylece WordPress bildirim çubuğu ekleme işlemini canlı sayfadan yapabileceğiniz alana yönlendirileceksiniz.

Bunun avantajı, bildirim çubuğunu yayınlamadan önce masaüstü ve mobil görünümde kolayca önizleyebilmenizdir. Yapmanız gerekenler ise şunlar:

  • Enable Notification Bar – Bildirim çubuğunuzun canlı önizlemesini görmek için bu onay kutusunu etkinleştirin.
  • Show close icon? – Kullanıcıların çubuğu kapatmasını istiyorsanız bu kutuyu etkinleştirin. Aksi takdirde, kullanıcılar çubuğu kapatamaz ve bildirim çubuğu sayfanın en üstünde görünmeye devam eder.
  • Close Icon – Kapat düğmesi için düz veya anahat simgeleri seçin.
  • Enable Sticky? – Bildirim çubuğunu yapışkan hale getirmek isterseniz etkinleştirin.
  • Display on Front Page Only? – Bildirim çubuğunu yalnızca ana sayfanızda devre dışı bırakmak için bunu işaretleyin.
  • Message – Örnek mesajı silin ve bildirim çubuğunuzda görünmesini istediğiniz metni girin.
  • Background / Text Color – Çubuğunuz ve metniniz için arka plan ve yazı tipi renkleri uygulayın.
  • Text Align – Çubuğun içindeki metni sola, sağa veya ortaya hizalayın.
  • Apply System Font Family?– Bildirim çubuğunuzdaki metin içeriği için sistem yazı tipini yüklemek için bu seçeneği kullanın. Aksi takdirde, eklenti bildirim çubuğu için temanızın varsayılan ayarlarını kullanır.
  • Font Size – Farklı bir metin boyutuna sahip olmak için örneğin 18px gibi bir yazı tipi boyutu girebilirsiniz.
  • Button Text / Button Link – Düğmeniz için metin ve bağlantı ekleyin. Buton bağlantısına nofollow, sponsored olarak işaretleyebilir ve yeni bir pencerede açılmasını sağlayabilirsiniz.

Ayarlarınızı özelleştirdikten sonra ‘Yayınla‘ düğmesine tıklayın.

3. Hello Bar Eklentisi ile WordPress’e Bildirim Çubuğu Ekleme

İlk olarak, Eklentiler>Yeni ekle yolunu izleyin ve arama kısmına Hello Bar yazın. Eklentiyi kurup etkinleştirin.

Hello Bar/WordPress Bildirim Çubuğu Eklentisi

WordPress sol panele eklenen Hello Bar öğesini göreceksiniz, buna tıkladığınızda kurulum için gerekli talimatların olduğu sayfa açılacak. Kısaca şöyle:

  • HelloBar.com’da oturum açın
  • Ekranın sağ üst köşesindeki e-posta adresinize tıklayın
  • Açılır menüden “Kurulum Talimatları”nı seçin
  • “Wordpress kullanıyorum” seçeneğini seçin ve ardından yeşil simgeye tıklayın. “Kopyala” düğmesi.
  • Snippeti kopyalayıp eklentisi sayfasındaki kutucuğa yapıştırın ve ‘Active Hello Bar’ düğmesine tıklayın. Böylece çeşitli ayarlar yapabileceğiniz alan aktif hale gelecek. Bildirim çubuğunu hangi amaçla kullanmak istediğinize bağlı olarak birçok özelleştirme seçeneğiniz olacak.

Eklentinin ücretli ve ücretsiz sürümleri mevcut. Ücretsiz sürüm gayet iyi çalışıyor, ancak oluşturacağınız bildirim çubuğunda eklentinin logosu olacak. Bu logoyu kaldırmak için ücretli plana geçmeniz gerekir.

Yukarıdaki eklentilere ek olarak, WordPress.org’da bulunan diğer ücretsiz Bildirim Çubuğu Eklentilerine buradan göz atabilirsiniz.

Eklenti Kullanmadan WordPress Bildirim Çubuğu Oluşturma

WordPress bildirim çubuğu eklentileri her ne kadar kullanışlı olsa da, birçoğu web site hız performansını olumsuz etkileyebiliyor. Böyle bir durumda, eklenti kullanmadan sitenize bildirim çubuğu eklemek isteyebilirsiniz.

İşte web sitenize eklentisiz bildirim çubuğu ekleme seçenekleri:

1. TwipSend Platformunu Kullanın

  • Buraya tıklayın ve ‘Ücretsiz Kaydol‘ düğmesine tıklayıp adınızı, e-posta adresinizi, şifrenizi yazarak TwipSend hesabınızı oluşturun.
  • E-posta hesabınızı onayladıktan sonra, açılan sayfadan Kampanya Oluştur‘u tıklayın.
  • Kampanya adı ve sitenizin URL’sini girin.
  • Verilen js kodunu temanızın header.php dosyasına </head> etiketinin hemen üstüne yapıştın.
  • TwipSend hesabınıza dönün ve oluşturduğunuz kampanyaya tıklayın. Yönlendirildiğiniz sayfanın sağ tarafındaki ‘Bildirim Oluştur‘ butonuna tıklayın.
  • Amacınıza uygun olarak seçebileceğiniz 24 adet bildirim seçeneği mevcut. Üzerlerine tıkladığınızda yan tarafta bir önizleme de görebilirsiniz. Sizin için uygun olanı seçin ve ‘Oluştur‘ düğmesine tıklayın.
  • Gerekli düzenlemeleri yapıp güncelleyin.

Ayarlar sayfasında bu bildirim çubuğunun tam olarak nerede gösterileceğini seçebilirsiniz. Tam URL veya “URL şunları içerir” gibi URL parametrelerini ve diğer parametreleri, bildirimin tam olarak istediğiniz sayfada veya sayfalarda görünmesi için ayarlayabilirsiniz.

TwipSend Bildirim Çubuğu Oluşturma

Bildirim çubuğunun web sitenizde gösterilmeye başlaması için dilediğiniz gibi özelleştirin ve etkinleştirmeyi unutmayın.

2. Tema Seçeneklerini Kullanın

Birçok WordPress teması, herhangi bir eklentiye ihtiyaç duymadan bir bildirim çubuğu eklemenize olanak sunar sunar. Örneğin, ThemeForest temaları arasında bulunan Pixwell ile bu işlemi şöyle yaparsınız:

  • Görünüm>Özelleştir kısmına gidin,buradan Header Setting’i ve ardından Top Bar’ı tıklayın.
  • Açılan sayfadan Top Bar’ı etkinleştirin ve sayfayı aşağı kaydırarak gerekli özelleştirmeleri yapın.
Top Bar
  • Metin kısmına HTML kodu da ekleyebilirsiniz. Örneğin aşağıdaki gibi basit bir kod kullanabilirsiniz:
<center>
<p>Buraya mesajınızı girin...</p>
   <button>
      <a href="#">TIKLA</a>
   </button>
</center>

Değişikliklerinizi önizleyin ve yayınlayın. Çubuğun görünümü HTML kodunuza bağlıdır. Dilerseniz düğmeyi ve metni tek bir satırda görünecek şekilde satır içi olarak ayarlayabilirsiniz.

Kendi temanızda Top Bar alanı olup olmadığını kontrol edip, varsa yukarıdaki yolu izleyerek WordPress sitenize kolayca bir bildirim çubuğu ekleyebilirsiniz.

3. HTML/CSS ile WordPress Bildirim Çubuğu Oluşturma

Öncelikle Görünüm>Özelleştir bölümüne gidin ve Ek CSS alanına aşağıdaki kodu ekleyin.

.alertbar { 
    background-color: #5f00bf; 
    color: #FFFFFF; 
    display: block; 
    line-height: 45px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

Belirtilen değerleri (renk, yükseklik, pozisyon gibi) sitenize göre düzenleyebilirsiniz. Ardından değişikliği kaydetmek için ‘Yayınla‘ya tıklayın.

Daha sonra temanızın header.php dosyası </head> etiketinden hemen sonra aşağıdaki kodu yapıştırın ve kaydedin:

<div class="alertbar">Mesajınızı buraya girin.</div>

Mesajınızın tıklanabilir olması için yani url ekleyebilirsiniz. Örneğin bir satış ortaklığı bağlantısı eklemek isteyebilirsiniz şu şekilde düzenleyebilirsiniz:

<div class="alertbar"><a href="url-girin">Mesajınızı buraya girin.</a></div>

Basit kodlarla örnek vermeye çalıştık, ancak kod bilginiz varsa daha fazla seçenekle özelleştirmeler yapabilirsiniz.


Gördüğünüz gibi, WordPress sitenize bildirim çubuğu eklemenize yardımcı olacak farklı seçenekler var. Eğer varsa, tema seçeneklerini kullanmanızı öneririz, aksi halde diğer seçenekleri deneyebilirsiniz.

Doğru kullanıldığında, bildirim çubuğu size birçok fayda sağlayabilir. Farklı amaçlar için test etmekten çekinmeyin ve deneyiminizi aşağıdaki yorumlar kısmından bizimle paylaşmayı unutmayın!

Daha fazla ipucu için bizi Facebook, Twitter ve İnstagram hesaplarımızdan takip etmeyi unutmayın!