Thêm chế độ tối cho website WordPress dễ dàng

Thêm Chế Độ Tối Cho Website WordPress Dễ Dàng

Chế độ tối (Dark Mode) đã trở thành một xu hướng phổ biến trong thiết kế web, mang lại nhiều lợi ích cho người dùng, đặc biệt là giảm mỏi mắt khi sử dụng website trong điều kiện ánh sáng yếu. Việc thêm chế độ tối cho website WordPress của bạn không chỉ cải thiện trải nghiệm người dùng mà còn thể hiện sự quan tâm đến sức khỏe của khách truy cập.

Bài viết này sẽ hướng dẫn bạn các cách đơn giản và hiệu quả để tích hợp chế độ tối vào website WordPress của bạn.

Lợi Ích Của Chế Độ Tối

Trước khi đi vào các phương pháp cụ thể, hãy cùng điểm qua những lợi ích mà chế độ tối mang lại:

Giảm mỏi mắt, đặc biệt vào ban đêm.
Tiết kiệm pin cho các thiết bị có màn hình OLED hoặc AMOLED.
Cải thiện khả năng đọc trong điều kiện ánh sáng yếu.
Mang lại diện mạo hiện đại và hấp dẫn cho website.
Tăng thời gian người dùng ở lại trên website.

Các Phương Pháp Thêm Chế Độ Tối Vào WordPress

Có nhiều cách để thêm chế độ tối vào website WordPress của bạn, từ việc sử dụng plugin đến chỉnh sửa code trực tiếp. Dưới đây là một số phương pháp phổ biến:

Sử Dụng Plugin WordPress

Đây là phương pháp đơn giản và nhanh chóng nhất, phù hợp với người dùng không có nhiều kiến thức về code. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thêm chế độ tối vào website WordPress một cách dễ dàng.

Một số plugin phổ biến:

Dark Mode for WordPress: Plugin này cung cấp nhiều tùy chọn tùy chỉnh, cho phép bạn điều chỉnh màu sắc, biểu tượng chuyển đổi và vị trí hiển thị.
WP Dark Mode: Một plugin mạnh mẽ khác với nhiều tính năng nâng cao, bao gồm chế độ tự động chuyển đổi dựa trên thời gian trong ngày hoặc cài đặt hệ thống của người dùng.
Night Mode: Plugin đơn giản, dễ sử dụng, phù hợp cho những người mới bắt đầu.

Hướng dẫn cài đặt và sử dụng plugin:

Truy cập trang quản trị WordPress của bạn.
Vào mục Plugins > Add New.
Tìm kiếm tên plugin bạn muốn sử dụng (ví dụ: “Dark Mode for WordPress”).
Nhấn nút Install Now và sau đó Activate.
Truy cập trang cài đặt của plugin để cấu hình các tùy chọn theo ý muốn.

Chỉnh Sửa Code (CSS và JavaScript)

Nếu bạn có kiến thức về CSS và JavaScript, bạn có thể tự mình thêm chế độ tối vào website WordPress bằng cách chỉnh sửa code. Phương pháp này đòi hỏi sự cẩn thận và kiến thức kỹ thuật, nhưng nó mang lại sự linh hoạt cao hơn trong việc tùy chỉnh giao diện.

Các bước thực hiện:

Tạo CSS tùy chỉnh cho chế độ tối: Bạn cần tạo một file CSS riêng để chứa các style cho chế độ tối. File CSS này sẽ ghi đè các style mặc định khi chế độ tối được kích hoạt. Ví dụ:


    /* style.css */
    body {
        background-color: #fff;
        color: #000;
    }

    .dark-mode body {
        background-color: #000;
        color: #fff;
    }

    .dark-mode h1, .dark-mode h2, .dark-mode h3 {
        color: #ddd;
    }

