با عرض سلام خدمت کاربران و همراهان عزیز دهکده وردپرس. امروزه مبحثی که خیلی رایج شده اصطلاح رسپانسیو بودن یا واکنشگرا بودن صفحات وب است. صفحات رسپانسیو چیز جدیدی نیست بلکه استفاده از تکنیک های وب برای سازگار کردن محتوا با نمایشگرهایی با سایز متفاوت است. امروز با آموزش ریسپانسیو کردن منو توسط افزونه Responsive Menu در وردپرس در خدمت شما دوستان عزیز هستیم تا صفحات ریسپانسیو شده را به شما آموزش دهیم باما همراه باشید.
ریسپانسیو کردن منو توسط افزونه Responsive Menu
ریسپانسیو کردن منو توسط افزونه Responsive Menu
صفحات رسپانسیو در مقابل ورژن موبایل قرار میگیرند.حتما تا بحال هنگام وبگردی با موبایل و تبلت ، با سایت هایی برخورد کردید که تمامی عناصر درون صفحه متناسب با اندازه ی صفحه ی موبایل یا تبلت شما ، نمایش داده میشوند و وبگردی را برای شما آسان تر میکنند . ریسپانسیو کردن منو یعنی اینکه سایت ما و منوهایی که در سایت قرار گرفته اند در صفحه نمایش های با سایز متفاوت به بهترین شکل دیده شود.به این سایت ها واکنشگرا یا responsive گفته میشود.
سایت واکنش گرا
سایت ها اغلب واکنشگرا طراحی می شوند تا در پلتفرم های مختلف برای کاربران به صورت به هم ریخته دیده نشوند. ریسپانسیو بودن سایت و منوهای سایت برای رضایت کاربران بسیار اهمیت دارد. در مباحث ریسپانسیو باید به breakpoint و یا نقاط شکست دقت کنیم.
نقاط شکست نقاطی هستند که وبسایت ما دچار به هم‌ریختگی قالب میشود و در آن نقاط با استفاده از media query میتوانیم قالب مربوط به هر سایز را داشته باشیم. بسیاری از افراد این نقاط رو جدا میکنند و طبق برخی وبسایت‌ها یا طبق سایز گوشی و تبلت این نقاط رو مشخص میکنند. تصویر زیر را مشاهده نمایید.
جدول سایزهای صفحات را در تصویر زیر مشاهده نمایید.
نکته: در ابتدا شما باید یک سایزی را در نظر بگیرید و بعد از نصب پلاگین سایز را وارد تنظیمات کنید که از آن سایز به پایین منوی ریسپانسیو فعال خواهد شد.
توجه: اگر قالب شما دارای منوهای واکنشگرا است نیازی به استفاده از این افزونه ندارید اما اگر میخواهید منوهای شما کشویی باشند می توانید از این افزونه استفاده کنید.
معرفی افزونه Responsive Menu :
به کمک افزونه وردپرس WP Responsive Menu هم میتوانید منو های لغزان و سفارشی در سایت خود ایجاد کنید و هم خاصیت ریسپانسیو به آن ها بدهید که امروزه در دنیای اینترنت بسیار حائز اهمیت می باشد.
امکانات افزونه وردپرس WP Responsive Menu
- منو های ایجاد شده توسط این افزونه کاملا واکنشگرا بوده و در تمامی تلفن های همراه کار می کند .
- توانایی سازگاری و هماهنگی با سیستم منوی وردپرس
- استفاده راحت از آن در رابط مدیریت
- قابلیت جایگزین شدن آسان منو های واکنشگرای افزونه با منو های معمولی سایت در تلفن های همراه
- امکان انتخاب رنگ منو توسط شما برای هماهنگی آن با قالب سایت
- امکان انجام تنظیماتی برای جهت باز شدن منو از بالا , راست یا چپ
- امکان درج لوگوی وبسایت در منو
- نصب آسان از مخزن وردپرس
- بدون نیاز به کد نویسی
- قابلیت سفارشی سازی به صورت کامل
نصب و راه اندازی افزونه Responsive Menu
ابتدا افزونه را دریافت نموده و از بخش افزونه های سایت خود آن را نصب نمایید.
پس از نصب در بخش پیشخوان سایت بخشی جدید با نام Responsive Menu برای فهرست های رسپانسیو در وردپرس اضافه شده است، روی آن کلیک کنید تا به صفحه ی تنظیمات افزونه بروید.برای این که اولین منوی خودتان را ریسپانسیو و بصورت کشویی تبدیل کنید لازم است تنظیمات این بخش را بخوبی انجام دهید.
برگه initial setup:
- طبق تصویر بالا در فیلد اول باید عرضی را مشخص کنید که از چه سایزی عرض صفحه کوچکتر شد منو نمایش داده شود و منوی شما تبدیل به فهرست های ریسپانسیو در وردپرس شود و منوی اصلی مخفی باشد(کاربر نتواند آن را ببیند). که در اینجا ما آن را ۸۰۰ پیکسل تنظیم کرده ایم(یعنی اگر عرض صفحه ی نمایش کاربر کوچکتر از ۸۰۰ پیکسل باشد منوی کشویی برای آن فعال خواهد شد)
- در فیلد دوم هم منوی مورد نظرتان را که میخواهید بصورت کشویی شود را انتخاب کنید.
- در فیلد سوم هم باید id و یا class منویی که میخواهید مخفی شود را قرار دهید.
برگه menu :
در این بخش هم می توانید تنظیماتی را درباره منو ها خود انجام بدهید. و رنگ و استایل های آنها را تغییر بدهید.
فیلد اول مربوط به ساختار منو و نحوه چینش آن میباشد .
فیلد دوم مربوط به سایز منو میباشد.
فیلد سوم مربوط به عنوان میباشد که بخش image بالای منو تصویر موردنظرمان قرار میگیرد.میتونیم لینک بدیم و نحوه باز کردن لینک و همچنین رنگ بک گراند متن را تعیین کنیم.
مربوط به محتوای منو است که در بخش فیلد اول تعیین کردیم چگونه باشد.
حالت منو که چگونه باز شود که در اینجا حالت چپ و push یعنی هل بده به سمت سایت تنظیم کرده ایم.با off کردن گزینه body clicks وقتی روی محتوای سایت کلیک کنیم منو بسته شود.و گزینه دوم link clicks وقتی روی لینک کلیک شد منو بسته شود.
رنگ جستجو را تعیین میکند.
تصویری که برای منو برگزیدیم میتوانیم ازین بخش تغییر و رنگ بقیه خصوصیات را بدهیم.
نکته:بخش های بعدی هم شامل رنگ و سایز و بقیه تنظیمات منو است که به سادگی میتوانید انجام دهید.
برگهButton :
بخش های مربوط به دکمه ها را هم می توانید از این بخش انجام دهید.که شامل رنگ و تصویر من و انیمیشن و موقعیت قرارگیری آن را تنظیم نمایید.
برگه Sub-Menus : این تب مربوط به زیر منوها می باشد و فقط تنظیم کردن رنگ های مربوط به این بخش رایگان هستند.
برگه Technical: این بخش هم برای نسخه ی پرمیوم افزونه است به جز سرعت انیمیش و تغییر حالت که می توانید آن ها را تنظیم کنید.
برگه Header Bar PRO : در نسخه پولی فعال می باشد.
برگه Custom CSS و Header Bar و Single Menu: این سه بخش هم به طور کامل برای نسخه ی پرمیوم افزونه می باشند.
برگه Import/Export: این تب هم برای ایمپورت و اکسپورت گرفتن از تنظیمات می باشد که می توانید از تنظیمات خودتان اکسپورت بگیرید و از آن در سایت دیگر و یا در موقعی دیگر در صورت لزوم استفاده کنید. و یا اینکه می توانید تمامی تنظیمات را از بخش reset option به حالت پیش فرض برگردانید.
امیدواریم که از مطلب آموزشی ریسپانسیو کردن منو توسط افزونه Responsive Menu استفاده لازم را برده باشید با مقاله های بعدی دهکده وردپرس همراه ما باشید.
هنوز نظری ثبت نشده! شما نظری ندارید؟!