آیا می خواهید یک منوی موبایل را در وردپرس مخفی کنید؟ بیشتر تم های وردپرس دارای سبک های داخلی هستند که به طور خودکار منوهای شما را به یک منوی موبایل تبدیل می کنند.
با این حال ، ممکن است تمایل نداشته باشید از همان منو در تلفن همراه استفاده کنید یا ممکن است بخواهید از سبک منوی دیگری استفاده کنید. در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید با استفاده از روش افزونه یا کد ، به راحتی منوی موبایل را در وردپرس مخفی کنید.
روش 1. پنهان کردن یک منوی موبایل در وردپرس با استفاده از یک پلاگین
این روش آسان تر است و به افراد مبتدی توصیه می شود. ما برای مخفی کردن منوی موجود تلفن همراه شما که توسط طرح زمینه WordPress شما ارائه شده است ، از یک افزونه استفاده خواهیم کرد و بعد از آن از یک منوی دیگر یا اصلا منویی در دستگاه های تلفن همراه استفاده خواهیم کرد.
در صفحه بعدی آن ، باید نامی برای منوی جدید خود ارائه دهید که به شما کمک کند بعداً آن را شناسایی کنید. ما آن را “منوی موبایل” می نامیم. پس از آن ، می توانید مواردی را که می خواهید به ستون سمت چپ اضافه کنید ، انتخاب کنید.
پس از اتمام افزودن موارد به فهرست خود ، فراموش نکنید که برای ذخیره منو بر روی دکمه Save Menu کلیک کنید.
اگر برای ایجاد یک منوی ناوبری جدید به کمک نیاز دارید ، راهنمای مبتدی ما را برای ایجاد یک منوی پیمایش در وردپرس دنبال کنید.
در مرحله بعدی ، باید پلاگین WP Mobile Menu را نصب و فعال کنید.
پس از فعال سازی ، برای پیکربندی تنظیمات افزونه باید به صفحه گزینه های منوی موبایل مراجعه کنید. از اینجا ، باید با روشن کردن دکمه روشن ، منوی تلفن همراه خود را در سمت راست یا چپ نمایش دهید.
از منوی کشویی ، منوی موبایلی را که قبلاً ایجاد کرده اید انتخاب کنید.
در مرحله بعدی ، باید به قسمت “پنهان کردن منوی اصلی موضوع” بروید. اینجاست که می توانید به پلاگین بگویید تا یک منوی موبایل ایجاد شده توسط قالب وردپرس شما را مخفی کند
به طور پیش فرض ، این پلاگین از شناسه های عناصر معمول استفاده شده توسط محبوب ترین تم های وردپرس استفاده می کند. بیشتر کاربران نیازی به انجام کاری در اینجا ندارند.
با این حال ، اگر افزونه نتواند منوی طرح زمینه شما را پنهان کند ، می توانید به اینجا برگردید و روی دکمه “یافتن عنصر” کلیک کنید تا به سادگی به منوی ناوبری موضوع خود اشاره کنید.
فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه ذخیره تغییرات کلیک کنید.
اکنون که افزونه را راه اندازی کردیم ، باید به سایت وردپرس بگوییم که منوی تلفن همراه ما را در مکان منوی جدید اضافه شده توسط این افزونه نمایش دهد.
نگران نباشید ، به صفحه فهرست ها »ظاهر جستجو» بروید. مطمئن شوید که منوی موبایلی که قبلاً ایجاد کرده اید در منوی کشویی انتخاب شده است. در زیر مورد منو ، مکانی را که در تنظیمات افزونه انتخاب کرده اید (به عنوان مثال منوی تلفن همراه چپ یا منوی سمت راست تلفن همراه) انتخاب کنید.
اکنون می توانید به وب سایت خود مراجعه کرده و منوی جدید خود را در عمل مشاهده کنید. اکنون این افزونه منوی موبایل طرح زمینه شما را پنهان کرده و به جای آن یک منوی سفارشی نمایش می دهد.
افزونه WP Mobile Menu به شما امکان می دهد در قسمت تنظیمات ، رنگ نوار منو را تغییر دهید ، تیرگی را تغییر دهید ، نمادها را اضافه کنید. در صورت تمایل می توانید با آن تنظیمات بازی کنید.
روش 2. مخفی کردن منوی موبایل با استفاده از کد CSS
این روش کمی پیشرفته است و برای استفاده از آن باید از CSS سفارشی استفاده شود.
برای این روش می توانید دو روش مختلف را انتخاب کنید. شما فقط می توانید یک منوی کامل تلفن همراه را با استفاده از CSS پنهان کنید ، یا می توانید موارد منو را در دستگاه های تلفن همراه مخفی کنید
. پنهان کردن یک منوی کامل در دستگاه های تلفن همراه با استفاده از CSS
ابتدا باید عنصری را که باید با استفاده از CSS سفارشی اصلاح کنید ، کشف کنید. برای انجام این کار ، به سادگی به وب سایت خود بروید و ماوس را به منوی ناوبری خود ببرید. پس از آن ، کلیک راست کرده و گزینه Inspect را انتخاب کنید.
صفحه مرورگر شما به دو قسمت تقسیم می شود و کد منبع صفحه وب خود را مشاهده خواهید کرد. اکنون این منوی پیمایش منویی نیست که شما باید هدف قرار دهید زیرا در صفحه دسک تاپ قابل مشاهده است.
باید صفحه مرورگر خود را با کشیدن صفحه از گوشه به اندازه کوچکتر مرتب کنید تا منوی پیمایش دسک تاپ با منوی تلفن همراه جایگزین شود.
شما باید شناسه و کلاس CSS مورد استفاده در منوی پیمایش وردپرس را کشف کنید. می توانید این کار را با حرکت دادن ماوس روی کد منبع انجام دهید تا زمانی که ناحیه منو برجسته شود.
همانطور که در تصویر بالا مشاهده می کنید ، تم تست ما از کلاس navbar-toggle-wrapper استفاده می کند.
پس از آن ، برای راه اندازی customizer theme ، باید به صفحه Appearance »Customize در قسمت مدیریت وردپرس بروید. در اینجا ، باید به برگه «CSS اضافی» بروید و روی نماد تلفن همراه در گوشه پایین سمت راست پانل سمت چپ کلیک کنید.
سفارشی ساز اکنون پیش نمایشی از ظاهر سایت شما در دستگاه های تلفن همراه را نشان می دهد. اکنون می توانید کد CSS زیر را وارد کرده و منوی تلفن همراه خود را در صفحه پیش نمایش ناپدید کنید.
فراموش نکنید که .navbar-toggle-wrapper را با شناسه استفاده شده توسط قالب وردپرس خود جایگزین کنید.
پس از آن ، برای ذخیره تغییرات خود ، بر روی دکمه “انتشار” در بالا کلیک کنید.
- مخفی کردن موارد خاص منو در منوی تلفن همراه با استفاده از CSS
این روش به شما امکان می دهد یک منوی پیمایش ایجاد کنید و سپس مواردی را که نمی خواهید در دستگاه های تلفن همراه یا دسک تاپ نمایش داده شوند ، انتخاب یا نمایش دهید.
مزیت این روش این است که می توانید از همان منوی ناوبری برای تلفن همراه و دسک تاپ استفاده کنید و مواردی را که نمی خواهید دیده شوند به سادگی پنهان کنید.
ابتدا باید به صفحه Appearance »Menus بروید و روی دکمه Screen Options در گوشه سمت راست بالای صفحه کلیک کنید
بعد از آن. شما باید به پایین به سمت یکی از موارد منویی که می خواهید در دستگاه های تلفن همراه پنهان شود بروید و برای گسترش آن کلیک کنید. در تنظیمات مورد منو ، اکنون گزینه افزودن کلاس CSS را مشاهده خواهید کرد. بروید و کلاس CSS .hide-mobile را به آنجا اضافه کنید.
این فرایند را برای همه موارد منویی که نمی خواهید در تلفن همراه نشان دهید تکرار کنید.
به همین ترتیب ، می توانید روی موارد منویی که می خواهید در رایانه های رومیزی پنهان شوند نیز کلیک کنید. این بار ، به جای آن ، کلاس CSS .hide-desktop را اضافه کنید.
پس از اتمام کار ، فراموش نکنید که برای ذخیره تغییرات خود بر روی دکمه ذخیره منو کلیک کنید.
اکنون CSS سفارشی را اضافه می کنیم تا این موارد منو مخفی شود. برای راه اندازی Theme Customizer کافیست به صفحه Appearance »Customize بروید و روی برگه CSS اضافی کلیک کنید.
شما باید کد CSS زیر را در کادر CSS اضافه کنید.
فراموش نکنید که برای ذخیره تغییرات روی دکمه انتشار کلیک کنید.
اکنون می توانید به وب سایت خود مراجعه کرده و متوجه خواهید شد که مواردی که می خواستید در دسک تاپ مخفی کنید ، دیگر در فهرست مشاهده نمی شوند. صفحه
مرورگر خود را به اندازه کوچکتر تنظیم کنید و همین مورد را برای منوی تلفن همراه نیز مشاهده خواهید کرد.
اگر در زمینه طراحی سایت در مشهد سوالی دارید میتوانید با پشتیبانی این سایت در ارتباط باشید همچنین اگر سوالی درمورد بهترین تسک ادیتور ها برای توسعه فرانت اند سوالی دارید کلیک کنید
