WordPress sitenize hücresel menü eklemek için 4 kolay adım
Duyarlı. Hücresel dostu. Cep telefonu hazır. WordPress sitenizi oluştururken bu terimlerden birini bulmuş olmalısınız. Hücresel ve duyarlı temalar, ziyaretçilerinizin neredeyse% 50’sinin bunu mobil cihazlarda kesinlikle göreceği düşünüldüğünde çok önemlidir. Peki web sitesi menünüz neden terk edilmelidir? Menü yöntemi görüntülenir, duyarlı menü oluşturmanın bir parçasıdır. Dolayısıyla, ana gezinme menünüz bir masaüstü cihazında bir liste şeklinde ise, aynı menü mobil cihazlarda Hamburger menüsü olarak görüntülenebilir. Burada, temenize ‘zorlanan bir navigasyon menüsü nasıl ekleneceğini’ açıklayan iyi bir makalemiz var.
Fakat! Mobil dostu bir menü oluşturmak için menüde görüntülenen içeriği değiştirmek isteyebilirsiniz. Örneğin, WisdMlabs web sitesi! Bir mobil cihazda bir web sitesi görüyorsanız (veya şimdi mobil cihaz kullanıyorsanız), ana menünün mega menü olmadığını göreceksiniz. Öte yandan, masaüstü cihazlardaki ana menü mega menüdür.
Şimdi, mobil cihazlarda farklı bir menü görüntülemek için temanız farklı bir mobil menü oluşturmanıza izin vermelidir.
Özel bir hücresel menü eklemek için WordPress sitenizde hücresel menü nasıl oluşturulur, aşağıdakileri yapmanız gerekir:
Hücresel menüyü kaydedin
Ekranın genişliğine göre ekranı görüntüleyin
Hücre Menüsü Ekranından Emin Olun
Hücresel menüyü oluşturun ve ayarlayın
Tek ihtiyacınız olan JQuery ve bazı PHP kodlaması hakkında biraz bilgi ve sınırsız olasılıklarınız var. Değiştirilecek dosya aşağıdaki gibidir: #1 Hücresel menüyü kaydedin WordPress temanız hücresel bir menü sağlamadıysa, aşağıdaki kodu kullanarak kaydedebilirsiniz. Çocuğunuzun temasından veya özel eklentisinden function.php’ye kod ekleyebilirsiniz. // wdm_register_mobile_menu () menü işlev menüsü () {
add_theme_support (‘nav-menu’);
register_nav_menus (dizi (‘mobil-menu’ => __ (‘mobil menü’, ‘wdm’)));
}
Add_action (‘init’, ‘wdm_register_mobile_menu’);
Bu kodu ekledikten sonra, menü ayarlarında ‘Hücresel Menü’ seçeneğini göreceksiniz.
Hücresel Menü Seçenekleri
Wdm_mm_toggle_scripts () function ()
wp_enqueue_script (‘wdm-mm-toggle’, get_stylesheet_directory_uri ().
}
Add_action (‘wp_enqueue_scripts’, ‘wdm_mm_toggle_scripts’);
Komut dosyasını bıraktıktan sonra, komut dosyası her sayfaya yüklenir. Artık aşağıdaki JS kodunu eklemeniz gerekiyor. // Hücresel bir menüyü gizleyin veya görüntüleyin
/* 800 ekran genişliğinde görüntülenen menüyü değiştirmek istediğimizi düşünelim, yapmamız gereken bu (800’ü ihtiyacınız olan ekranın genişliğiyle değiştirebilirsiniz) ..*/
Anahtarlama işlevi () {
if (jQuery (pencere). genişlik ()> = 800) {
jQuery (‘.nav.mobile-menu’). Hide ();
jQuery (‘.nav.desktop-menu’) .show ();
} başka {
jQuery (‘.nav.desktop-menu’). Hide ();
jQuery (‘.nav.mobile-menu’) .show ();
}
}
// Sayfayı yükleme üzerine başlangıçta menü ekranını ayarlayın
değiştirmek();
// Tarayıcı boyutu değişiminde menü ekranını değiştirin
JQuery (pencere). Secate (function () {
değiştirmek();
});
#3 Hücresel menünün görüntülendiğinden emin olun, menünün sorunsuz görüntülenmesini sağlamak için takip etmemiz gereken son bir adım var. Bu adım temel olarak menü ayarlarında düzenlendikten sonra mobil menünün ekranını ele alıyor. Bu kodun geçerli başlığınıza eklenmesi gerekir. ‘Ana menü’ eklendikten sonra ‘wp_nav_menu’ işlevi altına ekleyebilirsiniz. /* Aşağıdaki kod, hücresel menünün menü ayarlarında arka uçtan ayarlanıp ayarlanmadığını kontrol eder. Menü ayarlanmışsa, başlıkta görüntülenir. Veya menü ayarlanmadı, ardından mesajı görüntüle.*/
if (function_exists (‘has_nav_menu’) && has_nav_menu (‘mobil-menu’)) {
wp_nav_menu (dizi (
‘derinlik’ => 6,
‘sort_column’ => ‘menü_order’,
‘kap’ => ‘ul’,
‘menü_id’ => ‘Main-nav’, ‘menü_class’ => ‘nav mobil-menu’,
‘Tema_lokasyon’ => ‘menü hücreli’
));
} başka {
echo ”
Hücresel menü ayarlanmadı
“;
}
Ana menüye ek bir sınıf olarak bir ‘masaüstü menüsü’ eklediğinizden emin olun. Bu sınıf menü ekranını etkinleştirmek için kullanılacaktır.
Tabii ki bu da küçük bir CSS tarafından desteklenmelidir. Çocuğunuzun temasından style.css’e aşağıdaki CSS ekleyin. .mobile-menu {
Ekran: Hiçbir şey;
}
@Media sadece ekran ve (min genişliği: 800 px) {
.Menu-desektop {
Ekran: Blok! Önemli;
}
.mobile-menu {
Ekran: Hiçbir şey! Önemli;
}
}
@Media sadece ekran ve (maksimum genişlik: 799 px) {
.Menu-desektop {
Ekran: Hiçbir şey! Önemli;
}
.mobile-menu {
Ekran: Blok! Önemli;
}
}
#4 Hücresel menü oluşturduktan ve görünümü etkinleştirdikten sonra hücresel menüyü oluşturun ve ayarlayın, bir menü oluşturup hücresel bir menü olarak ayarlamamız gerekir.
Bunun için WordPress Yönetici Panelinizde yeni bir menü oluşturun.
Yeni bir menü oluşturun
Şimdi, menü öğeleri ekleyin ve hücresel menüler olarak ayarlayın. Yapılan değişiklikleri kaydetmeyi unutmayın.
Hücresel bir menü ekleyin
