Mobil internet kullanıcılarının sayısının masaüstü bilgisayarları geçmesiyle, web sitesi tasarımcılarının onlara hitap etmek için ellerinden geleni yapması şaşırtıcı değil. Bir web sitesinin mobil versiyonuna sahip olmak, hatta bir web sitesini mobil uygulamaya dönüştürmek norm haline geldi. Bunun nedeni basit: farklı en boy oranları ve farklı çözünürlükler, farklı özellikler veya tamamen farklı özellikler için farklı görüntüleme modları gerektirir. Buna duyarlı tasarım denir: farklı ekran boyutları için farklı sürümler. El cihazlarının tasarımcılarına ve kullanıcılarına sorun çıkaran özelliklerden biri de menüdür.
Menüler, cihazlarının doğası gereği sınırlı ekran alanına sahip olan mobil kullanıcılar için büyük, karmaşık ve hantal olabilir. Bu sebeple birçok premium WordPress teması mobil menülerle donatılmıştır. Yine de, tam olarak istediğiniz gibi görünen ve çalışan bir temanız olabilir, fakat bu seçenekten yoksundur. Dolayısıyla, mobil menünüzü gizlemek veya başka bir menüyle değiştirmek isterseniz, size bu konuda yardımcı olmamızı sağlayabilirsiniz. Konuşacağımız şey bu:
-
Kod Kullanarak WordPress Mobil Menünüzü Gizleme
-
Kod Kullanarak WordPress Mobil Menünüzün Öğelerini Gizleme
-
Eklenti Kullanarak WordPress Mobil Menünüzü Gizleme
Kod Kullanarak WordPress Mobil Menünüzü Gizleme
Size göstermek istediğimiz ilk şey, bir menüyü veya bir menünün bölümlerini CSS kullanarak mobil cihazlarda nasıl gizleyeceğinizdir. Bu durum sizin açınızdan biraz kodlama ve ayrıca inceleme aracının kullanımını gerektirecektir, fakat her iki şekilde de önemli değil.
Tüm menüyü gizlemek için, menünüzün tanımlayıcısını ve CSS sınıfını bulmanız gerekir. Bu durum temadan temaya değişebilir ve inceleme aracının kullanışlı olduğu yer burasıdır. Sağ tıklamayı devre dışı bırakmadıysanız, web sitenizde herhangi bir yeri sağ tıklayın ve açılır menüden İncele’yi seçin. F12 düğmesine de basabilirsiniz.
Şimdi inceleme aracını açtıktan sonra, ana görünümdeki öğeleri vurgulamak için Öğeler sekmesini aşağı kaydırabilirsiniz. Menüyü web sitenizin masaüstü sürümünde kolayca bulabilirsiniz, fakat saklamanız gereken menü bu değildir. Bunun yerine, pencerenizin dikey kenarını sürükleyerek daha dar görünümü göstermek için ekranınızı yeniden boyutlandırmanız gerekir. Web sitemizin mobil versiyonunda gizlemek istediğimiz sınıfın adı menu-button-container. Web sitenizde sınıfın farklı bir şekilde adlandırılabileceğini unutmayın.
Menünün bu belirli sürümünü web sitesinin mobil sürümünden gizlemek için web sitenize biraz CSS eklemeniz gerekir. WordPress kontrol panelinizden Görünüm/Özelleştir’e gidin ve Ek CSS bölümünü ve web sitesinin Mobil sürümünü seçin. Sol alt taraftaki menüden web sitenizin farklı sürümleri arasında geçiş yapabilirsiniz. Web sitesinin mobil sürümünü düzenlemek için mobil simgesini tıklayın.
Ek CSS alanına girmeniz gereken kod:
.menu-button-container {
display:none;
}
Bunu yaptıktan sonra, menünün önizleme penceresinden kaybolduğunu görebilirsiniz. Değişikliklerinizi kaydetmek için Yayınla düğmesine basmanız gerekir ve mobil menünüz web sitenizin mobil versiyonunda görünmez.
Tabii ki, menu-button-container’ı kendi mobil menünüzün sınıfıyla değiştirmeniz gerekecek.
Kod Kullanarak WordPress Mobil Menünüzün Öğelerini Gizleme
Peki ya tüm menüyü gizlemek istemezseniz? Yalnızca birkaç öğeyi gizlemek, mobil cihaz kullanan ziyaretçileriniz için daha kısa ve daha kolay gezinilebilir hale getirecektir.
Herhangi bir öğeyi gizlemek için yine menüye biraz CSS eklemeniz gerekecek. İlk olarak, WordPress kontrol panelinizden Görünüm/Menüler’e gidin, sağ üst taraftaki Ekran Seçenekleri’ne tıklayın ve CSS Sınıflarını kontrol edin.
Şimdi Team öğesini mobil kullanıcılar için Ana Menümüzden gizlemek istediğimizi varsayalım. Şimdi üzerine tıkladığınızda, CSS Sınıfları (isteğe bağlı) etiketli bir alanı etkinleştirdiğinizi göreceksiniz. Burada bir menü öğesine bir sınıf atayabilirsiniz. Team elementine hide-on-mobile sınıfını atayacağız ve menümüzü kaydedeceğiz.
Bu adlandırma kuralları dahilinde sınıflarınızı istediğiniz gibi adlandırabilirsiniz: bir sınıf bir harfle (büyük veya küçük harf) başlamalı ve adın geri kalanında harfler, rakamlar, alt çizgiler ve kısa çizgiler kullanmalıdır.
Bu durum Ana Menümüzdeki Ekip öğesini yalnızca mobilde gizleme sınıfına ait olarak etiketler. Bu sınıfın tüm öğelerini web sitesinin mobil versiyonundan fiilen gizlemek için, web sitemize – tahmin ettiniz – bazı kodlar eklememiz gerekiyor. WordPress panonuzdan Görünüm/Özelleştir’e gidin ve Ek CSS bölümünü seçin.
Ek CSS alanına eklemeniz gereken kod şudur:
@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}
Bu kod, web sitesinin genişliği 767 piksel veya daha az olduğunda, hide-on-mobile sınıfına ait tüm öğeleri gizler. Elbette bunu, farklı cihazlar için farklı öğeleri gizleyerek veya göstererek herhangi bir menü öğesi için yapabilirsiniz.
Eklenti Kullanarak WordPress Mobil Menünüzü Gizleme
Çok yaygın olduğu gibi, bir tema tam istediğiniz gibi çalışmıyorsa, onu bir eklenti ile tamamlayabilirsiniz. Kullanacağımız eklenti WP Mobile Menu’dür. Yine de, aralarından seçim yapabileceğiniz çok sayıda duyarlı menü eklentisi olduğunu unutmayın.
Eklentiyi kurup etkinleştirdikten sonra, otomatik olarak aynı geliştiricinin bazı ek güvenlik özelliklerini kabul etmenizi isteyen bir ekrana yönlendirileceksiniz. Onları atlayacağız.
Daha sonra eklentinin yapılandırma ekranına yönlendirileceksiniz. İlk bölüm, Ana Seçenekler bölümüdür. Orada, hem sol hem de sağ menüyü kapatmanız yeterlidir. Görünürlük Ayarlarında daha aşağıda, Yalnızca Mobil cihazlarda etkinleştir seçeneğini Açık konuma getirmeniz gerekir.
Daha aşağıda, Orijinal Tema Menüsünü Gizle bölümünde, tüm menü öğelerinin eklenti tarafından gizlenecek şekilde işaretlendiğinden emin olmanız gerekir.
Kullanmakta olduğunuz temaya bağlı olarak, menü öğelerinizden birinin alışılmadık şekilde adlandırılması ve eklentinin bunu tanımaması durumunda Öğe bul aramasını kullanmanız gerekebilir. Bu durum temadan temaya değişebilir, bu nedenle daha spesifik olamayız, fakat çoğu tema geleneksel öğeleri kullanır.
İşiniz bittiğinde, Değişiklikleri Kaydet’e tıklayın ve web sitenizi bir mobil cihazdan ziyaret edin. Menünün görünmediğini göreceksiniz.
Peki ya mobil cihazlar için bir menünün farklı bir sürümünü istiyorsanız? Aslında, bu eklentinin birincil işlevi budur. Bu durumda, web sitenizin mobil versiyonu için bir menü oluşturmanız gerekecektir. Burada yeni bir menü oluşturmanın detaylarına girmeyeceğiz. Bir menü oluşturmak için yardıma ihtiyacınız varsa, WordPress’te menü ekleme konusunda eksiksiz bir öğreticimiz var. Bir mobil menü oluştururken Sol Mobil Menü veya Sağ Mobil Menü’yü işaretlemeyi unutmayın.
Yine de bu alanı, bir mobil menünün en temellerine kadar mümkün olduğunca ayrıştırılması gerektiğini söylemek için kullanacağız. Menünüzün mobil sürümü için yalnızca temel gezinme seçeneklerini kullanmanızı tavsiye ederiz. Mobil kullanıcılarınızın, belirli bir sayfanın peşindeyseler, arama çubuğunu kullanma olasılıkları daha yüksektir.
Bir menü oluşturup kaydettikten sonra, WordPress panonuzdan Mobil Menü Seçenekleri’ne gidin.
Burada Ana Seçenekler bölümünde, görüntülemek için mobil menünüzü seçmeniz gerekir. Biz bizimkine Mobil Menü adını verdik ama siz sizinkine istediğiniz ismi verebilirsiniz. Sol ve sağ menüleri etkinleştirmek için de geçiş yapabilirsiniz. Menü görüntüleme konumunu menü oluşturma ekranında kontrol ettirmeniz gerekeceğini unutmayın.
Sırada, Görünürlük Seçenekleri bölümünüz var. Bunlar, mobil menünün görüntülendiği koşulları yönetir. Mobil menünüzü gösterebilmek için mobil cihazlarda görünür hale getirmeniz gerekmektedir.
Daha sonra Orijinal Tema Menüsünü Gizle bölümünde, mobil sürümden hangi menü öğelerinin gizleneceğini seçebilirsiniz. Bu durum yapısını biliyorsanız, bir menünün mobil sürümünü oluşturmanın etkili bir yoludur. En yaygın menü öğeleri, varsayılan olarak gizlenmek üzere kontrol edilir.
Aşağıda, mobil menünüzü daha da özelleştirmenize olanak tanıyan bazı çeşitli ve gelişmiş seçenekler bulunmaktadır. Mobil menüleri göstermek veya gizlemekle ilgili olmadıkları için burada ayrıntılara girmeyeceğiz.
Menünüzü yapılandırmayı tamamladığınızda Değişiklikleri Kaydetmeniz gerekecektir.
Ve en temel bilgileri içeren mobil menümüz, web sitemizin mobil sürümünde görünür. Orijinal mobil menünüz gizlenir ve yerine yenisi gelir.
Çözüm Yolu
Gösterdiğimiz gibi, mobil menüler oluşturmak, göstermek ve gizlemek ve menülerin alternatif sürümlerini oluşturmak çok az iş gerektirir ve işin çoğunu sizin yerinize yapabilecek eklentiler bile vardır. Ne tür bir web sitesi işletiyor olursanız olun, ziyaretçilerinizin büyük bir kısmı muhtemelen mobil cihazlar kullanıyor. Web sitenizin tamamen alternatif bir sürümünü oluşturmak sizin için çok külfetli olabilirken, küçük bir değişiklik yapmak hiç sorun değil. O halde başarmamak için bir sebep yok.