NỘI DUNG

Hosting tốc độ cao Vietnix - tốc độ tải trang trung bình dưới 1 giây
VPS siêu tốc Vietnix - trải nghiệm mượt mà, ổn định
19/06/2023
Lượt xem

Hướng dẫn cách thêm Scrollbar tùy chỉnh trong WordPress

19/06/2023
6 phút đọc
Lượt xem

Đánh giá

5/5 - (197 bình chọn)

Scrollbar có thể giúp trang web trở nên nổi bật, đặc biệt trong trường hợp bạn đang sử dụng WordPress theme tùy chỉnh. Một scrollbar đẹp sẽ thu hút sự chú ý của khách hàng khi truy cập vào trang web và kích thích sự tò mò, muốn khám phá thêm các nội dung khác trên trang. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách tạo và thêm scrollbar tùy chỉnh trong WordPress.

Tại sao nên sử dụng scrollbar trong WordPress?

Vào năm 2018, WC3 đã soạn thảo một đề xuất một phương pháp cho phép người quản lý trang web tùy chỉnh giao diện của scrollbar bằng CSS. Cho tới hiện tại, hầu hết các trình duyệt hiện đại đều hỗ trợ tùy chỉnh scrollbar.

Bạn có thể thay đổi scrollbar để phù hợp hơn với bộ nhận diện thương hiệu của doanh nghiệp. Nhiều trang web cũng sử dụng scrollbar để thu hút sự chú ý của người dùng, điều này có thể tăng số lần xem và giảm tỷ lệ thoát trang.

Tuy nhiên, cần lưu ý rằng với mỗi trình duyệt thì cách xử lý custom scrollbar sẽ khác nhau. Nhiều trình duyệt chỉ hỗ trợ tùy chỉnh một phần, trong khi một số trình duyệt hoàn toàn không hỗ trợ. Điều này có nghĩa là bạn phải kiểm tra trang web trên nhiều trình duyệt và thiết bị để xem cách scrollbar hiển thị trên chúng.

Bây giờ hãy xem một số cách tạo và thêm scrollbar tùy chỉnh trong WordPress phổ biến hiện nay:

  • Cách 1: Thêm custom scrollbar trong WordPress sử dụng plugin (cách đơn giản).
  • Cách 2: Thêm custom scrollbar trong WordPress bằng CSS.

Cách 1: Thêm scrollbar tùy chỉnh trong WordPress sử dụng plugin

Cách dễ nhất để thêm scrollbar là sử dụng plugin Advanced Scrollbar. Plugin miễn phí này cho phép bạn thay đổi chiều rộng, màu sắc, tốc độ cuộn và nhiều thứ khác của scrollbar mà không cần viết code.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Advanced Scrollbar. Sau khi kích hoạt plugin thành công, mở tùy chọn Settings > Advanced Scrollbar Settings như hình sau:

Vào Advanced Scrollbar Settings trong mục Settings
Vào Advanced Scrollbar Settings trong mục Settings

Tại giao diện cài đặt này, bạn có thể thay đổi bảng màu của scrollbar và màu nền của rail trượt.

Hình ảnh dưới đây là ví dụ về một scrollbar có màu xanh lam.

Ví dụ về Scrollbar với màu xanh lam
Ví dụ về Scrollbar với màu xanh lam

Bạn cũng có thể thay đổi cách cuộn chuột trên scrollbar bằng cách thay đổi giá trị tại mục Mouse Scroll Step. Giá trị càng thấp sẽ thì tốc độ cuộn càng chậm và ngược lại.

Thay đổi tốc độ cuộn chuột tại Mouse Scroll Step
Thay đổi tốc độ cuộn chuột tại Mouse Scroll Step

Bạn cũng có thể chọn ẩn scrollbar và khiến nó chỉ xuất hiện khi người dùng cần sử dụng hoặc thực hiện thao tác lăn chuột để cuộn. Điều này rất hữu ích trong trường hợp bạn đã tạo một thanh cuộn nhiều màu sắc và lo lắng rằng nó có thể khiến người dùng rối mắt hoặc bị phân tâm.

Ẩn chọn Scrollbar khi không cần thiết
Ẩn chọn Scrollbar khi không cần thiết

