WordPress网站无需插件实现暗模式 - 代码示例

本文将介绍如何在WordPress网站上实现暗模式，而无需使用插件或第三方库或解决方案。

对于这个具体的用例，我有一些要求。首先，我希望当用户切换到暗模式时，它能够立即显示在网站上，而无需重新加载页面。我还希望它能够记住用户的偏好，无论他们是否登录。为了实现这一功能，我决定使用Cookie来记住未登录用户的偏好，但如果用户已登录，则使用更持久化的WordPress数据库。

暗模式的实际切换比较简单。我们只需在 body 元素中添加一个 class，然后可以使用 CSS 创建一个暗模式样式表。

/* 标准卡样式 */
.custom_card {
background: white;
}

/* 暗模式卡样式 */
body.cwp_dark .custom_card {
background: black;
}

主要代码段

为了测试 CodeWP 的功能，我想一次性创建代码段。这样做的好处是代码将保持一致性和相关性，这意味着我不需要进行切换占位符类和其他通用元素。

以下是我提供的提示。在进入生成器时，我排除了项目符号，只使用换行符。

名为'darkmode'的复选框的简码。 如果用户已登录且复选框已选中，则使用 AJAX 将用户的“cwp_dark”元字段设置为 1，如果未选中则设置为 0。如果该字段等于 1，则将 body 类设置为“cwp_dark”。 包含 AJAX 函数代码。 如果用户未登录且复选框已选中，则设置 cookie“cwp_dark”，如果未选中则删除 cookie。如果存在 cookie，则将 body 类设置为“cwp_dark”。 如果 usermeta 为 1，或存在 cookie，则将类“cwp_dark”添加到 body，并使复选框选中。 在页脚添加 JS，根据复选框状态切换类“cwp_dark”（无需重新加载页面）。

这个提示的思路比较简单。首先，我们将创建一个简码，将切换元素添加到前端。

然后，如果切换了，并且用户已登录，我们将使用 AJAX 更新数据库中的用户偏好。如果用户未登录，我们将设置一个 cookie，它将保存用户的偏好在浏览器中。

如果选中，或如果通过 cookie 或 user meta-value 切换了暗模式，我们将向 body 添加一个类。

最后，我还想确保包括 JavaScript，它将在不重新加载页面的情况下向 body 添加类。因此，当用户选中复选框时，它会立即在暗模式和亮模式之间切换，同时记住用户在将来访问网站或导航到新页面时的偏好。

以下是我们得到的代码。

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');

COPY GENERATION ID: 7851

它在第一次运行时就能完美地工作（只要您已经创建了自定义暗模式样式表）。为了提高生产网站的性能，我会将 jQuery 从简码中移出，并在前端页脚中对其进行排队。

function cwpai_enqueue_custom_js() {
    global $post;
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'need_to_be_here')) {
        wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/custom.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'cwpai_enqueue_custom_js');

COPY GENERATION ID: 7858

提示：// 在页脚中排队文件“custom.js”，仅当页面上存在简码“need_to_be_here”时。

^^ 这是一个优雅的做法。

我现在唯一想做的事情就是将该复选框样式化，使其更具视觉吸引力。为此，我将跳转到 CodePen，找到一些 CSS 来设置暗模式切换的样式，然后将其添加到我的项目中。

就这样，您无需插件即可在 WordPress 网站上添加一个非常健壮的暗模式功能。