ساخت منوی وردپرسی با بوت استرپ

سلام دوستای عزیز وردپرسی؛

همیشه طرح و شمایل قالب دارای اهمیت زیادیه و به نظرم اولین گام و مهم ترین گام به حساب میاد! برای همینه که همیشه دوست داریم بهترین ها رو به کار ببریم تا طرحی منحصر به فرد داشته باشیم.
ساخت منو یا همون فهرست های وردپرسی یکی از بخش های اصلی برای هر سایتی هستش. بعضی قالب ها خودشون منوهای زیبا و جذابی دارند و برخی افزونه ها هم هستند که به شما امکان ایجاد منوها رو میدن! اما نمیدونم تا چه حد درباره ی بوت استرپ و عملکردش شنیدید، اگه جز کاربرانی هستید که همیشه جستجوهایی در وب و دنیای سایت ها دارید حتما با بوت استرپ آشنایی دارید.
بوت استرپ طراحی بسیار ساده اما واقعا جذاب و قشنگی رو داره که آدم رو جذب میکنه! امروز میخوام درباره ی ایجاد منوها یا همون فهرست هامون به شیوه ی بوت استرپ صحبت کنم.پس اگه موافقید ۳ دقیقه وقت بذارید تا پا به دنیای طرح های شیک بگذاریم.

افزونه WP Bootstrap Menu

ax3

افزونه ای که داریم در موردش صحبت می کنیم منوهای وردپرسی رو به منوهای بوت استرپ تبدیل میکنه.پس دیگه بدون هیچ حرفی میرم سراغ راهنمای کار با این افزونه ی جذاب!

راهنمای نصب افزونه

۱- افزونه را دانلود کرده و در مسیر افزونه ها (wp-content/plugins/wp-bootstrap-navmenu/directory) نصب نمایید.
۲- حالا افزونه رو از پنل وردپرسی از بخش افزونه ها فعال کنید.
۳- برای نمایش منوهای بوت استرپی، قطعه کد زیر رو در هر جایی از قالب که میخواید قرار بدید:

<?php echo getNavMenu( MENU NAME ); ?>

۴- برای تغییر تنظیمات منوها، میتونید منو را از تابع اصلی فراخوانی کنید. به عنوان مثال:

<div class="navbar">
        <div class="navbar-inner">  
            <div class="container">
                <ul class="nav">
                    <?php if (function_exists('getNavMenu')): ?>
                        <?php echo getNavMenu('mainmenu'); ?>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </div>

یا

<div class="navbar">
        <div class="navbar-inner">  
            <div class="container">
                <ul class="nav">
                    <?php if (function_exists('getNavMenu')): ?>
                        <?php echo getNavMenu('mainmenu','hover'); ?>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </div>

که دارای دو نوع تنظیمات است که با عنوان های “hover” و “click” خوانده میشود.

  آموزش کامل نصب آسان در وردپرس با duplicator

screenshot-1

screenshot-2

screenshot-3

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

روزهایتان زیبا

 

دانلود

صفحه افزونه

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

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 7 سال عضو همیار وردپرس

    سلام خسته نباشید
    من برای ادغام منوی وردپرس با بوت استرپ، از فایل wp_bootstrap_navwalker.php استفاده کردم.
    فقط به یه مشکل برخوردم.
    چون از کلاس title بوت استرپ استفاده کردم، نمیدونم توی کد زیر، خصوصیات data-placement=’,eft’ و data-toggle=’tooltip’ رو توی کدوم قسمت کد باید بذارم.
    wp_nav_menu(array(
    ‘menu’=>’menu1’,
    ‘theme_location’=>’menu1’,
    ‘depth’=>2,
    ‘container’=>’section’,
    ‘container_class’=>”,
    ‘container_id’=>”,
    ‘menu_class’=>’nav navbar-nav animate’,
    ‘fallback_cb’=>’wp_bootstrap_navwalker:fallback’,
    ‘walker’=>new wp_bootstrap_navwalker())
    );
    ممنون میشم اگه راهنمایی بفرمایید

  2. 7 سال عضو همیار وردپرس

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

    • 10 سال عضو همیار وردپرس

      با سلام و احترام
      منظورتون از یک سایت دیگه، شرکتی هستش که هاست خریداری کردید؟
      شما زمانی که هاستی میخرید مشخصاتی برای شما جهت اتصال به اون ارسال میشه. که میتونید با کمک اون سایت خودتون رو ایجاد کنید. پیشنهاد میکنم سری آموزش های وردپرس رو از اول مشاهده کنید:
      آموزش وردپرس

  3. 8 سال عضو همیار وردپرس

    سلام
    من همه پلاگین رو نصب کردم
    ولی هر کدوم از کد ها رو در قالبم قرار میدم برای لاین 24 فایل wp-bootstrap-navmenu.php خطا میده!

  4. 9 سال عضو همیار وردپرس

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

    • 10 سال عضو همیار وردپرس

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

  5. 9 سال عضو همیار وردپرس

    سلام من میخوام دسته بندی سایتم مثل این سایت بشه. جوری که زیر دسته ها و مادر دسته ها مشخص باشه
    http://1sjcollection.ir/

    قالب هامون یکسانه اما من نمیتونم زیر دسته ها رو جدا کنم و همه زیره هم قرار میگیره
    ممکنه کمکم کنین؟
    این سایت خودم : http://www.wonkyu1013.com/

    هیچی هم از کد نویسی و بقیه چیزا بلد نیستم
    ممنون میشم اگه یجوری که بفهمم کمکم کنین 🙁

  6. میشه لطفا بیشتر درباره ی چند ستونه کردن این منو توضیح بدین؟

  7. سلام آیا می توان زیر منو ها را چند ستونه کرد؟ مثل سایت خودتان؟

    • 10 سال عضو همیار وردپرس

      سلام
      به فراخور منوها میشه اینکار رو انجام داد ، فقط داخل حلقه های منو اضافه کنید

  8. سلامبسیار آموزش مفیدی بود ممنون ازتونبه امید آموزشهای بیشتر 😉

  9. سلام ، میشه دسته بندی ها رو باهاش نشون داد ، اگه مشیه چطوری باید کاری کرد که زیر مجموعه های هر دسته خود کار برن زیر شاخشون 🙂

    • 10 سال عضو همیار وردپرس

      سلام
      دسته بندی یعنی چی ؟

  10. ممنون از مطلب خوبتون. یه سوال داشتم چجوری میتونم منوی قالب خودم رو حذف کنم این منو رو جایگزین کنم ؟از پوسته انفولد استفاده میکنم

    • 10 سال عضو همیار وردپرس

      سلام
      دوست عزیز برای اینکار باید در جدول مربوط به منوهای قالب دست ببرید و اونها رو حذف کنید تا بتونید این منوها رو با فهرست ها joint کنید