WordPress gezinti menülerinizi renklerini veya görünümlerini değiştirmek için stillendirmek ister misiniz? WordPress temanız gezinme menülerinizin görünümünü ele alırken, gereksinimlerinizi karşılamak için CSS’yi kullanarak kolayca özelleştirebilirsiniz. Bu yazıda, sitenizdeki WordPress gezinti menülerinin nasıl stillendirileceğini göstereceğiz.

İki farklı yöntem göstereceğiz. İlk yöntem yeni başlayanlar içindir çünkü bir eklenti kullanıyor ve herhangi bir kod bilgisi gerektirmiyor. İkinci yöntem, eklenti yerine CSS kodunu kullanmayı tercih eden orta seviye DIY kullanıcıları içindir.

Yöntem 1: Eklenti kullanarak WordPress gezinti menülerini biçimlendirme

WordPress temanız gezinme menülerine stil vermek için CSS kullanır . Pek çok yeni başlayan, tema dosyalarını düzenlemek veya CSS kodunu kendi başlarına yazmak konusunda rahat değildir.

Bir WordPress stil eklentisi işe yaradığında. Sizi tema dosyalarını düzenlemekten veya herhangi bir kod yazmaktan kurtarır.

İlk yapmanız gereken, CSS Hero eklentisini kurmak ve etkinleştirmek .

CSS Hero , tek bir kod satırı yazmadan kendi WordPress temanızı tasarlamanıza izin veren premium bir WordPress eklentisidir (HTML veya CSS gerekmez).

Etkinleştirildiğinde, CSS HeroLisans anahtarınızı edinmek için yönlendirileceksiniz. Ekrandaki talimatları takip etmeniz yeterlidir, birkaç tıklamayla sitenize yönlendirileceksiniz.

Sonra, WordPress yönetici araç çubuğunuzdaki CSS Hero düğmesine tıklamanız gerekir.

CSS Hero bir WYSIWYG (ne görürsen onu alırsın) editörü sunar. Butona tıklamak sizi web sitenize götürür ve ekranda görünen bir yüzen CSS Hero araç çubuğunu gösterir.

Düzenlemeye başlamak için üstteki mavi simgeye tıklamanız gerekir.

Mavi simgeye tıkladıktan sonra, farenizi navigasyon menünüze getirin, CSS Hero etrafındaki sınırları göstererek vurgulayacaktır. Vurgulanan gezinti menüsünü tıkladığınızda, düzenleyebileceğiniz öğeleri gösterecektir.

Yukarıdaki ekran görüntüsünde, bize üst gezinti menüsü konteynerini gösterir. Gezinti menüsünün arka plan rengini değiştirmek istediğimizi varsayalım. Bu durumda, tüm menümüzü etkileyen üstteki navigasyonu seçeceğiz.

CSS Hero şimdi size metin, arka plan, kenarlık, kenar boşlukları, dolgu vb. Gibi düzenleyebileceğiniz farklı özellikleri gösterecek

Değiştirmek istediğiniz herhangi bir özelliği tıklayabilirsiniz. CSS Hero, değişikliklerinizi yapabileceğiniz basit bir arayüz gösterecektir.

Yukarıdaki ekran görüntüsünde arka planı seçtik ve bize arka plan rengini, gradyanı, resmi ve daha fazlasını seçmek için hoş bir arayüz gösterdi.

Değişiklikler yaptıkça, onları tema önizlemesinde canlı olarak görebileceksiniz.

Değişikliklerden memnun kaldıktan sonra, değişikliklerinizi kaydetmek için CSS Hero araç çubuğundaki kaydet düğmesine tıklayın.

Bu yöntemi kullanmanın en iyi yolu, yaptığınız değişiklikleri kolayca geri alabilmenizdir. CSS Hero, tüm değişikliklerin geçmişini tutar ve bu değişiklikler arasında ileri geri gidebilirsiniz.

Yöntem 2: El ile stil WordPress gezinti menüleri

Bu yöntem, özel CSS’yi manuel olarak eklemenizi gerektirir ve orta seviye kullanıcılar içindir.

WordPress gezinme menüleri sıralanmamış bir listede (madde imli liste) görüntülenir.

Genellikle, varsayılan WordPress menü etiketini kullanırsanız, o zaman kendisiyle ilişkilendirilmiş CSS sınıfı olmayan bir liste görüntüler.

<?php wp_nav_menu(); ?>

