Thêm chế độ tối WordPress admin

2 tháng ago, WordPress Plugin, 1 Views

Giới Thiệu về Chế Độ Tối và Tại Sao Nên Sử Dụng Cho Trang Quản Trị WordPress

Trong thời đại số, màn hình là một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta. Việc sử dụng máy tính, điện thoại liên tục có thể gây mỏi mắt, đặc biệt là trong điều kiện ánh sáng yếu. Chế độ tối (Dark Mode) đã trở thành một tính năng phổ biến trên nhiều hệ điều hành và ứng dụng, mang lại trải nghiệm xem tốt hơn, giảm căng thẳng cho mắt và thậm chí tiết kiệm pin trên các thiết bị có màn hình OLED.

Đối với người dùng WordPress, việc dành nhiều thời gian trên trang quản trị (admin dashboard) là điều thường xuyên. Do đó, việc thêm chế độ tối cho trang quản trị WordPress có thể mang lại nhiều lợi ích:

Giảm mỏi mắt: Chế độ tối giảm lượng ánh sáng xanh phát ra từ màn hình, giúp giảm căng thẳng và mỏi mắt, đặc biệt khi làm việc vào ban đêm hoặc trong môi trường thiếu sáng.
Cải thiện trải nghiệm người dùng: Nhiều người dùng cảm thấy thoải mái hơn khi làm việc với giao diện tối màu, đặc biệt là những người nhạy cảm với ánh sáng.
Tiết kiệm pin (trên màn hình OLED): Mặc dù không đáng kể như trên điện thoại, việc sử dụng chế độ tối có thể giúp tiết kiệm một chút pin trên các máy tính xách tay có màn hình OLED.
Tính thẩm mỹ: Một số người dùng đơn giản là thích giao diện tối màu hơn và cảm thấy nó hiện đại và chuyên nghiệp hơn.

Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm chế độ tối cho trang quản trị WordPress của mình bằng nhiều phương pháp khác nhau, từ sử dụng plugin đến tùy chỉnh CSS.

Sử Dụng Plugin để Thêm Chế Độ Tối

Đây là phương pháp đơn giản và nhanh chóng nhất để thêm chế độ tối cho trang quản trị WordPress. Có rất nhiều plugin miễn phí và trả phí có sẵn trên kho plugin WordPress. Dưới đây là một vài plugin được đánh giá cao:

Dark Mode for WordPress: Plugin này cung cấp một giải pháp đơn giản và hiệu quả để bật/tắt chế độ tối cho cả trang quản trị và giao diện người dùng. Bạn có thể tùy chỉnh màu sắc và chuyển đổi giữa chế độ sáng và tối một cách dễ dàng.
Night Mode WordPress: Plugin này tập trung vào việc bảo vệ mắt bằng cách cung cấp nhiều chế độ ánh sáng khác nhau, bao gồm chế độ tối. Nó cũng cho phép bạn điều chỉnh độ sáng và độ tương phản để có trải nghiệm tốt nhất.
WP Dark Mode: Một plugin mạnh mẽ với nhiều tính năng tùy chỉnh, bao gồm khả năng chọn màu sắc, thêm logo và thậm chí tự động kích hoạt chế độ tối dựa trên thời gian trong ngày.

Hướng dẫn Cài Đặt và Sử Dụng Plugin

Đăng nhập vào trang quản trị WordPress của bạn.
Đi tới “Plugins” > “Add New”.
Tìm kiếm plugin bạn muốn sử dụng (ví dụ: “Dark Mode for WordPress”).
Nhấn “Install Now” và sau đó “Activate”.
Sau khi kích hoạt, hãy tìm cài đặt của plugin (thường nằm trong menu “Settings” hoặc một tab mới trong menu admin).
Tùy chỉnh cài đặt theo sở thích của bạn. Hầu hết các plugin đều cho phép bạn chọn màu sắc và cách chuyển đổi giữa chế độ sáng và tối.
Lưu lại các thay đổi.

Sau khi cài đặt và cấu hình plugin, chế độ tối sẽ được áp dụng cho trang quản trị WordPress của bạn. Bạn có thể dễ dàng bật/tắt chế độ tối bằng một nút chuyển đổi được cung cấp bởi plugin.

Tùy Chỉnh CSS để Thêm Chế Độ Tối

Nếu bạn muốn kiểm soát nhiều hơn về giao diện chế độ tối của mình, bạn có thể sử dụng CSS để tùy chỉnh. Phương pháp này đòi hỏi một chút kiến thức về CSS, nhưng nó cho phép bạn tạo ra một chế độ tối độc đáo và phù hợp với phong cách của trang web của bạn.

