WordPress发布后页面结构错乱：迁移至VPS后表单与图片显示异常

问题描述 #

网站原托管于Godaddy，迁移至VPS主机后，表单和图片在编辑器中显示正常，但发布后无法正常加载/显示，对比图如下：

• 编辑时正常显示：
• 发布后异常显示：

排查与解决步骤 #

1. 检查资源引用路径 #

编辑器内可能使用本地路径或与Godaddy环境匹配的相对路径，VPS的网站根目录结构不同会导致资源找不到。

• 将资源路径改为基于域名的绝对路径，比如把./assets/photo.jpg替换为https://your-domain.com/assets/photo.jpg；
• 或者确保相对路径与VPS上的文件结构一致，比如网站根目录为/var/www/html，则图片路径应为/assets/photo.jpg（假设图片放在html/assets文件夹下）。

2. 修正文件权限 #

VPS上的文件/文件夹权限错误会导致服务器无法读取静态资源或执行表单脚本：

• 执行以下命令调整权限（替换为你的网站目录）：

  chmod -R 755 /var/www/your-site-directory
  chown -R www-data:www-data /var/www/your-site-directory
  

  注：www-data是Nginx/Apache常用的运行用户，若你的服务器用其他用户，替换为对应用户名。

3. 调整Web服务器配置 #

检查Nginx/Apache的配置，确保正确映射网站根目录并允许静态资源访问：

• Nginx示例配置：

  server {
      listen 80;
      server_name your-domain.com;
      root /var/www/your-site-directory;
      index index.html index.php;
  
      # 允许静态资源访问
      location ~* \.(png|jpg|jpeg|css|js|svg)$ {
          expires 30d;
          add_header Cache-Control "public";
      }
  }
  

  修改后重启Nginx：systemctl restart nginx
• Apache示例：
  确保开启mod_rewrite模块：a2enmod rewrite，并检查.htaccess文件是否有限制资源访问的规则，若有则调整或移除。重启Apache：systemctl restart apache2

4. 修复表单依赖问题 #

若表单依赖Godaddy自带的后端处理服务，迁移后这些服务不再可用：

• 检查表单的action属性，确认指向VPS上已部署的处理脚本（比如/submit-form.php）；
• 若没有后端脚本，自行编写表单处理逻辑（比如用PHP接收表单数据并处理）。

5. 清除浏览器缓存 #

浏览器缓存的旧资源可能导致显示异常：

• 按Ctrl+Shift+R强制刷新页面；
• 或在静态资源URL后添加版本号（如/assets/photo.jpg?v=2），强制浏览器加载新资源。

内容的提问来源于stack exchange，提问作者Adil Numan