Mobil Uyumlu Duyarlı WordPress Menüsü Nasıl Oluşturulur

Tüm web sitesi trafiğinin yarısından fazlası mobil cihazlardan geliyor. Gezinme menünüz akıllı telefonlarda ve tabletlerde iyi çalışmıyorsa, kitlenizin büyük bir kısmı sitenizde gezinmekte zorlanabilir.

Yılların verdiği WordPress sitesi oluşturma deneyimiyle, sitenizin mobil uyumlu olmasının önemini anlıyoruz. WPBeginner'da bunu her zaman önceliklendirdik ve sitelerimizin herhangi bir cihazda gezinilmesinin kolay olmasını sağladık.

Aslında, küçük ekranlara tam oturan ve kalabalık hissettirmeyen, akıllı telefonlarda ve tabletlerde kullanıcı deneyimini iyileştiren mobil uyumlu bir menü tasarladık.

Bu kılavuzda, mobil kullanıma hazır duyarlı bir WordPress menüsünü nasıl kolayca oluşturacağınızı göstereceğiz.

Mobil Kullanıma Hazır Duyarlı Bir WordPress Menüsü Neden Oluşturulmalı?

İyi tasarlanmış bir navigasyon menüsü ziyaretçilerin web sitenizde gezinmesine yardımcı olacaktır. Ancak, menünüz masaüstü bilgisayarlarda harika görünse bile, otomatik olarak mobil ekranlarda ve tabletlerde de iyi görüneceği anlamına gelmez.

Mobil kullanıcılar toplam internet trafiğinin yaklaşık %58'ini oluşturuyor. Bu nedenle, menünüz mobil cihazlarda iyi görünmüyorsa veya doğru çalışmıyorsa, kötü kullanıcı deneyimi nedeniyle kitlenizin yarısını kaybetme riskini alırsınız.

Bu, e-posta listenizi büyütmek, satış elde etmek ve işinizi büyütmek gibi temel hedeflere ulaşmayı zorlaştıracaktır.

Bununla birlikte, akıllı telefonlarda ve tabletlerde harika görünecek, mobil uyumlu duyarlı bir menü oluşturabileceğinizi görelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir.

• Yöntem 1: Mobil Uyumlu Duyarlı Kaydırma Paneli Menüsü Oluşturma
• Yöntem 2: Mobil Uyumlu Tam Ekran Duyarlı Menü Oluşturma
• Bonus: Açılış Sayfalarına Mobil Uyumlu Menü Ekleme

Yöntem 1: Mobil Uyumlu Duyarlı Kaydırma Paneli Menüsü Oluşturma

Duyarlı bir kaydırma paneli, bir ziyaretçi bir düğmeye dokunduğunda veya tıkladığında ekrana kayan bir gezinme menüsüdür.

Bu şekilde, menü her zaman kolayca erişilebilir durumda olur ancak varsayılan olarak ekranda herhangi bir yer kaplamaz.

Bu, özellikle akıllı telefonların ve tabletlerin masaüstü bilgisayarlara kıyasla çok daha küçük ekranlara sahip olması nedeniyle önemlidir.

Menü sürekli genişletilmişse, mobil bir kullanıcı cihazının dokunmatik ekranını kullanarak bağlantılarını yanlışlıkla tetikleyebilir. Bu, kaydırma panellerini mobil uyumlu bir menü için iyi bir seçenek haline getirir.

Mobil uyumlu bir kaydırma paneli eklemenin en kolay yolu, Responsive Menu'yu kullanmaktır.

Öncelikle Responsive Menu eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair eğitimimize bakın.

Etkinleştirdikten sonra, eklentiyi daha önce oluşturduğunuz herhangi bir WordPress menüsünü özelleştirmek için kullanabilirsiniz. Yeni bir menü oluşturmanız gerekiyorsa, lütfen WordPress'te gezinme menüsünün nasıl ekleneceğine dair yeni başlayanlar rehberimize bakın.

Diğer yandan, WordPress temanızda zaten yerleşik bir mobil menü varsa, onu gizleyebilmeniz için o menünün CSS sınıfını bilmeniz gerekecektir.

Bu adımı atlarsanız, mobil kullanıcılar web sitenizde üst üste binmiş iki menü görecektir. Adım adım talimatlar için lütfen WordPress'te mobil menünün nasıl gizleneceğine dair rehberimize bakın.

Bu işlem tamamlandıktan sonra, WordPress yönetici kenar çubuğundaki Duyarlı Menü » Menüler sayfasına gidin ve ‘Yeni Menü Oluştur’ düğmesine tıklayın.

Şimdi menünüz için kullanabileceğiniz birkaç farklı mobil duyarlı tema göreceksiniz.

Resimlerimizde ‘Varsayılan Tema’yı kullanıyoruz, ancak istediğiniz temayı kullanabilirsiniz. Kararınızı verdikten sonra ‘İleri’ye tıklayın.

