آموزش تبدیل منو بوت استرپ به منو وردپرس


نویسنده : حسین شفیعیان

تاریخ : 17:41


تعداد بازتاب : 75

یکی از مواردی که طراحان در تبدیل کردن قالب بوت استرپ به وردپرس ، داینامیک کردن منو بوت استرپ است. اگر به کد های منوی بوت استرپ دقت کنید متوجه میشید که به سادگی داینامیک نخواهد شد. افزونه ی WP Bootstrap Menu نیز برای این مورد طراحی شده اما اگر بخواهیم قالبمان به افزونه خاصی وابسته نباشید در ادامه با ما همراه باشید …

 

در ابتدا فایل wp_bootstrap_navwalker.php را از لینک زیر دانلود و در فولدر قالبتان (کنار فایل style.css) قرار بدید:

دانلود فایل
لینک دانلود0.1 مگابایت

منبع فایل : https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2

 

سپس فایل functions.php قالبتان را باز کرده و کد زیر را به انتهای آن اضافه کنید:

اگر قالبتون از قبل از منو وردپرس پشتیبانی نمیکرد کد زیر را نیز به functions.php اضافه نمایید :

 

با استفاده از دستور زیر در فایل header.php امکان استفاده از منو را اضافه کنید :

مثال ساده استفاده در header.php به صورت زیره :

 


دیدگاه شما در مورد این پست :



