WordPress Gezinme Menüleri Nasıl Stillendirilir

WordPress gezinme menülerinizi renklerini veya görünümlerini değiştirmek için şekillendirmek istiyor musunuz? WordPress temanız gezinme menülerinizin görünümünü ele alırken, gereksinimlerinizi karşılamak için CSS kullanarak kolayca özelleştirebilirsiniz. Bu makalede, sitenizdeki WordPress gezinme menülerini nasıl şekillendireceğinizi göstereceğiz.


WordPress'te gezinme menülerini şekillendirme

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

Yöntem 1: Eklenti Kullanarak WordPress Gezinme Menülerini Biçimlendirme

WordPress temanız, gezinme menülerini biçimlendirmek için CSS kullanır. Yeni başlayanların çoğu tema dosyalarını düzenlemek veya kendi başlarına CSS kodu yazmaktan rahatsız değil.

İşte o zaman WordPress stil eklentisi işe yarar. Tema dosyalarını düzenlemek veya herhangi bir kod yazmaktan sizi kurtarır.

Yapmanız gereken ilk şey CSS Hero eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

CSS Hero, tek bir kod satırı yazmadan kendi WordPress temanızı tasarlamanızı sağlayan premium bir WordPress eklentisidir (HTML veya CSS gerekmez). Daha fazla bilgi için CSS Hero incelememize bakın.

WPBeginner kullanıcıları satın aldıklarında% 34 indirim elde etmek için bu CSS Kahraman Kuponunu kullanabilir.

Etkinleştirildiğinde, CSS Kahraman Lisans anahtarınızı almak için yönlendirileceksiniz. Ekrandaki talimatları uygulamanız yeterlidir; birkaç tıklamayla sitenize yönlendirileceksiniz..

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

CSS Hero'yu Başlat

CSS Hero, bir WYSIWYG (Gördüğünüz şey ne elde edersiniz) editörü sunar. Düğmeye tıklamak, ekranda görünen kayan bir CSS Kahraman araç çubuğu ile web sitenize götürecektir..

CSS Kahraman Araç Çubuğu

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

Mavi simgeyi tıkladıktan sonra, farenizi gezinme menünüze götürün ve CSS Hero, etrafındaki kenarlıkları göstererek onu vurgulayacaktır. Vurgulanan gezinme menüsünü tıkladığınızda, düzenleyebileceğiniz öğeleri gösterecektir.

Özelleştirmek için gelin ve tıklayın

Yukarıdaki ekran görüntüsünde, bize en üst gezinme menüsü kabını gösterir. Gezinme menümüzün arka plan rengini değiştirmek istediğimizi varsayalım. Bu durumda, menümüzün tamamını etkileyen en iyi navigasyonu seçeceğiz.

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

CSS özellikleri

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

Bir öğenin görünümünü değiştirme

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

Değişiklik yaptığınızda, tema önizlemesinde canlı olarak görebileceksiniz.

CSS değişikliklerinizin canlı önizlemesi

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

Bu yöntemi kullanmanın en iyi yanı, yaptığınız değişiklikleri kolayca geri alabilmenizdir. CSS Hero, tüm değişikliklerinizin tam bir geçmişini tutar ve bu değişiklikler arasında gidip gelebilirsiniz..

Yöntem 2: El ile Stil WordPress Gezinme Menüleri

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

WordPress gezinme menüleri sırasız bir listede (madde işaretli liste) görüntülenir.

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

<?php wp_nav_menu (); ?>

Sıralanmamış listenizde sınıf adı ‘menüsü’ olur ve her liste öğesinin kendi CSS sınıfı vardır.

Yalnızca bir menü konumunuz varsa bu işe yarayabilir. Ancak, çoğu temanın gezinme menülerini görüntüleyebileceğiniz birden fazla konumu vardır.

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

Bu nedenle CSS sınıfını ve menü konumunu da tanımlamanız gerekir. Şansınız, WordPress temanızın, bunun gibi bir kod kullanarak gezinme menüleri ekleyerek bunu yapmasıdır:

<?php
wp_nav_menu (dizi (
‘theme_location’ => ‘birincil’,
‘menu_class’ => ‘Ana Menü’,
));
?>

