WordPress’te Bir Menü Öğesi Nasıl Vurgulanır?

WordPress’te bir menü öğesini vurgulamak, ziyaretçilerinizin dikkatini önemli sayfalara veya özel tekliflere çekebilir. Bu, navigasyonu ve kullanıcı etkileşimini geliştirmeye yardımcı olabilir.

İster yeni bir özelliği, ister bir satışı veya önemli bir güncellemeyi vurgulamak isteyin, belirli menü öğelerini öne çıkarmak sitenizin etkinliğini artırabilir.

Örneğin, kullanıcıların dikkatini çekmek için birçok ortak markamızın ana navigasyon menüsünde fiyatlandırma sayfasını vurguladık. Bu yaklaşım, daha fazla ziyaretçiyi ürün fiyatlarımızı keşfetmeye teşvik etti ve dönüşümlerin artmasını sağladı.

Bu makalede, CSS kodu kullanarak WordPress’te bir menü öğesini nasıl kolayca vurgulayabileceğinizi göstereceğiz.

WordPress’te Bir Menü Öğesi Neden Vurgulanır?

Gezinti menüsü, sitenizin önemli alanlarına işaret eden bağlantıların bir listesidir. Genellikle bir WordPress web sitesindeki her sayfanın başlığında yatay bir çubuk olarak sunulurlar.

Navigasyon menünüzdeki bir menü öğesini vurgulayarak, kullanıcının dikkatini en belirgin eylem çağrınıza kolayca yönlendirebilirsiniz.

Örneğin, kullanıcıların WordPress blogunuzdaki fiyatlandırma sayfasını veya belirli bir gönderiyi ziyaret etmesini istiyorsanız, gezinme menünüzde bu öğeyi vurgulayabilirsiniz. Bu, o sayfadaki trafiği artırabilir ve satışları artırabilir.

Bununla birlikte, WordPress’te CSS kullanarak bir menü öğesini nasıl vurgulayabileceğinizi görelim:

Yöntem 1: Tam Site Düzenleyicisini Kullanarak Bir Menü Öğesini Vurgulama

Blok özellikli bir tema kullanıyorsanız, eski Tema Özelleştirici yerine Tam Site Düzenleyicisine sahip olacaksınız. Mevcut bir menü öğesini de kolayca vurgulayabilirsiniz.

İlk olarak, WordPress yönetici panosundan Görünüm ” Editör sayfasına gidin. Bu sizi tam site editörüne yönlendirecektir.

Burada, vurgulamak istediğiniz menü öğesine çift tıklayın ve ardından üstteki ‘Ayarlar’ simgesine tıklayın. Bu, söz konusu menü öğesinin ayarlarını blok panelinde hemen açacaktır.

Şimdi, ‘Gelişmiş’ sekmesine gidin ve genişletmek için yanındaki ok simgesine tıklayın.

Bu, vurgulanan menü yazmanız gereken bir ‘Ek CSS Sınıfı’ alanı açacaktır.

Ardından, değişikliklerinizi kaydetmek için sayfanın üst kısmındaki ‘Kaydet’ düğmesine tıklayın.

Bundan sonra, vurgu efekti için temanıza küçük bir CSS parçası eklemeniz gerekecektir. Eksik Tema Özelleştiricisini düzeltebilir ya da CSS kodu eklemek için bir kod parçacığı eklentisi kullanabilirsiniz.

WPCode Kullanarak CSS Parçacıkları Ekleme

WordPress’e CSS eklemek için WPCode kullanmanızı öneririz çünkü özel kod eklemeyi güvenli ve kolay hale getiren piyasadaki en iyi WordPress kod parçacıkları eklentisidir.

Öncelikle WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla talimat için bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza göz atın.

Etkinleştirmenin ardından WordPress yönetici panelinizden Code Snippets ” + Add Snippet sayfasına gidin.

Burada, farenizi ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin üzerine getirin ve altındaki ‘Snippet Kullan’ düğmesine tıklayın.

Bu sizi, snippet’iniz için bir ad seçerek başlayabileceğiniz ‘Özel Snippet Oluştur’ sayfasına götürecektir.

Bundan sonra, ekranın sağ köşesindeki açılır menüden kod türü olarak ‘CSS Snippet’i seçin.

Ardından, aşağıdaki CSS kodunu kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırın:

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Bunu yaptıktan sonra, ‘Ekleme’ bölümüne ilerleyin.

Burada, kodun tüm web sitenizde otomatik olarak yürütülebilmesi için ‘Otomatik Ekle’ modunu seçmeniz yeterlidir.

Şimdi, sayfanın en üstüne gidin ve anahtarı ‘Etkin Değil’den ‘Etkin’e getirin.

