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

19/06/2023

286

Lượt xem

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.

Xem thêm: Hướng dẫn tạo landing page bằng WordPress chuyên nghiệp

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

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.

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

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.

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.

Xem thêm: Hướng dẫn tạo Blog WordPress đơn giả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.

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.

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

Để tối ưu hóa trải nghiệm người dùng trên website, ngoài việc tinh chỉnh thanh cuộn, bạn cần chú ý đến việc lựa chọn một dịch vụ lưu trữ WordPress với tốc độ cao, ổn định và bảo mật. Điều này giúp đảm bảo rằng website của bạn sẽ hoạt động hiệu quả và không bị gián đoạn do các vấn đề kỹ thuật. Và nếu bạn đang tìm kiếm một dịch vụ lưu trữ WordPress đáng tin cậy, thì hosting Vietnix là một lựa chọn tuyệt vời. Những ưu điểm nổi trội của Vietnix có thể kể đến như:

11 năm kinh nghiệm hoạt động trong lĩnh vực giải pháp lưu trữ số.
50.000 khách hàng cá nhân, doanh nghiệp.
100.000 dịch vụ được kích hoạt.
97% khách hàng giới thiệu dịch vụ sau khi sử dụng.
Thương hiệu Việt Nam xuất sắc 2022.

Tùy theo nhu cầu sử dụng và ngân sách mà bạn có thể lựa chọn các gói cấu hình cho phù hợp Hosting Giá Rẻ, Hosting Cao Cấp, Business Hosting, SEO Hosting. Nếu còn phân vân chưa biết nên sử dụng giải pháp nào, quý khách vui lòng liên hệ để được tư vấn nhanh chóng nhất:

Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
Hotline: 1800 1093.
Email: sales@vietnix.com.vn.

71,280đ -20%

89,100đ

/Tháng

2 Core

3GB RAM

3GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

85,680đ -20%

107,100đ

/Tháng

2 Core

3GB RAM

3GB NVMe

2 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

107,280đ -20%

134,100đ

/Tháng

2 Core

4GB RAM

4GB NVMe

2 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

157,680đ -20%

197,100đ

/Tháng

4 Core

4GB RAM

4GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

215,280đ -20%

269,100đ

/Tháng

4 Core

6GB RAM

6GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

287,280đ -20%

359,100đ

/Tháng

4 Core

8GB RAM

8GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

395,280đ -20%

494,100đ

/Tháng

8 Core

10GB RAM

10GB NVMe

4 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

28,080đ -20%

35,100đ

/Tháng

1 Core

1GB RAM

1GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

42,480đ -20%

53,100đ

/Tháng

1 Core

2GB RAM

2GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

49,680đ -20%

62,100đ

/Tháng

2 Core

2GB RAM

2GB NVMe

1 Domain

SSL Miễn Phí

Tặng theme & plugin trị giá 50.000.000 VND

Xem thêm: Tìm hiểu về chi phí làm website WordPress cần có

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é.

Chia sẻ lên

Theo dõi trên

Đánh giá

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

Hoàng Vui

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

Tôi là Hoàng Vui - SEO Analyst tại Vietnix với hơn 3 năm kinh nghiệm trong lĩnh vực SEO và Google Marketing. Trước đó, tôi đã SEO nhiều dự án lớn, nhỏ giúp cải thiện thứ hạng từ khoá và traffic cho các khách hàng cá nhân, doanh nghiệp và tạo ra chuyển đổi. Tôi hy vọng rằng kiến thức mà tôi chia sẻ sẽ mang lại nhiều giá trị hữu ích và góp phần thúc đẩy sự thành công cho doanh nghiệp của bạn.