چگونه منوی ناوبری bootstrap را با پوسته وردپرس ادغام کنیم

چگونه منوی ناوبری bootstrap را با پوسته وردپرس ادغام کنیم

آیا تا حالا به سرعت بخشدین به روند توسعه قالب وردپرس فکر کرده اید؟ من فرض می کنم که جواب شما “بله” می باشد و شما در حال حاظر با بوت ستراپ آشنایی دارید و از نمونه های بوت استراپ برای توسعه استفاده کرده اید. این سوال به وجود می آید که “چگونه می توان اجزاء بوت ستراپ را در وردپرس ادغام کرد؟”

این سری از آموزش چگونگی ادغام اجزاء بوت ستراپ محبوب در داخل وردپرس را پوشش می دهد. اجازه دهید با منوی ناوبری شروع کنیم که به ما اجازه ایجاد یک نوار ناوبری واکنش گرا یا همان “responsive” را می دهد. برای حفظ راحتی این آموزش من یک نوار ناوبری شامل فقط لوگو و منو را انتخاب می کنم.

 

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

اجازه دهید برای درک بهتر، کدهای بالا را توضیح دهم:

یک تگ “<nav>” همراه با کلاس “navbar” و “role=”navigation تمام محتوای منو را دربر می گیرد.

یک تگ <div> همراه با کلاس “navbar-header” در هر صفحه نمایشی با هر اندازه ای قابل مشاهده است.

یک <button> که محتوا را بر روی صفحه نمایش کوچک نشان می دهد، این دکمه ضروری است اما شما می توانید محتوای داخل آن را تغییر دهید.

Brand – یک لینک همراه با لوگو، اختیاری می باشد، شما می توانید حذف کنید یا موقیت آن را عوض کنید.

یک “<div>” همراه با کلاس “collapse” و ‘navbar-collapse” که شامل تمام محتوایی می باشد که صفحه نمایش کوچک می باشد.

یک “<ul>” همراه با کلاس “nav navbar-nav” که نوار منو سایت را نمایش می دهد.

 

ادغام نمونه ها داخل قالب وردپرس

در این مرحله فرض شده است که وردپرس خود را نصب کرده اید و آماده برای توسعه می باشد.

 

آماده کردن قالب خود برای منو

فایل “functions.php” خود را باز کرده و اگر آن را Register نکرده اید، پس آن را ثبت کنید:

ثبت فایل های Bootstrap و jQuery:

کلاس “wp-bootstrap-navwalker”  را از GitHub دانلود کنید. فایل را در ریشه تم خود قرار دهید. به فایل “function.php” برگشته و کد زیر را اضافه کنید:

 ساخت یک منو

به قسمت مدیریت وردپرس بروید از منوی “نمایش” گزینه “فهرستها” را انتخاب کنید. منویی به اسم “Primary” ایجاد کنید. به قسمت مدیریت جایگاه ها رفته و منوی کشویی منوی “Primary” را انتخاب کنید و در آخر ذخیره کنید.

menu-primary

 

ادغام نمونه نوار ناوبری در یک قالب

فایل “header.php” خود را باز کرده و نمونه نوار ناوبری را در جایی که می خواهید نمایش داده شود اضافه کنید. حال می خواهیم بخشی از کد زیر را با تابع های وردپرس جایگزین کنیم. در ابتدا می خواهیم لینک درست برای لوگو قرار دهیم:

به

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

و با کدهای زیر جایگزین کنید:

حال منوی بوت استرپ با وردپرس ادغام شد. 🙂

 

نتیجه گیری

در این آموزش ما یاد گرفتیم چگونه اجزای مثل نوار منو بوت سترپ را داخل وردپرس ادغام کنیم. برای سرعت بخشیدن به روند توسعه، شما به راحتی می توانید کدها را از سایت بوت سرپ کپی کرده و هر کجا که مایل هستید از آنها استفاده کنید.

  • ژیهات

    سلام دوست من
    ممنون از آموزش بسیار خوبت
    برای responsive کردنش باید چه اقداماتی انجام داد ؟

    • پاتریک

      سلام 🙂
      خواهش می کنم خوشحالم که راضی هستید 😉
      تنها کافیست css بوت استرپ وارد فایل html خود کنید.
      تمام مراحل در مستندات bootstrap اورده شده است.
      http://getbootstrap.com/getting-started/

  • Safoora

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