Theo mặc định, scrollbar sẽ xuất hiện ở phía bên phải của cửa sổ trình duyệt. Nếu muốn, bạn có thể di chuyển nó sang bên trái bằng cách sử dụng tùy chọn cài đặt Rail Align. Đừng quên nhấp vào Save Changes để lưu cài đặt của bạn. Truy cập website một lần nữa để xem những thiết lập đã thực hiện.

Cách 2: Thêm custom scrollbar trong WordPress bằng CSS

Nếu bạn muốn thực hiện các thay đổi nâng cao hơn cho scrollbar thì một cách khác là sử dụng CSS để tùy chỉnh. Lưu ý: Phương pháp này cho phép bạn tùy chỉnh mọi yếu tố của scrollbar nhưng chỉ hoạt động trên trình duyệt máy tính bàn sử dụng WebKit. Điều này có nghĩa là các thay đổi sẽ không hiển thị trên tất cả các trình duyệt, kể cả trình duyệt dành cho thiết bị di động.

Để tùy chỉnh scrollbar của bạn bằng CSS, vào mục Appearance > Chọn Customize.

Vào Appearance nhấn chọn Customize
Vào Appearance nhấn chọn Customize

Trong WordPress Customizer, nhấp vào Additional CSS. Bây giờ bạn có thể thêm các dòng code vào trình chỉnh sửa xuất hiện bên dưới.

Nhấn vào Additional CSS
Nhấn vào Additional CSS

Một ví dụ về code CSS thay đổi giao diện của thanh cuộn như sau:

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
  
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
  
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
  
::-webkit-scrollbar-thumb:hover {
background: blue;
}

Bạn có thể thêm bất kỳ đoạn code phù hợp nào nếu muốn.

Khi tùy chỉnh hoàn tất, bạn chỉ cần nhấp vào nút Publish. Lúc này, bạn có thể truy cập blog WordPress trong trình duyệt WebKit để xem các thay đổi đang hoạt động.

Kiểm tra các thay đổi đang hoạt động trong WordPress
Kiểm tra các thay đổi đang hoạt động trong WordPress

Lời kết

Trên đây là một số cách thêm scrollbar tùy chỉnh trong WordPress đơn giản, nhanh chóng mà Vietnix muốn giới thiệu tới bạn. Hy vọng những thông tin này đã giúp bạn hiểu được cách tạo custom scrollbar theo nhu cầu. Đừng quên theo dõi những bài viết tiếp theo trên website Vietnix để biết thêm những mẹo sử dụng WordPress hữu ích nhất nhé.

THEO DÕI VÀ CẬP NHẬT CHỦ ĐỀ BẠN QUAN TÂM

Đăng ký ngay để nhận những thông tin mới nhất từ blog của chúng tôi. Đừng bỏ lỡ cơ hội truy cập kiến thức và tin tức hàng ngày

Chọn chủ đề :

Lê Nam

WordPress Expert
tại

Kết nối với mình qua

Kết nối với mình qua

Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Tăng tốc độ website - Nâng tầm giá trị thương hiệu

Tăng tốc tải trang

95 điểm

Nâng cao trải nghiệm người dùng

Tăng 8% tỷ lệ chuyển đổi

Thúc đẩy SEO, Google Ads hiệu quả

Tăng tốc ngay

SẢN PHẨM NỔI BẬT

7 NGÀY DÙNG THỬ HOSTING

NẮM BẮT CƠ HỘI, THÀNH CÔNG DẪN LỐI

Cùng trải nghiệm dịch vụ hosting tốc độ cao được hơn 100,000 khách hàng sử dụng

ĐĂNG KÝ NHẬN TÀI LIỆU THÀNH CÔNG
Cảm ơn bạn đã đăng ký nhận tài liệu mới nhất từ Vietnix!
ĐÓNG

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

XÁC NHẬN ĐĂNG KÝ DÙNG THỬ THÀNH CÔNG
Cảm ơn bạn đã đăng ký thông tin thành công. Đội ngũ CSKH sẽ liên hệ trực tiếp để kích hoạt dịch vụ cho bạn nhanh nhất!
ĐÓNG