Bir web sitesi navigasyon sistemi, üzerine inşa edildiği platformdan bağımsız olarak her web sitesinin en önemli özelliklerinden biridir. Özellikle gezinme menüleri, bu sistemin önemli bir bileşenidir ve ziyaretçiler üzerinde en büyük etkiye sahiptir. Bu yüzden WordPress gezinme menülerinizi biçimlendirdiğinizden emin olmak siteniz için çok faydalı olabilir.
Kısacası gezinme menüleri, web sitesinin en değerli dahili bağlantılarının bir yapısını temsil eder. Ziyaretçilerin içeriğinizi keşfetmesi için hızlı ve verimli bir yol sağlarlar. Bu bağlantılar sayfalarınıza, yayınlarınıza, kategorilerinize veya seçtiğiniz diğer bazı özel bağlantılara yönlendirebilir. Neyse ki, sezgisel menü oluşturma ve genel bakış bölümü sayesinde tüm bunları WordPress’te eklemek kolaydır.
Bununla birlikte bir WordPress gezinme menüsü oluşturduğunuzda, onu biçimlendirmek için ek çaba harcamanız gerekebilir. Uygun stil ve tipografi ile gezinme menüleri gerçekten dikkat çekici hale gelebilir ve ziyaretçilerinize sorunsuz, gösterişli bir kullanıcı deneyimi sağlayabilir. Bu durum onları sitenizde daha uzun süre tutabilir ve hemen çıkma oranınızı azaltabilir. Bu makalede, bu özellikten en iyi şekilde yararlanmak için WordPress gezinme menülerini nasıl şekillendireceğinizi göstereceğiz. Makalenin belirli bir bölümüne atlamak isterseniz, aşağıdaki bağlantılardan birine tıklamanız yeterlidir:
-
Başlamadan önce
-
WordPress gezinme menülerini inceleme
-
WordPress gezinme menüsünü şekillendirme
Başlamadan önce
Genel olarak, her WordPress temasının gezinme menülerinin farklı, temaya özgü bir varsayılan stilizasyonu vardır. QodeInteractive koleksiyonundakiler gibi premium WordPress temaları, varsayılan menü stilizasyonunu tamamen özelleştirmenin bir yolunu sunarken, çoğu ücretsiz tema için aynı şey söylenemez.
Temanızın stilizasyon için sunduğu seçeneklerden memnun değilseniz, WordPress gezinme menülerini biçimlendirmenin alternatif bir yolunu bulmanız gerekir. Bunu yapmanıza yardımcı olması için uygun bir WordPress menü eklentisi kullanabilir veya özel CSS kodu oluşturabilirsiniz. Bu yazıda ikincisi hakkında konuşacağız. Ele alacağımız örnekler, en azından temel bir HTML ve CSS anlayışı gerektirir, fakat her bilgi seviyesinden kullanıcının takip edebilmesi için her şeyi ayrıntılı olarak açıklayacağız.
Bu makale için oluşturduğumuz örnekler Lekker teması kullanılarak yapılmıştır ve tasarımına uygundur. Bu yüzden mevcut tema tasarımını tamamlayan temaya özel CSS seçicileri ve CSS kuralları içerdiklerinden kopyala-yapıştır yapmamalısınız.
Bunun yerine, makaleyi dikkatlice okumalı ve verdiğimiz CSS kodunu buna göre ayarlamalısınız. Bu durum CSS seçicilerinin temanızdaki eşdeğerleriyle değiştirilmesini içerir. Ayrıca mevcut CSS kurallarını düzenlemeyi ve/veya yenilerini eklemeyi düşünmelisiniz. CSS kodunuzu oluşturduktan sonra Görünüm > Özelleştir > Ek CSS’ye eklemelisiniz. Bunu söyledikten sonra başlayalım.
WordPress gezinme menülerini inceleme
Herhangi bir CSS kodu oluşturmak için bir gereklilik, belirli bir sayfanın HTML yapısını gözlemleyebilmek, yani inceleyebilmektir. Bunu yaparak, belirli bir CSS kuralını uygulayacağınız HTML öğesi için uygun CSS seçiciyi seçebileceksiniz.
WordPress gezinme menünüzü incelemek için, gezinme menüsü öğelerinizden birine sağ tıklayın ve beliren menüden İncele seçeneğini seçin.
Bu durum tarayıcınızın geliştirici araçlarını açar ve sizi sağ tıkladığınız HTML öğesinin üzerindeki Öğeler sekmesine yerleştirir. Aynı öğe, boyutlarını ve yerleşimini görebilmeniz için sayfada vurgulanacaktır. Ayrıca öğeye bağlı olarak ve bu özellikler CSS ile eklenmişse kenarlık, dolgu ve kenar boşluğu değerlerini görebilirsiniz.
Çeşitli öğeleri inceleyerek sayfanızın HTML yapısını gözden geçirmelisiniz. Bu durum gezinme menüsünün belirli bölümlerinin veya bir bütün olarak başlığın HTML kullanılarak nasıl oluşturulduğunu anlamanıza ve en uygun CSS seçiciyi bulmanıza yardımcı olacaktır. Daha sonra bazı CSS kurallarını aşağıda gösterilen şekilde (sahte kod) bu CSS seçiciye uygulayabilirsiniz.
appropriate CSS selector {
// Insert CSS rules here
}
En uygun CSS seçiciyi oluşturmak için sınıfları veya kimlikleri kullanmak her zaman iyi bir başlangıç noktasıdır.
Örneğin yalnızca gezinme menüsünü hedeflemek istiyorsak,