Şimdi menü için bir ad yazabilirsiniz. Bu sadece referansınız içindir, bu yüzden istediğiniz herhangi bir şeyi kullanabilirsiniz.

Bu işlem tamamlandıktan sonra, ‘WordPress Menüsünü Bağla’ya tıklayın ve kullanmak istediğiniz menüyü seçin.

Daha önce de belirtildiği gibi, temanızda zaten yerleşik bir mobil menü varsa, CSS sınıfını ‘Tema Menüsünü Gizle’ alanına eklemeniz gerekecektir.

Premium eklentiye yükseltirseniz, birkaç ek ayar elde edersiniz. Örneğin, Pro kullanıcıları menüyü belirli sayfalarda veya cihazlarda gizleyebilir.

Menünün kurulumundan memnun kaldığınızda, ‘Menü Oluştur’a tıklayın.

Şimdi ekranın sağ tarafında WordPress web sitenizin bir önizlemesini ve sol tarafında bazı ayarları göreceksiniz.

Sitenizin mobilde nasıl göründüğünü görmek için ekranın sol altındaki mobil veya tablet simgesine tıklayın.

Menünün mobil cihazlarda nasıl görüneceğini ve davranacağını özelleştirmek için ‘Mobil Menü’yü seçin.

Ardından, ‘Kapsayıcı’ya tıklayın.

Burada birçok farklı ayar bulacaksınız.

Değişiklikler yaptıkça, canlı önizleme genellikle otomatik olarak güncellenir. Bunu akılda tutarak, menünüzün mobil menünüzün nasıl görüneceğini izleyebilmeniz için menüyü genişletmek iyi bir fikirdir. Bunu yapmak için menü geçiş düğmesine tıklamanız yeterlidir.

Varsayılan olarak, eklenti bir başlık ve bazı ‘Daha fazla içerik ekle…’ metni ekler.

Bunu kendi mesajlarınızla değiştirebilir veya metni tamamen kaldırabilirsiniz. Başlığı düzenlemek için ‘Başlık’ bölümünü genişletmek için tıklayın.

Artık kendi mesajınızı 'Başlık Metni' alanına yazabilirsiniz.

Başlığa bir bağlantı ekleyebilir veya ikon yazı tipleri ve görseller ekleyebilirsiniz.

Başlığın görünümünü özelleştirmek için 'Stiller' sekmesine tıklayın.

Burada, arka plan rengini, metin rengini, yazı tipi boyutunu ve daha fazlasını değiştirebilirsiniz.

Başlık metni göstermek istemiyorsanız, 'Başlık' yanındaki geçiş düğmesini devre dışı bırakmak için tıklayın.

Başlık önemli değilse, onu kaldırmak mobil gezinme menünüzdeki bağlantılar ve diğer içerikler için daha fazla alan oluşturacaktır.

'Buraya daha fazla içerik ekleyin....' metnini kendi mesajlarınızla değiştirmek için 'Ek İçerik' alanını genişletmek üzere tıklayın.

Artık kendi metninizi yazabilir, metin rengini değiştirebilir, metin hizalamasını değiştirebilir ve sol taraftaki menüdeki ayarları kullanarak daha fazlasını yapabilirsiniz.

Metni tamamen silmek için, geçiş düğmesini devre dışı bırakmak üzere tıklamanız yeterlidir.

Bir kez daha, bu menünün geri kalan içeriği için daha fazla alan oluşturabilir. Bu, özellikle genellikle daha küçük ekranlara sahip akıllı telefonlarda ve tabletlerde kullanışlıdır.

Varsayılan olarak, Responsive Menu tüm menü öğelerinizi tek bir liste olarak gösterecektir. Ancak, bu bağlantıları birden çok sütunda göstermeyi tercih edebilirsiniz.

Menü etiketleriniz daha kısaysa bu iyi çalışabilir, çünkü menünün dağınık görünmesini sağlamadan daha fazla öğeyi daha küçük bir alanda göstermenize olanak tanır.

Farklı sütun düzenlerini denemek için ‘Menü’ bölümünü genişletmek üzere tıklayın.

Artık ‘Menü kapsayıcı sütunları’ açılır menüsünü açabilir ve kullanmak istediğiniz sütun sayısını seçebilirsiniz.

Bu noktada, bazı ‘Güncelleme Gerekli’ metinleri görebilirsiniz. Bu mesajı görürseniz, canlı önizlemeyi yeni sütun ayarlarınızla güncellemek için tıklayın.

Varsayılan olarak eklenti, WordPress menünüze bir arama çubuğu da ekler. Bu, ziyaretçilerin ilginç içerikler bulmasına yardımcı olabilir ancak aynı zamanda ekranda değerli alan kaplayabilir.

