جهت ورود به تالار گفتمان سایت کلیک کنید


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

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

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

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

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

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

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

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 و … میباشد , میتوانید کلاس های دیگری از بوت استرپ را وارد نمایید . ( ترجیحا اگر با بوت استرپ نا آشنا هستید , تغییری ایجاد ندهید ) .

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

5 پاسخ به “آموزش ادغام Navbar بوت استرپ با وردپرس”

  1. یاهو گفت:

    آقای مجیدی
    سلام
    خسته نباشید
    میشه لطف بفرمایید برای بوت استرپ 4 هم فایلش رو بذارید؟
    ممنون میشم

  2. شمشون آخر گفت:

    سلام وقتتون بخیر باشه این کد برای من توی لوکال هاست کار میکنه ولی توی سرور کار نمی کنه میشه بپرسم آیا شما دلیلشو می دونید یا نه ؟
    با تشکر

  3. یاهو گفت:

    استاد مجیدی عزیز
    سلام
    خسته نباشید
    یه سوال داشتم
    چطور میشه tooltip بوت استرپ رو با این بخش ادغام کرد؟

    • وحید مجیدی صدر گفت:

      tooltip نیازی به ادغام ندارد , فقط کافیه js و css را در وب سایت خود قرار دهید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *