VietNetwork.Vn

Bạn có muốn tắt tràn trên trang web WordPress của mình không?

Thanh cuộn ngang xuất hiện khi một phần tử trên trang đó quá rộng để hiển thị và tràn ra ngoài màn hình. Hầu hết các giao diện WordPress không sử dụng cuộn ngang vì nó có thể phá vỡ bố cục trang web của bạn và gây nhầm lẫn cho người dùng.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn một cách dễ dàng và nhanh chóng để vô hiệu hóa tràn trong WordPress và loại bỏ thanh cuộn ngang.

1. Điều gì gây ra thanh cuộn ngang hoặc tràn trong WordPress

Khi thiết lập trang web WordPress của bạn, điều quan trọng là làm cho nó thân thiện với người dùng và mọi người đều có thể truy cập được.

WordPress sẽ hiển thị thanh cuộn ngang nếu một phần tử rộng hơn bố cục trang web của bạn. Điều này được gọi là 'tràn'. Việc có thanh cuộn ngang có thể phá vỡ thiết kế của bạn và làm cho trang web của bạn kém thân thiện với người dùng hơn.

Một trang web có cả thanh cuộn ngang và dọc có thể khiến khách truy cập mất phương hướng và khó điều hướng. Nó có thể dẫn đến việc mọi người rời khỏi trang web của bạn, gây ra chuyển đổi và doanh số bán hàng thấp hơn.

Vô hiệu hóa tràn có thể có lợi cho bạn vì nó sẽ làm cho trang web của bạn thân thiện và trực quan hơn.

Vô hiệu hóa tràn là một quá trình cực kỳ dễ dàng. Với ý nghĩ đó, chúng ta hãy xem cách dễ dàng vô hiệu hóa thanh cuộn ngang tràn trong WordPress. 

• Phương pháp 1: Thêm Đoạn mã CSS bằng Trình tùy chỉnh giao diện
• Phương pháp 2: Thêm đoạn mã CSS bằng WPCode

2. Phương pháp 1: Thêm Đoạn mã CSS bằng Trình tùy chỉnh giao diện

Bạn có thể vô hiệu hóa tràn trong WordPress bằng cách thêm mã CSS vào tùy chọn 'CSS bổ sung' của tùy biến giao diện.

Tất cả những gì bạn phải làm là truy cập bảng điều khiển WordPress và nhấp vào Giao diện » Tùy chỉnh.

Lưu ý: Bạn có thể thấy Giao diện » Trình chỉnh sửa thay vì Tùy chỉnh. Điều này có nghĩa là giao diện của bạn sử dụng trình chỉnh sửa toàn trang (FSE) thay vì Trình tùy chỉnh giao diện và bạn nên xem hướng dẫn của chúng tôi về cách khắc phục tùy biến giao diện bị thiếu hoặc sử dụng Phương pháp 2 bên dưới.


Khi bạn đang ở trang Tùy chỉnh, hãy nhấp vào tùy chọn 'CSS bổ sung', sau đó chỉ cần sao chép và dán đoạn mã sau.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
Khi bạn đã dán mã, mọi lỗi tràn sẽ bị xóa và bạn sẽ có thể thấy mã được áp dụng trên ngăn xem trước trực tiếp trên trang web của mình.

Đừng quên nhấp vào nút 'Xuất bản' ở đầu trang khi bạn hoàn tất!


3. Phương pháp 2: Thêm đoạn mã CSS bằng WPCode

Bạn cũng có thể thêm CSS thông qua đoạn mã bằng plugin WPCode.

WPCode là plugin đoạn mã phổ biến nhất, được hơn 1 triệu trang web sử dụng. Chúng tôi khuyên dùng phương pháp này vì plugin này giúp dễ dàng thêm mã tùy chỉnh vào WordPress mà không phải chỉnh sửa bất kỳ tệp giao diện nào của bạn.

Vì vậy, điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPCode trên trang web của mình. Để biết thêm chi tiết, bạn có thể xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Khi bạn đã kích hoạt plugin, nó sẽ thêm một mục menu mới có nhãn Đoạn mã vào thanh quản trị WordPress của bạn. Nhấp vào nó và bạn sẽ được đưa đến trang 'Tất cả các đoạn mã'.

Hãy tiếp tục và nhấp vào nút 'Thêm mới' để thêm mã CSS của bạn.


Bây giờ bạn đang ở trên trang 'Thêm đoạn mã', bạn có thể tìm kiếm thư viện đoạn mã WPCode hoặc bạn có thể bắt đầu từ đầu bằng đoạn mã của riêng mình. Đó là những gì bạn sẽ làm ở đây.

Chỉ cần di chuột qua 'Thêm mã tùy chỉnh của bạn (đoạn mã mới)' và nhấp vào 'Sử dụng đoạn mã.'


Sau khi bạn ở trên trang 'Tạo đoạn mã tùy chỉnh', hãy bắt đầu bằng cách nhập tiêu đề cho đoạn mã của bạn. Điều này chỉ dành cho bạn và nó có thể là bất kỳ thứ gì giúp bạn xác định mã.

Tiếp theo, bạn sẽ phải chọn 'Loại mã' từ trình đơn thả xuống ở bên phải. Lưu ý rằng WPCode không cung cấp tùy chọn cho CSS, vì vậy bạn cần nhấp vào tùy chọn 'Đoạn mã phổ quát'.


Tiếp theo, tất cả những gì bạn phải làm là sao chép và dán đoạn mã CSS sau vào 'Xem trước mã'.
   
<style type="text/css">
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
</style>
Nó sẽ trông như thế này sau khi bạn dán mã:


Sau đó, cuộn xuống phần 'Chèn'. Tại đây, bạn sẽ tìm thấy hai tùy chọn, 'Chèn tự động' và 'Mã ngắn'.

Bạn sẽ chọn tùy chọn 'Chèn tự động' để mã của bạn sẽ được tự động chèn và thực thi trên trang web của bạn.


Tuy nhiên, nếu bạn chỉ muốn tắt thanh cuộn ngang trên một số trang cụ thể, bạn có thể sử dụng tùy chọn logic có điều kiện trong WPCode để chỉ hiển thị đoạn trích trên trang cụ thể.

Ngoài ra, bạn có thể sử dụng phiên bản WPCode Pro để tải đoạn trích trên các trang bài đăng cụ thể bằng Trình chỉnh sửa khối.

Khi bạn đã chọn tùy chọn của mình, hãy chuyển đến đầu trang và chuyển nút chuyển từ 'Không hoạt động' sang 'Hoạt động' ở góc trên cùng bên phải.

Sau đó, chỉ cần nhấp vào nút 'Lưu đoạn mã'.


Đó là nó! Bạn vừa xóa bất kỳ thanh cuộn tràn ngang nào trên trang web của mình.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tắt tính năng tràn trên trang web WordPress của mình. Bạn cũng có thể muốn xem các chuyên gia của chúng tôi về các plugin WordPress phải có để phát triển trang web của bạn và hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách tạo biểu mẫu liên hệ trong WordPress.