رفتن به مطلب

افزونه ریسپانسیو کردن منو


پست های پیشنهاد شده

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

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

post-2281-0-36077100-1405278665_thumb.jp

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

post-2281-0-42712100-1405278714_thumb.jp

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

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

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

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

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

post-2281-0-27052300-1405278747_thumb.jp

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

  • - 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 اضافه میشه که برای انجام تنظیمات وارد اون بخش میشیم.

post-2281-0-55624400-1405278778_thumb.jp

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

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

post-2281-0-08458600-1405278802_thumb.jp

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

post-2281-0-33620400-1405278826_thumb.jp

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

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

post-2281-0-65637400-1405278852_thumb.jp

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

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

پلاگین : WP Responsive Menu

post-2281-0-85192300-1405278884_thumb.jp

موفق باشید.

منبع : ماندگاروب

  • امتیاز 3
لینک به ارسال
×
×
  • اضافه کردن...