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

آموزش وردپرس اکتبر 2015 25

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

  • اشکان گفت:

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

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

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

  • tupac گفت:

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

  • حسن گفت:

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

  • behnam گفت:

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

  • رسول گفت:

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

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

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

  • علی گفت:

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

  • fighter31 گفت:

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

  • فریناز گفت:

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

    • ناصر گفت:

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

  • امیر گفت:

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

  • مریم گفت:

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

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

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

  • sepehr گفت:

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

  • amirfaramarzi گفت:

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

  • فری گفت:

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

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

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

  • مسعود گفت:

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

    • reza گفت:

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

  • محمد گفت:

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