WordPress ใช้เมนูของ Bootstrap ด้วย WP Bootstrap Navwalker
8 ก.ย. 2017 , 6,645 Views , หมวดหมู่ WebDesign WordPress โค๊ดดิ้ง , ป้ายกำกับ:Bootstrap, wordpress, wordpress theme
ปกติเมนูของ WordPress จะมี css class เฉพาะของ WordPress หากเราต้องการที่จะนำเมนูจาก Bootstrap (https://getbootstrap.com/docs/4.0/components/navs/) มาใช้อาจจะต้องใช้ WP Bootstrap Navwalker เพื่อทำการแปลง Class ให้ใช้กับเมนูของ Bootstrap ได้
วิธีการใช้งาน
ดาวน์โหลดไฟล์ wp-bootstrap-navwalker.php จาก https://github.com/wp-bootstrap/wp-bootstrap-navwalker ลงมาใว้ในโฟลเดอร์ของ Theme ที่ใช้
ในไฟล์ /wp-content/your-theme/functions.php ให้เพิ่มโค๊ดดังนี้
|
1 2 |
// Register Custom Navigation Walker require_once get_template_directory() . 'wp-bootstrap-navwalker.php'; |
หาก Error อาจจะใช้โค๊ดด้านล่างนี้
|
1 2 |
// Register Custom Navigation Walker require_once 'wp-bootstrap-navwalker.php'; |
declare your new menu in your functions.php file.
|
1 2 3 |
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'THEMENAME' ), ) ); |
ในไฟล์ header.php ให้เพิ่มโค๊ดเพื่อแสดงเมนูของ Bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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> |
ดาวน์โหลดและดูเพิ่มเติม
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
สำหรับ Bootstrap 4 ดาวน์โหลดและดูเพิ่มเติม
https://github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v4
ป้ายกำกับ:Bootstrap, wordpress, wordpress theme
