آموزش پنهان کردن منوی موبایل در وردپرس

پنهان کردن منوی موبایل در وردپرس

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

در چنین شرایطی می‌توانید منوی موبایل را در وردپرس مخفی کنید. این کار را هم می‌شود با کمک افزونه انجام داد و هم از طریق کدنویسی CSS. در این آموزش هر دو روش را بررسی می‌کنیم تا بسته به شرایط قالب و ساختار سایت‌تان، راه مناسب‌تر را انتخاب کنید.

آنچه در این مقاله می‌خوانید

• پنهان کردن منوی موبایل در وردپرس با افزونه
• مخفی کردن منوی موبایل در وردپرس با کدنویسی

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

اگر نمی‌خواهید مستقیم سراغ کدنویسی بروید، استفاده از افزونه راه ساده‌تری است. در این آموزش از افزونه WP Mobile Menu استفاده می‌کنیم. این افزونه فقط برای مخفی کردن منو نیست و امکانات بیشتری برای ساخت، شخصی‌سازی و مدیریت منوی موبایل در اختیار شما قرار می‌دهد.

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

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

1. نصب افزونه WP Mobile Menu

برای شروع از پیشخوان وردپرس به مسیر افزونه‌ها ← افزودن بروید و افزونه WP Mobile Menu را جستجو، نصب و فعال کنید. اگر با این بخش از وردپرس آشنا هستید کار پیچیده‌ای در پیش ندارید و پس از فعال‌سازی، تنظیمات افزونه در اختیار شما قرار می‌گیرد.

بعد از فعال‌سازی، بخشی با عنوان Mobile Menu Options در اختیار شما قرار می‌گیرد. این همان جایی است که می‌توانید تنظیمات منوی موبایل را مدیریت کنید.

2. بررسی بخش Mobile Menu Options

حالا وارد بخش Mobile Menu Options شوید و روی نخستین بخش تنظیمات کلیک کنید. در این قسمت تنظیمات اصلی افزونه قرار دارد و شما می‌توانید پیکربندی عمومی منوی موبایل را انجام دهید.

در این بخش، همان‌طور که در تصویر می‌بینید، امکان مدیریت موارد زیر را دارید:

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

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

چگونگی مخفی کردن منوی موبایل در وردپرس از طریق کدنویسی

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

نکته مهم اینجاست که کلاس یا شناسه منوی موبایل در همه قالب‌ها یکسان نیست. بنابراین باید ابتدا کلاس دقیق منوی موبایل سایت خودتان را پیدا کنید و بعد کد مناسب را بنویسید.

1. نمایش نسخه موبایل سایت در مرورگر

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

2. پیدا کردن کدهای مربوط به منوی موبایل

حالا روی آیکون منوی موبایل راست‌کلیک کنید و گزینه Inspect را بزنید تا ابزار بررسی عناصر مرورگر باز شود. با این کار می‌توانید کلاس CSS مربوط به منوی موبایل را پیدا کنید.

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

3. اضافه کردن کد CSS برای مخفی کردن منوی موبایل

بعد از پیدا کردن کلاس، از مسیر نمایش ← سفارشی‌سازی وارد بخش مربوط به CSS سفارشی شوید و کد را اضافه کنید. در نمونه این آموزش از کلاس زیر استفاده شده است:

.mob-icon-menu:before {
    content: '\e9d6';
    display: none;
}

همان‌طور که می‌بینید، مهم‌ترین بخش این کد مقدار display: none; است. با همین دستور، عنصر انتخابی از دید کاربر مخفی می‌شود. فقط یادتان باشد که این کلاس نمونه است و ممکن است کلاس منوی موبایل در قالب شما چیز دیگری باشد.

استفاده از افزونه بهتر است یا کدنویسی؟

اگر فقط می‌خواهید آیکون یا منوی موبایل را مخفی کنید و با CSS آشنایی دارید، روش کدنویسی سریع‌تر و سبک‌تر است. اما اگر بخواهید علاوه بر مخفی کردن منو، ساختار منوی موبایل را تغییر دهید یا امکانات بیشتری مثل تنظیم هدر و فوتر موبایل داشته باشید، افزونه WP Mobile Menu انتخاب کامل‌تری است.

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

پنهان کردن منوی موبایل در وردپرس کار سختی نیست و می‌توان آن را هم با افزونه و هم با کدنویسی انجام داد. اگر به دنبال راه‌حلی ساده و قابل مدیریت هستید، افزونه WP Mobile Menu گزینه مناسبی است و تنظیمات خوبی در اختیارتان می‌گذارد. اگر هم فقط می‌خواهید منو یا آیکون آن را از دید کاربر پنهان کنید، اضافه کردن یک کد CSS در بسیاری از مواقع کافی است.

فقط پیش از اعمال هر تغییر، مطمئن شوید که کاربر موبایلی همچنان می‌تواند به بخش‌های مهم سایت دسترسی داشته باشد. حذف یا پنهان کردن منوی موبایل نباید باعث سردرگمی کاربر یا افت تجربه کاربری شود.

منبع: wpbeginner.com