İsterseniz, ‘Arama’ yanındaki geçişi devre dışı bırakarak mobil kullanıcılar için arama çubuğunu kaldırabilirsiniz.

Yapılandırabileceğiniz başka birçok ayar var, bu yüzden diğer seçeneklere göz atmak için biraz zaman ayırmak isteyebilirsiniz. Ancak, iyi tasarlanmış, mobil uyumlu bir menü oluşturmak için bu yeterlidir.

Gezinme menüsünün nasıl ayarlandığından memnun kaldığınızda, ‘Güncelle’ye tıklayın.

Şimdi, yeni menüyü çalışırken görmek için WordPress blogunuzu bir mobil cihaz kullanarak ziyaret edin. Ayrıca masaüstünüzden WordPress sitenizin mobil sürümünü de görüntüleyebilirsiniz.

Yöntem 2: Mobil Uyumlu Tam Ekran Duyarlı Menü Oluşturma

Başka bir seçenek de tam ekran duyarlı bir menü eklemektir. Bu, farklı ekran boyutlarına otomatik olarak uyum sağlayan bir menüdür, böylece ziyaretçi hangi cihazı kullanırsa kullansın gezinme menüsü her zaman iyi görünecektir.

Menü mevcut alanın tamamını kapladığı için, ekran ne kadar küçük olursa olsun akıllı telefonlarda ve tabletlerde gezinmek daha kolaydır.

Tam ekran menü oluşturmanın en kolay yolu FullScreen Menu eklentisini kullanmaktır. Bu eklenti, yalnızca mobil cihazlar için tam ekran menü oluşturmanıza olanak tanır veya aynı menüyü akıllı telefonlar, tabletler ve masaüstü bilgisayarlar arasında gösterebilirsiniz, böylece tüm ziyaretçiler aynı deneyimi yaşar.

Yapmanız gereken ilk şey FullScreen Menu eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza göz atabilirsiniz.

Etkinleştirdikten sonra, WordPress menüsünden Fullscreen Menu Options (Tam Ekran Menü Seçenekleri) sayfasını ziyaret edin ve aşağıdaki kutuyu işaretleyin: ‘Activate Animated Fullscreen Menu.’ (Animasyonlu Tam Ekran Menüyü Etkinleştir).

Ayrıca ‘Show the menu only for Admin users’ (Menüyü yalnızca Yönetici kullanıcıları için göster) kutusunu işaretlemenizi öneririz. Bu, menüyü yapılandırırken değişiklikleri görmenizi sağlar, ancak ziyaretçiler siz canlı hale getirene kadar mobil menüyü göremezler.

Varsayılan olarak, eklenti tam ekran menüyü tüm cihazlarda gösterecektir. Tam ekran menüyü yalnızca akıllı telefonlarda ve tabletlerde göstermek istiyorsanız, ‘Mobile only.’ (Yalnızca Mobil) yanındaki kutuyu işaretleyin.

Bundan sonra, ‘Design / Appearance’ (Tasarım / Görünüm) sekmesine tıklayarak menünün görünümünü ince ayar yapabilirsiniz.

Burada, tam ekran menünün renklerini, yazı tipini ve animasyon ayarlarını seçebilirsiniz.

Bu değişiklikleri yaparken, ‘Başlangıç Arka Plan Menüsü’nün menünün geçiş simgesi olduğunu unutmayın. Bu arada, ‘Açık Arka Plan Menüsü’ ise genişletilmiş, tam ekran mobil menünün rengidir.

Menü renklerini seçtikten sonra, ‘Menü Görünümü’ bölümüne gidin. Burada menünün yazı tipi rengini, yazı tipi ailesini ve yazı tipi boyutunu değiştirebilirsiniz.

Yalnızca ek yazı tipleri yüklemenin WordPress site performansınızı ve hızınızı etkileyebileceğini unutmayın. Bu, genellikle masaüstü bilgisayarlara göre daha az işlem gücüne sahip mobil cihazlar için her zaman iyi bir seçenek değildir. Bazı ziyaretçilerin mobil internet bağlantısı da zayıf olabilir, bu da sitenizin daha yavaş yüklenmesine neden olur.

Bu işlem tamamlandıktan sonra, ‘Animasyon Ayarları’ bölümüne gidin.

Başlangıç olarak, ziyaretçi geçiş simgesine tıkladığında menünün nasıl genişleyeceğini seçebilirsiniz. ‘Animasyon Türü’ açılır menüsünü açın ve listeden Yukarıdan Aşağıya veya Soldan Sağa gibi bir seçenek belirleyin.

Menünün düzeninden memnun kaldığınızda, içerik eklemek için ‘Menü İçeriği’ sekmesine tıklayın.

Burada, ‘Menü Seç’ açılır menüsünü açın ve tam ekranda göstermek istediğiniz menüyü seçin.

