Chế độ tối (Dark Mode) đang trở thành xu hướng phổ biến giúp giảm mỏi mắt và tiết kiệm pin trên các thiết bị di động. Tích hợp dark mode cho website WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tối ưu SEO

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm chế độ tối (Dark Mode) vào trang website WordPress của bạn.

Tại sao nên thêm Dark Mode cho website WordPress?

1. Cải thiện trải nghiệm người dùng (UX)

Giảm mỏi mắt khi duyệt web vào ban đêm hoặc trong môi trường thiếu sáng.
Nâng cao sự thoải mái khi đọc nội dung, đặc biệt đối với những trang web có nhiều văn bản.

2. Tiết kiệm pin trên thiết bị di động

Các màn hình OLED và AMOLED tiêu thụ ít năng lượng hơn khi hiển thị nền tối, giúp kéo dài thời lượng pin trên điện thoại và laptop.

3. Tăng tính thẩm mỹ và chuyên nghiệp

Giao diện chế độ tối mang lại cảm giác hiện đại, tinh tế và thu hút hơn.
Tạo điểm nhấn khác biệt cho thương hiệu, giúp website trở nên chuyên nghiệp hơn.

4. Thu hút nhiều người dùng hơn

Nhiều người thích và ưu tiên sử dụng các website hỗ trợ Dark Mode.
Đáp ứng nhu cầu của người dùng hiện đại, đặc biệt là những người đã quen với chế độ tối trên các nền tảng như YouTube, Facebook, Twitter.

5. Cải thiện SEO & Thời gian truy cập trang

Người dùng thoải mái hơn khi lướt web, dẫn đến thời gian ở lại trang lâu hơn.
Tăng chỉ số Time on site (thời gian người dùng ở lại trang), giúp cải thiện thứ hạng trên Google.

Dark Mode không chỉ giúp trang web hiện đại hơn, mà còn cải thiện trải nghiệm người dùng, hỗ trợ SEO, và tiết kiệm năng lượng. Nếu bạn muốn nâng cấp website WordPress, đây là tính năng nên có!

Tích hợp Dark Mode cho website WordPress

Bước 1: Cài đặt và kích hoạt plugin

Truy cập trang quản trị WordPress của bạn.
Đi tới Plugins > Add New.
Tìm kiếm “WP Dark Mode”.
Nhấp vào Install Now và sau đó Activate.

Cài đặt và kích hoạt plugin WP Dark Mode

Bước 2: Thiết lập plugin

Sau khi kích hoạt, bạn sẽ thấy một mục WP Dark Mode trong menu bên trái. Nhấp vào đó để truy cập trang cài đặt.
Trang cài đặt WP Dark Mode có 5 tab chính: Controls, Customization, Advance, Analytics và Tools

2.1. Controls (Điều khiển)

Frontend Dark Mode

Enable Frontend Dark Mode: Bật chế độ tối cho giao diện người dùng
Choose how you want to use Dark Mode: Chọn cách bạn muốn sử dụng Chế độ tối
- Default Light Mode: Bật cài đặt này nếu bạn muốn chế độ sáng làm chế độ mặc định cho trang web của mình. Khách truy cập sẽ thấy trang web ở chế độ sáng trước.
- Default Dark Mode: Bật cài đặt này nếu bạn muốn chế độ tối làm chế độ mặc định cho trang web của mình. Khách truy cập sẽ thấy trang web ở chế độ tối trước.
- Use system settings: Chế độ tối sẽ được bật/tắt tùy thuộc vào cài đặt thiết bị của người dùng.

Bật chế độ tối cho giao diện người dùng

Admin Panel Dark Mode

Enable Admin Dashboard Dark Mode: Bật chế độ tối cho trang quản trị WordPress.
Block Editor Dark Mode: Chế độ tối của Trình chỉnh sửa khối

Sau khi thực hiện xong, bạn sẽ thấy nút chuyển chế độ tối nằm ở đầu bảng điều khiển WordPress của bạn.

Bật chế độ tối cho trang quản trị WordPress.

Từ đây, bạn có thể bật/tắt công tắc để kích hoạt chế độ này bất cứ khi nào bạn muốn.

2.2. Customization (Tùy chỉnh)

Switch Settings

Display Floating Switch: Bật tùy chọn này để hiển thị nút chuyển đổi chế độ tối/sáng trên giao diện người dùng. Bạn có thể bật/tắt cho cả Desktop, Tablet và Mobile
Floating Switch Styles: Chọn kiểu công tắc bật/tắt
Switch Customization: Chọn size, vị trí và hiệu ứng cho công tắc bật/tắt

Cấu hình công tắc chế độ tối cho trang web của bạn

