WordPress Navigasyon Menüsü Nasıl Düzenlenir

Renk veya görünümü değiştirmek için WordPress Navigasyon menünüzü ayarlamak istiyor musunuz? WordPress temanız Navigasyon Menü ekranınızı işlerken, ihtiyaçlarınızı karşılamak için CSS kullanarak kolayca ayarlayabilirsiniz. Bu makalede, Sitenizde WordPress Navigation Menülerinin nasıl düzenleneceğini göstereceğiz.

İki farklı yöntem göstereceğiz. İlk yöntem yeni başlayanlar içindir, çünkü eklentiler kullanır ve herhangi bir kod bilgisi gerektirmez. İkinci yöntem, eklentiler yerine CSS kodunu kullanmayı tercih eden orta DIY kullanıcıları içindir. Yöntem 1: Navigasyon menülerini ayarlamak için CSS kullanarak WordPress tema eklentinizi kullanarak WordPress Navigasyon Menüsünün düzenlenmesi. Yeni başlayanlar, tema dosyalarını düzenleyerek veya kendi CSS kodlarını yazarak rahatsız olur.
İşte o zaman WordPress stil eklentisi faydalıdır. Bu, tema dosyasını düzenlemenize veya herhangi bir kod yazmanıza kurtarır. Yapmanız gereken ilk şey, CSS Hero eklentisini yüklemek ve etkinleştirmektir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. CSS Hero, tek bir kod satırı (HTML veya CSS’ye gerek yok) yazmadan kendi WordPress temanızı tasarlamanızı sağlayan birinci sınıf bir WordPress eklentisidir. Daha fazla bilgi edinmek için CSS kahraman incelemelerimize bakın. WPBeginner kullanıcıları, satın alımları için% 34 indirim almak için bu CSS Hero kuponunu kullanabilirler.
Aktivasyondan sonra, CSS Hero lisans anahtarınızı almaya yönlendirileceksiniz. Ekrandaki talimatları izleyin ve birkaç tıklamayla sitenize geri yönlendirileceksiniz. Ardından, WordPress yönetici çubuğunuzdaki CSS Hero düğmesine tıklamanız gerekir.

CSS Hero Wysiwyg editörü sunar (gördüğünüz şey ne elde edersiniz). Düğmeyi tıklamak, ekranda görülen yüzen bir CSS kahramanı ile sizi web sitenize götürecektir. Düzenlemeye başlamak için üstteki mavi simgeyi tıklamanız gerekir. Mavi simgeye tıkladıktan sonra, farenizi navigasyon menünüze yönlendirin ve CSS Hero, etrafındaki sınırları göstererek vurgulayacaktır. Vurgulanan gezinme menüsüne tıkladığınızda, düzenleyebileceğiniz öğeleri gösterecektir.

Yukarıdaki ekran görüntüsünde, bu bize üst gezinme menüsü kapsayıcısını gösterir. Navigasyon menümüzün arka plan rengini değiştirmek istediğimizi varsayalım. Bu durumda, tüm menülerimizi etkileyen navigasyon seçeceğiz. CSS Hero şimdi size metin, arka plan, sınırlar, kenar boşlukları, dolgu vb. Gibi düzenleyebileceğiniz çeşitli özellikleri gösterecektir.

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

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

Bir değişiklik yaptığınızda, bunu doğrudan temada görebileceksiniz.
Değişikliklerden memnun kaldığınızda, değişikliklerinizi kaydetmek için CSS Hero araç çubuğundaki Kaydet düğmesini tıklayın. Bu yöntemi kullanmanın en iyi yanı, yaptığınız değişiklikleri kolayca iptal edebilmenizdir. CSS Hero, tüm değişikliklerinizin tam bir geçmişini depolar ve bu değişiklikler arasında gidip gelebilirsiniz. Yöntem 2: WordPress Navigasyon Menü Stili Manuel olarak Bu yöntem, özel CSS’yi manuel olarak eklemenizi ve ara kullanıcıları hedeflemenizi gerektirir. WordPress Navigasyon menüsü, Dönemsel Olmayan Listeler (Bulletted Listeler) listesinde görüntülenir. ?>

