WordPress’te Yapışkan Kayan Navigasyon Menüsü Nasıl Oluşturulur

WordPress’te yapışkan bir kayan navigasyon menüsü mü oluşturmak istiyorsunuz?

Üst navigasyon menüsünde genellikle en önemli sayfalarınıza bağlantılar bulunur. Bu menüyü yapışkan hale getirerek, kullanıcı sayfayı aşağı kaydırdıkça ekranda kalmasını sağlayabilir, böylece her zaman kolayca erişilebilir olmasını sağlayabilirsiniz.

Bu makalede, WordPress web sitenize yapışkan bir kayan gezinme menüsünü nasıl kolayca ekleyebileceğinizi göstereceğiz.

Yapışkan Kayan Navigasyon Menüsü Nedir?

Yapışkan veya kayan navigasyon menüsü, kullanıcı aşağı kaydırdıkça ekranın üst kısmına ‘yapışır’, böylece her zaman ekranda kalır.

WordPress ‘teki üst gezinti menüsü genellikle web sitenizin en önemli içeriklerine bağlantılar içerir. Bu menüyü yapışkan hale getirerek ziyaretçilerin kaydırma yapmak zorunda kalmadan istedikleri zaman bu bağlantılara tıklamalarını sağlayabilirsiniz.

Bir online mağaza işletiyorsanız, üst gezinme menüsünde genellikle ödeme sayfası ve müşteri sepeti gibi dönüşüm sağlamak üzere tasarlanmış sayfalara bağlantılar bulunur. Üst menüyü yapışkan hale getirerek genellikle alışveriş sepetini terk etme oranlarını azaltabilir ve daha fazla satış elde edebilirsiniz.

Bununla birlikte, herhangi bir WordPress temasında veya WooCommerce mağazasında yapışkan bir kayan gezinme menüsünü nasıl kolayca oluşturabileceğinizi görelim. Kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1: Tema Ayarlarınızı Kullanarak Yapışkan Menü Ekleyin (Kolay)

En iyi WordPress temalarından bazıları yapışkan navigasyon menüleri için yerleşik desteğe sahiptir. Bununla birlikte, WordPress panosunda Temalar ” Özelleştir bölümüne giderek ve ‘Menüler’ etiketli herhangi bir ayar arayarak tema ayarlarınızı kontrol etmeye değer.

Temanızın yapışkan menüleri destekleyip desteklemediğinden emin değilseniz, temanın belgelerini kontrol edebilir veya hatta yardım için geliştiriciyle iletişime geçebilirsiniz. Daha fazla bilgi için lütfen WordPress desteğini nasıl düzgün bir şekilde isteyeceğinize ve alacağınıza ilişkin kılavuzumuza bakın.

Temanızda yapışkan menüler için yerleşik destek yoksa aşağıdaki diğer yöntemlerden birini kullanmanız gerekir.

Yöntem 2: Yapışkan Navigasyon Menünüzü Bir Eklenti Kullanarak Ekleyin (Önerilen)

WordPress’te yapışkan bir navigasyon menüsü eklemenin en kolay yolu Sticky Menu & Sticky Header eklentisini kullanmaktır. Menüler de dahil olmak üzere her şeyi yapışkan hale getirmenizi sağlar.

Öncelikle eklentiyi yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından Ayarlar ” Yapışkan Menü (veya Herhangi Bir Şey!) bölümüne gidin.

Başlamak için, tarayıcınızın denetleme aracını kullanarak yapışkan yapmak istediğiniz gezinti menüsünün CSS kimliğini almanız gerekir.

Web sitenizi ziyaret edin ve farenizi gezinme menüsünün üzerine getirin. Bundan sonra, sağ tıklayın ve tarayıcı menüsünden ‘İncele’yi seçin.

Bu, tarayıcının içinde navigasyon menüsünün kaynak kodunu görebileceğiniz yeni bir panel açacaktır.

Menü veya site başlığınızla ilgili kod satırını bulmanız gerekir. Şuna benzer bir şey görünecektir:

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

Kodu bulmakta zorlanıyorsanız, farenizi ‘İncele’ panelindeki farklı kod satırlarının üzerine getirin. Aşağıdaki resimde görebileceğiniz gibi, doğru kodu bulduğunuzda tarayıcı gezinme menüsünü vurgulayacaktır.

Bu durumda, gezinti menüsünün CSS kimliği site-navigation‘dur.

Bu bilgileri aldıktan sonra WordPress kontrol panelinize geri dönün ve ‘Yapışkan Öğe (Gerekli)’ alanına ekleyin.

