ساخت منو های رسپانسیو در وردپرس

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

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

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

قبل از شروع آموزش یه نکته بگم :  که اگه قالب شما دارای منو های واکنش گرا هست پس نیازی نیست که شما از این افزونه استفاده کنید ولی چنانچه دوست داشتید منو های سایتتان کشویی شوند پس با ما همراه باشید…

resmenu

خب ما تو این آموزش از افزونه Responsive Menu استفاده خواهیم کرد.

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

و اما آموزش ساخت منو های رسپانسیو در وردپرس :

برای ریسپانسیو کردن منو ها در وردپرس ما از افزونه ای به نام Responsive Menu استفاده میکنیم که میتوانید از طریق لینک های زیر افزونه رو دانلود و نصب بکنید:

[button color=”green2″ link=”https://wordpress.org/plugins/responsive-menu/” rel=”nofollow” align=”right” target=”_blank” radius=”5″ icon=”momizat-icon-wordpress” icon_color=”#ffffff”]مشاهده افزونه در مخزن وردپرس[/button][button color=”green2″ link=”https://downloads.wordpress.org/plugin/responsive-menu.3.1.4.zip” rel=”nofollow” align=”left” target=”_blank” radius=”5″ icon=”momizat-icon-wordpress” icon_color=”#ffffff”]دانلود افزونه از مخزن وردپرس[/button]

خب پس از اینکه افزونه رو نصب کردید و فعالش کردید در قسمت پیشخوان سایت قسمتی با نام Responsive Menu اضافه خواهد شد برای منو های رسپانسیو در وردپرس. 

روش کلیک کنید تا به صفحه ی تنظیمات افزونه بریم.

تنظیمات افزونه

خب برای تبدیل منو به منوی کشویی و رسپانسیو مطمئن باشید که تنظیمات این قسمت رو به درستی تنظیم می کنید تا بعدا مشکلی پیش نیاد.

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

در فیلد اول ما ابتدا عرضی را مشخص میکنیم برای break point یعنی وقتی که صفحه عرضش به اون اندازه رسید تغییرات اعمال بشه و منو ما تبدیل به منوی کشویی و رسپانسیو بشه و منوی اصلی تغییر شکل بده به طوری که منوی اصلی از دید کاربر مخفی بشه.

خب به عنوان مثال ما 800px رو تنظیم کردیم ( این به این معنیه که اگه عرض صفحه نمایش از 800 کمتر شد منوی کشویی فعال شود).

خب در فیلد دوم هم منوی مورد نظرمون که میخوایم به کشویی تبدیل بشه رو انتخاب میکنیم مثلا در شکل ما top-menu رو انتخاب کردیم که به منوی بالایی سایت گفته میشه.

و اما فیلد سوم این قسمت اگه شما یکم با کدهای css آشنایی داشته باشید کارتون خیلی بهتر راه میفته. در این فیلد هم باید id و class منویی که میخواهید مخفی شود رو انتخاب کنید.

توضیح اضافی همراه مثال

خب اگه تنظیماتی که گفتم رو متوجه نشدید اینجا یه مثال میزنم که کامل با نحوه کارش آشنا بشید.

فرض کنید کاربری با اسمارت فونش که عرض صفحش برابر 400 پیکسل هست وارد سایت ما شد چون ما در عکس بالا 800 پیکسل داده بودیم به break point پس همونطور که حدث زدید منو ما باید به صورت کشویی نمایش داده بشه.

خب با نمایش منوی کشویی باید منو اصلی ما ناپدید بشه این کار هم با idو class که در فیلد سوم وارد کردیم توسط افزونه انجام میشه.

اگه نمیدونید که id و class رو از کجا پیدا کنید باید بهتون بگم که رو browser راست کلیک کنید و inspected element رو انتخاب کنید و روی منویی که قراره مخفی بشه کلیک کنید و دنبال خصیصه های id و class اون بگردید- اگر باز هم نمیتونید پیداش بکنید ادرس سایتتون رو در قسمت نظرات ارسال بکنید تا ما برای شما ارسالش بکنیم

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