Bir web sitesindeki üst gezinme menüsü genellikle en önemli sayfalara bağlantılar içerir. Bu menüyü yapışkan hale getirdiğinizde, kullanıcı sayfayı aşağı kaydırdıkça ekranda kalmasını sağlayabilirsiniz. Böylece her zaman ulaşılabilir olur.
Bu, gezinmeyi daha erişilebilir hale getirerek kullanıcıların sitenizin farklı bölümlerine, yukarı kaydırmak zorunda kalmadan hızla atlamalarını sağlar. Kanımızca, yapışkan bir menü kullanmak etkileşimi artırmaya ve genel web sitesi kullanılabilirliğini iyileştirmeye yardımcı olabilir.
Bu makalede, WordPress web sitenize kolayca yapışkan kayan bir gezinme menüsü eklemeyi göstereceğiz.
Yapışkan Kayan Gezinme Menüsü Nedir?
Yapışkan veya kayan bir gezinme menüsü, kullanıcı aşağı kaydırdıkça ekranın üst kısmına ‘yapışır’, böylece her zaman ekrandadır.
Genellikle, WordPress'teki üst navigasyon menüsü web sitenizin en önemli içeriğine bağlantılar içerir. Bu menüyü yapışkan hale getirerek, ziyaretçiler kaydırmak zorunda kalmadan istedikleri zaman bu bağlantılara tıklayabilirler.
Çevrimiçi bir mağaza işletiyorsanız, üst gezinme menüsü genellikle ödeme sayfası ve müşteri sepeti gibi dönüşüm sağlamak üzere tasarlanmış sayfalara bağlantılar içerir. Üst menüyü sabit hale getirerek, sepeti terk etme oranlarını azaltabilir ve daha fazla satış elde edebilirsiniz.
Bununla birlikte, herhangi bir WordPress temasında veya WooCommerce mağazasında kolayca yapışkan bir kayan gezinme menüsü 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 Sabit Bir Menü Ekleyin (Kolay)
- Yöntem 2: Yapışkan Gezinme Menünüzü Bir Eklenti Kullanarak Ekleyin (Önerilir)
- Yöntem 3: Kod Kullanarak Yapışkan Kayar Gezinme Menüsü Ekleme
- Bonus: WordPress Gönderilerinizi Yapışkan Hale Getirin
Yöntem 1: Tema Ayarlarınızı Kullanarak Sabit Bir Menü Ekleyin (Kolay)
En iyi WordPress temalarının bazıları, yapışkan navigasyon menüleri için yerleşik desteğe sahiptir. Bununla birlikte, WordPress kontrol panelinde Temalar » Özelleştir'e giderek ve 'Menüler' etiketli herhangi bir ayar arayarak tema ayarlarınızı kontrol etmeye değer.
Yapışkan menülerin temanız tarafından desteklenip desteklenmediğinden emin değilseniz, temanın belgelerini kontrol edebilir veya yardım için geliştiriciyle iletişime geçebilirsiniz. Daha fazla bilgi için lütfen WordPress desteği için nasıl doğru şekilde sorulur ve alınır konulu rehberimize bakın.
Temanız yapışkan menüler için yerleşik destek sunmuyorsa, aşağıdaki diğer yöntemlerden birini kullanmanız gerekecektir.
Yöntem 2: Yapışkan Gezinme Menünüzü Bir Eklenti Kullanarak Ekleyin (Önerilir)
WordPress'te yapışkan bir gezinme menüsü eklemenin en kolay yolu, Sticky Menu & Sticky Header eklentisini kullanmaktır. Bu, menüler de dahil olmak üzere herhangi bir şeyi yapışkan hale getirmenize olanak tanır.
İlk olarak, eklentiyi yüklemeniz ve etkinleştirmeniz gerekecektir. Yardıma ihtiyacınız olursa, lütfen WordPress eklentisinin nasıl kurulacağına dair yeni başlayanlar rehberimize bakın.
Etkinleştirdikten sonra, 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 hale getirmek istediğiniz gezinme menüsünün CSS kimliğini almanız gerekir.
Web sitenizi ziyaret edin ve fare imlecini gezinme menüsünün üzerine getirin. Ardından, sağ tıklayın ve tarayıcının menüsünden ‘İncele’yi seçin.
Bu, tarayıcı içinde yeni bir panel açacaktır; burada gezinme menüsünün kaynak kodunu görebilirsiniz.
Menü veya sitenizin başlığıyla ilgili kod satırını bulmanız gerekecek. Şuna benzer görünecektir:
<nav id="site-navigation" class="main-navigation" role="navigation">
Kodu bulmakta zorlanıyorsanız, 'Denetle' panelindeki farklı kod satırlarının üzerine fareyle gelin. Doğru kodu bulduğunuzda, tarayıcı gezinme menüsünü vurgulayacaktır, aşağıdaki resimde görebileceğiniz gibi.
Bu durumda, gezinme menüsünün CSS kimliği site-navigation'dır.
Bu bilgileri aldıktan sonra WordPress kontrol panelinize geri dönün ve bunu 'Yapışkan Öğe (Gerekli)' alanına ekleyin.
Ayrıca başlangıçta bir karma karakteri (#) eklemeniz gerekecek, bu nedenle site-navigation, #site-navigation olacaktır.
Ardından, değişikliklerinizi kaydetmek için sayfanın altındaki ‘Değişiklikleri Kaydet’ düğmesine tıklayın.
Şimdi, WordPress web sitenizi ziyaret edip kaydırırsanız, menü en üstte kalmalıdır.
Bazen yapışkan menü, gizlemek istemediğiniz bazı içeriklerin üzerine gelebilir.
Bu olursa, ‘Yapışkan öğe ile sayfanın üstü arasındaki boşluk’ alanına bir sayı yazarak ekranınızın üst kısmı ile yapışkan gezinme 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 akılda tutarak, WordPress web sitenizin mobil sürümünü masaüstünüzden kontrol etmek iyi bir fikirdir.
Menünün görünümünden memnun değilseniz, şu alanı bularak mobil kullanıcılar için 'yapışkanlığını' kaldırabilirsiniz: 'Ekran daha küçük olduğunda öğeyi yapıştırma.'
Buraya ‘780px’ yazın.
Keşfedilecek daha fazla ayar var, ancak çalışan yapışkan bir gezinme menüsü oluşturmak için ihtiyacınız olan her şey bu.
Gezinme menüsünün kurulumundan memnun kaldığınızda, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’e tıklayın.
Yöntem 3: Kod Kullanarak Yapışkan Kayar Gezinme Menüsü Ekleme
CSS kullanarak da yapışkan bir navigasyon menüsü oluşturabilirsiniz.
Özel kodu WordPress'e eklemenin en iyi yolu WPCode kullanmaktır. Özel CSS, PHP, HTML ve daha fazlasını eklemenizi sağlayan en iyi kod parçacığı eklentisidir.
Doğrudan tema dosyalarını düzenlemediğiniz için, birçok yaygın WordPress hatasından kaçınabilirsiniz. Ayrıca temanızı güncelleyebilir veya özel kodunuzu kaybetmeden tamamen farklı bir temaya geçebilirsiniz.
Yapışkan menüyü tek bir tıklamayla açıp kapatabilirsiniz.
Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Daha fazla bilgi için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Eklenti etkinleştirildikten sonra, sitenize ekleyebileceğiniz tüm hazır WPCode kod parçacıklarını göreceğiniz Kod Parçacıkları » + Kod Parçacığı Ekle sayfasına gidin.
Bunlar arasında yorumları tamamen devre dışı bırakmanızı sağlayan bir kod parçacığı, WordPress'in normalde desteklemediği dosya türlerini yükleme, ek sayfa bağlantılarını devre dışı bırakma ve çok daha fazlası yer alır.
Burada, fareyi 'Özel Kodunuzu Ekleyin (Yeni Parça)' üzerine getirin ve göründüğünde 'Parçayı kullan' düğmesine tıklayın.
Bir sonraki ekranda, kod parçacığı için bir başlık yazmanız gerekir. Bu sadece sizin referansınız 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 Parçacığı’nı seçin.
Bu işlem tamamlandıktan sonra, aşağıdaki kod parçası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. background yanındaki onaltılık kodu değiştirerek istediğiniz rengi kullanabilirsiniz.
Örneğin, background: #ffffff kullanmak size beyaz bir menü arka planı verecektir. Hangi onaltılık kodu kullanacağınızdan emin değilseniz, HTML renk kodu gibi bir kaynaktan yararlanabilirsiniz.
Ayrıca, #site-navigation kısmını gezinme menünüzün CSS kimliği ile değiştirmeniz gerekecektir. Bu kodu bulmak için yukarıda açıklanan aynı işlemi izlemeniz yeterlidir.
Koddan memnun kaldığınızda, ‘Etkin Değil’ geçişini ‘Etkin’ olarak değiştirmek için tıklayın ve ardından ‘Kod Parçasını Kaydet’ düğmesine tıklayın.
Şimdi, WordPress blogunuzu veya web sitenizi ziyaret ederseniz, yapışkan kayan navigasyon menüsünün çalıştığını göreceksiniz.
Temanıza bağlı olarak, bazen gezinme menüsü sitenin üst kısmının üzerinde değil, altında görünebilir. Bu durumda, yapışkan gezinme menüsü site başlığına ve üst kısmına çok yakın görünebilir veya hatta üzerine gelebilir.
Bu olursa, özel CSS parçacığınıza aşağıdakileri ekleyebilirsiniz:
.site-branding {
margin-top:60px !important;
}
Yalnızca site-branding'i başlık alanınızın CSS sınıfıyla değiştirin. Bu bilgiyi almak için tarayıcınızın 'Denetle' aracını kullanın ve ardından Yöntem 2'de açıklanan aynı işlemi izleyin.
Bonus: WordPress Gönderilerinizi Yapışkan Hale Getirin
WordPress blogunuz varsa, blog gönderilerinizden bazılarını yapışkan hale getirmek iyi bir fikirdir. Bunlar, sitenizin en önemli içeriğini içeren ana makaleler veya kullanıcıların etkileşimde bulunmasını istediğiniz duyurular ve çekiliş gönderileri olabilir.
Seçtiğiniz bir gönderiyi sabitlediğinizde, yeni içerik yayınladıkça blog sayfanızın en üstünde kalacak ve bu yeni içerikler sabitlenmiş gönderinin altında gösterilecektir.
Blog gönderinizi içerik düzenleyicisinde açarak kolayca sabitleyebilirsiniz. Bunu yaptıktan sonra, blok panelindeki 'Özet' sekmesini genişletin ve 'Blogun en üstüne sabitle' seçeneğini işaretleyin.
Bundan sonra, ayarlarınızı kaydetmek için üstteki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın. WordPress sitenizde başarılı bir şekilde yapışkan bir blog gönderisi oluşturdunuz.
Daha fazla ayrıntı için, WordPress'te yapışkan gönderilerin nasıl oluşturulacağı hakkındaki eğitimimize bakın.
Bu makalenin, WordPress sitenize yapışkan kayan bir gezinme menüsü eklemenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress temalarına kaydırmalı panel menüsü ekleme hakkındaki başlangıç kılavuzumuza ve WordPress menüsüne sosyal medya simgeleri ekleme hakkındaki eğitimimize de göz atmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Dennis Muthomi
yapışkan menü yalnızca belirli gönderilerde/sayfalarda geçerli olacak şekilde ayarlanabilir mi? Örneğin, blog ana sayfamda yapışkan olmaması ama web sitesinin diğer her yerinde yapışkan olması gibi?
WPBeginner Desteği
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Yönetici
Mrteesurez
Harika bir çalışma, paylaştığınız eklentiyi burada görmek beni mutlu etti: "yapışkan menü veya (herhangi bir şey) kaydırma sırasında". Bu, menü dışında herhangi bir öğeyi yapışkan hale getirmek için kullanılabileceği anlamına gelir.
Başlangıçta bunun için ham kod kullandım, bu kolay yöntemi paylaştığınız için teşekkürler.
Dayo Olobayo
Katılıyorum Mrteesurez, yapışkan menüler değerli bir web sitesi özelliğidir. Yapışkan bir menü oluşturmanın yanı sıra, web sayfanızdaki bölümler arasında gezinirken kullanıcı deneyimini daha da iyileştirmek için “düzgün kaydırma” efekti eklemeyi de düşünebilirsiniz.
Jiří Vaněk
Eğitim için teşekkürler. Genellikle bunu yapabilen bir şablon arıyordum. Bu rehbere göre artık buna gerek kalmadı.
WPBeginner Desteği
Glad we could help open up your theme options
Yönetici
Paul
5 Yıldızları nereye bırakıyorum…..çok teşekkürler!!
WPBeginner Desteği
Glad our guide was helpful
Yönetici
Jess
Bu faydalı yazı için çok çok teşekkürler!!! Çok net ve takip etmesi kolay.
WPBeginner Desteği
Glad our guide was helpful
Yönetici
Ivaylo
Harika pratik bir eğitim. Yöntem 2'yi yaptım ve anında çalıştı, ancak web sitesini mobilde açtığımda menüdeki düğmeler kayboldu. Bunun nedenini veya nasıl çözüleceğini bilen var mı?
Şerefe!
WPBeginner Desteği
Henüz yapmadıysanız, temanızın CSS'si ile bir çakışma olup olmadığını görmek için belirli temanızın desteğiyle iletişime geçmenizi öneririz.
Yönetici
Serena Richardson
Merhaba,
Bir sayfanın sağ tarafında, üstte değil de yapışkan kayan bir menüyü nasıl oluşturursunuz, böylece aşağı kaydırdıkça o da aşağı iner.
Teşekkürler!
Serena
WPBeginner Desteği
Bu, aşağıda makalemizde önerdiğimiz yapışkan bir widget eklemek olacaktır:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Yönetici
Tom Browne
Anında işe yaradı. Teşekkürler
WPBeginner Desteği
You’re welcome
Yönetici
simran
mükemmellik seviyesi ve bilgiyi sunma şekli…teşekkürler..
WPBeginner Desteği
Glad our guide was helpful
Yönetici
Theo
Navbar'ımın kimliğini nereden öğrenebilirim?
Bulamıyorum.
WPBeginner Desteği
Bunu yapmak için incele öğesini kullanırsınız. Aşağıda incele öğesini doğru şekilde kullanma konusunda bir kılavuzumuz var:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Yönetici
Natasha T
Hayat kurtarıcı, ne kadar teşekkür etsem az.
WPBeginner Desteği
You’re welcome
Yönetici
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
WPBeginner Desteği
Glad our article was helpful
Yönetici
alexandre
Tam olarak aradığım şeydi! Harika eklenti. Teşekkürler
WPBeginner Desteği
You’re welcome, glad you found our recommendation helpful
Yönetici
Guy Bailey
Yardımınız için çok teşekkürler – küçük bir sorum var; menümün arka planı aşağı kaydırırken şeffaf oluyor. Arkasına katı bir renk (bizim durumumuzda beyaz) eklemek için hızlı çözümler veya hileler var mı?
WPBeginner Desteği
Menünüzün nasıl ayarlandığına bağlı olacaktır, ancak arka plan rengi özelliğini ayarlayabileceğiniz nesneyi bulmak için öğeyi incele'yi kullanabilirsiniz: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
Manish
Teşekkürler. Wpbeginner bir konu hakkında blog yazısı yazdığında, bunun faydalı olacağı kesindir.
WPBeginner Desteği
Glad our content has been helpful
Yönetici
Everest
Çok teşekkürler.
Bugün beni çok mutlu ettin.
WPBeginner Desteği
You’re welcome, glad we could help
Yönetici
Tony Chung
CSS kodu işe yaradı ve başlığın tamamının görüntülenmesi için başlığa bir kenar boşluğu eklemem gerekti. Menü çubuğum üstte uzanıyor ancak menü düğmeleri soldan başlıyor ve ortada duruyor. Düğmeleri sayfada ortalanmış olarak nasıl hareket ettirebilirim?
WPBeginner Desteği
Bu, temadan temaya değişir, ancak normalde CSS'yi değiştirmeniz gerekir. Denetleme öğesini kullanarak değişiklikleri test edebilirsiniz: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
Chinedu
Vay, bu mükemmel çalışıyor.
Teşekkürler
WPBeginner Desteği
Glad our solution worked for you
Yönetici
Gillian Davies
Bir tablo içinde kitapların bir listesi var. Ön kapaklarının resimlerini Medya'ya aktardım, şimdi liste aşağı kaydırıldıkça resimlerin görüntüleyici olarak açılmasını istiyorum. Bir satır üzerine gelmeye benzer, ancak bunu tablo oluşturucu ile oluşturulan bir tabloda nasıl yaparım?
Raul
Bu sabit gezinme menüsünü nasıl kaydırılabilir hale getirebilirim?
Kenar çubuğu olarak kullandım ancak kenar çubuğu çok uzun olduğunda ekrana sığmıyor ve aşağı kaydıramıyorum.
Rushikesh Thawale
Merhaba,
Bu gönderide kodu KOD GİBİ nasıl yazdınız? Yani bir gönderide HTML kodlarını bu şekilde nasıl gösterebilirim?
Teşekkürler.
Tara
Muhtemelen şimdiye kadar öğrenmişsinizdir, ancak arayanlar için, kodunuzu gönderinizde nasıl göstereceğiniz, html etiketlerinin açılış parantezi için html karakterini boşluk olmadan < kullanmaktır.
WPBeginner Desteği
Bu yöntemlerden biridir ancak bunun için makalemizdeki ikinci yöntemi kullanıyoruz: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Yönetici
Cesar
Great post! your CSS code works for me
dani
Alain
Çok faydalı!
teşekkür ederim.
amin
Ayrıca, logonuz veya gezinme çubuğunda olmasını istediğiniz herhangi bir öğe için “z-index: 999xxxx” kullanabilirsiniz.
Sujith Reghu
Bir WordPress gönderisine veya sayfasına yapışkan bir menü eklemeyi öğrenmek istiyorum. Uzun bir gönderi için, gönderinin başlıkları ve alt başlıkları yapışkan menüde sunulsun ki okuyucu gönderinin bir bölümünden diğerine kolayca gezinebilsin. Teşekkürler…
Zac
öğretici için teşekkürler!
benim ihtiyacım biraz farklı, menünün üzerine gelindiğinde 'mini bir menü' görünmesini istiyorum... yani üzerine gelene kadar görünmüyor... açılır menü gibi
Bu eğitimi yapabilirseniz minnettar olurum.
amin
mega-menu eklentisi veya uber menu eklentisi kullanabilirsiniz, ancak css veya jquery ile, bootstrap3 menüsü gibi, eklentisiz de yapabilirsiniz