ساخت منوی ریسپانسیو در وردپرس با ShiftNav و بدون افزونه

برای ساخت منوی ریسپانسیو در وردپرس دو راه اصلی دارید. اگه از قالب بلوکی استفاده می‌کنید، خود وردپرس با بلوک Navigation یا همون «راهبری» منو رو در موبایل به یک دکمه بازشونده تبدیل می‌کنه. اگه قالبتون کلاسیکه یا یک منوی کناری کشویی می‌خواید، نسخه رایگان ShiftNav هم انتخاب کاربردی‌ایه.

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

منوی ریسپانسیو یعنی چی

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

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

ساخت منوی ریسپانسیو با قابلیت داخلی وردپرس

وردپرس در قالب‌های بلوکی، مدیریت منو رو به بلوک Navigation سپرده. Navigation همون بلوکیه که لینک‌های اصلی سایت، مثل صفحه اصلی و تماس با ما، داخلش قرار می‌گیرن. این بلوک حالت Overlay هم داره؛ یعنی روی صفحه کوچک، منو پشت یک دکمه قرار می‌گیره و با لمس اون باز می‌شه.

تنظیم منوی موبایل در قالب بلوکی

1. وارد پیشخوان وردپرس بشید و مسیر «نمایش ← ویرایشگر» رو باز کنید.
2. بخش «طراحی» یا «پیمایش» رو انتخاب کنید. اسم دقیق این قسمت ممکنه با توجه به نسخه وردپرس یا قالبتون کمی فرق کنه.
3. سربرگ سایت رو باز کنید و روی بلوک «راهبری» یا Navigation بزنید.
4. از نوار تنظیمات بلوک، حالت نمایش منوی موبایل یا Overlay رو انتخاب کنید.
5. مشخص کنید آیکون باز کردن منو همیشه دیده بشه یا فقط روی صفحه‌های کوچک نمایش داده بشه.
6. تغییرات رو ذخیره کنید و منو رو با یک موبایل واقعی امتحان کنید.

اگه گزینه «ویرایشگر» رو زیر منوی «نمایش» پیدا نمی‌کنید، احتمالاً قالبتون کلاسیکه. در این حالت معمولاً مسیر «نمایش ← فهرست‌ها» یا «نمایش ← سفارشی‌سازی» رو می‌بینید. ظاهر و امکانات منوی موبایل هم به قالبی که دارید بستگی داره.

چه زمانی از ShiftNav استفاده کنیم

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

قبل از نصب، اطلاعات افزونه رو در مخزن وردپرس ببینید. تعداد نصب، آخرین نسخه، نسخه وردپرس موردنیاز و عبارت «تست‌شده تا» اطلاعات ثابتی نیستن و ممکنه بعداً تغییر کنن. بهتره افزونه رو اول روی یک سایت آزمایشی یا یک نسخه پشتیبان از سایتتون امتحان کنید.

نصب نسخه رایگان ShiftNav

1. در پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید.
2. عبارت ShiftNav رو داخل کادر جست‌وجو بنویسید.
3. افزونه ShiftNav – Responsive Mobile Menu رو پیدا کنید.
4. نام سازنده و صفحه رسمی افزونه رو بررسی کنید تا افزونه مشابهی رو اشتباهی نصب نکنید.
5. روی «هم‌اکنون نصب نمایید» بزنید و وقتی نصب تموم شد، «فعال نمایید» رو انتخاب کنید.

بعد از فعال‌سازی، گزینه‌های ShiftNav به پیشخوان اضافه می‌شن. محیط افزونه انگلیسیه و وضعیت ترجمه فارسیش ممکنه در گذر زمان تغییر کنه. برای اینکه راحت‌تر گزینه‌ها رو پیدا کنید، اسم بخش‌های اصلی رو همون‌طور که داخل تنظیمات دیده می‌شن توضیح می‌دیم.

امکانات مهم نسخه رایگان ShiftNav

• ساخت منوی کناری برای موبایل
• انتخاب پوسته روشن یا تیره
• انتخاب یکی از فهرست‌های وردپرس برای نمایش
• نمایش دکمه باز کردن منو در اندازه‌های مشخص صفحه
• تغییر متن، اندازه و تراز دکمه منو
• تنظیم عنوان سایت یا متن نوار بالای منو
• استفاده از حرکت‌های CSS برای باز و بسته شدن منو

آموزش تنظیم ShiftNav