Ardından, ayarlarınızı kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklamanız yeterlidir.

Artık WordPress’te tam bir site düzenleyicisi kullanarak bir menü öğesini başarıyla vurguladınız.

CSS kodunu ekledikten sonra menü öğeniz bu şekilde görünecektir.

Blok Tema Kullanarak Tema Özelleştiricisine Nasıl Erişilir

Tema Özelleştiricisini ve bir FSE temasını kullanmak istiyorsanız, aşağıdaki URL’yi kopyalayıp tarayıcınıza yapıştırmanız yeterlidir. ‘example.com’ yerine kendi sitenizin alan adını yazdığınızdan emin olun:

https://example.com/wp-admin/customize.php

Bu, blok temanız için tema özelleştiriciyi açacak ve burada ‘Ek CSS’ sekmesini genişletmeniz gerekecektir.

Buradan, CSS parçacığını kopyalayıp ‘Ek CSS’ kutusuna yapıştırın:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Bundan sonra, ayarlarınızı kaydetmek için üstteki ‘Yayınla’ düğmesine tıklamanız yeterlidir.

Yöntem 2: Tema Özelleştirici Kullanarak Bir Menü Öğesini Vurgulama

Eski bir WordPress teması kullanıyorsanız, muhtemelen varsayılan olarak etkinleştirilmiş bir tema özelleştiriciniz olacaktır. Tema özelleştiricisinde bir menü öğesini vurgulamak oldukça basit bir işlemdir.

İlk olarak, tema özelleştir iciyi başlatmak için WordPress panonuzda Görünüm ” Özelleştir ‘e gidin. Açıldığında, sol kenar çubuğundaki ‘Menüler’ sekmesine tıklamanız yeterlidir.

Buradan, gelişmiş özellikleri görüntülemek için sağ üstteki dişli simgesine tıklayın.

Şimdi, devam edin ve ‘CSS Sınıfları’ kutusunu işaretleyin.

Bundan sonra, ‘Menüler’ bölümüne ilerleyin.

Birden fazla WordPress menünüz varsa, vurgulamak istediğiniz menü öğelerinin bulunduğu menüye tıklamanız yeterlidir.

Bu, vurgulamak istediğiniz menü öğesini seçebileceğiniz yeni bir sekme açacaktır. Bu, örneğimizde olduğu gibi ‘Bize Ulaşın’ olabileceği gibi fiyatlandırma sayfanız veya çevrimiçi mağazanızın bağlantısı da olabilir.

Bazı ayarları genişletmek için seçtiğiniz menü öğesine tıklamanız yeterlidir. Burada, ‘CSS Sınıfları’ alanına tıklayın.

Tek yapmanız gereken alana 'highlighted-menu' yazmaktır. Bu CSS Sınıfını birden fazla menü öğesine ekleyebilirsiniz ve hepsi vurgulanacaktır.

Ardından, tema özelleştiricideki ‘Ek CSS’ sekmesine gitmeniz yeterlidir.

Bundan sonra, aşağıdaki CSS kodunu kopyalayıp yapıştırın:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Tebrikler! Bir menü öğesini başarıyla vurguladınız.

Son olarak, ayarlarınızı kaydetmek için en üstteki ‘Yayınla’ düğmesine tıklamayı unutmayın.

Menü Öğesi Vurgulamanızı Özelleştirme

Artık menü öğesini vurguladığınıza göre, menü öğenizi istediğiniz şekilde özelleştirmek için CSS kodunu değiştirebilirsiniz.

Örneğin, menü öğenizin arka plan rengini değiştirebilirsiniz.

Yapıştırdığınız CSS parçacığında aşağıdaki kodu aramanız yeterlidir:

background: #FFB6C1

Bulduktan sonra, pembe renk kodu numarasını istediğiniz herhangi bir rengin onaltılık koduyla değiştirebilirsiniz:

background: #7FFFD4;

Yukarıda akuamarin için hex kodu verilmiştir.

Vurgulanan menü öğesinin nasıl özelleştirileceğine ilişkin diğer fikirler için kolayca özel CSS ekleme kılavuzumuza göz atabilirsiniz.

Seçimlerinizden memnun kaldıktan sonra, değişikliklerinizi kaydetmek için tema özelleştiricideki ‘Yayınla’ düğmesine veya WPCode’daki ‘Snippet’i Kaydet’ düğmesine tıklamanız yeterlidir.

Umarız bu makale WordPress’te bir menü simgesini nasıl vurgulayacağınızı öğrenmenize yardımcı olmuştur. WordPress gezinme menülerinin nasıl şekillendirileceğine ilişkin başlangıç kılavuzumuza veya WordPress’te gezinme menülerine resim simgelerinin nasıl ekleneceğine ilişkin eğitimimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.