آموزش اضافه کردن منوی بوت استرپ به وردپرس

چگونه منوی بوت استرپ را به وردپرس اضافه کنم ؟

این سوالی است که شاید برای شما که قصد طراحی یک قالب وردپرسی را به وسیله ی بوت استرپ دارید پیش آمده باشد . آموزش های گوناگونی در وبسایت های مختلف موجود می باشد که به جرات می توانم بگویم ۹۰% این آموزش ها کاربردی نبوده و مشکل شما را حل نخواهد کرد . این مشکلی است که من به عنوان نویسنده ی این مطلب با آن روبرو شدم و به سختی توانستم آن را پشت سربگذارم . در اینجا سعی کرده ام تا به ساده ترین شکل این مشکل را برای شما حل کنم .

برای حل این مشکل شما باید ۶ مرحله را طی کنید که البته مرحله ی اول تکراری می باشد .

مرحله ی اول

ابتدا باید فایل های بوت استرپ را در هدر قالب خود فراخوانی کنید . برای این کار می توایند از دستورات html  استفاده کنید . به دلیل تکراری بودن این بخش از آموزش آن صرف نظر می کنیم .

مرحله ی دوم

در این مرحله باید منوی پیش فرضی را که بوت استرپ برای شما در نظر گرفته است در قسمت منوی قالب خود قرار دهید . کدهای زیر منوی پیش فرض بوت استرپ می باشد .

 

<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>

مرحله ی سوم

فایل wp_bootstrap_navwalker.php را از طریق لینک زیر دانلود کرده و در پوشه ی قالب خود در کنار فایل style.css قرار دهید .

دانلود فایل

مرحله ی چهام

در این مرحله فایل functions.php قالبتان که قبلا آن را ایجاد کرده اید را باز کرده و کد زیر را به انتهای آن اضافه کنید .

 

<?php require_once('wp_bootstrap_navwalker.php'); ?>

مرحله ی پنجم

در این مرحله شما باید منو را به قالب خود اضافه کنید . اگر بخواهیم به زبان ساده تر این موضوع را بیان کنیم باید به قالب خود بفهمانید که فهرست ها را برای شما ایجاد و اجرا کنند . برای این کار کد زیر را در فایل functions.php قالب خود قرار دهید .

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

در این کد در قسمت Primary Menu یک نام انگلیسی برای منوی خود در نظر بگیرید و در قسمت THEMENAME یک نام فارسی را می توانید برای منو خود در نظر بگیرید . توجه داشته باشید که با اضافه کردن کد بالا تنها یک منو می توانید به قالب خود اضافه کنید و با اضافه کردن کد زیر به کد بالا می توانید تعداد منو های خود را اضافه کنید .

primary' => __( 'Primary Menu', 'THEMENAME' ),

به عنوان مثال :

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

مرحله ی ششم

کد زیر را به جای کل قسمت ul منوی خود قرار دهید .

<?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())
 );
?>

حال شما می توانید یک منو به قالب وردپرسی خودا اضافه کنید .

برای این کار به قسمت نمایش > فهرست ها رفته و منوی جدید را ایجاد و برای قالب خود انتخاب کنید .

اگر این مطلب برای شما کاربردی بود امتیاز دادن و معرفی به دوستان خود را فراموش نکنید .