Geçenlerde bir siteden bir yardım talebi aldım. Site menüsünü sabit hale getirmek istiyordu. Bunun üzerine bir eklenti ile halledebileceğini belirttim. Eklentinin tam olarak çalışması için küçük bir ayarlama vardı, uzaktan yardımla hallettik. WordPress menü sabitleme nasıl yapılır -yapışkan menü- yazısını da bunun üzerine yazmak ve sizlerle paylaşmak istedim.
Bu yapışkan menü olayını sağlayabilmenin iki yönteminden bahsedeceğim. Biri biraz önce belirttiğim gibi eklenti yoluyla, diğeri ise CSS yöntemiyle manuel olarak.
Eklenti ile yapışkan menü
Bu işlem için Sticky Menu (or Anything!) on Scroll adlı eklentiyi sitenize yükleyip etkinleştirin.
Etkinleştirme sonrasında sitenizi kontrol edin, eğer menü sabitlenmişse sorun yok. Eklenti otomatik olarak menüyü tanıyıp sabitlemiş oluyor. Benden yardım isteyen kullanıcının sorunu ise bu işlemin olmamasıydı. Bunun sebebi site menü adının varsayılandan farklı bir ad olmasıydı. Eğer siz de böyle bir sorun ile karşılaşırsanız aşağıdaki adımları takip edin.
Öncelikle sitenizin ana sayfasında iken sağ tıklama ile “Sayfa kaynağını görüntüle” deyin yada CTRL+U ile site kaynak kodlarını açın. Kaynak kodları içerisinde nav id satırında class=” kelimesi sonrasındaki menünüzün kodunu kopyalayın.
Bu kopyaladığınız kodu Yönetici Panelinde eklentinin ayarlar kısmına yapıştırın. Bunun için panel Ayarlar menüsü içerisinde Sticky Menu (Or Anything) menü başlığını tıklayın. Tıkladığınızda bahsedilen eklentinin ayarlar sayfası açılacak.
Burada Basic settings sayfasında yukarıda gördüğünüz Sticky Element kutusu içerisine kopyaladığınız menü kodunu yapıştırıp kaydedin. Büyük ihtimalle sorununuz çözülmüş ve menünüz sabitlenmiş olacaktır. Küçük bir uyarı daha yapmak isterim, eğer bir cache eklentisi kullanıyorsanız cache içeriklerini sıfırlayın yada eklentiyi geçici olarak etkisizleştirin.
Bu eklentiyle yan sütunlarda bulunan ve sidebar diye tabir edilen kısımları da sabitleyebilirsiniz. Bunun için de yukarıda bahsettiğim ayarlama sayfası kullanılabilir. Sidebar yazarak deneyin, olmzsa yine kod kısmına giderek verilen kod adı bulunarak ekleme yapabilirsiniz.
CSS ile yapışkan menü
Diğer yöntem ise site css dosyasına ekleyeceğiniz bir kod ile sabit menü yapma. Bunun için öncelikle kodu ekleyeceğiniz alanı açın. Bu alanıadı Ek CSS. Nasıl açılacak? Yönetici panelinde Görünüm menüsü içerisinde Özelleştir alt menüsünü tıklayın. Burada tema düzenleme ile ilgili birçok alan var, bunlardan biri de Ek CSS.
Kırmızı ok ile gösterdiğim alana aşağıdaki kodu yapıştırıp Yayımla dediğinizde menü alanı sabitlenecektir.
.site-header {
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 1000;
}
.main-navigation ul.nav-menu {
border: 0;
}
Eğer CSS kodlarına hakimseniz ayrıca başka özellikler ekleyebilirsiniz. Mesela background-color: yellow; şeklinde bir kod ile menü arka alanını sarı hale getirebilirsiniz.
Umarım sorunsuz halledebilirsiniz, iyi bloglamalar…
