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?

Tam ekran duyarlı bir menü, ziyaretçilerin akıllı telefonlarda ve tabletlerde WordPress web sitenizde veya WooCommerce mağazanızda gezinmesini çok daha kolay hale getirir.

Menü için tüm ekranı kullanarak, yanlış öğeyi yanlışlıkla seçmeden bağlantılara dokunmak basittir.

Günümüzde masaüstünden daha fazla kişi mobil üzerinden gezindiği için, sitenizin küçük ekranlarda nasıl göründüğünü kontrol etmek çok önemlidir.

Duyarlı bir menü, farklı ekran boyutlarına otomatik olarak uyum sağlayarak her ziyaretçi için sorunsuz bir deneyim sağlar.

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

Adım 1: FullScreen Menu Eklentisini Kurun ve Etkinleştirin

Yapmanız gereken ilk şey FullScreen Menu eklentisini kurmak ve etkinleştirmektir.

Daha fazla ayrıntı için yeni başlayanlar için WordPress eklentisi yükleme kılavuzumuza adım adım göz atabilirsiniz.

Adım 2: Genel Menü Ayarlarını Yapılandırın

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.

Sizi otomatik olarak 'Ayarlar' sekmesine götürecektir. Menüyü etkinleştirmek için ' Animasyonlu Tam Ekran Menüyü Etkinleştir' onay kutusunu işaretleyerek başlayın.

Başlangıçta ' 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.

Bu seçeneklerin altında, 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ıyan diğer ayarları bulacaksınız. 

Örneğimiz için bu ayarları işaretli bırakacağız, ancak kendi siteniz için istediğiniz gibi özelleştirmekten çekinmeyin.

Adım 3: Menü Tasarımını ve Görünümünü Özelleştirin

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 renk ayarı olduğunu fark edeceksiniz. İlk renk, hamburger menü simgesi içindir. Bu genellikle web sitenizin başlık alanında görünür. Ziyaretçileriniz ona tıkladığında veya dokunduğunda, tam ekran menü gösterilir veya gizlenir.

İ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, genellikle temanızın yazı tipini kullanan varsayılan yazı tipi ayarlarında kalmanızı öneririz.

Bu iyi bir seçimdir çünkü web sitenizin genel tasarımıyla uyumlu olacaktır ve ek yazı tiplerini yüklemek bazen WordPress sitenizin performansını ve hızını yavaşlatabilir.

Belirli sayfalarda yanal bir yan menü görüntülemek ve ana menü yeterince uzun değilse kaydırmak için ayarlar da vardı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ü girişinin üzerine fareyle gelindiğinde elde ettiğiniz etkidir. Seçenekler, görünen ince bir çizgi (dolgu çizgisi gibi), arka plan renginde bir değişiklik veya yuvarlak kenarlı bir arka plan rengi değişimidir.

Adım 4: Tam Ekran Menü İçeriğini Tanımlayın

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.

Yukarıdaki '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ği konusundaki kılavuzumuza 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ı ekleyecek bir onay kutusu da vardır. Birçok web sitesi sahibi, ana menüye eklemek 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 bir arama çubuğu ekleyebilirsiniz. 'Menü İçeriği' sayfasının en altına kaydırmanız ve 'Arama Çubuğu Ekle?' kutusunu işaretlemeniz gerekecektir. İsterseniz, bazı yer tutucu metin de yazabilirsiniz.

Adım 5: Değişiklikleri Kaydedin ve Menünüzü Test Edin

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, WordPress yönetici menünüzdeki Tam Ekran Menü Seçenekleri'ne geri dönmeyi ve '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 sitenizi ziyaret edenler menüye erişebilecektir.

WordPress'te Tam Ekran Duyarlı Menü Ekleme Hakkında Sıkça Sorulan Sorular

WordPress'te tam ekran duyarlı bir menü ekleme hakkında okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

WordPress'te nasıl duyarlı bir menü oluşturulur?

WordPress'te duyarlı bir menü oluşturmak için FullScreen Menu gibi mobil uyumlu bir menü eklentisi kullanın. Bu, menünüzün sorunsuz gezinme için farklı ekran boyutlarına uyum sağlamasını sağlar.

WordPress'te başlık nasıl duyarlı hale getirilir?

WordPress'te başlığı duyarlı hale getirmek, herhangi bir cihazda otomatik olarak ayarlanması anlamına gelir. Bunu duyarlı bir tema kullanarak veya CSS ve blok düzenleyici ile başlık düzenini özelleştirerek yapabilirsiniz.

Ayrıntılı talimatlar için WordPress başlığınızı özelleştirme eğitimimize bakın.

WordPress'te tam ekran sayfa nasıl yapılır?

WordPress'te kenar çubuklarını kaldıran ve içeriğinizi tüm ekrana yayan SeedProd gibi bir sayfa oluşturucu veya "tam genişlik" şablonlarına izin veren tema ayarlarını kullanarak tam ekran bir sayfa oluşturabilirsiniz.

WordPress'te duyarlı tablo nasıl oluşturulur?

WordPress'te duyarlı bir tablo oluşturmak için blok düzenleyicinin tablo bloğunu veya duyarlı tablo desteği olan bir eklentiyi kullanın. Bu, tablonuzun mobil cihazlarda düzgün bir şekilde kaydırılmasını veya yığınlanmasını sağlar.

Umarız bu makale, WordPress sitenize tam ekran duyarlı bir menü eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca WordPress web sitenize bir mega menü eklemeyi veya WordPress temalarında bir kaydırma paneli menüsü eklemeyi öğ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.