نحوه غیرفعال کردن Overflow در وردپرس (حذف اسکرول افقی)

آیا می خواهید سرریز را در وب سایت وردپرس خود غیرفعال کنید؟

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

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

چه چیزی باعث نوار اسکرول افقی یا سرریز در وردپرس می شود

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

وردپرس یک نوار اسکرول افقی را نشان می دهد اگر یک عنصر گسترده تر از طرح وب سایت شما باشد. این “سرریز” نامیده می شود. داشتن نوار اسکرول افقی می تواند طراحی شما را شکسته و وب سایت شما را کمتر کاربر پسند کند.

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

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

غیرفعال کردن سرریز یک فرآیند بسیار آسان است. با در نظر گرفتن این موضوع، بیایید نگاهی به نحوه غیرفعال کردن آسان نوار اسکرول افقی سرریز در وردپرس بیاندازیم.

روش 1: اضافه کردن قطعه CSS با استفاده از Theme Customizer

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

تنها کاری که باید انجام دهید این است که به داشبورد وردپرس بروید و کلیک کنید ظاهر » سفارشی کردن.

توجه داشته باشید: شما ممکن است ببینید ظاهر » ویرایشگر بجای شخصی سازی. این بدان معناست که طرح زمینه شما از ویرایشگر تمام سایت (FSE) به جای سفارشی ساز تم استفاده می کند، و شما باید راهنمای ما را در مورد نحوه تعمیر سفارشی ساز تم از دست رفته یا استفاده از آن بررسی کنید. روش 2 زیر

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

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

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

فراموش نکنید که وقتی کارتان تمام شد، روی دکمه «انتشار» در بالای صفحه کلیک کنید!

روش 2: اضافه کردن قطعه CSS با استفاده از WPCode

همچنین می توانید CSS را از طریق قطعه کد با استفاده از افزونه WPCode اضافه کنید.

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

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

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

ادامه دهید و روی دکمه «افزودن جدید» کلیک کنید تا کد CSS خود را اضافه کنید.

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

به سادگی روی «Add Your Custom Code (New Snippet)» بروید و روی «Use Snippet» کلیک کنید.

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

در مرحله بعد، باید «نوع کد» را از منوی کشویی سمت راست انتخاب کنید. توجه داشته باشید که WPCode گزینه ای برای CSS ارائه نمی دهد، بنابراین باید روی گزینه ‘Universal Snippet’ کلیک کنید.

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

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

وقتی کد را جایگذاری کردید به این شکل به نظر می رسد:

پس از آن، به بخش “درج” بروید. در اینجا، دو گزینه “درج خودکار” و “کد کوتاه” را خواهید یافت.

گزینه “درج خودکار” را انتخاب می کنید تا کد شما به طور خودکار در سایت شما درج و اجرا شود.

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

به طور متناوب، می توانید از WPCode Pro نسخه برای بارگیری قطعات در صفحات پست خاص با استفاده از ویرایشگر Block.

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

سپس، فقط روی دکمه «ذخیره قطعه» کلیک کنید.

خودشه! شما فقط نوارهای اسکرول سرریز افقی را در سایت خود حذف کردید.

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

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