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

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

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

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

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

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

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

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

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

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

روش 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 را در وب سایت خود نصب و فعال کنید. برای جزئیات بیشتر، می توانید راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را مشاهده کنید.

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

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

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

فقط روی «Add Custom Code (New Snippet)» بروید و روی «Use Snippet» کلیک کنید.

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

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

پس از آن، تنها کاری که باید انجام دهید این است که قطعه کد CSS زیر را کپی و در پیش نمایش کد قرار دهید.

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

پس از چسباندن کد به شکل زیر در می آید:

سپس به قسمت Insert بروید. در اینجا دو گزینه “درج خودکار” و “کد کوتاه” را خواهید یافت.

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

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

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

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

سپس فقط روی دکمه “Save Snippet” کلیک کنید.

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

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

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

پست نحوه غیرفعال کردن سرریز در وردپرس (حذف اسکرول افقی) اولین بار در WPBeginner ظاهر شد.