WP Bootstrap NavWalker ile Temanıza Açılır Responsive Menü Eklemek

YouTube'ta Takip Et →

Ziyaretçilerin sayfanızda gezinmesini en çok kolaylaştıran bölüm şüphesiz ki navigasyon alanı. WordPress’te kendi temanızı yapıyorsanız, WordPress’in içindeki menü sistemi olan wp_nav_menu fonksiyonu, Bootstrap ile uyumlu değil. Varsayılan olarak alt menüleri desteklememesi veya responsive yapısı olmadığı için mobil cihazlarda sorun çıkarması nedeniyle özellikle Bootstrap kullanan web siteleri için geliştirilmiş olan WP Bootstrap NavWalker menüsünün nasıl kullanıldığını anlatıyorum. WP Bootstrap Navwalker, Bootstrap ile yüzde yüz uyumlu ve sitenize kolaylıkla entegre edilebiliyor.

WordPress temasına mobil uyumlu / responsive menü kurmak için öncelikle WP Bootstrap Navwalker’ın adresine girin. class-wp-bootstrap-navwalker.php isimli dosyayı, temanızın olduğu klasöre tüm içeriğiyle birlikte aynı isimle kaydedin, ardından functions.php dosyanızı açarak aşağıdaki kodları ekleyin.

add_action( 'after_setup_theme', 'register_navwalker' );
function register_navwalker(){
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

Sonra header.php’ye gidip menünüzün olmasını istediğiniz alana aşağıdaki kodları yapıştırın. Bu kodlar üzerinde düzenleme yapabilirsiniz. theme_location parametresini önceden ayarladığınız menü id’siyle değiştirmeniz gerekiyor.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
    <div class="container">
  
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
  
      <a class="navbar-brand" href="https://www.sanagrafi.com">Sanagrafi</a>
  
          <?php
          wp_nav_menu( array(
              'theme_location'    => 'top_menu',
              'depth'             => 2,
              'container'         => 'div',
              'container_class'   => 'collapse navbar-collapse',
              'container_id'      => 'bs-example-navbar-collapse-1',
              'menu_class'        => 'nav navbar-nav',
              'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
              'walker'            => new WP_Bootstrap_Navwalker(),
          ) );
          ?>
  
      </div>
  </nav>

Navwalker, menü sisteminin çalışması için gereken jQuery ve Bootstrap dosyalarını içermiyor. Dolayısıyla onları temanıza siz dahil etmelisiniz. CDNJS adresinden dosya yollarını ya da jQuery’nin ve Bootstrap’in kendi dosyalarını sunucunuza koymak üzere indirebilir ve temanıza dahil ederek dinamik açılır responsive menü özelliği olan WP Bootstrap Navwalker‘ın çalışmasını sağlayabilirsiniz.