دیدگاه های کاربران

  • امیر حسین گفت:

    دم شما گرم خیلی عالیه این آموزش 🙂

  • مبین گفت:

    یعنی من دستی از تابعش استفاده میکنم بعد استایل میدم غیر استاندارده؟

    • حسین شفیعیان گفت:

      مبین جان متوجه نمیشم منظورتون رو !!!

      • مبین گفت:

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

        • حسین شفیعیان گفت:

          نه به این صورت مشکلی نداره اما اگه برای منو خواستید زیر منو داشته باشید مشکل پیش میاد

  • danger1875 گفت:

    عالیه منتظر همین آموزش بودم راستی منم اینترنت و شبکه های گسترده میخونم

  • مبین گفت:

    ?php wp_list_pages(‘title_li=&sort_column=menu_order’); ?>

  • رایموند گفت:

    درود…من این کد امتحان کردم ولی کار نمی کنه …ولی من مشکل رو حل کردم باید یه سری کد این توابع رو حذف کنی تا کار منو کار کنه….
    اینم کد زیر اصلاح شده:

    ‘primary’,
    ‘depth’ => 2,
    ‘container’ => ‘false’,
    ‘menu_class’ => ‘nav navbar-nav’,
    ‘fallback_cb’ => ”,
    ‘walker’ => new wp_bootstrap_navwalker())
    );
    ?>
    موفق باشید…

    • حسین شفیعیان گفت:

      درود
      این کدی بود که نویسنده این اسکریپت خودش برای نمونه گذاشته بود
      در هر صورت متشکر

  • محمد گفت:

    واقعا ممنون
    خیلی فکرمو مشغول کرده بود نمی خواستم بوت استرپش کنم
    اما الان که اومدم دیدمش دارم میرم ….
    ممنونننننننن

  • میلاد گفت:

    من تو قسمت drop down مشکل پیدا کردم پس از اینکه این کارو انجام دادم.

  • عابدین گفت:

    سلام
    سایت خوب و آموزنده ای دارین
    خسته نباشید

  • حسین گفت:

    خسته نباشین اموزش هاتون فوق العادست . در بوت استرپ بیشتر فایل هام جاوا داره مثل منو ولی هر کاری میکنم تو ورد پرس بالا نمیان . بعد استایل هام چند تاست نمیدونم چجوری باید تعریفشون کنم تو وردپرس ؟؟؟؟؟

  • حسین گفت:

    در ورد پرس قالبی که طراحی کردم با بوت استرپ فایل های css و javascript بالا نمیان . قالب بدون استایل بالا میاد . فایل های جاوا اسکریپت هم که همونطوره بالا نمان . با چه کدی باید فراخوانی کنم در ورد پرس ؟؟؟؟/

  • نوید خرسند گفت:

    سلام استاد من دارم یه قالب وردپرس طراحی می کنم اما متاسفانه برای صفحات single.php مشکل پیش میاد.
    وقتی در صفحه اصلی روی یکی از پست ها کلیک می کنم صفحه سینگل باز نمیشه و فقط یه صفحه سفید نمایش داده میشه.

    • حسین شفیعیان گفت:

      کد های php رو تیکه تیکه از single.php پاک کن ببین با حذف کدوم بخش مشکل حل میشه !

      • نوید خرسند گفت:

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

        • حسین شفیعیان گفت:

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

          • نوید خرسند گفت:

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

          • حسین شفیعیان گفت:

            افزونه ها را غیر فعال و حذف کن

  • اشکان گفت:

    سلام و خسته نباشی. مهندس یکی از مشکلات بوت استرپ نیز تبدیل قالب طراحی شده کامنت ها بوت استرپی به قالب وردپرس است که به خاطر زیاد بودن کد های این بخش نیاز به یک اموزش داره که انشاله در سایت قرار بدی.
    لطفا به فایل زیر نگاهی بنداز و کدهای کامنت رو برام بزار. کد اضافی اصلا نمیخوام که وقت شما هم گرفته نشه. فقط دیدگاه رو بگیره و کشویی مثل عکس قالب بزاره.
    s6.picofile.com/file/8237117726/coment.zip.html

    • حسین شفیعیان گفت:

      اشکان عزیز من نمیرسم انجامش بدم ، بهتره تو فروم های وردپرس مطرح کنی

  • tupac گفت:

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

    • حسین شفیعیان گفت:

      ویدیو این رو هم ضبط میکنم حتما 😉
      از فونت Homa استفاده شده

  • حسن گفت:

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

  • behnam گفت:

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

  • رسول گفت:

    خیلی ممنوم از زحماتتون اقای شفیعی

  • علی بابایی گفت:

    سلام
    معذرت می خوام استاد میشه طرز ساخت فایل comments.php
    رو که به وسیله ی بوت استرپ طراحی شده باشه را آموزش دهید
    خواهش میکنم استاد
    ممنونم از زحمات شما

  • علی گفت:

    سلام.
    کارنمیکنه که 🙁

  • fighter31 گفت:

    مهندس لطفا دوره طراحی قالب وردپرس رو آموزش بدین ممنون از لطف شما

  • فریناز گفت:

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

    • ناصر گفت:

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

  • امیر گفت:

    سلام برادر.
    دوره طراحی قالب وردپرس نمیذاری؟

  • مریم گفت:

    با سلام و احترام
    من دنبال یه کد هستم واسه اینکار !
    شما کدی نمیدونید واسه این کار ؟
    یه کد جی کوئری میخوام ک وقتی روی سر منو ها کلیک شد ، زیر منو ها باز بشن و در صورت کلیک بعدی دوباره بسته بشن !
    شما کدی ندارید واسه این کار ؟

  • امیرحسین گفت:

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

  • sepehr گفت:

    سلام
    آموزش ووکامرس هم میذارین؟؟

  • amirfaramarzi گفت:

    ُلام استاد ببخشید من یه مشکل دارم نمیدونم چیجوری حل میشه من یه صفحه ورود کاربران طراحی و کد کردم ولی الان نمیدونم وقتی رویه منو رویه ورود کاربران کلیک میکنم چیجوری باید لینک بهش بدم ک بره به اون صفحه لوگینی ک کد کردم چیکار کنم؟؟

    • حسین شفیعیان گفت:

      باید از توابع وردپرس و دستوزات شرطی پی اچ پی استفاده کنید

  • فری گفت:

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

  • امید احمدی گفت:

    سلام و خسته نباشید
    برای drop down ها (زیر منو ها) رو چه کنیم ؟

  • مسعود گفت:

    سلام
    ممنون که بفکر هستید ولی منم با منوی dropdown مشکل دارم!

    • reza گفت:

      سلام دوست من ایمیل بزن راهنمایت کنم. منم مشکلات زیادی با تبدیل منو بوت استرپ به وردپرس داشتم اما با صبر و حوصله و کمک از سایت های خارجی موفق شدم هم منو بالا که شامل برگها میشه و هم منو پائین رو با کلی ور رفتن و سر کله زدن به طور کامل داینامیک کنم خوشحال میشم کمک کنم.
      shahrokhinaser@gmail.com

  • محمد گفت:

    خیلی ممنون از آموزشتون

    • reza گفت:

      سلام دوست من ایمیل بزن راهنمایت کنم. منم مشکلات زیادی با تبدیل منو بوت استرپ به وردپرس داشتم اما با صبر و حوصله و کمک از سایت های خارجی موفق شدم هم منو بالا که شامل برگها میشه و هم منو پائین رو با کلی ور رفتن و سر کله زدن به طور کامل داینامیک کنم خوشحال میشم کمک کنم.
      shahrokhinaser@gmail.com

  • هادی گفت:

    داداچ دستت درد نکنه
    ولی اسم فایل wp-bootstrap-navwalker.php اینظوریه شما تو کد هات آندرلاین زدی
    ارور میده اینطوری

    • حسین شفیعیان گفت:

      خاهش
      اجازه بدین یه ویدیو براش ضبط میکنم…

    • reza گفت:

      سلام دوست من ایمیل بزن راهنمایت کنم. منم مشکلات زیادی با تبدیل منو بوت استرپ به وردپرس داشتم اما با صبر و حوصله و کمک از سایت های خارجی موفق شدم هم منو بالا که شامل برگها میشه و هم منو پائین رو با کلی ور رفتن و سر کله زدن به طور کامل داینامیک کنم خوشحال میشم کمک کنم.
      shahrokhinaser@gmail.com

  • علی گفت:

    ممنون از این آموزش 🙂

  • محمد علی ایزدی گفت:

    سلام داداش خوبی خیلی سایتتون عالیه مخصوصا آموزش ها

    العان لینک دانلود کار نمیکنه
    خیلی گیرم ممنون میشوم سریعا درستش کنید

  • مجید گفت:

    سلام آقا شفیعیان عزیز
    من میخام تو منو اصلی، لینک صفحه جاری اکتیو بشه، به نظرتون باید چیکار کنم؟
    مرسی

  • محمد گفت:

    سلام
    لطفا این قسمت رو هم بصورت ویدئو قرار بدید
    این دوره آموزشی خیلی عالی بود
    تشکر

  • نازنین گفت:

    پروژه دانلود نمیشه و منم خیلی لازمش دارم

  • مهدی گفت:

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

  • zloverx گفت:

    سلام آقای مهندس
    من بوت استرپ را از شما یادگرفتم…واقعا ممنون
    خدا قوت…..
    چرا پیام ها من نمیاد؟؟؟؟صدتا نظر دادم.
    اما من به مشکل برخوردم برای تبدیل به وردپرس تمام مراحل را درست انجام دادم اما خطا میده در صورتی که مسیرهام درسته
    Fatal error: Class ‘WP_Bootstrap_Navwalker’ not found in C:\xampp\htdocs\wordpress\wp-content\themes\bootstrap\header.php on line 40

    چیکار کنم؟؟؟؟؟؟؟
    فقط منوهام مشکل داره.

    • حسین شفیعیان گفت:

      سلام
      به نظر میرسه فایل wp_bootstrap_navwalker.php رو لود نکرده ، یا اشتباه تایپی دارید یا آدرسی ها رو درست وارد نکردید

      • zloverx گفت:

        سلام
        من آدرس دهی ام دقیقا درسته.دقیقا عین سایت github عمل کردم حتی.
        میشه شما زحمت بکشید برا من فایل wp-bootstrap-navwalker.php را بفرستید.یا لینک را برام بدین .فک کنم مشکل از این باشه.ممنون بابت راهنمایی هاتون.

        • zloverx گفت:

          مشکل بنده برطرف شد.مچکرم بابت سایت گران بهاتون:)

          • zloverx گفت:

            ببخشیدا
            منوها من چرا نمیاد؟مینویسه add menu
            واقعا درست انجام دادم.فک میکنم بوت استرپ منو فراخوانی نمیکنه.
            ممنون میشم اگه بتونید راهنمایی کنید.

          • حسین شفیعیان گفت:

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

  • zloverx گفت:

    مشکل من برطرف شد خواستم نتیجه را اعلام کنم شاید شاید اگه کسی مشکل منو داشت تو وقت کمتری بتونه برطرف کنه.
    دوستایی که منوشون درست نمایش داده نمیشه و یا اصلا نمایش داده نمیشه باید داخل فایل functionخود ریجستری های جاوااسکریپت و جی کوئری را انجام بدهند.
    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.php را انجام دهند.

    در گام بعدی باید کدهای php مربوط به منو که داخل فایل header میباشد را دقت کنند که کلاس های به کار رفته شده فراخوانی شده باشند.
    ‘menu_class’ => ‘nav navbar-nav’,
    کلاس ها در این قسمت فراخوانی شوند.

    باتشکر از سایت آقای برنامه نویس داااات نت.