Thêm CSS Tùy Chỉnh vào WordPress

Có nhiều cách để thêm CSS tùy chỉnh vào WordPress. Dưới đây là hai cách phổ biến nhất:

Sử dụng Customizer: WordPress Customizer cho phép bạn thêm CSS tùy chỉnh một cách dễ dàng mà không cần chỉnh sửa trực tiếp các tệp tin chủ đề. Để truy cập Customizer, hãy đi tới “Appearance” > “Customize”. Sau đó, tìm mục “Additional CSS” và thêm CSS của bạn vào đó.
Sử dụng Child Theme: Tạo một child theme là một cách tốt để tùy chỉnh giao diện WordPress của bạn mà không làm ảnh hưởng đến chủ đề gốc. Sau khi tạo child theme, bạn có thể thêm CSS tùy chỉnh vào tệp tin style.css của child theme.

Ví Dụ CSS cho Chế Độ Tối

Dưới đây là một ví dụ CSS đơn giản để tạo chế độ tối cho trang quản trị WordPress. Bạn có thể tùy chỉnh các giá trị màu sắc để phù hợp với sở thích của mình:

/* Chế độ tối cho trang quản trị WordPress */

    body.dark-mode {
        background-color: #333;
        color: #eee;
    }

    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6 {
        color: #fff;
    }

    body.dark-mode a {
        color: #81a1c1; /* Màu xanh lam nhạt */
    }

    body.dark-mode a:hover {
        color: #b48ead; /* Màu tím nhạt */
    }

    body.dark-mode .wp-admin select,
    body.dark-mode .wp-admin input[type="text"],
    body.dark-mode .wp-admin input[type="password"],
    body.dark-mode .wp-admin input[type="email"],
    body.dark-mode .wp-admin input[type="number"],
    body.dark-mode .wp-admin input[type="url"],
    body.dark-mode .wp-admin textarea {
        background-color: #444;
        color: #eee;
        border: 1px solid #555;
    }

    body.dark-mode .wp-admin .button,
    body.dark-mode .wp-admin .button-primary {
        background-color: #5e81ac;
        color: #fff;
        border-color: #4c566a;
    }

    body.dark-mode .wp-admin .button:hover,
    body.dark-mode .wp-admin .button-primary:hover {
        background-color: #4c566a;
        border-color: #3b4252;
    }

Lưu ý rằng đoạn CSS này chỉ là một ví dụ cơ bản. Bạn có thể cần phải tùy chỉnh thêm để đảm bảo rằng tất cả các thành phần của trang quản trị WordPress đều được hiển thị đúng cách trong chế độ tối.

Thêm Lớp CSS “dark-mode” vào Thẻ Body

Để kích hoạt chế độ tối, bạn cần thêm lớp CSS dark-mode vào thẻ body của trang quản trị WordPress. Bạn có thể làm điều này bằng cách sử dụng JavaScript hoặc bằng cách chỉnh sửa trực tiếp các tệp tin chủ đề (nếu bạn có quyền truy cập).

Dưới đây là một ví dụ JavaScript đơn giản để thêm/xóa lớp CSS dark-mode khi người dùng nhấp vào một nút:

// JavaScript để bật/tắt chế độ tối
    const darkModeButton = document.getElementById('dark-mode-button');

    if (darkModeButton) {
        darkModeButton.addEventListener('click', function() {
            document.body.classList.toggle('dark-mode');
        });
    }

Bạn cần thêm nút #dark-mode-button vào trang quản trị WordPress của mình. Bạn có thể thực hiện điều này bằng cách sử dụng một plugin hoặc bằng cách chỉnh sửa trực tiếp các tệp tin chủ đề.

Sử Dụng User Scripts với Tiện Ích Trình Duyệt

Một phương pháp khác để thêm chế độ tối là sử dụng user scripts kết hợp với các tiện ích trình duyệt như Tampermonkey (cho Chrome, Firefox, Safari, Edge) hoặc Greasemonkey (cho Firefox). User scripts là các đoạn mã JavaScript nhỏ có thể được chèn vào bất kỳ trang web nào, cho phép bạn tùy chỉnh giao diện và hành vi của trang web đó.

Ưu điểm của User Scripts

Không cần cài đặt plugin: User scripts chạy trực tiếp trên trình duyệt của bạn, không cần cài đặt plugin WordPress.
Tùy chỉnh cao: Bạn có toàn quyền kiểm soát cách chế độ tối được triển khai.
Áp dụng cho nhiều trang web: User scripts có thể được sử dụng để thêm chế độ tối cho bất kỳ trang web nào, không chỉ WordPress.

