Telefonda hantal, masaüstü tarzı bir menü sunmak, ziyaretçileri hayal kırıklığına uğratmanın kesin bir yoludur. Ve kafa karıştırıcı bir mobil menü, hemen ayrılmalarına neden olabilir.
Kayarak çıkan bir panel menüsü, sitenize temiz, uygulama benzeri bir his vererek ve özellikle küçük ekranlarda harika çalışarak bu sorunu çözer. İçerik bulmayı kolaylaştırır ve ziyaretçileri etkileşimde tutar.
Bu görev için birkaç eklentiyi test ettikten sonra, hem güçlü hem de kurulumu kolay harika bir ücretsiz seçenek bulduk. Tek bir kod satırına dokunmadan profesyonel görünümlü bir kayar menü oluşturabilirsiniz.
Bu kılavuzda, WordPress temanıza adım adım bir kaydırmalı panel menüsü eklemeyi tam olarak göstereceğiz. 🎨
WordPress Temalarına Kayar Panel Menü Neden Eklenir?
Kaydırmalı bir panel menüsü, mobil cihazlarda gezinmeyi daha akıcı ve sezgisel hale getirir. WordPress sitenize temiz, uygulama benzeri bir his verir, ziyaretçilerin kaybolmuş veya hayal kırıklığına uğramış hissetmeden aradıklarını hızlı bir şekilde bulmalarına yardımcı olur.
İyi tasarlanmış menüler, ziyaretçilerinizin WordPress sitenizde yolunu bulmasına yardımcı olur. Ziyaretçilerinizin çoğu mobil cihazlar kullanacağı için, navigasyon menünüzün daha küçük ekranlarda nasıl göründüğünü görmek üzere WordPress sitenizin mobil sürümünü önizlemeniz önemlidir.
Neyse ki, birçok WordPress teması, küçük bir ekranda görüntülendiğinde otomatik olarak mobil uyumlu menüler gösteren yerleşik stillerle birlikte gelir.
Ancak, mobil gezinmenizi daha da özelleştirmek ve tam ekran duyarlı bir menü veya animasyonlu bir kaydırmalı panel menüsü eklemek isteyebilirsiniz.
Bunu akılda tutarak, WordPress temalarına kayar panel menüsü eklemeyi göstereceğiz. İşte bu kılavuzda paylaşacağımız tüm konuların hızlı bir özeti:
- WordPress Temalarına Kaydırmalı Panel Menü Nasıl Eklenir
- Kayar Panel Menüleri Hakkında Sıkça Sorulan Sorular
- Daha Fazla Okuma: Site Menülerini Özelleştirme Hakkında Daha Fazla Kaynak
Başlayalım.
WordPress Temalarına Kaydırmalı Panel Menü Nasıl Eklenir
Yapmanız gereken ilk şey, Responsive Menu eklentisini kurmak ve etkinleştirmektir. Eğer ihtiyacınız olursa, bir WordPress eklentisinin nasıl kurulacağına dair adım adım rehberimizi görebilirsiniz.
💡 Not: Bu öğreticiyi ücretsiz eklentiyi kullanarak takip edebilirsiniz. Ek temalar ve koşullu mantık gibi gelişmiş özellikler istiyorsanız, Responsive Menu eklentisinin premium sürümüne yükseltebilirsiniz.
Etkinleştirdikten sonra, WordPress kontrol panelinizden Responsive Menu » Menüler bölümüne gidelim. Oradayken, ekranın üst kısmındaki 'Yeni Menü Oluştur' düğmesine tıklamalısınız.
Yeni duyarlı menünüz için kullanabileceğiniz 4 tema göreceksiniz. Ek temalar satın alınabilir.
Bu eğitim için otomatik olarak seçilen temayı kullanacağız. Ardından 'İleri' düğmesine tıklayabilirsiniz.
Bu sizi 'Menü Ayarları' sayfasına götürecektir.
Buraya, duyarlı menünüz için bir ad girebilir ve ardından panelde hangi WordPress menüsünün görüntülenmesini istediğinizi seçebilirsiniz. Örneğin, 'Navigasyon' menüsünü seçtik.
Yeni bir menü oluşturmanız gerekiyorsa, WordPress'te gezinme menüsü ekleme konusundaki kılavuzumuzu izleyerek nasıl yapacağınızı öğrenebilirsiniz: WordPress'te gezinme menüsü ekleme.
WordPress temanızla gelen normal menüyü de gizleyebilirsiniz, böylece kullanıcılarınız yalnızca yeni kayar panel menüsünü görür. Bunu, 'Tema Menüsünü Gizle' alanına CSS kodu girerek yaparsınız.
Buraya girmeniz gereken kod temadan temaya değişiklik gösterir ve ‘Daha Fazla Bilgi Edinin’ bağlantısına tıklayarak daha fazla ayrıntı öğrenebilirsiniz.
📝 Not: Pro sürümüne sahip kullanıcıların birkaç ek ayarı vardır. Örneğin, Pro kullanıcıları menünün hangi cihazlarda ve sayfalarda gösterileceğini seçebilirler.
Ayarlardan memnun kaldığınızda, sayfanın altındaki 'Menü Oluştur' düğmesine tıklamalısınız. Bu sizi menünüzü özelleştirmeyi bitirebileceğiniz bir sayfaya götürecektir.
Sitenizin önizlemesini ekranın sağ tarafında göreceksiniz ve telefon, tablet ve masaüstü görünümleri arasında geçiş yapmak için altta düğmeler bulunmaktadır. Solda ayrıca özelleştirme seçeneklerini de bulacaksınız.
Menünün üzerinde bir metin görüntülendiğini fark edebilirsiniz. Bu, menünün başlığı ve eklentinin ‘ek içerik’ olarak adlandırdığı bir metin satırıdır.
Sayfanın solundaki menüde 'Mobil Menü'ye ve ardından 'Kapsayıcı'ya tıklayarak metni düzenleyebilir veya gizleyebilirsiniz.
Ek olarak, ‘Başlık Metni’ alanına ‘Ana Menü’ veya ‘Navigasyon’ gibi istediğiniz herhangi bir şeyi yazabilirsiniz. Bir başlık görüntülemek istemiyorsanız, ‘Başlık’ anahtarını kapatma konumuna kaydırmanız yeterlidir.
Bundan sonra, ‘Ek İçerik’ ayarlarına aşağı kaydırmak isteyeceksiniz.
Buradan bu ayarı kapatabilir veya alternatif içerik yazabilirsiniz. Aşağıdaki ekran görüntüsünde, düğmenin kapatıldığını fark edeceksiniz, bu nedenle 'Buraya daha fazla içerik ekleyin...' kelimeleri artık gizlenmiştir.
Menü ayarlarından memnun kaldığınızda, ayarlarınızı kaydetmek için sayfanın altındaki ‘Güncelle’ düğmesine tıkladığınızdan emin olalım.
Responsive Menu eklentisi, kayan panel menünüzün davranışını ve görünümünü değiştirmek için birçok başka seçenek sunar. Bu seçenekleri eklentinin ayarlar sayfasında keşfedebilir ve gerektiği gibi ayarlayabilirsiniz.
Şimdi, menüyü çalışırken görmek için web sitenizi ziyaret edebilirsiniz. Demo sitemizde görünümü şu şekildedir. Menüdeki mevcut sayfanın bir renk bandıyla vurgulandığına dikkat edin.
✋ Uzman İpucu: WordPress gezinme menünüzü stilize etmek, sitenizin görünümünü ve kullanılabilirliğini artırabilir. İyi tasarlanmış bir menü, ziyaretçilerin ihtiyaç duydukları şeyleri kolayca bulmalarına yardımcı olur ve tıklamaları teşvik eder.
Bu konu hakkında daha fazla bilgi için, WordPress navigasyon menünüzü nasıl stilleştireceğiniz hakkındaki kılavuzumuza göz atın.
Kayar Panel Menüleri Hakkında Sıkça Sorulan Sorular
WordPress'te kaydırmalı panel menülerinin nasıl çalıştığına dair hala açıklamalara mı ihtiyacınız var? İşte bazı yaygın soruların yanıtları.
Tüm WordPress temaları mobil menü ile mi geliyor?
Çoğu modern WordPress teması duyarlıdır, bu nedenle mobil uyumlu bir menü içerirler. Bununla birlikte, bu genellikle yalnızca temel bir açılır menüdür. Şık, kayan bir panel menüsü istiyorsanız, bir eklentiye ihtiyacınız olacaktır.
Bir kaydırmalı panel menü eklentisi eklemek sitemi yavaşlatır mı?
Responsive Menu gibi iyi kodlanmış bir eklenti seçerseniz hayır. Bu eklentiler hafif olacak şekilde tasarlanmıştır ve sitenizin hızını fark edilir şekilde etkilememelidir.
Mobil ile masaüstü arasında farklı bir menü gösterebilir miyim?
Evet! WP Mobile Menu gibi bir eklenti veya özel CSS kullanarak ayrı bir mobil menü oluşturabilirsiniz, böylece mobil ziyaretçileriniz masaüstü kullanıcılarından farklı bir gezinme görür. Bu, bağlantıları basitleştirmenize, promosyonları vurgulamanıza veya özellikle mobil cihazlar için dönüşümleri iyileştirmenize olanak tanır.
Daha Fazla Okuma: Site Menülerini Özelleştirme Hakkında Daha Fazla Kaynak
Bu eğitimimizin WordPress temalarına bir kaydırma paneli menüsü eklemeyi öğrenmenize yardımcı olduğunu umuyoruz.
Kullanıcı deneyiminizi daha da iyileştirmek için diğer yardımcı rehberlerimize göz atın:
- WordPress'te Yapışkan Kayar Gezinme Menüsü Nasıl Oluşturulur
- WordPress Sitenize Mega Menü Nasıl Eklenir (Adım Adım)
- WordPress Gezinme Menüsüne Belirli Gönderiler Nasıl Eklenir
- WordPress Menüsüne Arama Çubuğu Nasıl Eklenir (Adım Adım)
- WordPress'te Açılır Menü Nasıl Oluşturulur (Yeni Başlayanlar İçin Kılavuz)
- WordPress'te Giriş Yapmış Kullanıcılara Farklı Menüler Nasıl Gösterilir
- WordPress Temalarına Özel Gezinme Menüleri Nasıl Eklenir
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.
Jiří Vaněk
Elementor kullanarak bir kaydırma menüsü ve kaydırma menüsü efektli açılır pencereler oluşturdum. Harika çalışıyor, ancak ne yazık ki, fiyatı nedeniyle yönettiğim tüm web sitelerinde Elementor PRO'ya sahip olamıyorum. Böyle bir menü oluşturmak için harika bir alternatif ve eklentiyi ücretsiz sürümde kullanmak mümkünse, bu gerçekten harika. Elementor olmayan web siteleri için benim için hayat kurtarıcı.
Moinuddin Waheed
Bu benim için bir kurtarıcı çünkü mobil uyumlu menü için kayan panel çıkarmakta zorlanıyordum.
Daha önce kod parçacıkları kullandım ve bunun için wp koduna ekledim.
Ancak bu eklenti daha fazla özelleştirme sunuyor ve pro sürümü özelleştirme kontrolü açısından daha güçlü görünüyor.
Kesinlikle bu eklentiyi deneyeceğim.
Mohammad Kashif
Harika!
Pop-out'a kapatma düğmesi ekleyebilir miyim?
Luke Marshall
Bu tam ihtiyaçla ilgili sizden bir destek bileti yanıtı bekliyorum! Sunduğunuz, yalnızca sağ tarafta ve sola değiştirmenin görünür bir yolu yok, bunu bulduğuma sevindim.
Cynthia
"left" fonksiyonunu, fonksiyon kodunda kullanıldığı iki yerde "right" olarak değiştirin.
Ru
Bunun demosu var mı?
Önce kontrol etmek istiyorum
Daniel Jarosz
temiz ve basit, bu ipucu için teşekkürler!
Ann
Merhaba, bu kod web sitemi yerel olarak çalıştırdığımda mükemmel çalışıyor ancak canlıya geçtiğinde çalışmıyor. Bunun olası bir açıklaması var mı? Görüntü bağlantılarını güncelledim, klasörler değişmediği için başka neyin güncellenmesi gerektiğini bilmiyorum.
Madiha
Sitemde çalışmıyor lütfen ziyaret edip çözümünü söyler misiniz?
http://www.dailynewscompany.com
Mattia
Merhaba, ilginç makale… Bunun bir DEMO'su var mı veya uyguladığınız çevrimiçi bir siteye URL'niz var mı? Kullanmaya çalışmadan önce gerçek bir durumda görmek ilginç olurdu! Çok teşekkürler
Jim
Kapatma olayının navigasyon dışındaki herhangi bir yere tıklanarak tetiklenebilmesi için betiğin nasıl değiştirilebileceğini gösterebilir misiniz?
Başka bir deyişle, kullanıcının gezinme kenar çubuğunu kapatmak için yalnızca geçiş menüsü simgesine tıklaması gerekmiyor mu?
Teşekkürler.
Karl
Sitenizin üst kısmında şu anda çalıştırdığınız menü türünü uygulamak için bir eklenti veya yetenek arıyorum. Başlığınızın sağ tarafında bir “Oynat” düğmesi var. Ona bastığınızda başlık bölümünüzden bir içerik alanı kayarak açılıyor. Bu tür menüyü sitemde kullanmak istiyorum. Hatta bu tür menünün açıklandığı bir bağlantıya yönlendirebilirseniz, gerisini ben hallederim ve teşekkürler. Bu harika bir eğitim!
WPBeginner Desteği
Karl, oynat düğmesine sağ tıklayıp öğeyi incele seçeneğini seçerek kaynak kodumuzu inceleyebilirsiniz. Yakında WPBeginner'da bir öğretici olarak da ele almaya çalışacağız.
Yönetici
Shubham Dubey
Buraya yanıt verdiğim için üzgünüm (Yorumlar mevcut değil)
Merhaba! Genesis framework kullanıyorum, alt temasıyla birlikte, orada header.php dosyasını bulamıyorum.
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
BUNU ÇOCUK TEMALARLA NASIL YAPARIM, LÜTFEN AÇIKLAYIN.
Jim
Mükemmel rehber. Test uygulamasıyla neredeyse tamamladım, ancak merak ediyorum... sidepanel.js dosyasında mutlak yol yerine göreceli bir yol kullanabilir miyim?
Bunu yapmaya çalıştım ama başaramadım. Göreceli yol, javascript'i çağıran html dosyasına göreceli olmalı mı?
Teşekkürler
krish
İyi ve kullanışlı bir içerik. Ekran görüntüsü ve kodlama, web siteme kolayca anlaşılır ve uygulanabilir. Aferin adam!!!
Håkon Stillingen
İlginç makale. Genesis Framework'teki varsayılan başlığı nasıl değiştirebilirim?