Sırasız listeniz, her liste öğesinin kendi CSS sınıfına sahip olması durumunda, ‘menü’ sınıf adına sahip olacaktır.
Yalnızca bir menü konumunuz varsa bu işe yarayabilir. Ancak, temaların çoğunda gezinme menülerini görüntüleyebileceğiniz birden fazla konum bulunur.

Yalnızca varsayılan CSS sınıfını kullanmak, diğer konumlardaki menülerle çakışmaya neden olabilir.

Bu yüzden CSS sınıfını ve menü konumunu da tanımlamanız gerekir. Muhtemelen, WordPress temanızın zaten böyle bir kod kullanarak gezinti menülerini ekleyerek yapıyor olması:

<?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>

Bu kod WordPress’e, temanın birincil menüyü gösterdiği yer olduğunu söyler. Ayrıca gezinti menüsüne bir CSS sınıfı birincil menüsü ekler.

Artık bu CSS yapısını kullanarak navigasyon menünüze stil uygulayabilirsiniz.

// container class
#header .primary-menu{} 
 
// container class first unordered list
#header .primary-menu ul {} 
 
//unordered list within an unordered list
#header .primary-menu ul ul {} 
 
 // each navigation item
#header .primary-menu li {}
 
// each navigation item anchor
#header .primary-menu li a {} 
 
// unordered list if there is drop down items
#header .primary-menu li ul {} 
 
// each drop down navigation item
#header .primary-menu li li {} 
 
// each drap down navigation item anchor
#header .primary-menu li li a {} #Header'ı navigasyon menünüz tarafından kullanılan container CSS sınıfı ile değiştirmeniz gerekecektir.

Bu yapı navigasyon menünüzün görünümünü tamamen değiştirmenize yardımcı olacaktır.

Ancak, her menüye ve menü öğesine otomatik olarak eklenen başka WordPress tarafından üretilen CSS sınıfları vardır . Bu sınıflar navigasyon menünüzü daha da kişiselleştirmenize izin verir.

// Class for Current Page
.current_page_item{} 
 
// Class for Current Category
.current-cat{} 
 
// Class for any other current Menu Item
.current-menu-item{} 
 
// Class for a Category
.menu-item-type-taxonomy{}
  
// Class for Post types
.menu-item-type-post_type{} 
 
// Class for any custom links
.menu-item-type-custom{} 
 
// Class for the home Link
.menu-item-home{} WordPress ayrıca kendi özel CSS sınıflarınızı münferit menü öğelerine eklemenizi sağlar.

Bu özelliği , menülerinize görüntü simgeleri eklemek gibi menü öğelerine stil vermek veya bir menü öğesini vurgulamak için sadece renkleri değiştirerek kullanabilirsiniz.

Başının üzerinde Menüler »Görünüm WordPress admin sayfa ve tıklayın Ekran Seçenekleri düğmesini.

Bu kutuyu işaretledikten sonra, her bir menü öğesini düzenlemek için gittiğinizde ilave bir alan eklendiğini göreceksiniz.

Artık özel CSS’nizi eklemek için bu CSS sınıfını stil sayfanızda kullanabilirsiniz. Yalnızca eklediğiniz CSS sınıfına sahip menü öğesini etkiler.

WordPress’te Stil Gezinme Menülerine Örnekler

Farklı WordPress temaları, gezinme menüleri oluşturmak için farklı stil seçenekleri, CSS sınıfları ve hatta JavaScript kullanabilir. Bu, bu stilleri değiştirmek ve navigasyon menülerinizi kendi gereksinimlerinize göre özelleştirmek için birçok seçenek sunar.

Hangi CSS sınıflarını değiştireceğinizi bulmak için web tarayıcınızdaki inceleme aracı en iyi arkadaşınız olacaktır.

Temel olarak, imleci değiştirmek istediğiniz öğeye yönlendirmeniz yeterlidir, sağ tıklayın ve ardından tarayıcı menüsünden Aracı incele seçeneğini seçin.

Olduğu söyleniyor, hadi WordPress’teki navigasyon menülerindeki bazı gerçek yaşam örneklerine bir göz atalım.

1. WordPress Gezinme Menülerinde Yazı Tipi Rengini Değiştirme

Gezinme menülerinin yazı tipi rengini değiştirmek için temanıza ekleyebileceğiniz örnek özel CSS.