بعد از نصب افزونه، در پیشخوان به «نمایش ← ShiftNav» برید. تنظیمات اصلی معمولاً داخل بخش‌هایی مثل Toggle Bar، Main ShiftNav Settings و General Settings قرار گرفتن. Toggle Bar همون نواریه که دکمه باز کردن منو داخلش دیده می‌شه.

انتخاب فهرست برای ShiftNav

اگه قالب کلاسیک دارید، به «نمایش ← فهرست‌ها» برید. اول یک فهرست تازه بسازید یا فهرست فعلی سایتتون رو انتخاب کنید. بعد تب «مدیریت جایگاه‌ها» رو باز کنید و فهرست دلخواهتون رو در جایگاه ShiftNav قرار بدید.

اگه «فهرست‌ها» رو زیر منوی «نمایش» نمی‌بینید، احتمالاً قالبتون بلوکیه. در این شرایط اول قابلیت داخلی وردپرس رو امتحان کنید. ShiftNav بیشتر با فهرست‌های کلاسیک هماهنگه و روش اتصالش به قالب بلوکی ممکنه با توجه به قالبتون فرق داشته باشه.

تنظیم دکمه باز کردن منو

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

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

انتخاب ظاهر و جهت منو

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

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

تنظیم ShiftNav در سفارشی‌ساز قالب‌های کلاسیک

بعضی قالب‌های کلاسیک بخشی از تنظیمات ShiftNav رو در مسیر «نمایش ← سفارشی‌سازی» نشون می‌دن. اگه این مسیر در پیشخوان شما دیده می‌شه، می‌تونید ظاهر منو رو تغییر بدید و هم‌زمان پیش‌نمایشش رو ببینید.

در قالب‌های بلوکی معمولاً گزینه سفارشی‌سازی پنهانه و بخش‌های سایت از مسیر «نمایش ← ویرایشگر» ویرایش می‌شن. پس اگه سفارشی‌سازی رو نمی‌بینید، لزوماً مشکلی در وردپرس پیش نیومده.

رفع مشکل نمایش ندادن منوی ShiftNav

اگه دکمه یا منوی ShiftNav دیده نمی‌شه، موارد زیر رو به‌ترتیب بررسی کنید:

• مطمئن بشید یک فهرست رو برای جایگاه ShiftNav انتخاب کردید.
• بررسی کنید که نمایش Toggle Bar در تنظیمات افزونه فعال باشه.
• محدوده نمایش موبایل رو ببینید؛ شاید عرض صفحه فعلی بیرون از محدوده‌ای باشه که انتخاب کردید.
• کش افزونه بهینه‌سازی، کش سرور و کش مرورگر رو پاک کنید.
• برای آزمایش، افزونه‌های بهینه‌سازی JavaScript رو موقتاً غیرفعال کنید؛ تداخل فایل‌های JavaScript ممکنه جلوی باز شدن منو رو بگیره.
• اگه مشکل بعد از به‌روزرسانی ShiftNav شروع شده، گزینه Toggle Bar Injection رو پیدا کنید و حالت Footer رو امتحان کنید.
• اگه دو منوی موبایل می‌بینید، منوی موبایل قالب یا ShiftNav رو غیرفعال کنید تا فقط یکی از اون‌ها باقی بمونه.

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

تست نهایی منوی موبایل

• دکمه منو با یک لمس باز و بسته بشه.
• همه لینک‌ها راحت لمس بشن و بیش‌ازحد به هم نزدیک نباشن.
• زیرمنوها بدون لمس اشتباهی باز بشن.
• متن منو روی پس‌زمینه خوانا باشه.
• منو از عرض صفحه بیرون نزنه.
• بعد از باز شدن منو، دکمه بستن اون به‌راحتی دیده بشه.
• منوی دسکتاپ و موبایل هم‌زمان روی هم دیده نشن.

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

بالاخره ShiftNav نصب کنیم یا نه

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

اگه قالب کلاسیک شما منوی موبایل مناسبی نداره یا ظاهر منوی کناری ShiftNav رو بیشتر می‌پسندید، نسخه رایگان افزونه نیازهای اصلیتون رو پوشش می‌ده. فقط یادتون نره سازگاری آخرین نسخه افزونه با وردپرس و PHP سایتتون رو در صفحه رسمی ببینید. قبل از فعال‌سازی روی سایت اصلی هم حتماً از سایت بکاپ بگیرید.

سؤالات متداول

تیم تولید محتوا

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