Bootstrap to WordPress: Responsive Menu

Bootstrap to WordPress:  Responsive Menu
55

Geçtiğimiz günlerde başladığım bootstrap to wordpress yazılarımda bugün bootstrap altyapısıyla hazırlanmış bir responsive menü yani her ekrana duyarlı  menu yer almakta..

Artık bu yazımda bootstrap’dan bahsetmek istemiyorum o yüzden hızlıca makaleme başlıyorum.

+ WordPress Bootstrap Menü Oluşturalım

Yapmanız gereken ilk şey bir wordpress menüsü oluşturmaktır. İlk olarak bunun üzerinde duracağız eğer zaten hali hazırda bir menü oluşturduysanız bu bölümü geçebilirsiniz.

1- Functions.php dosyası içerisine ekleyeceğimiz register_nav_menus(); fonksiyonuyla  wordpress menüsü oluşturalım.

function mytheme_setup() {

register_nav_menus(
array(
'footer_nav' => __( 'Footer Menu', 'bootpress' ),
'top_menu' => __( 'Top Menu', 'bootpress' )
)
);

}
add_action( 'after_setup_theme', 'mytheme_setup' );

Bu kod ile footer ve top menü adında 2 ayrı menü oluşturduk. Bu makalemizde bize lazım olarak top menu olacak.

Navwalker yardımıyla bootstrap menüsünü WordPress’de kullanalım

2- Aşağıdan navwalker dosyasını indirelim.

[indir]Download[/indir]

3- İndirdikten sonra tema içerisine wp-bootstrap-navwalker.php dosyasını atın.

4- Sıra geldi wp-bootstrap-navwalker.php dosyasını çağırmaya onun için de functions.php dosyasının içerisine aşağıda ki kodu eklememiz gerekmekte.

// Bootstrap to WordPress / Navbar Walker 
require_once('wp_bootstrap_navwalker.php');

5- Şimdi wp_nav_menu() fonksiyonunu menu’nun gözükmesini istediğimiz yere çağırmaya geldi sıra.


<?php
wp_nav_menu( array(
'theme_location' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>

Bootstrap için uygun kod şekli aşağıda ki gibidir.

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    <a class="navbar-brand" href="#">SITE TITLE</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <?php
        wp_nav_menu( array(
            'theme_location' => 'top_menu',
            'depth' => 2,
            'container' => false,
            'menu_class' => 'nav navbar-nav',
            'fallback_cb' => 'wp_page_menu',
            //Process nav menu using our custom nav walker
            'walker' => new wp_bootstrap_navwalker())
        );
        ?>
    </div><!-- /.navbar-collapse --> 
</nav>

Makalemiz tamamlanmıştır, sorularınız için yorum atabilirsiniz.
Bir önce ki Bootstrap to WordPress makaleme göz atmak istermiydiniz?
Bootstrap Slider’ın WordPress Kullanımı

Yorum Yap

Yapına Yorumlar (3)

  1. Merhaba, mobil/tablet versiyonda menüye tıkladığımda açılmıyor.JS linkleri falan hepsini kontrol ettim.