从 ZBlog 到 WordPress：一个业余博主的建站心路历程

作为一名博主，我对建站的热情始于对内容创作和个性化网站的追求。多年来，我尝试过各种内容管理系统（CMS），从国内流行的 ZBlog 到国际化的 WordPress，每一步都充满了探索与挑战。今天，我想分享我在 ZBlog 建站的经历，特别是那段为实现弹窗登录 API 而奋斗的日子，以及最终转向 WordPress 的心路历程。

初识 ZBlog：简单而灵活的起点我的建站之旅始于 ZBlogPHP，这是一个轻量、易用的国人开发的 CMS，非常适合个人博客和小型网站。ZBlog 的安装过程简单，社区支持也不错，尤其是它的插件和主题生态让我这个新手感到友好。我选择了拓源主题（Toyean Theme），一款设计简洁、响应式布局的主题，特别适合展示文章和图片内容。

拓源主题的默认样式已经很美观，但作为一个喜欢折腾的业余博主，我当然不会满足于“开箱即用”。我花了不少时间修改主题的 CSS 和 PHP 模板，调整配色、字体、布局，甚至添加了一些动态效果，比如悬浮按钮和自定义导航栏。经过一番努力，网站变得既符合我的审美，又带有浓厚的个人风格，看着自己的成果上线，成就感满满。然而，真正让我投入大量精力的，是一个看似简单的功能——弹窗登录系统。

弹窗登录的野心：打造无缝用户体验作为一个追求用户体验的博主，我希望网站能有一个现代化的弹窗登录界面，而不是传统的登录页面跳转。弹窗登录不仅美观，还能让用户在不离开当前页面的情况下快速登录，提升交互体验。于是，我开始着手开发一套基于拓源主题的弹窗登录系统，前端使用 HTML、CSS 和 jQuery，后端则需要调用 ZBlog 的登录 API。前端部分相对顺利。我设计了一个简洁的登录弹窗，包含用户名、密码、记住我（保存登录状态的天数）等字段，通过 AJAX 发送请求到后端 API。代码如下：

<div id="loginModal" style="display:none;">
    <form id="loginForm">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <input type="number" name="savedate" value="30" min="0">
        <input type="hidden" name="scrtoken" value="<?php echo md5(uniqid(rand(), true)); ?>">
        <button type="submit">登录</button>
    </form>
</div>
<script>
    $('#loginForm').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '<?php echo $zbp->host; ?>api/user',
            type: 'POST',
            data: $(this).serialize() + '&action=login',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    alert('登录成功！');
                    window.location.href = response.redirect;
                } else {
                    alert(response.message);
                }
            }
        });
    });
</script>

add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/login', array(
        'methods' => 'POST',
        'callback' => function (WP_REST_Request $request) {
            $username = $request->get_param('username');
            $password = $request->get_param('password');
            $user = wp_signon(array(
                'user_login' => $username,
                'user_password' => $password,
                'remember' => true
            ));
            if (is_wp_error($user)) {
                return new WP_REST_Response(array('success' => false, 'message' => $user->get_error_message()), 401);
            }
            return new WP_REST_Response(array('success' => true, 'message' => '登录成功！', 'redirect' => home_url('/dashboard')));
        }
    ));
});