ممکن است متوجه شده باشید که برخی از آیتمهای منوی وبسایت شما برای کلیک کردن سخت هستند یا اینکه کل منو هنگام مشاهده سایت شما تا حدی پوشیده میشود. این میتواند آزاردهنده باشد، خصوصا زمانی که بر قابلیت استفاده از وبسایت شما تأثیر میگذارد.
چند دلیل رایج برای این مشکل وجود دارد:
تضاد تمها: گاهی اوقات، CSS در تم شما نوار مدیریت را در نظر نمیگیرد و باعث میشود که منو به درستی موقعیتیابی نشود.
تضاد افزونهها: افزونهای که طراحی فرانتاند را تغییر میدهد میتواند به طور ناخواسته باعث همپوشانی منو با نوار مدیریت شود. این ممکن است شامل افزونههایی باشد که منوهای مگامنو یا هدرهای بنری اضافه میکنند.
CSS سفارشی: اگر CSS سفارشی به سایت خود اضافه کردهاید، ممکن است با نمایش صحیح منوی شما تداخل داشته باشد.
این مشکل میتواند بر قابلیت استفاده سایت شما تأثیر بگذارد و پیمایش کاربران را سختتر کند. خوشبختانه، چندین راه برای رفع این مشکل وجود دارد، از جمله یک راه حل ساده که به هیچ کدنویسی نیاز ندارد.
در اینجا مروری بر راهکارهایی که نشان خواهیم داد، آمده است. میتوانید به راهکاری که برایتان آسانتر به نظر میرسد، بروید:
راهکار 1: پنهان کردن نوار مدیریت از طریق تنظیمات پروفایل کاربر
راهکار 2: تنظیم دستی CSS تم
راهکار 3: بررسی تداخل افزونهها
منابع اضافی برای وردپرس
راهکار 1: پنهان کردن نوار مدیریت از طریق تنظیمات پروفایل کاربر
این راهکار برای کاربرانی که به دنبال یک راه حل سریع و آسان بدون نیاز به سر و کار داشتن با کد هستند، ایدهآل است. این راهکار برای مبتدیان یا هر کسی که ممکن است نگران خراب کردن طرح وبسایت خود باشد، مناسب است.
علاوه بر این، اگر مجوز ویرایش فایلهای CSS یا تم سایت خود را ندارید، این روش یک راه ساده برای اجتناب از مشکل بدون ایجاد تغییرات دائمی است.
توجه: این راهکار در سطح کاربر اعمال میشود، به این معنی که سایر کاربران سایت شما باید به حسابهای خود وارد شوند و مراحل زیر را تکرار کنند.
ابتدا، باید به داشبورد وردپرس خود وارد شوید. سپس به صفحه کاربران » پروفایل در منوی سمت چپ بروید.
به پایین بروید تا به بخش نوار ابزار برسید و سپس کادر کنار گزینه نشان دادن نوار ابزار هنگام مشاهده سایت را بردارید.
چرا این کار جواب میدهد؟
پنهان کردن نوار مدیریت از تداخل آن با منوی ناوبری در قسمت جلویی سایت شما جلوگیری میکند. از آنجایی که نوار مدیریت نمایش داده نمیشود، مشکل همپوشانی به طور موقت حل میشود و منوی شما برای شما و بازدیدکنندگان کاملاً قابل دسترسی میشود.
راهکار 2: تنظیم دستی CSS قالب
اگر با HTML و CSS راحت هستید یا به دنبال یک راه حل دائمی برای مشکل همپوشانی منو هستید، باید CSS قالب خود را تنظیم کنید.
این راهکار برای کاربرانی که مجوزهای کاربری لازم برای ویرایش ظاهر سایت خود را دارند و میخواهند مشکل را از ریشه حل کنند، ایدهآل است.
1. بررسی مشکل:
ابتدا باید از ابزار Inspect در مرورگر خود برای تعیین محل اضافه کردن CSS سفارشی استفاده کنید. ما یک راهنمای دقیق برای مبتدیان DIY در مورد استفاده از ابزار Inspect داریم.
ابتدا روی منوی ناوبری خود کلیک راست کرده و «Inspect» (در کروم) یا «Inspect Element» (در فایرفاکس) را انتخاب کنید.
با این کار ابزار توسعه دهنده باز می شود که HTML و CSS را برای عنصر نشان می دهد.
در کد، باید کلاسهای CSS یا شناسههای مورد استفاده توسط قالب خود را برای نمایش مناطق هدر یا منوی ناوبری پیدا کنید. برای مثال، در اسکرینشات بالا، سایت آزمایشی ما از کلاس .site-header برای ناحیه مورد نظر استفاده میکند.
نکته: ماوس خود را روی HTML حرکت دهید و مرورگر شما ناحیه را در پنجره پیشنمایش برجسته میکند. روی HTML راستکلیک کنید و سپس زیر «Styles» به دنبال خصوصیات CSS بگردید.
اضافه کردن CSS سفارشی با استفاده از WPCode
سپس، باید افزونه WPCode را نصب و فعال کنید. این بهترین افزونه کد سفارشی وردپرس است و افزودن CSS سفارشی به وبسایت شما را بسیار آسان میکند، صرف نظر از تم شما.
دلیل دیگر استفاده از WPCode، قوانین منطق شرطی آن است. از آنجایی که این مشکل فقط کاربران لاگین شده را تحت تأثیر قرار میدهد، ما به این قوانین نیاز داریم تا کد خود را فقط برای کاربران لاگین شده اضافه کنیم.
برو جلو و افزونه WPCode را نصب و فعال کن. برای جزئیات بیشتر، به آموزش ما در مورد نحوه نصب یک افزونه وردپرس مراجعه کن.
نکته: نسخه رایگان WPCode نیز در دسترس است و برای این آموزش کار خواهد کرد. با این حال، ما ارتقا به یک طرح پولی را توصیه میکنیم زیرا به شما دسترسی به ویژگیهای بیشتری میدهد.
پس از فعال شدن، به صفحه Code Snippets » + Add Snippet در داشبورد وردپرس خود بروید.
در صفحه بعدی، افزونه دستههایی از اسنیپتهای کد آماده استفاده را به شما نشان میدهد. با این حال، ما کد CSS سفارشی خواهیم نوشت.
برای انجام این کار، ماوس خود را به کادر «Add Your Custom Code (New Snippet)» ببرید و روی دکمه «+ Add Custom Snippet» کلیک کنید.
در اینجا، یک نام برای قطعه کد خود وارد کنید و سپس CSS Snippet را از منوی کشویی «Code Type» انتخاب کنید.
پس از آن، کد زیر را به کادر «Code Preview» اضافه کنید:
#your-menu-id .your-menu-class {
margin-top: 40px; /* Adjust this value based on your theme */
z-index: 10001;
position: relative;
padding-top:40px
}
در این قطعه کد، باید #your-menu-id و .your-menu-class را با مقادیری که میخواهید در HTML هدف قرار دهید، جایگزین کنید.
در اینجا نحوه اضافه کردن آن به سایت آزمایشی ما و تنظیم آن برای هدف قرار دادن ناحیه آسیبدیده آمده است.
تحت قوانین منطقی، باید «Logged-in» > «Is» > «True» را انتخاب کنید.
در نهایت، در گوشه سمت راست بالای صفحه، فقط روی «Save Snippet» کلیک کنید و آن را از غیرفعال به فعال تغییر دهید.
حالا باید به سایت خود سر بزنید و بررسی کنید که آیا منوی ناوبری و هدر به درستی بالای نوار مدیریت نمایش داده میشوند.
اگر دفعه اول درست نشد، سعی کنید مقدار margin-top را تنظیم کنید یا ID یا کلاسهای CSS متفاوتی را هدف بگیرید.
چرا این کار جواب میدهد:
این مشکل اغلب به این دلیل رخ میدهد که CSS تم به درستی نوار مدیریت را در نظر نمیگیرد و باعث میشود که منوی ناوبری زیر آن نمایش داده شود. با اضافه کردن یک قطعه کوچک CSS سفارشی، میتوانید موقعیت منوی ناوبری را تنظیم کنید و اطمینان حاصل کنید که به درستی بالای نوار مدیریت ظاهر میشود.
نکته اضافی 💡 : آیا با مشکلاتی در CSS روبرو هستید؟ میتوانید از پشتیبانی اضطراری وردپرس ما استفاده کنید. توسعهدهندگان وردپرس ما با هزینه کمی، مشکل شما را در کمترین زمان برطرف میکنند تا بتوانید به رشد کسبوکارتان ادامه دهید.
راه حل ۳: بررسی تداخل افزونهها
اگر راه حلهای قبلی را امتحان کردهاید و مشکل همچنان وجود دارد، ممکن است به دلیل تداخل افزونهها باشد.
افزونهها گاهی اوقات میتوانند CSS یا جاوا اسکریپتی را معرفی کنند که با طرحبندی تم شما تداخل دارد. این تداخل میتواند مشکلاتی مانند ظاهر شدن منوی ناوبری زیر نوار مدیریت را ایجاد کند.
شناسایی افزونه متضاد میتواند مشکل را بدون تغییر کد تم شما حل کند.
۱. غیرفعال کردن همه افزونهها:
ابتدا به داشبورد وردپرس خود بروید و به Plugins » Installed Plugins بروید.
با انتخاب کادر کنار Plugin در بالای لیست، همه افزونهها را انتخاب کنید.
باید از منوی کشویی اکشنهای گروهی، ‘Deactivate’ را انتخاب کنید و روی ‘Apply’ کلیک کنید.
حالا، به سادگی به سایت خود سر بزنید تا ببینید آیا مشکل برطرف شده است یا خیر. اگر منوی ناوبری اکنون به درستی نمایش داده میشود، احتمالاً یکی از افزونهها باعث مشکل شده است.
۲. شناسایی افزونه متضاد
برای پیدا کردن افزونهای که باعث مشکل شده است، به صفحه افزونههای نصب شده برگردید.
باید هر افزونه را یکی یکی فعال کنید و بعد از هر فعالسازی، سایت خود را بررسی کنید. این کار را تا زمانی تکرار کنید که مشکل پس از فعال کردن یک افزونه خاص ظاهر شود.
هنگامی که مشکل دوباره ظاهر شد، با موفقیت افزونهای که باعث تداخل شده را شناسایی کردهاید.