آموزش ادغام Navbar بوت استرپ با وردپرس

طی درخواست های زیاد برای آموزش ادغام Navbar بوت استرپت با وردپرس , در این پست قصد آموزش این کار را به زبان ساده دارم …

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

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

در ادامه به آموزش ادغام و هماهنگی این دو میپردازیم …

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

1 – در ابتدا فایل wp-bootstrap-navwalker-master را دانلود نمایید و فایل درون آن که با همین نام و با پسوند php میباشد را در پوشه ی پوسته ی خود آپلود نمایید . ( در کنار فایل هایی نظیر header.php , functions.php و … )

2 – کد های زیر را در فایل functions.php پوسته ی خود قرار دهید :

function register_my_menu() {
  register_nav_menu('Vahid-Majidi-Nav',__( 'Vahid-Majidi-Nav' ));
}
add_action( 'init', 'register_my_menu' );
require_once('wp_bootstrap_navwalker.php');

3 – آخرین مرحله قرار دادن کد زیر در جایی که میخواهید Navbar نمایش داده شود . ( اکثر این مکان را در فایل header.php پوسته قرار میدهند )

<nav class="navbar navbar-default" role="navigation">
  <main class="container">
    <section 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>
    </section>
        <?php
            wp_nav_menu( array(
                'menu'              => 'Vahid-Majidi-Nav',
                'theme_location'    => 'Vahid-Majidi-Nav',
                '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())
            );
        ?>
    </main>
</nav>

نکته بسیار مهم : در کد بالا که شامل کلاس هایی نظیر navbar-default , navbar-nav و … میباشد , میتوانید کلاس های دیگری از بوت استرپ را وارد نمایید . ( ترجیحا اگر با بوت استرپ نا آشنا هستید , تغییری ایجاد ندهید ) .

پخش اختصاصی

آموزش : وحید مجیدی