تبدیل منو بوت استرپ به منو وردپرس

convert-menu-to-the-menu-bootstrap-wordpress

یکی از مواردی که طراحان در تبدیل کردن قالب بوت استرپ به وردپرس ، داینامیک کردن منو بوت استرپ است. اگر به کد های منوی بوت استرپ دقت کنید متوجه میشید که به سادگی داینامیک نخواهد شد. افزونه ی WP Bootstrap Menu نیز برای این مورد طراحی شده اما اگر بخواهیم قالبمان به افزونه خاصی وابسته نباشید در ادامه با ما همراه باشید …

در ابتدا فایل wp_bootstrap_navwalker.php را از لینک زیر دانلود و در فولدر قالبتان (کنار فایل style.css) قرار بدید:

دانلود فایل

سپس فایل functions.php قالبتان را باز کرده و کد زیر را به انتهای آن اضافه کنید:

require_once('wp_bootstrap_navwalker.php');

اگر قالبتون از قبل از منو وردپرس پشتیبانی نمیکرد کد زیر را نیز به functions.php اضافه نمایید :

register_nav_menus( array( 'primary' = __( 'Primary Menu', 'THEMENAME' ), ) );

با استفاده از دستور زیر در فایل header.php امکان استفاده از منو را اضافه کنید :

?php wp_nav_menu( array( 'menu' = 'primary', 'theme_location'   = 'primary', 'depth'            = 2, 'container'        = 'div', 'container_class'  = 'collapse navbar-collapse navbar-ex1-collapse', 'menu_class'       = 'nav navbar-nav', 'fallback_cb'      = 'wp_bootstrap_navwalker::fallback', 'walker'           = new wp_bootstrap_navwalker())  ); ?

مثال ساده استفاده در header.php به صورت زیره :

nav class="navbar navbar-default navbar-fixed-top" role="navigation"  !-- Brand and toggle get grouped for better mobile display -- div class="container" 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="?php bloginfo('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 navbar-ex1-collapse',     'menu_class'            = 'nav navbar-nav',     'fallback_cb'      = 'wp_bootstrap_navwalker::fallback',     'walker'                        = new wp_bootstrap_navwalker())     );    ?   /div /nav