Mobil Cihazlara Uygun Duyarlı WordPress Menüsü Nasıl Oluşturulur?

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

WordPress siteleri oluşturma konusundaki yılların deneyimiyle, sitenizi mobil uyumlu hale getirmenin önemini anlıyoruz. WPBeginner’da buna her zaman öncelik verdik ve sitelerimizin her cihazda kolayca gezinmesini sağladık.

Aslında, akıllı telefonlarda ve tabletlerde kullanıcı deneyimini iyileştirmek için karmaşık hissetmeden daha küçük ekranlara mükemmel şekilde uyan mobil duyarlı bir menü tasarladık.

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

Neden Mobil Cihazlara Uygun Duyarlı WordPress Menüsü Oluşturmalısınız?

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

Mobil kullanıcılar tüm internet trafiğinin yaklaşık %58’ini oluşturuyor. Bununla birlikte, menünüz mobil cihazlarda iyi görünmüyor veya düzgün çalışmıyorsa, kötü kullanıcı deneyimi nedeniyle kitlenizin yarısını kaybetme riskiyle karşı karşıya kalırsınız.

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

Bununla birlikte, akıllı telefonlarda ve tabletlerde harika görünecek mobil cihazlar için hazır duyarlı bir menüyü nasıl 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 Cihazlara Uygun Duyarlı Slayt Panel Menüsü Oluşturun

Duyarlı bir slayt paneli, ziyaretçi bir geçiş düğmesine dokunduğunda veya tıkladığında ekranda kayan bir gezinme menüsüdür.

Bu şekilde, menü her zaman kolayca erişilebilecek bir yerdedir ancak varsayılan olarak ekranda hiç yer kaplamaz.

Akıllı telefonlar ve tabletler masaüstü bilgisayarlara kıyasla çok daha küçük ekranlara sahip olduğundan bu özellikle önemlidir.

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

Mobil cihazlar için hazır bir slayt paneli eklemenin en kolay yolu Duyarlı Menü kullanmaktır.

Öncelikle, Duyarlı Menü eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki eğitimimize bakın.

Etkinleştirmenin ardından, 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 navigasyon menüsünün nasıl ekleneceğine ilişkin başlangıç kılavuzumuza bakın.

Öte yandan, WordPress temanızda zaten yerleşik bir mobil menü varsa, gizleyebilmek için bu menünün CSS sınıfını bilmeniz gerekecektir.

Bu adımı atlarsanız, mobil kullanıcılar web sitenizde üst üste binen iki menü görecektir. Adım adım talimatlar için lütfen WordPress’te bir mobil menünün nasıl gizleneceğine ilişkin kılavuzumuza bakın.

Bunu yaptı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 uyumlu tema göreceksiniz.

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

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

Bunu yaptı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 gerekir.

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

Menünün nasıl ayarlandığından memnun olduğunuzda, ‘Menü Oluştur’a tıklayın.

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

Sitenizin mobil cihazlarda nasıl göründüğünü görmek için ekranın sol alt köşesindeki 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, ‘Konteyner’e tıklayın.

Burada çok sayıda farklı ayar bulacaksınız.

Siz değişiklik yaptıkça canlı önizleme genellikle otomatik olarak güncellenecektir. Bunu göz önünde bulundurarak, mobil menünüzün nasıl görüneceğini izleyebilmek 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 ‘Daha fazla içerik ekleyin…’ metni ekler.

Bunu kendi mesajı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 üzere tıklayın.

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

Ayrıca başlığa bir bağlantı ekleyebilir veya simge yazı tipleri ve resimler ekleyebilirsiniz.

Başlığın nasıl görüneceğini ö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.

Herhangi bir başlık metni göstermek istemiyorsanız, ‘Başlık’ın yanındaki geçişi devre dışı bırakmak için tıklayın.

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

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

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

Metni tamamen silmek için, geçişi 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 yaratabilir. Bu özellikle, genellikle daha küçük ekranlara sahip olan akıllı telefon ve tabletlerde kullanışlıdır.

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

Bu, menü etiketleriniz daha kısaysa işe yarayabilir, çünkü menü dağınık görünmeden daha az miktarda alanda daha fazla öğe göstermenize olanak tanır.

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

Şimdi ‘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 bir tıklama yapı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 bir alan kaplar.

