WordPress Web Sitenize Mobil Menü Eklemenin 4 Kolay Adımı

Duyarlı. Mobil dostu. Mobil hazır.

WordPress web sitenizi oluştururken bu terimlerden biriyle karşılaşmış olmalısınız. Ziyaretçilerinizin yaklaşık %50'sinin onu bir mobil cihazda görüntülemek zorunda olduğu düşünüldüğünde, mobil uyumlu, duyarlı bir tema oldukça zorunludur.

Peki neden web sitenizin menüsü geride kalsın?

Şimdi, menünün görüntülenme şekli, menüyü duyarlı hale getirmenin bir parçasıdır. Yani bir masaüstü cihazda birincil navigasyon menünüz liste şeklindeyse, aynı menü bir mobil cihazda hamburger menüsü olarak görüntülenebilir.

Burada, temanıza ' Zorlayıcı Gezinme Menüsü Nasıl Eklenir'i açıklayan harika bir makalemiz var.

Fakat! Menüyü mobil uyumlu hale getirmek için menüde görüntülenen içeriği değiştirmek isteyebilirsiniz.

Örneğin, WisdmLabs web sitesi! Web sitesine bir mobil cihazdan bakarsanız (veya şu anda bir mobil cihazdaysanız), ana menünün bir mega menü olmadığını fark edeceksiniz. Öte yandan, bir masaüstü cihazdaki ana menü, düpedüz bir mega menüdür.

Şimdi, bir mobil cihazda farklı bir menü görüntülemek için temanızın FARKLI bir MOBİL MENÜ oluşturmanıza izin vermesi gerekiyor .

WordPress web sitenizde Mobil Menü Nasıl Oluşturulur

Mobil cihazlara özel bir menü eklemek için aşağıdakileri yapmanız gerekir:

1. Bir mobil menü kaydedin
2. Ekran genişliğine göre ekranı değiştir
3. Mobil menü ekranını sağlayın
4. Bir mobil menü oluşturun ve ayarlayın

Tek ihtiyacınız olan, biraz jQuery bilgisi ve biraz PHP kodlaması ve sonsuz olanaklara sahipsiniz.

Değişiklik yapılacak dosyalar aşağıdaki gibidir:

#1 Mobil Menü Kaydolun

WordPress temanız size halihazırda bir mobil menü sağlamıyorsa, aşağıdaki kodu kullanarak bir tane kaydedebilirsiniz. Kodu, alt temanızın veya özel bir eklentinin functions.php dosyasına ekleyebilirsiniz.

 // bir mobil menüyü kaydet
function wdm_register_mobile_menu () {
    add_theme_support( 'gezinme menüleri' );
    register_nav_menus( dizi ( 'mobil menü' => __( 'Mobil Menü' , 'wdm' )) );
}
add_action( 'init' , 'wdm_register_mobile_menu' );

Bu kodu ekledikten sonra menü ayarlarında 'Mobil Menü' seçeneğini görmelisiniz.

#2 Menü Ekranını Aç/Kapat

Artık menünün yalnızca bir mobil cihazda görüntülenmesi gerekiyor. Bu nedenle, ekran boyutuna veya tarayıcı genişliğine göre görünümünü değiştirmemiz gerekiyor. Bunun için biraz jQuery ile uğraşacağız.

Her sayfaya yüklenen bir JS dosyasına aşağıdaki kodu eklediğinizden emin olun. Bilmiyorsanız, kodu bir 'mobile-menu-toggle.js' dosyasına ekleyebilir ve aşağıdaki kodu kullanarak her sayfaya yükleyebilirsiniz:

(Kodu alt temanızın veya özel bir eklentinin function.php dosyasına ekleyin)

 // JS dosyasını yükle
function wdm_mm_toggle_scripts () {
    wp_enqueue_script( 'wdm-mm-toggle' , get_stylesheet_directory_uri() . '/js/mobile-menu-toggle.js' , dizi ( 'jquery' ));
}
add_action( 'wp_enqueue_scripts' , 'wdm_mm_toggle_scripts' );

Komut dosyasını sıraya koyduğunuzda, her sayfaya yüklenecektir. Şimdi içine aşağıdaki JS kodunu eklemelisiniz.

Bu nedenle, aşağıdaki kodu 'mobile-menu-toggle.js' dosyasına ekleyin.

 // mobil menüyü gizle veya göster

