آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

سوال و مشکلی دارید؟

● در تلگرام، پاسخگوی شما هستیم :)

صفحه اصلی » آموزش » css3 » آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه
برگشت به صفحه اصلی
فروشگاه پروان وب قالب موزیک و سریال پارسبان 2 قالب حرفه ای نوین دانلود

آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

۲ دیدگاه

منتشر شده توسط وحید رنجبر در تاریخ ۳۱ فروردین ۱۳۹۷
css3 / JQUERY & JAVASCRIPT / JQUERY & JAVASCRIPT / آموزش / طراحی قالب / وردپرس
آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

در این مقاله ما ساخت منوی واکنش گرا در وردپرس را به شما نشان خواهیم داد که چگونه می توانید ساخت منوی ریسپانسیو بدون افزونه را ایجاد کنید که این آموزش ایجاد منوی واکنش گرا با css می باشد.
به لطف انعطاف پذیری ارائه شده توسط وردپرس، راه های بی شماری برای انجام این کار وجود دارد.
چون ما قصد داریم این کار را در زیر 8 کیلوبایت انجام دهیم که این بدان معناست که این یک منوی ریسپانسیو در وردپرس فوق العاده کارآمد خواهد بود.
با یک تیر دو نشان می خواهیم بزنیم، ما یک منو ایجاد میکنیم تا همه امکانات را پوشش دهد.

قبل از شروع، پیشنهاد می کنیم که برخی دانش در زمینه توسعه ی اولیه را داشته باشید.
ما فقط میخواهیم در حد آشنایی مهارت داشته باشید ، پس نگران نباشید.
آشنایی شما در زمینه HTML، CSS، jQuery و وردپرس ایده ال می باشد.
این آموزش برای مبتدیان در حد متوسط است ، این آموزش ایجاد منوی واکنش گرا با css  است چون شامل تغییرات فایل های قالب وردپرس می باشد.
شما به فایل های قالب وردپرس که در زیر آمده است باید دسترسی داشته باشید:

قبل از انجام هر گونه تغییر، لطفا یک بک آپ از سایت خود بگیرید، که برای اینکار میتوانید مقاله دانلود افزونه وردپرس بک آپ گیری خودکار WP DB Backup را مطالعه کنید.
می توانید تغییرات را در محیط محلی آزمایش کنید، با این کار همیشه راهی برای بازگشت به فایل‌های اصلی خود دارید.
در این مقاله ما قصد داریم از bigSlide.js، یک افزونه جی کوئری کوچک برای ایجاد پانل های اسلاید خارج از صفحه استفاده کنیم.
در وب سایت plugin’s، آن را به عنوان افزونه جی کوئری خیلی خیلی کوچک(فشرده یک کیلوبایت) برای ایجاد پنل ناوبری اسلاید خارج از صفحه توصیف کرده است.
این خط با هدف ناوبری ضعیف و متوسط ما هماهنگ است.

ساخت منوی واکنش گرا در وردپرس

آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

در این آموزش ما ساخت منوی ریسپانسیو بدون افزونه با زبانی بسیار ساده برای شما بیان خواهیم کرد.
1. آخرین نسخه فشرده bigSlide.js را دانلود کنید. فایل را در پوشه theme /js خود کپی کنید.
2. توابع functions.php در ویرایشگر کد باز کنید و wp_enqueue_script را جستجو کنید.
احتمالا چندین نمونه را مشاهده خواهید کرد، زیرا wp_enqueue_script روش استاندارد اضافه کردن اسکریپت به وردپرس است.
3. درست بعد از آخرین نمونه از wp_enqueue_script ، قطعه زیر را اضافه کنید و ذخیره کنید.

فایل header.php را باز کنید و کلاس push رو در هر جایی که مدنظر دارید بعد از تگ body (بدنه) قرار بدهید.

بنابراین شما در آخر برا خاتمه دادن کد زیر را اضافه می کنید:

۵. در حالی که هنوز داخل فایل header.php هستید site-navigation رو سرچ کنید.

در اکثر قالب ها به همین شکل خواهد بود اما اگر نبود به این شکل قرار بدهید کد زیر را:

6. اضافه کنید تگ لینک زیر رو قبل از بسته شدن تگ </nav> مانند کد زیر ضافه کنید.

در اینجا ما یک آیکن منوی موبایل ایجاد میکنیم.

آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

7. فایل footer.php را باز می کنید و <?php wp_footer(); ?>را جستجو  می کنید درست بعد از این خط، قطعه زیر را اضافه کنید:

در حقیقت، ما یک منوی پنهانی در پایین صفحه ایجاد می کنیم.

8. در آخر، style.css را باز کنید و بعد از آخرین خط، کد زیر را اضافه کنید:

ما از یک طرح رنگی تیره استفاده کرده ایم.

آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه

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

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

افزونه موشک وردپرس | افزایش شگفت انگیز سرعت سایت

افزونه سئو وردپرس نسخه حرفه ای Yoast SEO Premium کاملا فارسی

افزونه عضویت و ورود کاربران وردپرس


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

مطالب پیشنهادی ما

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

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

آموزش / وردپرس
۲۸ اردیبهشت ۱۳۹۷
نحوه راه اندازی پرداخت کارت اعتباری در سایت وردپرس - فعال کردن فرم پرداخت در وردپرس

نحوه راه اندازی پرداخت کارت اعتباری در سایت وردپرس – فعال کردن فرم پرداخت در وردپرس

آموزش / افزونه وردپرس / وردپرس / وردپرس / ووکامرس
۲۱ اردیبهشت ۱۳۹۷
معرفی و مقایسه 9 افزونه آزمون برای وردپرس – بهترین افزونه آزمون وردپرس

معرفی و مقایسه 9 افزونه آزمون برای وردپرس – بهترین افزونه آزمون وردپرس

آموزش / افزونه وردپرس / وردپرس / وردپرس
۱۹ اردیبهشت ۱۳۹۷
معایب و مزایای افزونه وردپرس در مقابل فایل Functions.php - کدام بهتر است؟

معایب و مزایای افزونه وردپرس در مقابل فایل Functions.php – کدام بهتر است؟

آموزش / وردپرس
۱۶ اردیبهشت ۱۳۹۷

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

وحید رنجبر
وحید رنجبر

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

دیدگـاه ها

۲ پاسخ به “آموزش ساخت منوی واکنش گرا در وردپرس – ایجاد منوی ریسپانسیو بدون افزونه”

  1. سلام واقعا محتوای سایتتون عالی ممنون

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

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

اَللّهُمَّ عَجِّل لِوَلیِّکَ الفَرَج

پنل کاربری

پکیج های آموزشی

  • پکیج تصویری آموزش فارسی طراحی بنر فلش
    پکیج آموزش طراحی بنر فلش

آخرین های فروشگاه

جدید ترین ها

پست نامه ما

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

با عضویــــت در پسـت نامه ی ما هر روز جدیـدترین پست های سایت را در ایمیل خود داشته باشد و از آنها استفاده کنید عضویت با یه تایپ ساده ایمیلتون انجام میشه !