Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Temalarında Slayt Paneli Menüsü Nasıl Eklenir

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

WordPress sitenize bir slayt paneli menüsü eklemek ister misiniz?

Duyarlı bir menü eklemek, kullanıcıların mobil cihazları kullanırken web sitenizde gezinmelerini kolaylaştıracaktır. Menü simgenize dokunduklarında, bir panel menü güzel bir animasyon kullanarak ekrana kayacaktır.

Bu makalede, WordPress temalarına herhangi bir kod yazmadan nasıl slayt panel menüsü ekleyebileceğinizi göstereceğiz.

How to Add a Slide Panel Menu in WordPress Themes

WordPress Temalarına Neden Slayt Paneli Menüsü Eklemelisiniz?

İyi tasarlanmış menüler ziyaretçilerinizin WordPress web sitenizde yollarını bulmalarına yardımcı olur. Ziyaretçilerinizin çoğu mobil cihazlar kullanacaktır, bu nedenle navigasyon menünüzün daha küçük ekranlarda nasıl göründüğünü görmek için 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österecek yerleşik stillerle birlikte gelir.

Ancak, mobil navigasyonunuzu daha da özelleştirmek ve tam ekran duyarlı bir menü veya animasyonlu slayt paneli menüsü eklemek isteyebilirsiniz.

Bunu akılda tutarak, WordPress temalarında slayt panel menüsünün nasıl ekleneceğine bir göz atalım.

WordPress Temalarında Slayt Paneli Menüsü Nasıl Eklenir

Yapmanız gereken ilk şey Duyarlı Menü eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.

Responsive Menu ‘nün ekstra temalar ve koşullu mantık gibi ek özellikler içeren premium bir sürümü var, ancak bu eğitim için ücretsiz eklentiyi kullanacağız.

Etkinleştirmenin ardından, Duyarlı Menü ” Menüler sayfasına gidin. Orada, ekranın üst kısmındaki ‘Yeni Menü Oluştur’ düğmesine tıklamalısınız.

Create a New Responsive Menu

Ardından yeni duyarlı menünüz için kullanabileceğiniz dört tema göreceksiniz. Ek temalar satın alınabilir.

Bu eğitim için otomatik olarak seçilen temayı kullanacağız. Daha sonra ‘İleri’ düğmesine tıklayabilirsiniz.

Select a Theme for Your Responsive Menu

Bu sizi Menü Ayarları sayfasına götürecektir. Burada 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.

Bu eğitim için ‘Navigasyon’ menüsünü seçtik. Yeni bir menü oluşturmanız gerekiyorsa, WordPress’te navigasyon menüsü ekleme kılavuzumuzu takip ederek nasıl yapılacağını öğrenebilirsiniz.

Give the Menu a Name and Link It With the WordPress Menu You Wish to Use

WordPress temanızla birlikte gelen normal menüyü de gizleyebilirsiniz, böylece kullanıcılarınız yalnızca yeni slayt paneli menüsünü görecektir. Bunu ‘Tema Menüsünü Gizle’ alanına CSS kodu girerek yapabilirsiniz.

Buraya girmeniz gereken kod temadan temaya değişir ve ‘Daha Fazla Bilgi’ bağlantısına tıklayarak daha fazla ayrıntı öğrenebilirsiniz.

Pro sürümüne sahip kullanıcılar birkaç ek ayara sahiptir. Örneğin, Pro kullanıcıları menünün gösterilmesi gereken cihazları ve sayfaları seçebilir.

Ayarlardan memnun olduğunuzda, sayfanın altındaki ‘Menü Oluştur’ düğmesine tıklamalısınız. Bu sizi menünüzü özelleştirmeyi tamamlayabileceğiniz bir sayfaya götürecektir.

Ekranın sağında web sitenizin bir önizlemesini göreceksiniz ve alt kısımda telefon, tablet ve masaüstü görünümü arasında geçiş yapmak için düğmeler var. Ayrıca sol tarafta özelleştirme seçenekleri bulacaksınız.

You Can Now Customize Your Responsive Menu

Menünün üzerinde görüntülenen bazı metinler olduğuna dikkat edin. Bu, menünün başlık metni ve eklentinin ‘ek içerik’ olarak adlandırdığı bir metin satırıdır.

Sayfanın solundaki menüde ‘Mobil Menü’ ve ardından ‘Konteyner’ üzerine tıklayarak metni düzenleyebilir veya gizleyebilirsiniz.

Customize or Hide the Text Shown at the Top of Your Menu

‘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ı kapalı konuma kaydırmanız yeterlidir.

Bundan sonra, ‘Ek İçerik’ ayarına doğru aşağı kaydırmanız gerekir. Bu ayarı kapatabilir veya alternatif içerik yazabilirsiniz. Aşağıdaki ekran görüntüsünde, anahtarın kapatıldığını fark edeceksiniz, böylece ‘Buraya daha fazla içerik ekleyin…’ kelimeleri artık gizlenmiştir.

Customize or Hide the Additional Content for Your Menu

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 olun.

Responsive Menu eklentisi, slayt panel menünüzün davranışını ve görünümünü değiştirmenize olanak tanıyan birçok başka seçenekle birlikte gelir. Bu seçenekleri eklentinin ayarlar sayfasında keşfedebilir ve gerektiği gibi ayarlayabilirsiniz.

Artık menüyü çalışırken görmek için web sitenizi ziyaret edebilirsiniz. İşte demo web sitemizde nasıl göründüğü. Geçerli sayfa menüdeyse, bir renk bandıyla vurgulandığına dikkat edin.

Animation of a Slide Panel Menu in WordPress

Umarız bu eğitim WordPress temalarına nasıl slayt panel menüsü ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress sitenize gelen ziyaretçileri nasıl takip edeceğinizi öğrenmek veya sitenizi büyütmek için olmazsa olmaz eklentiler listemize göz atmak 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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

16 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Luke Marshall says

    I’m still waiting on a support ticket reply from you guys regarding this exact need! the one you offer is on the right side only with no apparent way to change it to the left, I’m glad I’ve found this.

  3. Ann says

    Hi, this code works perfectly when I run my website locally but not once it’s live. Is there any possible explanation to this? I updated the image links not sure what else needs to be updated as the folders have not changed.

  4. Mattia says

    Hi, interesting article… Do you have a DEMO of this, or a URL to an online site in which you implemented it? It would be interesting to see it in a real case, before trying to use it! Many thanks

  5. Jim says

    Is it possible to show how the script could be modified so the close event can be triggered by clicking anywhere else but on the navigation?

    In other words, so the user doesn’t need to just click on the toggle menu icon to close the navigation sidebar?

    Thanks.

  6. Karl says

    I am searching high and low for a plugin or the ability to implement the type of menu you have currently running at the top of your page. You have a “Play” button on the right side of your header. Upon pressing it a content area slides out from your header section. I really want to use this type of menu in my site. If you could point me even to a link where this type of menu is explained I’ll take it from there and thanks. This is an awesome tutorial!

      • Shubham Dubey says

        Sorry for replying here,(Comments is not available)

        Hey! I’m using Genesis framework, with its child theme, i’m unable to find header.php file there,

        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 :(

        hOW TO DO THIS WITH CHILD THEMES, PLEASE EXPLAIN.

  7. Jim says

    Excellent guide. I’m almost there with a test implementation, however I’m wondering…can I use a relative path in the sidepanel.js file instead of the absolute path?

    I’ve tried to do so but I cannot figure it out. Should the relative path be relative to the html file calling the javascript?

    Thanks

  8. krish says

    It’s good and useful content. The screenshot and coding easily understand and apply to my website. Good job man!!!

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.