/* 800 ekran genişliğinde görüntülenen menüyü değiştirmek istediğimizi düşünelim, işte yapmamız gereken şey (buna göre 800'ü ihtiyacınız olan ekran genişliğiyle değiştirebilirsiniz).*/
işlev geçişi () {
    if ( jQuery( pencere ) .width () >= 800 ) {
      jQuery( '.nav.mobile-menü' ) .hide ();
      jQuery( '.nav.desktop-menu' ) .show ();
    } başka {
      jQuery( '.nav.desktop-menu' ) .hide ();
      jQuery( '.nav.mobile-menü' ) .show ();
    }
}

// sayfa yüklendiğinde menü görüntüsünü başlangıçta ayarla
geçiş();

// tarayıcı yeniden boyutlandırmada menü görüntüsünü değiştir
jQuery( pencere ) .resize ( fonksiyon () {
    geçiş();
} );

#3 Mobil Menünün Görüntülendiğinden Emin Olun

Menünün sorunsuz bir şekilde görüntülendiğinden emin olmak için izlememiz gereken son bir adım var. Bu adım, temel olarak, menü ayarlarında ayarlandıktan sonra mobil menünün görüntülenmesiyle ilgilenir. Bu kodun mevcut temanızın header.php dosyasına eklenmesi gerekiyor. 'Ana menü' eklendikten sonra 'wp_nav_menu' işlevinin altına ekleyebilirsiniz.

 /* Aşağıdaki kod, menü ayarlarında arka uçtan bir mobil menünün ayarlanıp ayarlanmadığını kontrol eder. Bir menü ayarlanmışsa, başlıkta görüntülenecektir. Veya bir menü ayarlanmamışsa, bir mesaj görüntüleyin.*/
if ( function_exists ( 'has_nav_menu' ) && has_nav_menu( 'mobil-menü' ) ) {
    wp_nav_menu( dizi (
      'derinlik' => 6 ,
      'sort_column' => 'menu_order' ,
      'konteyner' => 'ul' ,
      'menu_id' => 'ana gezinme' ,
      'menu_class' => 'nav mobil menü' ,
      'theme_location' => 'mobil menü'
    ) );
    } başka {
       echo "<ul class='nav mobile-menu'> <font>Mobil Menü ayarlanmadı</font> </ul>" ;
}

Birincil menüye ek bir sınıf olarak bir 'masaüstü menüsü' eklediğinizden emin olun. Bu sınıf, menünün görüntüsünü değiştirmek için kullanılacaktır.

Tabii bunun biraz CSS ile de desteklenmesi gerekiyor. Aşağıdaki CSS'yi alt temanızın style.css dosyasına ekleyin.

 .mobile-menü {
    ekran : yok ;
}
@media yalnızca ekran ve ( min-width : 800 px ){
    .desktop-menüsü {
        ekran : blok !önemli ;
    }
    .mobile-menü {
        ekran : yok !önemli ;
    }
}

@media yalnızca ekran ve ( maksimum genişlik : 799 piksel ){
    .desktop-menüsü {
        ekran : yok !önemli ;
    }
    .mobile-menü {
        ekran : blok !önemli ;
    }
}

#4 Mobil Menüyü Oluşturun ve Ayarlayın

Bir mobil menü ayarı oluşturup ekranı değiştirdikten sonra bir menü oluşturup onu mobil menü olarak ayarlamamız gerekiyor.

Bunun için WordPress yönetici panelinizde yeni bir menü oluşturun.

Şimdi menü öğelerini ekleyin ve mobil menü olarak ayarlayın. Yapılan değişiklikleri kaydetmeyi unutmayın.

İşte buyur! WordPress temanıza bir mobil menü eklediniz! Çok basit değilmiydi. Benzer şekilde, farklı ekran boyutlarına göre farklı menüler ekleyebilir veya bir alt bilgi menüsü kaydedebilirsiniz. (Altbilgi menüsünün nasıl ayarlanacağını bilmiyorsanız, bu makale kesinlikle yardımcı olacaktır).

Bu makale size yardımcı olduysa veya hala bazı şüpheleriniz varsa, aşağıdaki yorum bölümünü kullanarak bana bir satır bıraktığınızdan emin olun.