WordPress'e Tam Ekran Duyarlı Menü Nasıl Eklenir

Menüler, ziyaretçilerin WordPress web sitenizde gezinmesine ve gönderilerinizi ve sayfalarınızı daha fazla bulmasına yardımcı olmak için önemlidir. Tam ekran duyarlı menüler, web sitenizi mobil kullanıcılar için tasarlarken özellikle yardımcı olabilir.

Kullanıcılarınız bir hamburger simgesine tıkladığında veya dokunduğunda, web sitenizin menüsünün tam ekran bir kaplaması güzel bir animasyon kullanılarak görüntülenecektir.

En iyi sonuçları hangisinin verdiğini görmek için kendi web sitelerimizde birkaç farklı menü türü denedik. Ve bu makalede, kod yazmadan WordPress'te tam ekran duyarlı bir menünün nasıl ekleneceğini göstereceğiz.

WordPress'te Tam Ekran Duyarlı Menü Neden Eklenir?

İyi tasarlanmış menüler, ziyaretçilerinizin WordPress web sitenizde veya WooCommerce mağazanızda gezinmesine yardımcı olur. Ancak, bir akıllı telefonun küçük ekranını kullanırken başlıkta standart bir menüye dokunmak zor olabilir.

Birçok web sitesi için mobil ziyaretçi sayısı masaüstü ziyaretçilerinden daha fazla. Bu nedenle, web sitenizin mobil cihazlarda nasıl göründüğünü görmek için WordPress sitenizin mobil sürümünü önizlemenizi öneririz.

Tam ekran duyarlı mobil menü, farklı ekran boyutlarına otomatik olarak uyum sağlar. Menü için mevcut alanın tamamı kullanıldığından, akıllı telefonlarda ve tabletlerde gezinmek daha kolaydır.

WordPress'te tam ekran duyarlı bir menüye nasıl ekleneceğine bakalım.

WordPress'e Tam Ekran Duyarlı Menü Nasıl Eklenir

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

Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için WordPress yönetici menünüzdeki Tam Ekran Menü Seçenekleri sayfasına gitmelisiniz. Otomatik olarak sizi ‘Ayarlar’ sekmesine yönlendirecektir.

Menüyü etkinleştirmek için 'Animasyonlu Tam Ekran Menüyü Etkinleştir' onay kutusunu işaretleyerek başlayın.

Başlangıçta 'Menüyü yalnızca Yönetici kullanıcıları için göster' kutusunu da işaretlemek iyi bir fikirdir. Bu, menüyü yapılandırırken değişiklikleri görmenizi sağlar, ancak sitenizi ziyaret edenler siz bitirene kadar göremez.

İşiniz bittiğinde kutunun işaretini kaldırmayı unutmayın.

Diğer ayarlar, menüyü yalnızca mobil cihazlarda göstermenize, bir tıklama veya kaydırma ile menüyü kapatmanıza ve belirli sayfalarda menüyü gizlemenize olanak tanır. Örneğimiz için bu ayarları işaretli bırakacağız, ancak kendi siteniz için istediğiniz gibi özelleştirmekten çekinmeyin.

Tam Ekran Menü Tasarımı ve Görünümü

Ardından, menünün tasarımını özelleştireceğiz. Neyse ki, menü eklentisi özel CSS gerektirmeden bunu yapmanıza olanak tanır.

Menüyü özelleştirmek için sayfanın üst kısmındaki ‘Tasarım/Görünüm’ sekmesine tıklamanız gerekecektir. Bu sayfada menünüz için renkleri, yazı tipini ve animasyon ayarlarını seçebilirsiniz.

Sayfanın üst kısmında iki adet renk ayarı göreceksiniz. İlk renk, hamburger menü simgesi içindir. Bu, web sitenizin sağ üst köşesinde görüntülenecektir. Ziyaretçileriniz tıkladığında veya dokunduğunda, tam ekran menü gösterilecek veya gizlenecektir.

İkinci renk ayarı, menünün arka planı içindir.

Her kutuya tıkladığınızda bir renk paleti görünecektir. Kullanmak istediğiniz renge tıklayabilir veya hex kodunu yazabilirsiniz.

Menü renklerini seçtikten sonra sayfanın altındaki Yazı Tipi/Görünüm bölümüne kaydırmalısınız. Burada, menü metni için kullanılacak yazı tipi rengini, ailesini ve boyutunu seçebilirsiniz.