Color Settings: Chọn màu cài đặt sẵn cho bảng màu chế độ tối.

Image Settings: Tùy chỉnh giao diện hình ảnh ở Chế độ tối

Video Settings: Tùy chỉnh giao diện video ở chế độ tối

Site Animation: Chọn hình ảnh động chuyển tiếp trang của bạn

2.3. Advanced (nâng cao)

Performance: Phần này cho phép bạn cấu hình để nâng cao hiệu suất
Exclude Settings: Tùy chỉnh giao diện hình ảnh trong Chế độ tối (chỉ dành cho bản có phí Ultimate)
Custom CSS: Mã CSS tùy chỉnh để áp dụng ở chế độ tối hoặc cả hai chế độ (chỉ dành cho bản có phí Ultimate)
Accessibility: Bật chế độ tối bằng phím tắt (Ctrl + Alt + D) hoặc sử dụng tham số URL/tên miền.
Shortcode: Bạn có thể tạo mã ngắn cho các công tắc chế độ tối
Switch Widget: Hiển thị chuyển đổi chế độ tối bằng tiện ích WordPress

2.4. Analytics

Cho phép bạn bật tính năng phân tích chế độ tối để theo dõi số lần khách truy cập trang web sử dụng chế độ tối trong một khoảng thời gian nhất định.

2.5. Tools

Cuối cùng là phần công cụ cho phép bạn xuất/nhập cài đặt hiện tại dưới dạng tệp JSON, giúp bạn sử dụng cho website khác mà không phải thiết lập cài đặt lại từ đầu

Bước 3: Lưu cài đặt

Sau khi hoàn tất cài đặt, nhấp vào nút Save Changes để lưu lại các thay đổi.

Bước 4: Kiểm tra

Truy cập website của bạn và kiểm tra chế độ tối.
Bạn có thể bật/tắt chế độ tối bằng nút ở góc màn hình (nếu bạn đã bật tính năng này).

Lưu ý

WP Dark Mode là một plugin miễn phí, nếu bạn muốn tùy chỉnh sâu hơn hãy cân nhắc sử dụng phiên bản Pro có phí là WP Dark Mode Ultimate
Nếu bạn gặp bất kỳ vấn đề nào, hãy tham khảo tài liệu của plugin hoặc liên hệ với nhà phát triển để được hỗ trợ.

Các tính năng vượt trội của WP Dark Mode Ultimate