Bu kod WordPress’e temanın birincil menüyü görüntülediği yer olduğunu bildirir. Ayrıca gezinme menüsüne bir CSS sınıfı birincil menüsü ekler.

Artık bu CSS yapısını kullanarak navigasyon menünüzü şekillendirebilirsiniz.

// konteyner sınıfı
#header .primary-menu {}

// container class ilk sıralanmamış liste
#header .primary-menu ul {}

// sırasız bir liste içindeki sırasız liste
#header .primary-menu ul ul {}

// her bir gezinme öğesi
#header .primary-menu li {}

// her bir navigasyon öğesi bağlantısı
#header .primary-menu li a {}

// açılır öğeler varsa sıralanmamış liste
#header .primary-menu li ul {}

// her açılır menü öğesi
#header .primary-menu li li {}

// her dökümde gezinme öğesi bağlantısı
#header .primary-menu li li a {}

#Header’ı gezinme menünüz tarafından kullanılan kapsayıcı CSS sınıfıyla değiştirmeniz gerekecek.

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 WordPress tarafından oluşturulan diğer CSS sınıfları vardır. Bu sınıflar navigasyon menünüzü daha da özelleştirmenizi sağlar.

// Geçerli Sayfa için Sınıf
.} {Current_page_item

// Geçerli Kategori Sınıfı
.Geçerli kedi {}

// Diğer mevcut Menü Öğeleri için sınıf
.Geçerli menü maddelik {}

// Bir Kategori İçin Sınıf
.Menü maddelik tipi-taksonomisi {}

// Yazı türleri için sınıf
.Menü maddelik tipi-post_type {}

// Özel bağlantılar için sınıf
.Menü maddelik tipi-özel {}

// Ev Bağlantısı için sınıf
.Menü maddelik-ev {}

WordPress ayrıca bireysel menü öğelerine kendi özel CSS sınıflarınızı eklemenizi sağlar.

Bu özelliği, menülerinize görüntü simgeleri eklemek veya yalnızca bir menü öğesini vurgulamak için renkleri değiştirmek gibi menü öğelerine stil uygulamak için kullanabilirsiniz..

Başını aşmak Görünüm »Menüler sayfanıza gidin ve Ekran Seçenekleri düğmesini tıklayın.

Ayrı menü öğeleri için CSS sınıflarını etkinleştir seçeneği

Bu kutuyu işaretledikten sonra, her bir menü öğesini düzenlemeye gittiğinizde ek bir alan eklendiğini göreceksiniz..

WordPress'teki bir menü öğesine özel bir CSS sınıfı ekleme

Artık bu CSS sınıfını özel CSS’nizi eklemek için 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 size bu stilleri değiştirmek ve navigasyon menülerinizi kendi gereksinimlerinizi karşılayacak şekilde özelleştirmek için birçok seçenek sunar.

Hangi CSS sınıflarının değiştirileceğini bulmak söz konusu olduğunda web tarayıcınızdaki inceleme aracı en iyi arkadaşınız olacaktır. Daha önce kullanmadıysanız, WordPress temalarını özelleştirmek için inceleme aracının nasıl kullanılacağına ilişkin kılavuzumuza göz atın.

Temel olarak, imleci değiştirmek istediğiniz öğenin üzerine getirmeniz, sağ tıklamanız ve ardından tarayıcı menüsünden İnceleme aracını seçmeniz yeterlidir.

Değiştirilecek CSS sınıflarını aramak için inceleme aracını kullanma

Bununla birlikte, WordPress’te gezinme menülerini şekillendirmenin bazı gerçek hayat örneklerine bakalı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 # üst menü, gezinti menümüzü görüntüleyen sıralanmamış listeye atanan kimliktir. Temanız tarafından kullanılan kimliği bulmak için inceleme aracını kullanmanız gerekir.

WordPress gezinme menülerinin yazı tipi rengini değiştirme

2. Gezinme Menü Çubuğunun Arka Plan Rengini Değiştirme

Öncelikle, temanız tarafından gezinme menüsünü çevreleyen kapsayıcı için kullanılan CSS kimliğini veya sınıfını bulmanız gerekir.

Gezinme menüsü kapsayıcısı için CSS sınıfı bulma

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

.navigasyon üst {
Arka plan renkli: # 000;
}

Demo web sitemizde şöyle görünüyordu.

Gezinme menü çubuğunun arka plan rengini değiştirme

3. Tek Bir Menü Öğesinin Arka Plan Rengini Değiştirme

Birçok web sitesinin gezinme menülerindeki en önemli bağlantılar için farklı bir arka plan rengi kullandığını fark etmiş olabilirsiniz. Bu bağlantı bir giriş, kayıt, iletişim veya satın alma düğmesi olabilir. Farklı bir renk vererek, bağlantıyı daha belirgin 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.

Başını aşmak Görünüm »Menüler ve ekranın sağ üst köşesindeki Ekran Seçenekleri düğmesini tıklayın. Bu, “CSS sınıfları” seçeneğinin yanındaki kutuyu işaretlemeniz gereken bir açılır menü getirir.

Ayrı menü öğeleri için CSS sınıflarını etkinleştir seçeneği

Bundan sonra, değiştirmek istediğiniz menü öğesine ilerlemeniz 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.

Bir menü öğesine özel css sınıfı ekleme

Şimdi bu CSS sınıfını, söz konusu menü öğesine farklı şekil vermek için kullanabilirsiniz.

.Bize Ulaşın {
arka plan rengi: # ff0099;
Çerçeve-yarıçapı: 5px;
}

Test sitemizde şöyle görünüyordu.

WordPress gezinme menülerindeki tek bir menü öğesinin arka plan rengini değiştirme

4. WordPress Gezinme Menülerine Fareyle Üzerine Gelme Efektleri Ekleme

Menü öğelerinizin fareyle üzerine gelindiğinde renk değiştirmesini ister misiniz? Bu özel CSS hilesi gezinme menülerinizi daha etkileşimli hale getirir.

Temanıza aşağıdaki özel CSS’yi eklemeniz yeterlidir.

# top-menu li.menu-item a: hover {
Arka plan renkli: #fff;
color: # 666;
Çerçeve-yarıçapı: 5px;
}

