WordPress'te Yapışkan Yüzer Gezinme Menüsü Nasıl Oluşturulur

Son zamanlarda, kullanıcılarımızdan biri bize siteleri için nasıl sabit bir gezinme menüsü oluşturacağımızı sordu?

Kullanıcılar sayfayı aşağı kaydırdıkça yapışkan gezinme menüleri ekranda kalır. Bu, üst menünün her zaman görünür olmasını sağlar, bu da web sitenizin en önemli bölümlerine bağlantılar içerdiğinden kullanıcı deneyimi için iyidir.

Bu makalede, WordPress'te nasıl kolayca yapışkan bir kayan gezinme menüsü oluşturulacağını göstereceğiz.

Yapışkan Yüzer Gezinme Menüsü nedir?

Yapışkan veya kayan gezinme menüsü, kullanıcı aşağı kaydırdıkça ekranın üst kısmına 'yapışan' bir menüdür. Bu, menünüzü her zaman kullanıcılara görünür hale getirir.

İşte yapışkan bir menü iş başında. Size kendi siteniz için tam olarak böyle bir menüyü nasıl oluşturacağınızı göstereceğiz:

Yapışkan menüler neden ve ne zaman faydalı olabilir?

Genellikle, üst gezinme menüsü, bir web sitesinin en önemli bölümlerine bağlantılar içerir. Kayan bir menü, bu bağlantıları her zaman görünür hale getirir ve bu da kullanıcıları en başa dönmekten kurtarır. Ayrıca dönüşümleri arttırdığı da kanıtlanmıştır.

Bir çevrimiçi mağaza işletiyorsanız, en üstteki gezinme menünüz muhtemelen alışveriş sepetine, ürün kategorilerine ve ürün aramasına bağlantılar içerir. Bu menüyü yapışkan hale getirmek, alışveriş sepetini terk etmeyi azaltmanıza ve satışları artırmanıza yardımcı olabilir.

En iyi WordPress temalarından bazıları, sabit bir gezinme menüsü için yerleşik desteğe sahiptir. Bu özelliği etkinleştirmek için Temalar » Özelleştir altında tema ayarlarınıza bakın.

Temanızda bu seçenek yoksa, okumaya devam edin, size herhangi bir WordPress temasında veya WooCommerce mağazasında nasıl kolayca yapışkan bir kayan gezinme menüsü oluşturabileceğinizi göstereceğiz.

Yöntem 1: Bir Eklenti Kullanarak Yapışkan Kayan Gezinme Menünüzü Ekleyin

Bu en kolay yöntemdir. Özellikle yeni başlayanlar olmak üzere tüm WordPress kullanıcıları için öneriyoruz.

Gezinme menünüzü henüz ayarlamadıysanız, WordPress'te gezinme menüsünün nasıl ekleneceğine ilişkin talimatlarımızı kullanarak devam edin.

Bundan sonra, Scroll eklentisine Yapışkan Menüyü (veya Herhangi Bir Şey!) yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Aktivasyon üzerine, eklenti ayarlarını yapılandırmak için Ayarlar » Yapışkan Menü (veya Herhangi Bir Şey!) sayfasını ziyaret etmeniz gerekir.

Öncelikle, yapışkan hale getirmek istediğiniz navigasyon menüsünün CSS ID'sini girmeniz gerekiyor.

Gezinme menünüz tarafından kullanılan CSS kimliğini bulmak için tarayıcınızın inceleme aracını kullanmanız gerekecektir.

Sadece web sitenizi ziyaret edin ve farenizi gezinme menüsüne götürün. Bundan sonra, sağ tıklayıp tarayıcınızın menüsünden İncele'yi seçmeniz gerekir.

Bu, tarayıcı ekranınızı bölecek ve navigasyon menünüzün kaynak kodunu görebileceksiniz.

Gezinmenizle veya site başlığınızla ilgili bir kod satırı bulmanız gerekir. Bunun gibi bir şey görünecek:

<nav id="site-navigation" class="main-navigation" role="navigation">

Bulmakta zorlanıyorsanız, fare imlecinizi İncele bölmesindeki farklı kod satırlarının üzerine getirin. Doğru kod satırına sahip olduğunuzda gezinme menüsü tamamen vurgulanacaktır:

