博客 Banner 动态化与手机端优化实战

一、Banner 照片动态化

1.1 需求分析

博客首页原本使用固定的 Unsplash 链接作为 Banner 背景图，每次刷新都是同一张照片。我希望实现：

• 照片存储在数据库中
• 支持本地上传和 URL 添加两种方式
• 每次刷新页面随机展示一张已启用的照片
• 提供管理页面上传、启用/停用、删除照片

1.2 数据库设计

在 WordPress 数据库中新建 wp_banner_photos 表：

CREATE TABLE wp_banner_photos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    photo_url VARCHAR(500) NOT NULL,
    photo_title VARCHAR(200) DEFAULT '',
    is_active TINYINT(1) DEFAULT 1,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

预置了 5 张 Unsplash 高质量风景照作为默认 Banner。

1.3 主题函数修改

在 functions.php 中添加 easybe2_get_banner_image() 函数：

function easybe2_get_banner_image() {
    global $wpdb;
    $table = $wpdb->prefix . 'banner_photos';

    $exists = $wpdb->get_var("SHOW TABLES LIKE '$table'");
    if (!$exists) {
        return 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1920&q=80';
    }

    $photo = $wpdb->get_row(
        "SELECT photo_url FROM $table WHERE is_active = 1 ORDER BY RAND() LIMIT 1"
    );

    if ($photo) {
        return esc_url($photo->photo_url);
    }
    return 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1920&q=80';
}

函数逻辑：检查表是否存在 → 随机选取一张启用的照片 → 返回 URL，若无则返回默认图。

在 index.php 中调用：

<div class="banner-fullscreen" id="banner-bg" 
     style="background-image:url('')">

1.4 管理页面

创建 banner-manager.php 管理页面，功能包括：

• 本地上传：支持点击选择、拖拽上传，实时预览缩略图，支持 JPG/PNG/GIF/WebP
• URL 添加：直接输入图片链接
• 照片管理：启用/停用/删除，带状态角标
• 统计面板：总照片数、已启用、已停用
• 认证保护：HTTP Basic Auth

管理页面访问地址：http://xiaoajun.cn/banner-manager.php

二、踩坑记录

2.1 Nginx 上传大小限制

上传 9.7MB 的 JPG 照片时报错 client intended to send too large body。

原因：Nginx 默认 client_max_body_size 为 1MB。

解决：在 /etc/nginx/nginx.conf 的 http 块中添加：

client_max_body_size 25m;

同时修改 PHP 配置：

upload_max_filesize = 20M
post_max_size = 25M

然后重载 Nginx 和 PHP-FPM。

2.2 图片 URL 使用内网 IP

上传后数据库中存储的 URL 是 http://10.10.10.42/wp-content/uploads/...，外网无法访问。

原因：WordPress 的 siteurl 和 home 配置为内网 IP。

解决：

wp option update siteurl 'http://xiaoajun.cn' --allow-root
wp option update home 'http://xiaoajun.cn' --allow-root

同时修正数据库中已有记录的 URL。

2.3 HTTPS URL 无法访问

照片存储为 https://xiaoajun.cn/... 但 Nginx 只监听 80 端口，没有配置 SSL 证书。

解决：将 URL 从 https:// 改为 http://，修改数据库中已有记录。

2.4 上传表单 JS Bug

重构管理页面时，使用 DataTransfer API 将文件复制到隐藏 input，但在部分浏览器中不可靠，导致 PHP 端 $_FILES 为空。

解决：将 直接放在 内，去掉 JS 复制逻辑，让浏览器原生处理文件提交。

三、手机端响应式优化

3.1 三档断点设计

3.2 关键优化

• Banner：高度从 100vh 缩到 52vh（小屏 48vh），文字垂直居中
• 内容区：content-card-wide 改为 100% 宽度，去掉阴影和圆角，与 Banner 自然衔接（负 margin 上移）
• 文章标题：添加 word-break: break-word 防止长标题溢出
• 侧边栏：手机端宽度 82%（小屏 88%），全屏弹出
• MENU 按钮：增加半透明背景提升可见性
• 表格：小屏支持水平滚动
• 夜间模式：补充了文章卡片等组件的暗色样式

完整的 CSS 响应式代码在 style.css 中。

四、技术总结

这次优化涉及的技术栈：

• 后端：PHP、WordPress Hooks、MySQL
• 前端：HTML5、CSS3（Grid、Flexbox、Media Queries）、原生 JavaScript（拖拽上传、文件预览）
• 服务器：Nginx 配置、PHP-FPM 调优、WP-CLI

整个过程中最关键的教训是：前后端文件上传链路要从前端表单结构、浏览器兼容性、Nginx 限制、PHP 配置、WordPress 路径配置等多个环节逐一排查，任何一环出错都会导致功能不可用。

目前博客支持随时上传新 Banner 照片，管理页面操作便捷，手机端阅读体验良好。后续计划加上 HTTPS 和自动压缩上传图片。