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

یکی از مواردی که طراحان در تبدیل کردن قالب بوت استرپ به وردپرس ، داینامیک کردن منو بوت استرپ است. اگر به کد های منوی بوت استرپ دقت کنید متوجه میشید که به سادگی داینامیک نخواهد شد. افزونه ی 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>