Ayrıca başına bir hash karakteri (#) eklemeniz gerekir, böylece site-navigation #site-navigation olur.

Bundan sonra, değişikliklerinizi kaydetmek için sayfanın altındaki ‘Değişiklikleri Kaydet’ düğmesine tıklayın.

Şimdi, WordPress web sitenizi ziyaret eder ve kaydırırsanız, menü en üstte kalmalıdır.

Bazen yapışkan menü, gizlemek istemediğiniz bazı içeriklerle çakışabilir.

Bu durumda, ‘Sayfanın üst kısmı ile yapışkan öğe arasındaki boşluk’ alanına bir sayı yazarak ekranınızın üst kısmı ile yapışkan navigasyon menüsü arasında bir boşluk tanımlamanız gerekir.

Yapışkan menüler, mobil cihazlar gibi daha küçük ekranlı cihazlarda sorunlara neden olabilir. Bunu göz önünde bulundurarak, WordPress web sitenizin mobil sürümünü masaüstünüzden kontrol etmek iyi bir fikirdir.

Menünün nasıl göründüğünden memnun değilseniz, aşağıdaki alanı bularak mobil kullanıcılar için ‘yapışmayı kaldırabilirsiniz’: ‘Ekran daha küçük olduğunda öğeyi yapıştırma.

Burada, ‘780px’ yazın.

Keşfedilecek başka ayarlar da var, ancak çalışan bir yapışkan navigasyon menüsü oluşturmak için ihtiyacınız olan tek şey bu.

Navigasyon menüsünün nasıl ayarlandığından memnun olduğunuzda, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’e tıklayın.

Yöntem 3: Kod Kullanarak Yapışkan Kayan Gezinme Menüsü Ekleme

CSS kullanarak yapışkan bir navigasyon menüsü de oluşturabilirsiniz.

WordPress’e özel kod eklemenin en iyi yolu WPCode kullanmaktır. özel CSS, PHP, HTML ve daha fazlasını eklemenize olanak tanıyan en iyi kod parçacıkları eklentisidir.

Tema dosyalarını doğrudan düzenlemediğiniz için birçok yaygın WordPress hatasından kaçınabilirsiniz. Ayrıca özel kodunuzu kaybetmeden temanızı güncelleyebilir veya tamamen farklı bir temaya geçebilirsiniz.

Ayrıca tek bir tıklamayla yapışkan menüyü açıp kapatabilirsiniz.

Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Daha fazla bilgi için, WordPress eklentisinin nasıl yükleneceğine ilişkin adım adım kılavuzumuza bakın.

Eklenti etkinleştirildikten sonra, sitenize ekleyebileceğiniz tüm hazır WPCode snippet ‘lerini göreceğiniz Code Snippets ” + Add Snippet sayfasına gidin.

Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress’in genellikle desteklemediği dosya türlerini yüklemenize, ek sayfalarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir kod parçacığı bulunmaktadır.

Burada, farenizi ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin üzerine getirin ve göründüğünde ‘Snippet kullan’ düğmesine tıklayın.

Bir sonraki ekranda, kod parçacığı için bir başlık yazmanız gerekir. Bu sadece referans içindir, bu yüzden istediğiniz herhangi bir şeyi kullanabilirsiniz.

Ardından, ‘Kod Türü’ açılır menüsünü açın ve ‘CSS Snippet’i seçin.

Bunu yaptıktan sonra, aşağıdaki kod parçacığını WPCode kod düzenleyicisine 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;
}

Bu, siyah arka plana sahip bir gezinme menüsü oluşturacaktır. Arka planın yanındaki hex kodunu değiştirerek istediğiniz rengi kullanabilirsiniz.

Örneğin, background: #ffffff kullanmak size beyaz bir menü arka planı verecektir. Hangi hex kodunu kullanacağınızdan emin değilseniz, HTML renk kodu gibi bir kaynağa bakabilirsiniz.

Ayrıca #site-navigation yerine navigasyon menünüzün CSS kimliğini yazmanız gerekecektir. Bu kodu bulmak için yukarıda açıklanan aynı süreci takip etmeniz yeterlidir.

Koddan memnun olduğunuzda, ‘Etkin Değil’ geçişine tıklayarak ‘Etkin’ olarak değişmesini sağlayın ve ardından ‘Snippet’i Kaydet’ düğmesine tıklayın.

Şimdi, WordPress blogunuzu veya web sitenizi ziyaret ederseniz, yapışkan kayan gezinme menüsünü çalışırken göreceksiniz.

Temanıza bağlı olarak, bazen gezinme menüsü site başlığının üstünde değil altında görünebilir. Bu durumda, yapışkan gezinme menüsü site başlığına ve üstbilgisine çok yakın görünebilir, hatta üst üste gelebilir.

Bu durumda, özel CSS kod parçacığınıza aşağıdakileri ekleyebilirsiniz:

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

Sadece site markasını başlık alanınızın CSS sınıfı ile değiştirin. Bu bilgiyi almak için tarayıcınızın ‘İncele’ aracını kullanın ve ardından Yöntem 2’de açıklanan aynı süreci izleyin.

Bonus: WordPress Yazılarınızı Yapışkan Hale Getirin

Bir WordPress blogunuz varsa, blog yazılarınızdan bazılarını yapışkan hale getirmek iyi bir fikirdir. Bunlar, sitenizin en önemli içeriğini içeren temel makaleler veya kullanıcıların etkileşimde bulunmasını istediğiniz duyurular ve hediye gönderileri olabilir.

Seçtiğiniz bir yazıyı yapışkan hale getirdiğinizde, siz yeni içerik yayınlasanız bile bu yazı blog sayfanızın en üstünde kalır ve yapışkan yazının altında gösterilir.

Blog gönderinizi içerik düzenleyicide açarak kolayca yapışkan hale getirebilirsiniz. Bunu yaptıktan sonra, blok panelindeki ‘Özet’ sekmesini genişletin ve ‘Blogun en üstüne yapıştır’ seçeneğini işaretleyin.

Bundan sonra, ayarlarınızı kaydetmek için üstteki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın. Artık WordPress sitenizde başarılı bir şekilde yapışkan bir blog yazısı oluşturdunuz.

Daha fazla ayrıntı için WordPress’te yapışkan yazıların nasıl oluşturulacağına ilişkin eğitimimize bakın.

Umarız bu makale WordPress sitenize yapışkan bir kayan gezinme menüsü eklemenize yardımcı olmuştur. Ayrıca blog trafiğinizi nasıl artıracağınıza ilişkin başlangıç kılavuzumuzu ve en iyi WordPress sayfa oluşturucu eklentileri karşılaştırmamızı da görmek 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.