Mobil internet kullanıcı sayısının, geniş ekran yani masaüstü kullanıcı sayısını çoktan geride bıraktığı artık biliniyor. Bu sebeple çoğu modern web sitesinde, varsayılan olarak farklı ekran boyutlarına ve çözünürlüklerine hitap eden çeşitli duyarlı tasarım modları bulunur. Fakat mobil menüler söz konusu olduğunda bu her zaman doğru değildir. Daha küçük ekran boyutları için ana gezinme kaynağı olmalarına rağmen, bazı temalar ayrı mobil menülerle gelmeyebilir veya ek kurulum gerektiren bir menüye sahip olmayabilir.
Püf Nokta: bazı WordPress kullanıcıları, temaları tarafından sağlanan mobil menüyü gizlemeyi ve WordPress eklentilerini kullanarak yeni bir menü oluşturmayı tercih ediyor. Diğerleri, eksik olabilecek tüm özellikleri barındıran ek bir mobil menü oluşturabilir. Durum ne olursa olsun, WordPress’te duyarlı bir mobil menü oluşturmayı bilmek, herhangi bir web yöneticisi için bir varlık olabilir, bu yüzden bu makaleyi oluşturmaya karar verdik.
Tema seçeneklerini kullanmanın yanı sıra, WordPress’te mobil menüler oluşturmanın iki farklı yöntemi vardır. Bir WordPress eklentisi kullanarak yapabilir veya kodlama kullanabilirsiniz. Bu yazıda, siz hangisini tercih ederseniz edin, bu iki yöntemi de dikkatlice inceleyeceğiz. İşte tartışacağımız konular:
-
Mobil Menü Eklentisi Seçme
-
Max Mega Menü Eklentisini Kullanarak WordPress’te Mobil Menü Nasıl Oluşturulur
-
Özel Kod Kullanarak WordPress’te Mobil Menü Nasıl Oluşturulur
Mobil Menü Eklentisi Seçme
Bir içerik yönetim sistemi (CMS) olarak WordPress’in en büyük avantajlarından biri, bir web sitesinin işlevlerini varsayılanın çok ötesine taşıyan eklentilerin bolluğunda yatmaktadır. Bu durum WordPress’teki menüler için de geçerlidir, çünkü menüyle ilgili çeşitli özellikler sunan veya hem masaüstü hem de mobil menülerin görünümünü değiştirmenin yollarını sunan birçok eklenti vardır.
Ayrıca eklentileri kullanmak genellikle çok az veya hiç kodlama bilgisi gerektirmez, bu nedenle menü yönetimi söz konusu olduğunda birçok WordPress kullanıcısının birincil tercihidir. Bunu göz önünde bulundurarak, WordPress.org’un eklenti deposunu araştırdık ve bu makale için uygun bir menü oluşturma ve yönetme eklentisi bulduk: Max Mega Menu.
Max Mega Menu eklentisi, birden fazla menü konumunu yapılandırmanıza, menüleri WordPress varsayılan menü düzenleyicisiyle entegre olan seçeneklerle yeniden tasarlamanıza ve hatta temanızdan gelen mevcut menülerin davranışını değiştirmenize olanak tanıyan ücretsiz bir eklentidir. Genel olarak konuşursak, bu eklenti, ücretsiz sürümünde hem masaüstü hem de mobil bir menüyü düzenlemenin çoğu yönünü kontrol etmenize olanak tanır.
Özelliklerden bazıları, açılır menü veya mega menü, tuval dışı veya standart açılır mobil menüler, çeşitli stil seçenekleri ve aralarından seçim yapabileceğiniz çoklu geçişler ve menü görüntüleme olayları içerir. Ayrıca menüler duyarlı, dokunmatik ve retinaya hazırdır.
Menüler erişilebilirlik göz önünde bulundurularak oluşturulmuştur, WordPress widget’larının eklenmesine izin verir ve daha fazla kullanıcı dostu olması için Görünüm > Menüler bölümüne entegre edilmiş menü öğeleri için ek ayarlara sahiptir. Bunun dışında eklenti, daha yeni WordPress kullanıcıları için tüm eklenti seçeneklerini ve yapılandırmalarını kapsamlı bir şekilde açıklayan ve aynı zamanda orta ve ileri düzey kullanıcılar için işlevlerini daha da genişletebilmeleri için kodlama örnekleri sağlayan derinlemesine belgelerle birlikte gelir.
Premium özelliklere gelince, diğer şeylerin yanı sıra sekmeli mega menüler, yapışkan, dikey ve akordeon menüler, ek simge setleri, logolar ve arama kutuları gibi ek geçiş çubuğu blokları, WooCommerce desteği, Google yazı tipleri ve premium desteği içerir.
Püf Nokta: eklenti ücretsiz sürümünde bile hem masaüstü hem de mobil için çeşitli seçenekler sunar, bu yüzden onu ele almaya karar verdik. Fakat bu sadece mobil menülerle ilgili bir makale olduğundan, özellikle mobil menülerle ilgili eklenti seçeneklerine odaklanacağız ve menünüzü sadece bu eklentiyi kullanarak mobilde nasıl görüntüleyebileceğinizi göstereceğiz.
Max Mega Menü Eklentisini Kullanarak WordPress’te Mobil Menü Nasıl Oluşturulur
Eklentiyi kurup etkinleştirdikten sonra Mega Menü > Menü Konumları bölümüne gidin. Bu durum tüm kayıtlı menü konumlarını görebileceğiniz ve yenilerini oluşturabileceğiniz Menü Konumları sekmesini açacaktır. Bu bölümde, eklentinin sağladığı sınırlar dahilinde mevcut menü konumlarının işlevlerini de düzenleyebilirsiniz. Bu durum bu eklenti ile temanız tarafından sağlanan menü konumlarının görünümünü ve işlevselliğini bile değiştirebileceğiniz anlamına gelir. Fakat bu makalenin amaçları doğrultusunda, yalnızca yeni bir menü konumu oluşturacağız ve sağlanan seçenekleri kullanarak düzenleyeceğiz.
Yeni bir menü konumu eklemek için Başka bir menü konumu ekle düğmesine tıklayın.
Ardından bir sonraki bölümde menü konum adını girmeniz ve isteğe bağlı olarak o konuma bir menü atamanız gerekecektir. Bu konuma hangi menüyü atayacağınızdan emin değilseniz veya o menüyü henüz oluşturmadıysanız, Atla – Daha sonra bir menü atayacağım seçeneğini belirleyin. Bu durumda, daha sonra Görünüm > Menüler bölümündeki Konumları Yönet sekmesinden menüyü atamanız gerekecektir. Bu işlemi tamamlamak için Menü konumu ekle düğmesine tıklayın.
Bu yazı için Max Mega Menü Konumu adında yeni bir menü konumu oluşturduk. Fakat bu yeni menü konumunu tam anlamıyla kullanmak için yeni bir menü teması oluşturmanızı da öneririz. Aksi takdirde, menünüz web sitesinde görüntülendiğinde eklenti tarafından ayarlanan varsayılan stilleri ve efektleri kullanır.
Bu yüzden temalarınızın özelliklerini düzenleyebileceğiniz Menü Temaları sekmesine gitmenizi öneririz. Eklenti kurulumundan sonra, bu sekmeye erişirken görüntülenecek olan, Varsayılan adlı tek bir temanız olacaktır. Yeni bir menü teması oluşturmak için üç nokta (···) düğmesini tıklayın ve menüden Yeni tema ekle seçeneğini seçin.
Kısa bir süre sonra, aynı varsayılan seçeneklerle buna göre düzenleyebileceğiniz yeni bir tema oluşturulacaktır. Bu tanıtımın amaçları doğrultusunda, Özel tema adı verilen yeni bir tema oluşturduk. Düzenlenecek temayı seçin etiketinin yanındaki açılır menüde görüntülenecektir.
Bunu söyledikten sonra, kullandığımız bazı seçeneklerin üzerinden geçelim. Birkaç düzenleme sekmesinde epeyce seçenek olduğundan, her birinin üzerinden geçmeyeceğiz, bunun yerine daha önemli bulduklarımızı vurgulayacağız. Bu eklenti kullanılarak görüntülenen menü konumlarının hem masaüstü hem de mobil cihazlarda menüleri gösterdiğini de belirtmekte fayda var.
Eklentinin sağladığı tüm seçeneklerin mobil cihazlar için yapılmadığını, bazılarının yalnızca masaüstü için yapıldığını unutmayın. Bu makalede, mobil cihazlarla ilgili daha önemli seçeneklerden bazılarının üzerinden geçeceğiz ve varsayılan olarak yapılan tüm ekran boyutlarının aksine, menünüzü yalnızca mobil cihazlarda görüntülemenin bir yolunu göstereceğiz.
Bunu göz önünde bulundurarak, düzenlemek istediğiniz temayı seçtikten sonra, Genel Ayarlar adlı sekmeden başlayarak birkaç sekme göreceksiniz. Bu sekmede, diğer seçeneklerin yanı sıra, mobil menünüzün sayfalarınızın içeriğiyle örtüşmemesini sağlamak için mobil oklarınızın görünümünü ayarlayabilir, fareyle üzerine gelme geçişleri uygulayabilir ve z-indeksini varsayılan değerin üzerine yükseltebilirsiniz. Bu sekmede değiştirmek istediğiniz seçenekleri belirledikten sonra, ayarlarınızı kaydetmek için alttaki Değişiklikleri Kaydet düğmesini tıkladığınızdan emin olun.
Aşağıdaki üç sekme – Menü Çubuğu, Mega Menüler ve Açılır Menüler – menünüzün masaüstü yönüyle ilgili ayarları içerir. Bu genel bakışta onları atlayacağız. Bunun yerine, doğrudan mobil menünüzün tasarımını ve bazı işlevlerini ayarlayabileceğiniz Mobil Menü sekmesine geçeceğiz.
Bu sekmede bulunan seçeneklerden en önemlileri olarak Responsive Breakpoint ve Toggle Bar Designer seçeneklerini vurgulamalıyız. Birincisi, menünün masaüstü sürümünden mobile hangi ekran genişliğinde döndüğünü belirlerken, ikincisi toggle simgesinin konumunu, yani hamburger simgesinin konumunu ayarlamanıza olanak tanır.
Duyarlı kesme noktası seçeneği için, en iyi şekilde mevcut temanızda kullanılan kesme noktasına ayarlanır, fakat daha uygun olduğunu düşünüyorsanız alternatif bir kesme noktası da ayarlayabilirsiniz. Geçiş çubuğu seçeneğine gelince, onu aşağıda ele alacağız.
Geçiş çubuğunu üç menü alt bölümünden birine sürükleyip bırakarak geçiş çubuğunu tasarlayabilirsiniz.
Ek olarak arama, logo veya simge gibi diğer bazı özellikler eklentinin premium sürümü için ayrılmışken, standart veya animasyonlu bir menü geçişi ve bir ayırıcı arasında seçim yapabilirsiniz.
Son olarak geçiş çubuğu simgesine tıkladıktan sonra, onu daha da şekillendirmenize izin veren ek seçeneklere erişeceksiniz.
Ek olarak Mobil Menü seçenekleri sekmesinin daha aşağısında bulunan ve mobil menünün genişliğini ayarlamanıza izin veren, fakat mobil efekti “Sola Kaydır” veya “Sağa Kaydır” olarak ayarlanmışsa, Tuval Dışı Genişlik seçeneğini inceleyeceğiz. Bu efekt yapılandırma sürecinde biraz sonra ayarlandığından, bu ayarı daha sonra dikkate almanızı öneririz.
Kalan ayarlara gelince, geçiş çubuğunu kaldırabilir, alt menüleri tam genişlikte yapabilir ve ayrıca menü öğelerinin yüksekliği, rengi ve yazı tipi, menü arka plan seçeneği ve diğerleriyle ilgili genel ayarları yapabilirsiniz.
Bu makale için, bu ayarları varsayılan değerlerden çok fazla değiştirmedik. Bu bölümdeki ayarları buna göre ayarladıktan sonra, ayarlarınızı kaydetmek için tekrar alttaki Değişiklikleri Kaydet düğmesine tıklayın. Ardından son bölüme geçin: Özel Şekillendirme.
Genel olarak konuşursak, Özel Şekillendirme bölümü, menünün görünümünü değiştirmenin ve hatta yeni özellikler eklemenin veya mevcut olanları kısıtlamanın bir yolunu sunduğu için orta ve ileri düzey WordPress kullanıcıları için çok uygundur. Bu durum CSS veya SCSS kodu ile yapılır. Eklenti yazarlarından faydalı bir ipucu olarak, SCSS değişkenlerinin ve karışımlarının bir listesini ve hatta bu ikisiyle uygun bir SCSS kod parçacığının nasıl oluşturulabileceğine dair bazı kodlama örneklerini de göreceksiniz. Ek olarak Özel Stil sekmesini açtıktan sonra, amacı tüm gezinmeyi zaten eklenmiş ayrı bir satıra yerleştirmek olan küçük bir SCSS kod parçacığı göreceksiniz.
Bununla birlikte bu bölüm çoğu WordPress kullanıcısına korkutucu gelse de, menünüzü yalnızca küçük ekran boyutlarında görüntülemenin en kolay yoludur. Daha doğrusu, bu eklenti kullanılarak oluşturulan menü konumları hem masaüstünde hem de mobilde görüntülendiğinden, yeni menünüzü yalnızca mobil hale getirmenin en kolay yolu CSS veya SCSS kodu ile daha geniş ekran boyutlarında görünümünü gizlemektir. Küçük bir SCSS kod parçasını kullanarak yaptığımız da tam olarak buydu.
Yeni menünüzü yalnızca eklentinin $wrap değişkenini ve masaüstü karışımını kullanarak mobil cihazlarda gösteren o küçük SCSS parçacığını ekledik. Snippet, ne yaptığını açıklayan yorumdan başlayarak aşağıdadır.
/** Hide menu on desktop **/
@include desktop {
#{$wrap} {
display: none;
}
}
Siz de menünüzün sadece küçük ekran boyutlarında görünmesini istiyorsanız, bu kod parçacığını doğrudan eklenti tarafından eklenenin altına yerleştirebilirsiniz. Daha sonra kodu kaydetmek için Değişiklikleri Kaydet düğmesini tıklayın.
Ayrıntılı olarak, bu kod parçacığı, daha önce bahsedilen Duyarlı Kesme Noktası ayarını dikkate alır ve bu kesme noktasından daha büyük ekran boyutlarında menüyü gizler. Örneğin yanıt kesme noktanız 768 piksel olarak ayarlanmışsa, bu snippet, 769 piksel ve üzeri tüm ekran boyutlarında menü konumunu gizleyecektir. Bununla, Menü Temaları bölümüne genel bakışımızı sonlandırıyoruz.
Ayrıntılı olarak, bu kod parçacığı, daha önce bahsedilen Duyarlı Kesme Noktası ayarını dikkate alır ve bu kesme noktasından daha büyük ekran boyutlarında menüyü gizler. Örneğin yanıt kesme noktanız 768 piksel olarak ayarlanmışsa, bu snippet, 769 piksel ve üzeri tüm ekran boyutlarında menü konumunu gizleyecektir. Bununla, Menü Temaları bölümüne genel bakışımızı sonlandırıyoruz.
Yeni menü konumunun kurulum sürecini tamamlamak için Menü Konumları bölümüne dönün. Yeni menü konumunuza bir kez daha tıkladıktan sonra üç sekme göreceksiniz: Genel Ayarlar, Gelişmiş ve Görüntüleme Seçenekleri.
İlk sekmede, yap…