Henüz bir gezinme menüsü oluşturmadıysanız, WordPress'te gezinme menülerinin nasıl ekleneceğine dair rehberimize göz atın.

Menüde ek içerik göstermek istiyorsanız, bunu ‘Ücretsiz HTML / Kısa Kodlar’ kutusuna ekleyebilirsiniz. Bu, mini bir sayfa düzenleyici görevi görür, böylece metin yazabilir, biçimlendirmeyi değiştirebilir, madde işaretleri ve numaralı listeler ekleyebilir ve daha fazlasını yapabilirsiniz.

Ayrıca gizlilik politikası sayfanıza bir bağlantı ekleyecek bir onay kutusu da bulunmaktadır.

Ardından, WordPress menünüze sosyal medya simgeleri eklemek isteyebilirsiniz. Bu simgeler, tam ekran menüsünün altında bir satır halinde görünecektir.

Bu simgeleri eklemek için, ‘Sosyal Simgesi 1’ kutusunu genişletmek üzere tıklamanız yeterlidir.

Artık simge için ‘Facebook’ gibi bir başlık yazabilirsiniz.

Bundan sonra, ‘Sosyal Simgesi’ yanındaki oka tıklayın ve mobil ziyaretçilere göstermek istediğiniz simgeyi seçin.

Son olarak, kullanmak istediğiniz adresi ‘Sosyal URL’ alanına yazın.

Daha fazla simge eklemek için ‘Başka Bir Simgesi Ekle’ düğmesine tıklamanız yeterlidir.

Son olarak, ziyaretçilerin aradıklarını bulmalarına yardımcı olmak için bir WordPress arama çubuğu eklemek isteyebilirsiniz. Bunu yapmak için, ‘Arama Çubuğu Ekle’ yanındaki kutuyu işaretlemeniz yeterlidir.

Varsayılan olarak, eklenti ‘Bir şeyler ara…’ mesajını gösterecektir. Ancak, ‘Arama giriş yer tutucusu’ alanına yazarak bunu kendi özel mesajınızla değiştirebilirsiniz.

Örneğin, bir WooCommerce mağazası çalıştırıyorsanız, o zaman ‘Alışverişe başla’ veya ‘Ürünleri ara’ gibi metinler kullanmak isteyebilirsiniz.

Menünün yapılandırmasından memnun kaldığınızda, ‘Değişiklikleri Kaydet’ düğmesine tıklayın.

Şimdi, tam ekran menüyü çalışırken görmek için web sitenizi bir mobil cihaz kullanarak ziyaret edin.

Ayrıca, WordPress tema özelleştiricisini kullanarak web sitenizin mobil sürümünü önizleyebilirsiniz.

Bonus: Açılış Sayfalarına Mobil Uyumlu Menü Ekleme

Eğer bir açılış sayfası veya satış sayfası oluşturuyorsanız, tasarımın mobil cihazlarda masaüstü kadar iyi görünmesini istersiniz.

Bunu akılda tutarak, sayfayı SeedProd kullanarak oluşturmanızı öneririz. Bu, en iyi WordPress sayfa oluşturucusudur ve 300'den fazla profesyonelce tasarlanmış şablonla birlikte gelir.

SeedProd kullanarak bir tasarım oluşturduktan sonra, sayfanıza SeedProd'un hazır Nav Menü bloğunu kullanarak mobil uyumlu bir menü ekleyebilirsiniz. Bu blok, hem mobil cihazlar hem de masaüstü için ayrı menüler oluşturmanıza olanak tanır.

Bu şekilde, kullanıcının cihazına bağlı olarak farklı bir düzen kullanabilir ve hatta farklı bağlantılar gösterebilirsiniz.

Daha fazla bilgi edinmek için lütfen WordPress'te özel gezinme menüleri ekleme kılavuzumuza bakın.

Gezinme bloğunu tasarımınıza ekledikten sonra, 'Gelişmiş' sekmesine tıklamanız yeterlidir.

Burada, 'Cihaz Görünürlüğü' bölümünü genişletmek için tıklayın.

Bundan sonra, etkinleştirmek için 'Masaüstünde Gizle' geçişine tıklayın. Artık bu menü yalnızca mobil cihazlarda görünecektir.

Artık sol taraftaki menüdeki ayarları kullanarak bağlantılar ekleyebilir ve menünün düzenini değiştirebilirsiniz.

Umarım bu makale, mobil uyumlu duyarlı bir WordPress menüsü oluşturmayı öğrenmenize yardımcı olmuştur. Ayrıca erişilebilirlik için WordPress'te bir yazı tipi yeniden boyutlandırıcı ekleme konusundaki başlangıç kılavuzumuza ve mobil uyumlu bir WordPress sitesi oluşturma yolları hakkındaki uzman ipuçlarımıza da bakmak 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.