Thêm JavaScript để chuyển đổi chế độ: Bạn cần sử dụng JavaScript để thêm hoặc loại bỏ class .dark-mode khỏi thẻ <body> khi người dùng nhấp vào nút chuyển đổi. Ví dụ:


    // script.js
    const darkModeToggle = document.getElementById('dark-mode-toggle');

    darkModeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
    });

Thêm nút chuyển đổi vào website: Bạn có thể thêm một nút chuyển đổi (ví dụ: một checkbox hoặc một nút đơn giản) vào header hoặc footer của website. Nút này sẽ gọi hàm JavaScript để chuyển đổi chế độ tối.

Sử dụng wp_enqueue_scripts để thêm CSS và JavaScript vào WordPress: Bạn cần sử dụng hàm wp_enqueue_scripts trong file functions.php của theme để thêm file CSS và JavaScript vào website. Ví dụ:


    // functions.php
    function my_theme_scripts() {
        wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
        wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Sử Dụng CSS Custom Properties (Variables)

CSS Custom Properties (còn gọi là CSS Variables) là một tính năng mạnh mẽ cho phép bạn định nghĩa các biến trong CSS và sử dụng chúng để lưu trữ các giá trị màu sắc, kích thước, hoặc bất kỳ giá trị CSS nào khác. Điều này giúp bạn dễ dàng thay đổi giao diện của website một cách đồng bộ và linh hoạt, đặc biệt là khi triển khai chế độ tối.

Ưu điểm của CSS Custom Properties:

Dễ dàng thay đổi màu sắc và các thuộc tính khác trên toàn bộ website.
Code dễ đọc và dễ bảo trì hơn.
Tăng tính linh hoạt và khả năng tùy biến của giao diện.

Ví dụ:

Định nghĩa các biến màu sắc:


    :root {
        --bg-color: #fff;
        --text-color: #000;
    }

    body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    .dark-mode {
        --bg-color: #000;
        --text-color: #fff;
    }

Sử dụng JavaScript để chuyển đổi class: Tương tự như phương pháp chỉnh sửa code trực tiếp, bạn cần sử dụng JavaScript để thêm hoặc loại bỏ class .dark-mode khỏi thẻ <body> khi người dùng nhấp vào nút chuyển đổi.

Lưu Ý Quan Trọng Khi Triển Khai Chế Độ Tối

Dù bạn chọn phương pháp nào, hãy lưu ý những điều sau để đảm bảo chế độ tối hoạt động tốt và mang lại trải nghiệm tốt nhất cho người dùng:

Kiểm tra kỹ lưỡng trên nhiều thiết bị và trình duyệt: Đảm bảo chế độ tối hiển thị đúng cách trên các thiết bị di động, máy tính bảng và máy tính để bàn, cũng như trên các trình duyệt phổ biến như Chrome, Firefox, Safari và Edge.
Chú ý đến khả năng đọc: Đảm bảo rằng văn bản vẫn dễ đọc trong chế độ tối. Sử dụng độ tương phản cao giữa văn bản và nền để tránh gây mỏi mắt.
Tối ưu hóa hình ảnh: Một số hình ảnh có thể không hiển thị tốt trong chế độ tối. Cân nhắc việc sử dụng các phiên bản hình ảnh khác nhau cho chế độ sáng và chế độ tối, hoặc sử dụng CSS filters để điều chỉnh màu sắc của hình ảnh.
Kiểm tra khả năng truy cập: Đảm bảo rằng chế độ tối tuân thủ các nguyên tắc về khả năng truy cập web (WCAG).

Kết Luận

Thêm chế độ tối vào website WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và mang lại một diện mạo hiện đại cho website của bạn. Bạn có thể chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của mình, từ việc sử dụng plugin đơn giản đến chỉnh sửa code trực tiếp. Dù bạn chọn phương pháp nào, hãy nhớ kiểm tra kỹ lưỡng và tối ưu hóa để đảm bảo chế độ tối hoạt động tốt và mang lại lợi ích thực sự cho người dùng.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Thêm chế độ tối cho website WordPress dễ dàng