#top-menu  li.menu-item a {
color:#ff0000;
}

Bu örnekte, # top menüsü, gezinti menüsümüzü görüntüleyen sıralanmamış listeye atanan kimliktir. Temanızın kullandığı kimliği bulmak için inceleme aracını kullanmanız gerekir.

2. Gezinme Menü Çubuğunun Arkaplan Rengi Nasıl Değiştirilir

Öncelikle, temanızın konteyner çevreleyen navigasyon menüsü için kullandığı CSS kimliğini veya sınıfını bulmanız gerekir.

Bundan sonra navigasyon menü çubuğunun arka plan rengini değiştirmek için aşağıdaki özel CSS’yi kullanabilirsiniz.

.navigation-top { 
background-color:#000; 
}

İşte demo web sitemizde nasıl göründüğü.

3. Tek Bir Menü Öğesinin Arkaplan Rengi Nasıl Değiştirilir

Birçok web sitesinin gezinti menüsündeki en önemli bağlantılar için farklı bir arka plan rengi kullandığını fark etmiş olabilirsiniz. Bu bağlantı bir giriş, kaydolma, iletişim kurma veya satın alma düğmesi olabilir. Farklı bir renk vererek, bağlantıyı daha belirgin kılar.

Bunu başarmak için, farklı bir arka plan rengiyle vurgulamak istediğimiz menü öğesine özel bir CSS sınıfı ekleyeceğiz.

Görünüm »Menüler bölümüne gidin ve ekranın sağ üst köşesindeki Ekran Seçenekleri düğmesine tıklayın. Bu, ‘CSS dersleri’ seçeneğinin yanındaki kutuyu işaretlemeniz gereken bir aşağı açılır menü açacaktır.

Bundan sonra değiştirmek istediğiniz menü öğesine aşağı kaydırmanız ve genişletmek için tıklamanız gerekir. Özel CSS sınıfınızı eklemek için yeni bir seçenek göreceksiniz.

Şimdi bu CSS sınıfını, belirli bir menü öğesine farklı şekilde stil vermek için kullanabilirsiniz.

.contact-us { 
background-color: #ff0099;
border-radius:5px;
}

İşte bizim test sitemize nasıl göründüğü.

4. WordPress Navigasyon Menülerine Hover Efektleri Ekleme

Menü öğelerinin farenin üzerinde renk değiştirmesini ister misiniz? Bu özel CSS numarası navigasyon menülerinizin daha etkileşimli görünmesini sağlar.

Aşağıdaki özel CSS’yi temanıza eklemeniz yeterli.

#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
}

Bu örnekte, # top-menu, temanız tarafından sıralanmamış navigasyon menü listesi için kullanılan CSS ID’dir.
Test sitemizde bunun nasıl göründüğü.

5. WordPress’te Sabit  Gezinme Menüleri Oluşturma

Normalde gezinme menüleri üstte görünür ve bir kullanıcı aşağı doğru kaydırıldığında kaybolur. Yapışkan kayan navigasyon menüleri, kullanıcı aşağı kayarken üstte kalır.

Gezinme menülerinizi yapışkan yapmak için temanıza aşağıdaki CSS kodunu ekleyebilirsiniz.

#top-menu {
    background:#2194af;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: right;
    padding-right:30px
}

Basitçe # üst menüyü navigasyon menünüzün CSS kimliği ile değiştirin.
Demomuzda nasıl göründüğü:

6. WordPress’te Şeffaf Gezinme Menüleri Oluşturun

Pek çok web sitesi, harekete geçirme düğmeleri ile birlikte büyük veya tam ekran arka plan görüntüleri kullanır. Saydam menülerin kullanılması, navigasyonunuzun görüntüyle harmanlanmasını sağlar. Bu, kullanıcıların harekete geçirme çağrınıza odaklanma olasılığını artırır.

Gezinme menülerinizi şeffaf yapmak için temanıza aşağıdaki örnek CSS’yi eklemeniz yeterlidir.

#site-navigation { 
background-color:transparent; 
}

Demo sitemize bu şekilde bakıyordu.

Temanıza bağlı olarak, başlık görüntüsünün konumunu şeffaf menülerinizin arkasındaki alanı kaplayacak şekilde ayarlamanız gerekebilir.

Umarız bu makale WordPress gezinti menülerinin nasıl düzenleneceğini öğrenmenize yardımcı olmuştur.

Oy verebilirsiniz