Bu eğitim için, temanızın yazı tipini kullanan varsayılan ayarlarla kalacağız. Bu ayarı öneririz çünkü web sitenizin tasarımıyla uyumlu olacaktır. Ayrıca, ek yazı tipleri yüklemek WordPress sitenizin performansını ve hızını etkileyebilir.

Belirli sayfalarda yanal bir yan menü görüntülemek ve ana menü yeterince uzun değilse kaydırmak için ayarlar da bulunmaktadır. Bu eğitim için bu ayarları işaretli bırakacağız, ancak kendi WordPress blogunuzda veya web sitenizde bunlarla denemeler yapmaktan çekinmeyin.

Ardından, 'Animasyon Ayarları' bölümüne aşağı kaydırın. Burada iki ana ayarı yapabilirsiniz.

Bunlardan ilki 'Animasyon Türü'dür. Bu, menü etkinleştirildiğinde animasyon yönünü seçmenizi sağlar. Yukarıdan aşağıya, soldan sağa ve sağdan sola seçeneklerinden birini seçebilirsiniz.

İkinci ayar, bir menü öğesinin üzerine fareyle gelindiğinde elde ettiğiniz efekttir. Seçenekler dolgu çizgisi, arka plan rengi ve yuvarlak kenarlıklı arka plan rengidir.

Tam Ekran Menü İçeriği

Son olarak, sayfanın en üstüne geri kaymanız ve 'Menü İçeriği' sekmesine tıklamanız gerekecektir. Burada, tam ekran menünüzde görüntülenecek WordPress menüsünü seçebilirsiniz.

En üstteki 'Menü Seç' seçeneğinin yanında, açılır listeden bir menü seçmeniz gerekecektir. 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ü ekranında ek içerik görüntülenmesini isterseniz, bunu bir sonraki bölümde, 'Ücretsiz HTML / Kısa Kodlar' etiketli bölümde ekleyebilirsiniz. İçeriğinizi düzenleyici kutusuna yazmanız ve istediğiniz medya dosyalarını eklemeniz yeterlidir. Bu içerik menünün altında görüntülenecektir.

Ayrıca gizlilik politikası sayfanıza bir bağlantı içeren bir onay kutusu da bulunur. Ancak birçok web sitesi sahibi, ana menü yerine bunu alt bilgiye eklemeyi tercih eder.

Ardından, menü öğeleri olarak sosyal simgeler eklemek isteyebilirsiniz. Bunlar, tam ekran menünüzün altında bir satır halinde görüntülenecektir.

Bunları eklemek için, ‘Sosyal Simgeler’ bölümüne aşağı kaydırın ve simge için ‘Facebook’ gibi bir başlık girin. Ardından, uygun simgeyi seçin ve sosyal sayfanızın URL'sini yazın.

'Başka Bir Simgesi Ekle' düğmesine tıklayarak daha fazla simge ekleyebilirsiniz.

Son olarak, duyarlı menünüzün üst kısmına yerel bir WordPress arama çubuğu ekleyebilirsiniz. 'Menü İçeriği' sayfasının altına kaydırmanız ve 'Arama Çubuğu Ekle?' kutusunu işaretlemeniz gerekecektir. İsterseniz, bazı yer tutucu metin de yazabilirsiniz.

Son olarak, ayarlarınızı kaydetmek için 'Değişiklikleri Kaydet' düğmesine tıklayın.

Artık tam ekran duyarlı menüyü çalışırken görmek için web sitenizi ziyaret edebilirsiniz. Menünün farklı ekran boyutlarında nasıl davrandığını görmek için tarayıcınızın boyutunu yeniden ayarlamanızı öneririz.

Demo web sitemizde görünümü şu şekildedir.

Tam ekran menünüzden memnun kaldığınızda, Tam Ekran Menü Seçenekleri'ne geri dönmeyi ve ‘Menüyü yalnızca Yönetici kullanıcıları için göster’ seçeneğinin işaretini kaldırmayı unutmayın. ‘Değişiklikleri Kaydet’ düğmesine tıkladıktan sonra, web sitenizin ziyaretçileri menüye erişebilecektir.

Bu makalenin, WordPress sitenize tam ekran duyarlı bir menü eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress web sitenize bir mega menü eklemeyi veya WordPress temalarına bir kaydırma paneli menüsü eklemeyi de öğrenmek 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.