learndl triboon hostida

آموزش غیرفعال کردن اسکرول افقی در وردپرس

آموزش غیرفعال کردن اسکرول افقی در وردپرس

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

در این مقاله، یک راه آسان و سریع برای غیرفعال کردن اسکرول افقی در وردپرس و حذف نوار مربوطه به شما نشان خواهیم داد.

غیرفعال کردن اسکرول افقی و Overflow در وردپرس

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

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

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

می‌توانید به سادگی با افزودن یک کد CSS در قسمت «CSS اضافی» شخصی‌سازی قالب، Overflow را در وردپرس غیرفعال کنید. برای این کار به منوی نمایش > سفارشی‌سازی بروید.

نکته: ممکن است در منوی نمایش، به‌جای سفارشی‌سازی، ویرایشگر را مشاهده کنید. این بدین معناست که قالب شما از ویرایشگر full-site یا FSE به‌جای سفارشی‌سازی استفاده می‌کند.

آموزش غیرفعال کردن Overflow در وردپرس

در صفحه سفارشی‌سازی روی CSS اضافی کلیک کرده و کد زیر را کپی و جای‌گذاری کنید.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

پس از اتمام کار روی دکمه «انتشار» کلیک کنید.

اضافه کردن CSS با استفاده از افزونه WPCode

شما همچنین می‌توانید قطعه کد CSS را با استفاده از افزونه WPCode وارد کنید. برای اضافه کردن کد، توصیه می‌کنیم که جهت جلوگیری از بروز هرگونه مشکل، آموزش افزودن کد به سایت وردپرسی را مطالعه فرمائید.

دقت کنید که باید نوع کد را از منوی کشویی سمت راست انتخاب کنید. این افزونه گزینه‌ای برای CSS ارائه نمی‌دهد، بنابراین روی گزینه “Universal Snippet” کلیک کنید.

آموزش غیرفعال کردن اسکرول افقی در وردپرس

در مرحله بعد، تنها کاری که باید انجام دهید این است که قطعه کد CSS زیر را کپی و در «Code Preview» جای‌گذاری کنید.

<style type="text/css">
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
</style>

در بخش “Insertation” نیز گزینه “Auto Insert” را انتخاب کنید تا کد شما به‌صورت خودکار در سایت درج و اجرا شود.

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

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

امیدواریم این مقاله برای شما مفید واقع شود. شاد باشید.

به این مطلب امتیاز دهید

امتیاز کلی : 4.6 / 5. تعداد آرا : 14

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 0 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
هنوز نظری ثبت نشده است ، اولین نفری باشید که نظر میدهید !
همکاران وبیت