Lên lịch chế độ tối – Lên lịch thời gian bật chế độ tối trên trang web của bạn và kiểm soát hoàn toàn giao diện trang web.
Truy cập 21 kiểu chuyển đổi chế độ tối nổi – Truy cập ngay vào 21 kiểu chuyển đổi chế độ tối tuyệt đẹp. Chọn nút chuyển đổi chế độ tối ưa thích của bạn để người dùng chuyển đổi chế độ tối.
Tùy chỉnh vị trí công tắc nổi Dark Mode – Tùy chỉnh vị trí công tắc chế độ tối. Bạn có thể đặt nó ở bất kỳ đâu trên trang web của mình.
Cài đặt trước màu chế độ tối cao cấp – 13 cài đặt trước màu chế độ tối độc quyền có sẵn để nhanh chóng thay đổi màu chế độ tối từ các cài đặt trước được xác định trước.
🔥 Tùy chỉnh màu cài sẵn – Điều chỉnh trải nghiệm chế độ tối của bạn một cách hoàn hảo. Chọn cài đặt trước và tùy chỉnh màu của mọi thành phần, bắt đầu từ phần thân và văn bản đến liên kết, trường nhập, nút và thậm chí cả thanh cuộn—chính xác theo cách bạn muốn.
🔥 Tạo cài đặt màu tùy chỉnh – Giải phóng Picasso bên trong bạn bằng cách tạo và tùy chỉnh cài đặt màu của bạn. Đắm mình vào bảng màu của các khả năng, định hình màu cho mọi thành phần – từ thân đến văn bản và thanh cuộn.
Chế độ tối tự động dựa trên thời gian hoàng hôn – Tự động bật chế độ tối dựa trên thời gian của khách truy cập.
Hỗ trợ CSS tùy chỉnh – Với CSS tùy chỉnh, bạn sẽ có phiên bản chế độ tối hoàn hảo cho trang web của mình. Tùy chỉnh các phần/yếu tố cụ thể chính xác theo cách bạn muốn ở chế độ tối.
🔥 Nhiều tùy chọn chuyển đổi – Chuyển đổi giữa các tùy chọn chuyển đổi chế độ tối khác nhau. Cho dù bạn cần chuyển đổi menu, chuyển đổi nổi hay chuyển đổi nội dung cho bài đăng/trang của mình, quyền quyết định nằm ở bạn. Nhận kiểu chuyển đổi riêng biệt cho từng phần.
Hỗ trợ công tắc tùy chỉnh với tùy chỉnh lời kêu gọi hành động – Tải lên công tắc tùy chỉnh theo lựa chọn của riêng bạn và tùy chỉnh văn bản lời kêu gọi hành động trên công tắc chế độ tối của bạn.
Thay thế hình ảnh ở chế độ tối – Thay thế hình ảnh ở chế độ sáng bằng các hình ảnh khác nhau mà bạn muốn ở chế độ tối.
Thay thế video ở chế độ tối – Nếu trang web của bạn có video, bạn có thể thay thế chúng bằng nội dung phù hợp hơn với chế độ tối.
🔥 Điều chỉnh mức độ sáng và áp dụng hiệu ứng thang độ xám – Điều chỉnh mức độ sáng của hình ảnh và video khi bật chế độ tối để có trải nghiệm xem nội dung đắm chìm. Bạn cũng có thể thêm hiệu ứng thang độ xám vào hình ảnh/video, mang lại nhiều lợi ích cho sức khỏe, bao gồm ngủ ngon hơn và giảm mỏi mắt.
Loại trừ chế độ tối trên một số trang/thành phần nhất định – Loại trừ các trang/thành phần cụ thể khỏi việc chuyển sang chế độ tối.
Bao gồm Chế độ tối trên các bài đăng và trang đã chọn – Loại trừ tất cả các trang và bài đăng trên trang web của bạn khỏi chế độ tối, ngoại trừ những trang và bài đăng cụ thể (mà bạn muốn sử dụng chế độ tối).
Loại trừ Thẻ bài viết & Danh mục – Loại trừ tất cả các thẻ bài viết khỏi chế độ tối. Chỉ giữ lại các thẻ cụ thể được cho phép trong chế độ tối.
Bao gồm Chế độ tối trên Loại bài đăng tùy chỉnh – Bạn cũng có thể chỉ bật chế độ tối cho các loại bài đăng cụ thể, loại trừ tất cả.
Loại trừ Sản phẩm & Danh mục WooCommerce – Loại trừ tất cả sản phẩm và danh mục trên trang web WooCommerce của bạn khỏi chế độ tối, ngoại trừ những sản phẩm và danh mục cụ thể.
Chuyển đổi chế độ tối trong menu trang web – Bạn có thể hiển thị chuyển đổi chế độ tối dưới dạng mục menu trên bất kỳ menu nào trên trang web của mình.
Thay đổi kích thước phông chữ để truy cập tốt hơn Làm cho trang web WordPress của bạn dễ truy cập hơn bằng cách thay đổi kích thước phông chữ (tăng/giảm).
Nhiều tùy chọn hiệu suất – WP Dark Mode hiện có nhiều cài đặt hiệu suất, giúp bạn kiểm soát hoàn toàn. Bằng cách sử dụng các tính năng này, bạn có thể cải thiện hiệu suất tải trang và theo dõi nội dung động.
Chọn chế độ tối – Bạn có thể chọn giữa việc tải chế độ tối hoặc nội dung trang web trước bằng cách chọn các tùy chọn này.
Báo cáo qua email theo lịch trình về việc sử dụng chế độ tối – Nhận báo cáo hàng ngày/hàng tuần qua email về phân tích chế độ tối của trang web của bạn.

Kết Luận

WP Dark Mode là một plugin mạnh mẽ giúp cải thiện trải nghiệm người dùng và hỗ trợ tối ưu SEO. Bằng cách cài đặt và cấu hình đúng cách, bạn có thể mang lại giao diện hiện đại hơn cho trang web của mình

WP Dark Mode hoạt động hoàn hảo trên mọi hệ điều hành bao gồm Windows, Android, iOS và macOS. Không cần thiết lập thêm. Plugin chế độ tối này phát hiện thông minh các tùy chọn thiết bị và cung cấp trải nghiệm chủ đề tối thủ công, được thiết kế chuyên nghiệp cho người đọc của bạn. Một bước nhanh chóng và dễ dàng để thêm nút chuyển đổi chế độ tối vào trang web của bạn để chuyển đổi giữa chế độ tối và sáng bất cứ lúc nào bạn muốn.

Chỉ cần kích hoạt chế độ tối trên thiết bị của bạn và duyệt trang web để trải nghiệm chế độ tối được biến đổi kỳ diệu của trang web. WP Dark Mode hỗ trợ tất cả các hệ điều hành chính bao gồm iOS, Android, macOS hoặc Windows 10. Chế độ tối của WordPress hiện cực kỳ dễ dàng!

Chúc các bạn thành công !!!

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