آموزش غیرفعال کردن اسکرول افقی در وردپرس
- آموزش • آموزش وردپرس
- ۷ فروردین ۱۴۰۲
- 1,850 بازدید
هنگامی که یک عنصر در صفحه بیش از حد عریض باشد و بهعبارتی Overflow رخ دهد، یک نوار اسکرول افقی در مرورگر ظاهر میشود. اکثر قالبهای وردپرس، اسکرول افقی را مدیریت میکنند، زیرا میتواند باعث ایجاد مشکل در وبسایت شما شود و کاربران را سردرگم کند.
در این مقاله، یک راه آسان و سریع برای غیرفعال کردن اسکرول افقی در وردپرس و حذف نوار مربوطه به شما نشان خواهیم داد.
آنچه در این پست میخوانید
غیرفعال کردن اسکرول افقی و Overflow در وردپرس
هنگام راهاندازی وبسایت وردپرسی خود، بسیار مهم است که آن را کاربرپسند و در دسترس همه قرار دهید. نوار اسکرول افقی زمانی نمایان میشود که یک عرض عنصر، بیشتر از چیدمان وبسایت شما باشد در این صورت به آن «Overflow» یا سرریز میگویند. داشتن یک نوار اسکرول افقی میتواند قالب شما را تحت تاثیر قرار داده و به کاربرپسند بودن وبسایت آسیب جدی وارد کند.
یک وبسایت با دو نوار اسکرول افقی و عمودی ممکن است برای خواننده گمراه کننده باشد و همچنین پیمایش در سایت نیز سخت خواهد شد، این فرایند میتواند منجر به خروج افراد از سایت و در نهایت فروش کمتر شود.
اضافه کردن کد CSS با استفاده از سفارشیسازی پوسته
میتوانید به سادگی با افزودن یک کد CSS در قسمت «CSS اضافی» شخصیسازی قالب، Overflow را در وردپرس غیرفعال کنید. برای این کار به منوی نمایش > سفارشیسازی بروید.
نکته: ممکن است در منوی نمایش، بهجای سفارشیسازی، ویرایشگر را مشاهده کنید. این بدین معناست که قالب شما از ویرایشگر full-site یا FSE بهجای سفارشیسازی استفاده میکند.
در صفحه سفارشیسازی روی 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 استفاده کنید تا فقط قطعه را در صفحه خاصی نشان دهید.
امیدواریم این مقاله برای شما مفید واقع شود. شاد باشید.