Her liste öğesi ile bir sınıf adı ‘menü’ olacak listesiz liste kendi CSS sınıfınız vardır. Yalnızca bir menü konumunuz varsa bu işe yarayabilir. Ancak, çoğu temanın bir navigasyon menüsü görüntüleyebileceğiniz birkaç konum vardır. Yalnızca CSS varsayılan sınıfını kullanmak, diğer konumlardaki menülerle çatışmaya neden olabilir. Bu yüzden CSS sınıfını ve menünün yerini de tanımlamanız gerekir. WordPress temanızın olasılığı bunu böyle bir kod kullanarak bir navigasyon menüsü ekleyerek yaptı:
‘birincil’,
‘menü_class’ => ‘birincil menu’,
));
?>
Bu kod, WordPress’e temanın ana menüyü gösterdiği yer olduğunu söyler. Ayrıca CSS sınıfının ana menüsünü gezinme menüsüne ekledi. Şimdi bu CSS yapısını kullanarak gezinme menünüzü ayarlayabilirsiniz. // Konteyner sınıfı
#Header. Primary-menu {}
// kapsayıcı sınıfı ilk sıralanmamış liste
#Header. Primary-menu ul {} // Sokatsız bir listede sıralanmamış liste
#Header. Birincil-menu ul {}
// her gezinme öğesi
#Header. Primary-menu li {}
// her gezinme ankrajı öğesi
#Header. Primary-menu li A {}
// Sırasız liste açılır ürünler varsa
#Header. Primary-menu li ul {}
// her bir açılır navigasyon öğesi
#Header. Primary-menu li Li {}
// her bir örtül navigasyon ankraj öğesi
#Header. Primary-menu li A {}
#Header’ı navigasyon menünüz tarafından kullanılan CSS kapsayıcı sınıfıyla değiştirmeniz gerekir.
Bu yapı, gezinme menünüzün görünümünü tam olarak değiştirmenize yardımcı olacaktır. Ancak, WordPress tarafından üretilen her menü ve menü öğesine otomatik olarak eklenen diğer CSS sınıfları vardır. Bu sınıflar, gezinme menünüzü daha fazla ayarlamanıza izin verir. // Geçerli sayfa için sınıf
.Current_page_item {}
// Geçerli kategori için sınıf
.current-cat {}
// Diğer tüm menü öğeleri için sınıf
.current-menu-item {}
// bir kategori için sınıf
.Menu-item-type-taxonomy {}
// yazı türleri için sınıf
.Menu-item-type-post_type {}
// Herhangi bir özel bağlantı için sınıf
.Menu-item-type-custom {}
// Ana Sayfa bağlantısı için sınıf
.Menu-item-home {}
WordPress ayrıca kendi özel CSS sınıfınızı tek tek menü öğelerine eklemenize olanak tanır.
Bu özelliği, menünüzle resim simgeleri eklemek veya sadece menü öğesini vurgulamak için renkleri değiştirerek menü öğelerini düzenlemek için kullanabilirsiniz. WordPress Yöneticinizden görünüm sayfasını »menüsünü açın ve ekran seçeneği düğmesini tıklayın.
Kutuyu kontrol ettikten sonra, her bir menü öğesini düzenlemeye gittiğinizde ek alanların eklendiğini göreceksiniz.
Artık özel CSS’nizi eklemek için bu CSS sınıfını stil sayfanızda kullanabilirsiniz. Bu, menü öğesini yalnızca eklediğiniz CSS sınıfı ile etkiler. WordPress’te Navigasyon Menüleri Örnekleri Farklı WordPress temaları, bir navigasyon menüsü oluşturmak için farklı stil seçenekleri, CSS sınıfı ve hatta JavaScript kullanabilir. Bu, stili değiştirmek ve kendi ihtiyaçlarınızı karşılayacak şekilde gezinme menünüzü ayarlamak için birçok seçenek sunar. Web tarayıcınızdaki denetim aracı, hangi CSS sınıfının değiştirilmesi gerektiğini bulmak için en iyi arkadaşınız olacaktır. Daha önce hiç kullanmadıysanız, WordPress temasını ayarlamak için denetim araçlarını nasıl kullanacağınızla ilgili kılavuzumuza bakın. Temel olarak, imleci yalnızca değiştirmek istediğiniz öğelere yönlendirmeniz gerekir, sağ tıklamanız ve ardından Tarayıcı Menüsünden Denetle Aracını seçin.
Bu nedenle, WordPress’teki Navigasyon Stili menüsünün bazı somut örneklerine bakalım. 1. WordPress Navigasyon Menüsünde Yazı Tipinin Rengi Nasıl Değiştirilir Burada Navigasyon Menüsü Yazı Tipi’nin rengini değiştirmek için temanıza ekleyebileceğiniz özel bir CSS örneğidir.

#Top-Menu li.Menu-item a {

Renk:#FF0000;
}

