به کانال تلگرام ما بپیوندید
@Codenvis

کدنویس|قالب وردپرس|افزونه وردپرس
منو بوت استرپ در وردپرس

استفاده از منو بوت استرپ در وردپرس

باز هم سلام خدمت طراحان و کدنویسان سایت تخصصی کدنویس ، در این مطلب میخوام کدی رو براتون قرار بدم که به کمک اون بتونید از منو بوت استرپ در وردپرس استفاده کنید.

خیلی از طراحان و کدنویسان کار با بوت استرپ رو کاملا بلدن و میتونند با استفاده از این فریم ورک یک قالب کامل طراحی کنند اما موقع تبدیل قالب به وردپرس دچار مشکل عجیبی میشوند!

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

همانطور که میدانید کد قرار دادن منو به صورت عادی در وردپرس به شکل زیر هستش

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

اگر طراح قالب وردپرس باشید میدانید که وقتی شما تابع فهرست رو در قالب باید به جای ul و li قرار بدهید تا وقتی فهرستی در پنل مدیریت سایتتون ساختید به صورت خودکار در قالب نمایش داده بشود.

وقتی شما تابع فهرست رو قرار میدهید وردپرس به صورت خودکار ul و li پیش فرض خودش رو در قالب شما قرار میده به صورت زیر

<ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li>
</ul>

همان طور که میدانید ul و li در بوت استرپ دارای class های خاص خودشون هستش و با پاک شدن این class ها قالب شما به هم ریخته میشود! حالا میخوام راه حلی رو بهتون نشون بدم تا به کمک اون بتونید منو بوت استرپ در وردپرس اجرا کنید و از طریق پنل تنظیمات فهرستتون رو تنظیم کنید!

کد منو بوت استرپ در وردپرس

۱- از کد استاندارد منو بوت استرپ استفاده کنید

کدی که در پایین قرار داره کد استاندارد یک منو بوت استرپ هستش دقت کنید که کد شما باید استاندارد و مشابه همین کد باشه

<nav class="navbar navbar-default" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
  <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="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>
</nav>

۲- قرار دادن کدهای ضروری در قالب وردپرس

۲-۱- دو قسمت کدهای زیر را در فایل functions.php قالب خودتون کپی و جایگذاری کنید.

/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {  
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;

function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

۲-۲- بعد از جایگذاری کدهای بالا فایل wp-bootstrap-navwalker رو از لینک زیر دانلود کنید و در قالب در جایی که index.php قرار داره جایگذاری کنید

دانلود wp bootstrap navwalker

رمز فایل : codenvis.ir

۲-۳- بعد از دانلود فایل و قرار دادن اون در فایل قالبتون حالا نوبت فراخوانیش هست ، برگردید ببه فایل Functions.php و کد زیر رو در اون جایگذاری کنید

<?php // Register custom navigation walker
    require_once('wp_bootstrap_navwalker.php');
?>

۳- به قسمت فهرست‌ها بروید و یک  فهرست جدید با هر نامی که میخواهید بسازید ، سپس به قسمت مدیریت جایگاه‌ها بروید و منویی که ساختید رو بر روی فهرست اصلی بگذارید و پس از آن ذخیره کنید.

۴- حالا وقت قرار دادن کد منو بوت استرپ در وردپرس هستش!

در کد استاندارد منو بوت استرپ کد زیر را پیدا کنید

<a class="navbar-brand" href="#">Brand</a>

و به جای آن کد زیر رو قرار بدهید

<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>

و در ادامه کد زیر را پیدا کرده و پاک کنید

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
</ul>

و به جای آن کد زیر که قرار دادیم رو جای گذاری و سپس ذخیره کنید

<?php /* Primary navigation */
wp_nav_menu( array(
  'menu' => 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())
);
?>

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

امیدوارم که این مطلب آموزش و کد کاربردی ما به کارتون اومده باشه و از اون در طراحی‌هاتون استفاده کنید ، همراها عزیز اگر این مطلب برای شما مفید بود لطفا اون رو در شبکه‌های اجتماعیتون انتشار دهید یا در کانال تلگرامی ما عضو شده و مطالب ما رو برای دوستانتان فوروارد کنید! یا آرزوی موفقیت برای شما کاربران عزیز کدنویس

یا علی ♥

حسین

حسین هستم مدیر و مؤسس سایت کدنویس ، دانشجوی رشته نرم افزار ، مسلط به Html،Css،Jquery،Php،Bootstrap،Wordpress و ...
امیدوارم بتونم کمکی به وبمستران بی‌شمار و عزیز ایرانی بکنم ♥

نظر بدهید

ما را دنبال کنید

لطفا کدنویس را در شبکه های اجتماعی دنبال کنید تا از مطالب ویژه برخوردار بشید!!!

لطفا ما را در گوگل محبوب کنید ♥