Bu durumda, gezinme menümüzün CSS kimliği site-navigation .

Yapmanız gereken tek şey, başlangıçta bir karma ile eklenti ayarlarına menünüzün CSS kimliğini girmek. Bu durumda, bu #site-navigation .

Sayfanın altındaki 'Değişiklikleri Kaydet' düğmesini tıklamayı unutmayın.

Şimdi devam edin ve yapışkan menünüzü WordPress web sitenizde canlı olarak kontrol edin. Aşağı kaydırırken sayfada kalmalıdır, şöyle:

Eklentinin ayarlar sayfasındaki bir sonraki seçenek, ekranınızın üst kısmı ile yapışkan gezinme menüsü arasındaki boşluğu tanımlamaktır. Bu ayarı yalnızca menünüz gizlenmesini istemediğiniz bir öğeyle çakışıyorsa kullanmanız gerekir. Değilse, bu ayarı yok sayın.

'Yönetici Çubuğunu Kontrol Et' seçeneğinin yanındaki kutuyu işaretli bırakmanızı öneririz. Bu, eklentinin yalnızca oturum açmış kullanıcılar tarafından görülebilen WordPress yönetici çubuğu için biraz alan eklemesine olanak tanır.

Burada, test sitemizdeki yönetici çubuğunun yapışkan menünün üzerinde doğru şekilde görüntülendiğini görebilirsiniz:

Sonraki seçenek, bir kullanıcı web sitenizi mobil cihaz gibi daha küçük bir ekran kullanarak ziyaret ediyorsa gezinme menüsünü kaldırmanıza olanak tanır:

Sitenizin mobil cihazlarda veya tabletlerde nasıl göründüğünü test edebilirsiniz. Görünüşünü beğenmediyseniz, bu seçenek için 780px eklemeniz yeterlidir.

Seçeneklerinizde herhangi bir değişiklik yaptıktan sonra Değişiklikleri Kaydet butonuna tıklamayı unutmayınız.

Yöntem 2: Elle Yapışkan Kayan Gezinme Menüsü Ekleme

Bu yöntem, temanıza özel CSS kodu eklemenizi gerektirir. Yeni başlayanlar için önermiyoruz.

Başlamadan önce WordPress sitenize özel CSS'yi nasıl kolayca ekleyeceğiniz konusundaki kılavuzumuza da göz atmanızı öneririz.

İlk olarak, WordPress tema özelleştiricisini başlatmak için Görünüm » Özelleştir sayfasını ziyaret etmeniz gerekir.

Ardından, sol bölmedeki 'Ek CSS'yi tıklayın ve ardından bu CSS kodunu ekleyin.

#site-navigation {
    background:#00000;
    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: center;
}

Not: Bu, siyah bir arka plana sahip bir gezinme menüsü üretecektir. Farklı bir renk istiyorsanız, background yanındaki numarayı değiştirin. Örneğin, background: #ffffff kullanmak size beyaz bir menü arka planı verecektir.

#site-navigation navigasyon menünüzün CSS ID'si ile değiştirin ve ardından ekranın üst kısmındaki Yayınla düğmesini tıklayın.

Devam edin ve yapışkan kayan gezinme menünüzü çalışırken görmek için web sitenizi ziyaret edin:

Gezinme menünüz normalde site başlığının üstünde değil de altında görünüyorsa? Öyleyse, bu CSS kodu, kullanıcı kaydırmadan önce site başlığı ve başlığıyla örtüşebilir veya ona çok yakın görünebilir:

Bu, bazı ek CSS kodlarını kullanarak başlık alanınıza bir kenar boşluğu ekleyerek kolayca ayarlanabilir:

.site-branding {
margin-top:60px !important;
}

site-branding başlık alanınızın CSS sınıfıyla değiştirin. Artık, yapışkan gezinme menüsü, kullanıcı aşağı kaydırmadan önce başlığınızla çakışmayacaktır:

Bu makalenin, WordPress sitenize yapışkan bir kayan gezinme menüsü eklemenize yardımcı olduğunu umuyoruz. Ayrıca, herhangi bir kod yazmadan özel bir WordPress temasının nasıl oluşturulacağına ilişkin kılavuzumuzu ve en iyi WordPress sayfa oluşturucu eklentilerini karşılaştırmamızı 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.