Bu örnekte, #Top-Menu, gezinme menümüzü görüntüleyen sıralı olmayan listeye ayarlanmış bir kimliktir. Temanız tarafından kullanılan kimliği bulmak için bir muayene aracı kullanmanız gerekir.
2. İlk gezinme menüsü çubuğunun arka plan rengini nasıl değiştirir, temanız tarafından navigasyon menüsünü çevreleyen kap için kullanılan CSS kimliğini veya sınıfını bilmeniz gerekir.
Bundan sonra, gezinme menüsünün arka plan rengini değiştirmek için aşağıdaki özel CSS’yi kullanabilirsiniz.
Arka Plan rengi:#000;
}

İşte Demo web sitemizdeki görünüm. Tek menü öğenizin arka plan rengini nasıl değiştireceğiniz birçok web sitesinin navigasyon menüsündeki en önemli bağlantılar için farklı arka plan renkleri kullandığını fark etmiş olabilir. Bu bağlantı bir giriş, liste, iletişim veya satın alma düğmesi olabilir. Farklı bir renk vererek bağlantıyı daha görünür hale getirir. 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ü Aç »Menü ve ekranın sağ üst köşesindeki Ekran seçeneği düğmesini tıklayın. Bu, ‘CSS’ seçeneğinin yanındaki kutuyu kontrol etmeniz gereken uçan menüyü getirecektir.

Bundan sonra, menü öğesine geçmeniz ve değiştirmek istediğiniz 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.
Artık belirli menü öğelerini farklı şekilde ayarlamak için bu CSS sınıfını kullanabilirsiniz …
Arka Plan rengi: #FF0099;
Border-Radius: 5 piksel;

}

Bu, test sitemizdeki görünümdür.

4. WordPress Gezinme menüsüne işaret etmek için efekti ekleyin Menü öğenizin fare over sırasında renk değiştirmesini mi istiyorsunuz? Bu özel CSS hilesi, navigasyon menünüzün daha etkileşimli görünmesini sağlar. Temanıza aşağıdaki özel CSS ekleyin.
Arka Plan rengi: #fff;
Renk:#666;
Border-Radius: 5 piksel;
}

Bu örnekte, #Top-Menu, temanız tarafından Sırasal Olmayan Navigasyon Menüsü listeleri için kullanılan bir kimlik CSS’dir. Bu, test sitemizdeki görünümdür.
5. WordPress’te yapışkan yüzen bir navigasyon menüsü oluşturun, genellikle navigasyon menüsü yukarıda görünür ve kullanıcı eğitildiğinde kaybolur. Yapışkan yüzen navigasyon menüsü, kullanıcı eğitildiğinde yukarıda kalır. Yapışkan bir gezinme menüsü oluşturmak için temanıza aşağıdaki CSS kodunu ekleyebilirsiniz.#Top-Menu {arka plan:#2194AF;
Yükseklik: 60px;
Z-index: 170;
Marj: 0 otomatik;
Sınır dip: 1px katı #dadada;

Genişlik:%100;
Konum: Sabit;
Üst: 0;
Sol: 0;
Sağ: 0;
Metin-align: doğru;
Pilding-Right: 30 piksel
}
#Top-Menu’yu gezinme menüsü kimliğinizle değiştirmeniz yeterlidir. Bu bizim demomuzdaki görünüm:
Daha ayrıntılı talimatlar ve alternatif yöntemler için, WordPress’te yapışkan yüzen bir navigasyon menüsünün nasıl oluşturulacağına dair kılavuzumuza bakın. 6. WordPress’te şeffaf bir gezinme menüsü oluşturun Birçok web sitesi, büyük bir arka plan görüntüsü veya harekete geçmek için davet düğmesine sahip tam ekran kullanarak. Şeffaf menüyü kullanmak, navigasyonunuzu resimle entegre eder. Bu, kullanıcıların oyunculuk davetinize odaklanma olasılığını artırır. Navigasyon menünüzü şeffaf hale getirmek için temanıza aşağıdaki CSS örneğini ekleyin.#Site-Navigation {
Arka plan rengi: şeffaf;
}
Bu, demo sitemizdeki görünüm.
Temanıza bağlı olarak, başlık görüntünün konumunu şeffaf menünüzün arkasındaki alanı kapsayacak şekilde ayarlamanız gerekebilir. Bu makalenin WordPress navigasyon menülerini nasıl düzenleyeceğinizi öğrenmenize yardımcı olur. Ayrıca, hücresel için hazır duyarlı bir WordPress menüsünün nasıl ekleneceğine dair kılavuzumuzu görmek isteyebilirsiniz. Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube kanalımıza abone olun. Bizi Twitter ve Facebook’ta da bulabilirsiniz.