如何在WordPress网站上实现暗黑模式(无需插件)

这篇文章介绍了如何在WordPress网站上实现暗黑模式，但需要一些编码知识。如果你不熟悉编码，可以考虑使用插件来实现暗黑模式功能。以下是一些常用的WordPress插件：

WP Dark Mode
Dark Mode
Night Eye
WP Night Mode

这些插件都很容易使用，只需要安装和激活即可。如果你想要更多的自定义选项，可以选择更高级的插件或者找到一个适合自己的主题。

实现暗黑模式的步骤

以下是如何在WordPress网站上实现暗黑模式的步骤：

创建CSS样式: 定义一个CSS类，例如'cwp_dark'，用于控制暗黑模式下的样式。
创建切换按钮: 使用shortcode创建一个切换按钮，允许用户开启或关闭暗黑模式。
保存用户偏好: 使用Cookies或用户元数据来保存用户的偏好设置，以便在用户访问网站时自动应用相应的样式。
添加JavaScript代码: 添加JavaScript代码，根据用户的偏好设置来动态添加或移除'cwp_dark'类，实现无刷新切换暗黑模式。

代码示例

function cwpai_darkmode_shortcode() {
    if (is_user_logged_in()) {
        $user_id = get_current_user_id();
        $darkmode = get_user_meta($user_id, 'cwp_dark', true);
        if ($darkmode == 1) {
            $checked = 'checked';
        } else {
            $checked = '';
        }
        $output = '<input type="checkbox" id="cwp_darkmode" name="cwp_darkmode" value="1" ' . $checked . '>';
        $output .= '<label for="cwp_darkmode">Dark Mode</label>';
        $output .= '<script>
            jQuery(document).ready(function($) {
                $("#cwp_darkmode").change(function() {
                    var darkmode = $(this).prop("checked");
                    if (darkmode == true) {
                        var darkmode = 1;
                    } else {
                        var darkmode = 0;
                    }
                    $.ajax({
                        type: "POST",
                        url: "' . admin_url('admin-ajax.php') . '",
                        data: {
                            action: "cwpai_darkmode",
                            darkmode: darkmode
                        },
                        success: function(data) {
                            if (darkmode == 1) {
                                $("body").addClass("cwp_dark");
                            } else {
                                $("body").removeClass("cwp_dark");
                            }
                        }
                    });
                });
            });
        </script>';
    } else {
        if (isset($_COOKIE['cwp_dark'])) {
            $checked = 'checked';
        } else {
            $checked = '';
        }
        $output = '<input type="checkbox" id="cwp_darkmode" name="cwp_darkmode" value="1" ' . $checked . '>';
        $output .= '<label for="cwp_darkmode">Dark Mode</label>';
        $output .= '<script>
            jQuery(document).ready(function($) {
                $("#cwp_darkmode").change(function() {
                    var darkmode = $(this).prop("checked");
                    if (darkmode == true) {
                        document.cookie = "cwp_dark=1; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
                        $("body").addClass("cwp_dark");
                    } else {
                        document.cookie = "cwp_dark=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                        $("body").removeClass("cwp_dark");
                    }
                });
            });
        </script>';
    }
    return $output;
}
add_shortcode('darkmode', 'cwpai_darkmode_shortcode');
function cwpai_darkmode_ajax() {
    $user_id = get_current_user_id();
    $darkmode = $_POST['darkmode'];
    update_user_meta($user_id, 'cwp_dark', $darkmode);
    die();
}
add_action('wp_ajax_cwpai_darkmode', 'cwpai_darkmode_ajax');
add_action('wp_ajax_nopriv_cwpai_darkmode', 'cwpai_darkmode_ajax');
function cwpai_darkmode_body_class($classes) {
    if (is_user_logged_in()) {
        $user_id = get_current_user_id();
        $darkmode = get_user_meta($user_id, 'cwp_dark', true);
        if ($darkmode == 1) {
            $classes[] = 'cwp_dark';
        }
    } else {
        if (isset($_COOKIE['cwp_dark'])) {
            $classes[] = 'cwp_dark';
        }
    }
    return $classes;
}
add_filter('body_class', 'cwpai_darkmode_body_class');

总结

通过上述步骤，你就可以在WordPress网站上实现一个功能完善的暗黑模式，并根据用户的偏好设置自动切换。

注意事项

以上代码需要在WordPress主题的functions.php文件中添加。
确保你已创建了相应的CSS样式，用于控制暗黑模式下的网站外观。
你可以使用插件或其他方式来美化切换按钮的样式。

希望这篇文章能帮助你成功实现WordPress网站的暗黑模式。