Bab 8 - Membuat Menu Theme Wordpress

Membuat menu theme wordpress Bagus, Elegant, Baik dan Responsive

Pada kesempatan kali ini saya ingin meneruskan Tampilan Theme kita dengan menambahkan Menu dibawah header, Logo dan kontak sudah kami bahas di Tutorial Bab 4 Membuat Logo dan Kontak.

Bab 1 - Membuat Style.css untuk Theme Wordpress

Bab 2 - Membangun Tampilan Theme

Bab 3 - Membangun Header Theme

Bab 4 - Membuat Logo dan Kontak

Bab 5 - Membuat functions Theme Wordpress

Bab 6 - Membangun Header dengan Functions wordpress

Bab 7 - Menyempurnakan Header, Callback Style dan Javascript di functions.php

dalam membuat menu yang bagus dan baik serta Responsive Mobile, Anda harus menggabungkan antara Kode Html, CSS dan PHP. jadi sebelum anda memulai tutorial ini silahkan anda buka terlebih dahulu file2 yang dibutuhkan untuk membuat menu. dengan EDITOR TEXT masing2 sesuai dengan kesenangan kalian masing2

File2 yang diperlukan, diantaranya:

1. header.php
2. style.css
3. functions.php

jika sudah selesai di buka mari kita langsung membahas tutorial kita saat ini.

silahkan anda Copy kode dibawah ini, dan Pastekan di file header.php setelah kode yang kemaren terakhir kita tambahkan, Silahkan !

<div class="container">
 <div class="row">
  <nav id="cssmenu">
   <div id="head-mobile">MENU</div>
   <div class="button"></div>
   <?php wp_nav_menu( 
    array( 
    'theme_location'  => 'main-menu',
       'container'       => FALSE,
       'echo'       => TRUE,
       //'walker'          => new CB_Walker_Nav_Menu,
    )
   ); ?>
  <nav>
 </div>
</div>

Setelah selesai menambahkan kode diatas silahkan di Save / di Simpan, kita lanjutkan pindah ke file Style.css dan silahkan Copy dan Pastekan di File style.css. Berikut Kodenya :

nav{position:relative;margin:0 auto;}
#cssmenu ul{margin-bottom:0px;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{z-index:9988; border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{
    font-family:sans-serif;
    background: #DBDBDB; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#DBDBDB, #FFFFFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#DBDBDB, #FFFFFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#DBDBDB, #FFFFFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#DBDBDB, #FFFFFF); /* Standard syntax */
    border-bottom: 1px solid #ececec;
}
#cssmenu > ul > li{float:left; border-left: 1px solid #ececec;}
#cssmenu > ul > li > a{padding:15px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#333;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#007EFF}
#cssmenu > ul > li.has-sub:hover > a:after,#cssmenu > ul > li.has-sub:hover > a:before{background:#007EFF}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{color:transparent !important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:21px;right:11px;width:8px;height:2px;display:block;background:#333;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:18px;right:14px;display:block;width:2px;height:8px;background:#333;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#efefef;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#333;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#007EFF}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#333;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#333;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:transparent;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
@media screen and (max-width:768px){
 nav{width:100%;}
 #cssmenu{width:100%}
 #cssmenu ul{width:100%;display:none}
 #cssmenu ul li{width:100%;border-top:1px solid #ccc; border-left: 0px;}
 #cssmenu ul li:hover{background:transparent;}
 #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
 #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
 #cssmenu > ul > li{float:none}
 #cssmenu ul ul li a{padding-left:25px}
 #cssmenu ul ul li{background:#fff !important;}
 #cssmenu ul ul li:hover{background:transparent!important}
 #cssmenu ul ul ul li a{padding-left:35px}
 #cssmenu ul ul li a{color:#333;background:none}
 #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#007EFF}
 #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
 #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
 #cssmenu #head-mobile{display:block;padding:15px;color:#333;font-size:12px;font-weight:700}
 .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
 .button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #007EFF;border-bottom:2px solid #007EFF;content:''}
 .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#007EFF;content:''}
 .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#007EFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
 .button.menu-opened:before{top:23px;background:#007EFF;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
 #cssmenu .submenu-button{position:absolute;z-index:9998;right:0;top:0;display:block;border-left:1px solid #ccc;height:43px;width:45px;cursor:pointer}
 #cssmenu .submenu-button.submenu-opened{background:#262626}
 #cssmenu ul ul .submenu-button{height:34px;width:34px}
 #cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#333;content:''}
 #cssmenu ul ul .submenu-button:after{top:15px;right:13px}
 #cssmenu .submenu-button.submenu-opened:after{background:#fff}
 #cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#333;content:''}
 #cssmenu ul ul .submenu-button:before{top:12px;right:16px}
 #cssmenu .submenu-button.submenu-opened:before{display:none}
 #cssmenu ul ul ul li.active a{border-left:none}
 #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}

Jika sudah selesai menambahkan Kode di style.css silahkan anda buka file untuk yang ke tiga, yakni file Functions.php sebelum anda mengcopy kode dibawah ini, silahkan anda cek lagi. KODE-KODE yang adan dalam file functions.php

Karena seingat saya saya sudah memberikan kode ini di tutorial sebelumnya, Namun jika belum ada silahkan Anda Copy dan Pastekan di file functions.php dan Save/Simpan

register_nav_menus(         
array(
'main-menu' => __('Main Menu', 'wp-company'),
//'sidebar-menu' => __('Sidebar Menu', 'wp-company')
)
);

Jika sudah selesai silahkan anda Preview theme anda.. dan Load website anda.. TARA... sudah muncul menunya kan,,, jika belum muncul silahkan anda setting menu di Dhasboard -> Tampilan (Appearance) -> Menu

Jika sudah selesai membuat menu pasti tampil, dan silahkan pilih lokasi menu di primary .

jika peletakan kode benar dan mengikuti tutorial didalam website ini maka tidak akan ada yang error, silahkan anda Praktekkan dan Kembangkan.

GOOD LUCK