Hướng dẫn Sử Dụng User Scripts

Cài đặt một tiện ích quản lý user script: Cài đặt Tampermonkey (khuyên dùng) hoặc Greasemonkey cho trình duyệt của bạn.
Tạo một user script mới: Nhấp vào biểu tượng tiện ích quản lý user script và chọn “Create a new script”.
Sao chép và dán mã user script: Sao chép và dán mã user script (ví dụ bên dưới) vào trình soạn thảo.
Lưu user script: Lưu user script.
Truy cập trang quản trị WordPress: User script sẽ tự động chạy khi bạn truy cập trang quản trị WordPress.

Ví Dụ User Script cho Chế Độ Tối

Dưới đây là một ví dụ user script đơn giản để thêm chế độ tối cho trang quản trị WordPress:

// ==UserScript==
    // @name         WordPress Admin Dark Mode
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Adds a dark mode toggle to the WordPress admin interface.
    // @author       You
    // @match        */wp-admin/*
    // @grant        GM_addStyle
    // ==/UserScript==

    (function() {
        'use strict';

        // Add a button to toggle dark mode
        let darkModeButton = document.createElement('button');
        darkModeButton.id = 'dark-mode-button';
        darkModeButton.textContent = 'Toggle Dark Mode';
        darkModeButton.style.position = 'fixed';
        darkModeButton.style.top = '20px';
        darkModeButton.style.right = '20px';
        darkModeButton.style.zIndex = '9999';
        document.body.appendChild(darkModeButton);

        // Add dark mode CSS
        GM_addStyle(`
            body.dark-mode {
                background-color: #333 !important;
                color: #eee !important;
            }

            body.dark-mode h1,
            body.dark-mode h2,
            body.dark-mode h3,
            body.dark-mode h4,
            body.dark-mode h5,
            body.dark-mode h6 {
                color: #fff !important;
            }

            body.dark-mode a {
                color: #81a1c1 !important;
            }

            body.dark-mode a:hover {
                color: #b48ead !important;
            }

            body.dark-mode .wp-admin select,
            body.dark-mode .wp-admin input[type="text"],
            body.dark-mode .wp-admin input[type="password"],
            body.dark-mode .wp-admin input[type="email"],
            body.dark-mode .wp-admin input[type="number"],
            body.dark-mode .wp-admin input[type="url"],
            body.dark-mode .wp-admin textarea {
                background-color: #444 !important;
                color: #eee !important;
                border: 1px solid #555 !important;
            }

            body.dark-mode .wp-admin .button,
            body.dark-mode .wp-admin .button-primary {
                background-color: #5e81ac !important;
                color: #fff !important;
                border-color: #4c566a !important;
            }

            body.dark-mode .wp-admin .button:hover,
            body.dark-mode .wp-admin .button-primary:hover {
                background-color: #4c566a !important;
                border-color: #3b4252 !important;
            }
        `);

        // Toggle dark mode on button click
        darkModeButton.addEventListener('click', function() {
            document.body.classList.toggle('dark-mode');
        });
    })();

User script này sẽ thêm một nút “Toggle Dark Mode” vào góc trên bên phải của trang quản trị WordPress. Khi bạn nhấp vào nút này, chế độ tối sẽ được bật/tắt.

Lời Khuyên và Lưu Ý Khi Thêm Chế Độ Tối

Kiểm tra kỹ lưỡng: Sau khi thêm chế độ tối, hãy kiểm tra kỹ lưỡng tất cả các trang và thành phần của trang quản trị WordPress để đảm bảo rằng chúng được hiển thị đúng cách.
Tương thích với plugin: Một số plugin có thể không tương thích với chế độ tối. Hãy kiểm tra xem các plugin bạn đang sử dụng có tương thích với chế độ tối hay không.
Sao lưu dữ liệu: Trước khi thực hiện bất kỳ thay đổi nào đối với các tệp tin chủ đề của bạn, hãy sao lưu dữ liệu để tránh mất dữ liệu trong trường hợp có sự cố xảy ra.

Việc thêm chế độ tối cho trang quản trị WordPress có thể cải thiện đáng kể trải nghiệm người dùng và giảm mỏi mắt. Hãy thử các phương pháp khác nhau được đề cập trong bài viết này và chọn phương pháp phù hợp nhất với nhu cầu và kỹ năng của bạn.

admin

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