Bu örnekte, # üst menü, temanız tarafından sırasız gezinme menüsü listesi için kullanılan CSS kimliğidir..

Bunun test sitemize nasıl baktığı.

WordPress gezinme menülerinde fareyle üzerine gelme efekti

5. WordPress’te Sabit Yüzen Gezinme Menüleri Oluşturun

Normalde gezinme menüleri üstte görünür ve kullanıcı aşağı kaydırdıkça kaybolur. Sabit bir gezinme menüleri, kullanıcı aşağı kaydırdıkça en üstte kalır.

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

# top-menu {
background: # 2194af;
yüksekliği: 60 piksel;
Z-endeksi: 170;
kenar boşluğu: 0 otomatik;
sınır-alt: 1px katı #dadada;
en: 100%;
pozisyon: Sabit;
En: 0;
: 0;
Sağ: 0;
metin hizalama: sağ;
padding-right: 30px
}

# Üst menüyü navigasyon menünüzün CSS kimliğiyle değiştirin.

Demomuzda şöyle görünüyordu:

Yapışkan gezinme menüsü

Daha ayrıntılı talimatlar ve alternatif yöntem için WordPress’te yapışkan yüzen gezinme menüsü oluşturma hakkındaki kılavuzumuza bakın.

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

Birçok web sitesi, harekete geçirici mesaj düğmeleriyle birlikte büyük veya tam ekran arka plan resimleri kullanır. Saydam menüler kullanmak, navigasyonunuzun görüntüyle uyumlu olmasını sağlar. Bu, kullanıcıların harekete geçirici mesajınıza odaklanma olasılığını artırır.

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

#site navigasyonu {
background-color: transparent;
}

Demo sitemizde böyle görünüyordu.

WordPress'te şeffaf gezinme menüleri

Temanıza bağlı olarak, başlık resminin konumunu, şeffaf menülerinizin arkasındaki alanı kaplayacak şekilde ayarlamanız gerekebilir..

Bu makalenin WordPress gezinme menülerini nasıl şekillendireceğinizi öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, mobil uyumlu duyarlı WordPress menüsünün nasıl ekleneceği ile ilgili kılavuzumuzu görmek isteyebilirsiniz.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me