hidemobilemenuwp-og

۲ روش مخفی کردن منوی موبایل در وردپرس

آیا می خواهید نحوه مخفی کردن منوی موبایل در وردپرس را یاد بگیرید؟

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

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

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

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

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

مخفی کردن منوی موبایل در وردپرس
createmobilemenu

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

addmenuitems
addmenuitems

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

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

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

choosemenutodisplay
choosemenutodisplay

از منوی کشویی، منوی موبایلی را که قبلا ایجاد کرده اید انتخاب کنید.

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

hidethememenu
hidethememenu

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

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

فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه ذخیره تغییرات کلیک کنید.

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

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

menulocation
menulocation

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

افزونه WP Mobile Menu به شما امکان می دهد رنگ نوار منو را تغییر دهید و …

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

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

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

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

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

inspecttool
inspecttool

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

desktopmenu
desktopmenu

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

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

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

addcustomcss hidemenu
addcustomcss hidemenu

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

.navbar-toggle-wrapper { 
display:none; 
} 

فراموش نکنید که .navbar-toggle-wrapper را با شناسه مورد استفاده در قالب وردپرس خود جایگزین کنید.

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

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

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

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

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

screenoptions cssclasses
screenoptions cssclasses

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

addcssclass
addcssclass

این فرآیند را برای همه موارد منو که نمی‌خواهید در تلفن همراه نشان دهید، تکرار کنید.

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

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

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

باید کد CSS زیر را در کادر CSS اضافه کنید.

@media (min-width: 980px){
 
    .hide-desktop{
    display: none !important;
    }
 
}
 
    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }
 
}

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

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

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

نحوه پیش بارگذاری لینک ها در وردپرس برای سرعت بارگذاری سریعتر

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

نحوه استفاده از چندین فرم جستجو در وردپرس

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

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

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

0 0 رای ها
رأی دهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها