WordPress Top Bar Menü Nasıl Yapılır

WordPress Top Bar Menü Nasıl Yapılır

tabanlı Web sitelerinde kendi üst menünüzü kendiniz tasarlayabilirsiniz. Genelde dil ve iletişim bilgilerinin paylaşıldığı bu menü çubuğunun boyutunu istediğiniz gibi ayarlayabilirsiniz. Böylece vermek istediğiniz mesaj, botun yada kampanya linkini paylaşabilirsiniz. Biz bu makalede örnek bir Top Menü hazırlayacağız. Bunun için gerekli CSS kodlarını style.css dosyasına ve üstbölüm olarak adlandırdığımız header.php dosyasında yapacağımız eklemeler ile üst menüyü oluşturacağız. Bunun için yapmanız gereken adımları şu şeklide;

Style.css Dosyasına Eklemeniz Gereken Kodlar

.header-top{width:100%;height:20px;background:#222;}
.hader-top-ic-sol{float:left;color: white;font-size:16px;padding:0px 10px 0px 0px}
.hader-top-ic-sol a{color:#fff;}
.hader-top-ic-sol a:hover{color:#B3B3B3; text-decoration:underline;}
.hader-top-ic-sag{float: right;color: white;font-size:16px;padding:0px 10px 0px 0px}
.hader-top-ic-sag a{color:#fff;}
.hader-top-ic-sag a:hover{color:#B3B3B3; text-decoration:underline;}

CSS kodlarını header tagının altına eklemeniz gerekiyor. Buradaki renk ve boyutlarla oynayarak kendi tasarımınıza özgün hale getirebilirsiniz. buradaki tasarım responsive olarak ayarlanmıştır. eğer belirli bir boyut kazandırmak istiyorsanız header-top tagındaki width:100% bölümünü değiştiriniz.

Header.PHP Dosyasına Eklemeniz Gereken Kodlar

<div class="header-top">
 <div class="header-top-ic">
   <div class="hader-top-ic-sol">
	SOL İÇERİK EKLEME ALANI				
   </div>
   <div class="hader-top-ic-sag">
       SAĞ İÇERİK EKLEME ALANI
   </div>
  </div>
</div>

Header.php kodlarını bu dosya içersin de yer alan head tagının üstüne eklemeniz gerekiyor. Böylece Top bar menüsü sitenizin en üstünde çıkacaktır.

Facebook'ta Paylaş Whatsapp'ta Paylaş
Facebook'ta Paylaş Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • serdar:Arkadaşlar burada nano teknolojisi hakkında bir ma...
  • admin:Buradakiler anasayfa için anlatılmış eklenti kulla...
  • murat:merhabalar hocam, her yazı eklediğimde mi bu işlem...
  • admin:Bu işlemi yaparsanız belleği formatlamış olrsunuz....
  • Baran Aydın:Abi burda yazan her şeyi yaptım ve usb de olan 29K...
  • Fərid:Nolur arka plan fotoğrafini deyiwmek istiyorum...
  • SAHRA pat:Hesabim kapatıldı yardımcı olun...
  • nedim:Peki bunun tam tersini yapan bir eklenti var mı? Y...
  • İlker Ergün:Müthiş çözüm ya. Kırk yıl düşünsem aklıma gelmezdi...