Membuat menu responsif kombinasi wordpress bootstrap nav walker

30 July 2016 4911

Dalam mendesign menu untuk wordpress menggunakan bootstrap, Anda cukup menambahkan wp-bootstrap-navwalker untuk auto generate menu. File yang dibutuhkan kali ini anda cukup mendownload wp-bootstrap-navwalker disini.

wp bootstrap navwalker

Langkah selanjutnya sisipkan code dibawah pada functions.php

require_once(‘wp_bootstrap_navwalker.php’);

Code untuk membuat menu pada template anda, biasanya ditempatkan di header.php

<?php
wp_nav_menu( array(
‘menu’ => ‘primary’,
‘theme_location’ => ‘primary’,
‘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())
);
?>

untuk code lenkapnya anda dapet gunakan code dibawah ini

<nav class=”navbar navbar-default” role=”navigation”>
<div class=”container-fluid”>
<!– Brand and toggle get grouped for better mobile display –>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″>
<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=”<?php echo home_url(); ?>”>
<?php bloginfo(‘name’); ?>
</a>
</div>

<?php
wp_nav_menu( array(
‘menu’ => ‘primary’,
‘theme_location’ => ‘primary’,
‘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>

Menu diatas untuk generate 2 level menu, jika anda ingin membuat lebih dari 3 menu ada beberapa tambahan code untuk ditempatkan di style.css dan perubahan ‘depth’ => 2, <- sesuaikan level menu yang anda inginkan.

Code tambahan untuk 3 level menu atau lebih di style.css

.dropdown-menu{
font-size:16px;
font-family:’YanoneKaffeesatz’;
color:#fff;
}
.dropdown-submenu > .dropdown-menu{
top:-1px;
left:100%;
}
.dropdown-submenu > .dropdown-menu:hover{
background:#fff;
border:1px solid rgba(18,185,255,0.5);
}
.dropdown-submenu:active > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:active > .dropdown-menu .dropdown-submenu:active > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{
background:#fff;
color:#333;
}
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover{
background:rgba(18,185,255,0.5);
color:#fff;
}
.dropdown-submenu > a:after{
display:block;content:” “;
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:active > a:after{
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
background:#fff;
}
ul.dropdown-menu{
border-radius:0;
}
ul.dropdown-menu li > .dropdown-menu{
top:-8px;
left:100%;
}
ul.dropdown-menu li:hover > ul.dropdown-menu, ul.dropdown-menu li:focus > ul.dropdown-menu{
display: block
}

Untuk perubahan warna ataupun lokasi anda tinggal memberikan sentuhan edit sendiri sesuai dengan keinginan anda.

Kata kunci untuk Artikel ini :

  • content
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1828 Tap11xSj5-u4liosN5muzzq03XQtxEOK2c9vqq2IDKgSh3_h0Oce3KIpiZubUwnN 915e8a77258bd3c02b453933aae219f4425237e6&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1828 8F10260WNIrvBDApTh54eP3wQdw6lhWJvzQcZJebgj6Xv3VFT0Oh_t6DmLqGiRzn 444f271e677f8d9e678563d8aedb092fe4e20ef0&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1827 lWSNlyk8L7HTCNqnpNEWlHUyDJICadez8F1mpbrh1Lu5PoWkxOvTImhHjlaS4FDu bc03598d20c94e34fbbd9e9cde4860dc26f166c6&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1826 CdAeS6VMeIZaPXA_rqiYhMlTZCqWwlkFQ6LLyjRmeUdVfkPSlBtpuN9FWTOigVBc 17501be6e7d3d66f42e12b85279cff37031f25b9&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1825 I43zOy-H4DfgbdGE4wcShYYKWkYAEsj64rS1-FyIPpiJBfOnITuUc4BozT0PH-P3 05de8550eb3e2fba36cdad3c64e1069a6fdc6022&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1824 nqMbdzxe7gnz-HpFsi16lMH6Y1TRlnd7yEA_ZGUG2Eb_Mf-WRyB3OcxbnQC7vq09 52b2ad46bb46e5e67d237de7241992cb8449e616&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1824 iTbyJL1oFLFkJwK2Lo-Itrw17tjnG6wf_B3pHxsbKnUUvV6tsZhiyf9AvgJfi4OZ ebf9783dccd4b4938b0aff66340252daef6843c7&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1823 0M_Yk_0tkbmjZOJIvXNmdpK814c1lpjATqk3btXc2tsjcK3pxW1_pSIEHCamSPVN 1e9022d73a30279ecb2484a42c956c9343f37cc6&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1822 1pjjBoKPfpI5iNI5cPPl51KnbdkE7BXCXDXPYJltQLP72U2PsF_pp7ejJ-ttNnyk fe1f52df3a1404734a741a304920f1e7b10331d9&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1821 h5Ou0UP-Lf10_gjPXdz46top1heRkFFv0zxUa1wmt3H0kiyIqGIkkoJYINE4rY6q a3264be6c04ab40deefd8ea28838303f0458c0b9&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1829 57aF3N-V5zfW4-wZW79k-FfENbB5Vz0xeOZdhtGieS-B4W0-uRyeBy51IpGAdhCp dbbd16c4dafa3a0c04b0cb6e5b6bf08799e492ff&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

Artikel Terkait

Cara mudah membuat theme wordpress responsif dengan bootstrap part 1

Tidak butuh banyak waktu untuk membuat theme wordpress menggunakan bootstrap, hal ini dikarenakan kita menggunakan resource kerangka template yang sudah ada, kita hanya mengatur posisi dan tampilan

Cara mudah untuk membuat custom term dalam wordpress

Dalam wordpress term yang tersedia default adalah category dan tags, langsung saja cara membuat term taxonomy pada wordpress. Langkah pertama adalah masuk pada bagian functions.php, contoh term kali
Bootstrap, Tips dan Trik, Tutorial, Wordpress , ,
Belum ada komentar. Anda bisa menjadi yang pertama untuk berkomentar!

Tinggalkan komentar

*
*
-

error: Content is protected !!