مخفی کردن منوی موبایل در وردپرس | (۲ روش مبتدی و پیشرفته)

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

پیشنهاد می کنیم مطالعه کنید: بهترین تکست ادیتورها برای توسعه فرانت اند

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

برای این کار به دو صورت می توانید اقدام کنید. در روش اول با استفاده از پلاگین به سراغ این تغییر می رویم و در روش دوم با استفاده از کد CSS منوی موبایلی را پنهان می کنیم.

روش 1. پنهان کردن منوی موبایل در وردپرس با استفاده از پلاگین

این روش آسان تر است و به افراد مبتدی توصیه می شود. ما برای مخفی کردن منوی موجود تلفن همراه شما که توسط طرح زمینه WordPress شما ارائه شده است، از افزونه WP Mobile Menu استفاده خواهیم کرد و سپس از یک منوی دیگر یا اصلا منویی در دستگاه های تلفن همراه استفاده خواهیم کرد.

ابتدا باید از صفحه Appearance »Menus ها بازدید کرده و یک منوی ناوبری جدید ایجاد کنید که می خواهید در دستگاه های تلفن همراه نمایش داده شود.

در صفحه بعدی ، باید نامی برای منوی جدید خود ارائه دهید که به شما کمک کند بعداً آن را شناسایی کنید. پس از آن ، می توانید مواردی را که می خواهید به ستون سمت چپ اضافه کنید ، انتخاب کنید.

پس از اتمام افزودن موارد به فهرست خود ، فراموش نکنید که برای ذخیره منو بر روی دکمه Save Menu کلیک کنید.

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

در مرحله بعدی ، باید به قسمت “Hide Original Theme Menu” بروید. اینجاست که می توانید به پلاگین بگویید تا یک منوی موبایل ایجاد شده توسط قالب وردپرس شما را مخفی کند.

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

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

اکنون که افزونه را راه اندازی کردیم ، باید به سایت وردپرس بگوییم که منوی تلفن همراه ما را در مکان منوی جدید اضافه شده توسط این افزونه نمایش دهد.

به سادگی ، به صفحه فهرست ها «Appearance» بروید. مطمئن شوید که منوی موبایلی که قبلاً ایجاد کرده اید در منوی کشویی انتخاب شده است. در زیر مورد منوی خود ، مکانی را که در تنظیمات افزونه انتخاب کرده اید (به عنوان مثال منوی تلفن همراه چپ یا منوی سمت راست تلفن همراه) انتخاب کنید.

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

منوی موبایل جایگزین شد

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

روش 2. پنهان کردن منوی موبایل با استفاده از کد CSS

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

1. پنهان کردن یک منوی کامل در دستگاه های تلفن همراه با استفاده از CSS

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

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

شما باید شناسه و کلاس CSS مورد استفاده در منوی پیمایش وردپرس را کشف کنید. می توانید این کار را با حرکت دادن ماوس روی کد منبع انجام دهید تا زمانی که منطقه منو برجسته شود.

همانطور که در تصویر بالا مشاهده می کنید ، تم تست ما از کلاس navbar-toggle-wrapper استفاده می کند.

پس از آن ، برای راه اندازی customizer theme ، باید به صفحه Appearance »Customize در قسمت مدیریت وردپرس بروید. در اینجا ، باید به برگه «Additional CSS» بروید و روی نماد تلفن همراه در گوشه پایین سمت راست پانل سمت چپ کلیک کنید.

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

2. مخفی کردن موارد خاص منو در منوی تلفن همراه با استفاده از CSS

این روش به شما امکان می دهد یک منوی پیمایش ایجاد کنید و سپس مواردی را که نمی خواهید در دستگاه های تلفن همراه یا دسک تاپ نمایش داده شوند ، انتخاب یا نمایش دهید.

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

ابتدا باید به صفحه Appearance »Menus بروید و روی دکمه Screen Options در گوشه سمت راست بالای صفحه کلیک کنید. از اینجا ، باید کادر کنار گزینه ‘CSS Classes’ را علامت بزنید.

گزینه های صفحه

بعد از آن. شما باید به پایین به سمت یکی از موارد منویی که می خواهید در دستگاه های تلفن همراه پنهان شود بروید و برای گسترش آن کلیک کنید. در تنظیمات مورد منو ، اکنون گزینه افزودن کلاس CSS را مشاهده خواهید کرد. بروید و کلاس CSS .hide-mobile را به آنجا اضافه کنید.

کلاس CSS را اضافه کنید. این فرایند را برای همه موارد منویی که نمی خواهید در تلفن همراه نشان دهید تکرار کنید. به همین ترتیب ، می توانید روی موارد منویی که می خواهید در رایانه های رومیزی پنهان شوند نیز کلیک کنید. این بار ، به جای آن ، کلاس CSS .hide-desktop را اضافه کنید.

پس از اتمام کار ، فراموش نکنید که برای ذخیره تغییرات خود بر روی دکمه ذخیره منو کلیک کنید.

اکنون CSS سفارشی را اضافه می کنیم تا این موارد منو مخفی شود. برای راه اندازی Theme Customizer کافیست به صفحه Appearance »Customize بروید و روی برگه CSS اضافی کلیک کنید. شما باید کد CSS زیر را در کادر CSS اضافه کنید:

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

جمع بندی

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