ریسپانسیو کردن منوی وردپرس به صورت سفارشی

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

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

در مباحث ریسپانسیو ما باید به breakpoint و یا نقاط شکست دقت کنیم. نقاط شکست نقاطی هستند که وبسایت ما دچار به هم‌ریختگی قالب میشه و در اون نقاط با استفاده از media query می‌تونیم قالب مربوط به هر سایز رو داشته باشیم. و یکی از مهم‌ترین بخش‌های یک وب‌سایت منوی اون وب‌سایت هست که کاربرپسند باشه و بتونه اگر کاربری با صفحه نمایش سایز کوچکتر رفت روی وبسایت یا اصلا با تبلت رفت رو سایت منو و سایر مشخصات وبسایت قابل استفاده باشه، بسیاری از افراد این نقاط رو جدا می‌کنند و طبق برخی وبسایت‌ها یا طبق سایز گوشی و تبلت این نقاط رو مشخص می‌کنند. به شکل زیر دقت فرمایید:

و هم‌چنین این تصویر که سایز صفحات رو مشخص کرده:

به هر حال این نقاط شکست رو شاید آشنایی داشته باشید، ما بیشتر وارد جزئیات نمی‌شیم و به مبحث اصلی‌مون یعنی معرفی و ایجاد منوی ریسپانسیو وردپرس می‌پردازیم.

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

نکته‌ی بعدی اینکه در سایز موبایل گاهی وقت‌ها لازمه بعضی از منوها حذف بشن و فقط کاربری که با موبایل میاد روی سایت فقط منوهایی که شما تعیین می‌کنید رو ببینه، برای اینکار وارد بخش فهرست‌ها می‌شیم و یک فهرست جدید ایجاد می‌کنیم و منوهایی که لازمشون داریم رو مشخص می‌کینم.  نکته‌ی جالبتر اینکه اگر ما یک فروشگاه داشته باشیم و بخواهیم سبد خرید رو نشان دهیم می‌تونید این نوشته رو ” Menubar Widget مکمل منوی سایت‌های وردپرسی! ” مطالعه کنید و سبد خرید رو فعال کنید.

حالا بریم برای نصب پلاگین:

پلاگین اول : Responsive Menu

این پلاگین امکانات زیادی داره که نوشته و با مراجعه به لینک بالا می‌تونید کامل مشخصاتش رو بخونید.

• – Menu Title
• – Menu Title Image
• – Button Title
• – Media Query Breakpoint Width
• – CSS Options For Hiding Specific Elements
• – Menu Depth To Display
• – Top Location
• – Right Percentage Location
• – Line & Text Colour
• – Menu Button Background Colour
• – Absolute and Fixed Positioning
• – Menu Font
• – Menu Title Colour
• – Menu Title Hover Colour
• – Menu Title Background Colour
• – Menu Text Colour
• – Menu Text Hover Colour
• – Menu Background Colour
• ….

پس از نصب، از منوی سمت راست بخشی به نام Responsive menu اضافه می‌شه که برای انجام تنظیمات وارد اون بخش می‌شیم.

تنظیمات لازم رو طبق تصویر زیر انجام می‌دهیم.

در این شکل پس از انجام تنظیمات باید meta tag مورد نظر رو در هدر وب‌سایت قرار دهیم. یعنی وارد فایل header.php  می‌شیم و بین تگ‌های head قرار می‌دهیم.

و تنظیمات مهمی که لازمه اشاره کنیم در اینجا در تصویر زیر تماشا می‌کنید:

و سایر تنظیمات هم بسیار ساده و قابل فهم هست. اگر احیانا پرسشی داشتید در قسمت دیدگاه‌ها مطرح نمایید.

حال اگر پنجره مرورگرتون رو کوچیک کنید در زیر سایز نقطه شکستی که تعیین کردید منوی موردنظر نمایش داده میشه به سبک تصاویر زیر:

امیدوارم از این معرفی پلاگین لذت برده باشید.

در نکته ی آخر یک پلاگین دیگه هم که کارش شبیه به همین پلاگین هست رو معرفی می‌کنم که با هر کدام راحت بودید کار کنید:

پلاگین : WP Responsive Menu

نکته آخر:

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

برای نمونه توصیه می‌کنم این مقاله رو مطالعه کنید: اصول نویگیشن واکنش‌گرا در وب سایت های پیچیده

موفق باشید.