İsterseniz, ‘Ara’ seçeneğinin 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 pek çok ayar vardır, bu nedenle diğer seçeneklere bakmak için biraz zaman harcamak isteyebilirsiniz. Ancak bu, iyi tasarlanmış mobil kullanıma hazır bir menü oluşturmak için yeterlidir.

Navigasyon menüsünün kurulumundan memnun olduğunuzda ‘Güncelle’ye tıklayın.

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

Yöntem 2: Mobil Cihazlara Uygun Tam Ekran Duyarlı Menü Oluşturun

Diğer bir seçenek de tam ekran duyarlı menü eklemektir. Bu, farklı ekran boyutlarına göre otomatik olarak ayarlanan bir menüdür, böylece ziyaretçi hangi cihazı kullanıyor olursa olsun navigasyon menüsü her zaman iyi görünecektir.

Menü mevcut tüm alanı kapladığından, 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 kullanmaktır. Bu eklenti yalnızca mobil cihazlar için tam ekran menü oluşturmanıza ya da aynı menüyü akıllı telefonlar, tabletler ve masaüstü bilgisayarlarda göstermenize olanak tanır, 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 WordPress eklentisi nasıl kurulur adım adım kılavuzumuza göz atabilirsiniz.

Etkinleştirmenin ardından WordPress menüsünden Tam Ekran Menü Seçenekleri sayfasını ziyaret edin ve aşağıdaki kutuyu işaretleyin: “Animasyonlu Tam Ekran Menüyü Etkinleştir.

Ayrıca ‘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örmezler.

Varsayılan olarak, eklenti tüm cihazlarda tam ekran menüyü gösterecektir. Tam ekran menüyü yalnızca akıllı telefonlarda ve tabletlerde göstermek istiyorsanız, ‘Yalnızca mobil’ seçeneğinin yanındaki kutuyu işaretleyin.

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

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

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

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

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

Bunu yaptıktan sonra, ‘Animasyon Ayarları’na gidin.

Başlangıç olarak, bir ziyaretçi geçiş simgesine tıkladığında menünün nasıl genişleyeceğini seçebilirsiniz. Sadece ‘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ü düzeninden memnun olduğunuzda, içerik eklemek için ‘Menü İçeriği’ sekmesine tıklayın.

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

Henüz bir navigasyon menüsü oluşturmadıysanız, WordPress’te navigasyon menülerinin nasıl ekleneceğine ilişkin kılavuzumuza 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 editörü 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.

Gizlilik politikası sayfanıza bir bağlantı ekleyecek bir onay kutusu da vardır.

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

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

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

Bundan sonra, ‘Sosyal Simge’nin 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 Simge 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’nin yanındaki kutuyu işaretlemeniz yeterlidir.

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

Örneğin, bir WooCommerce mağazası işletiyorsanız, ‘Alışverişe başla’ veya ‘Ürün ara’ gibi metinler kullanmak isteyebilirsiniz.

Menü yapılandırmasından memnun olduğunuzda, ‘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.

WordPress tema özelleştiricisini kullanarak web sitenizin mobil sürümünü de önizleyebilirsiniz.

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

Bir açılış sayfası veya satış sayfası oluşturuyorsanız, tasarımın mobil cihazlarda da masaüstünde olduğu kadar iyi görünmesini isteyeceksiniz.

Bunu göz önünde bulundurarak, sayfayı SeedProd kullanarak oluşturmanızı öneririz. En iyi WordPress sayfa oluşturucusudur ve 300’den fazla profesyonelce tasarlanmış şablonla birlikte gelir.

SeedProd kullanarak bir tasarım oluşturduktan sonra, SeedProd’un hazır Nav Menu bloğunu kullanarak sayfaya mobil uyumlu bir menü ekleyebilirsiniz. Bu blok, hem menü cihazları hem de masaüstü bilgisayarlar 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ülerinin nasıl ekleneceğine ilişkin kılavuzumuza bakın.

Nav 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üde yer alan ayarları kullanarak bağlantılar ekleyebilir ve menünün düzenini değiştirebilirsiniz.

Umarız bu makale mobil cihazlara uygun duyarlı bir WordPress menüsünün nasıl oluşturulacağını öğrenmenize yardımcı olmuştur. Ayrıca WordPress’te yazı tipi yeniden boyutlandırıcı ekleme hakkındaki başlangıç kılavuzumuza ve mobil uyumlu bir WordPress sitesi oluşturmanın yolları hakkındaki uzman ipuçlarımıza da 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.