前言
各位亲爱的开发者同仁们： 如果此刻你正坐在电脑前，眼神空洞地盯着屏幕，脑海中循环播放着“我只会写CSS，但老板让我用WordPress搭官网”的魔性BGM，那么恭喜你——这本《从零开始：XAMPP+WordPress全程搭建指南》就是为你量身定制的《代码农自救手册》！
注意： wordpress不适合搭建逻辑复杂且带有全局逻辑的网站，适合简单的博客以及静态官网性质的网站
Step 1: 摆正心态
- 忘掉你熟悉的Vue/React/Svelte
- 接受“在浏览器里点按钮就能建站”的神奇设定
- 准备好迎接“为什么我的按钮又歪了？”的灵魂拷问
Step 2: 工具准备
- 一台能联网的电脑（Windows/Mac（小编主推，因为编辑区相当耗性能）/Linux皆可）
- 一颗敢于折腾的强心脏
- 一杯肥宅快乐水（调试时容易口渴）
Step 3: 预期管理
- 本指南不会让你成为WordPress大师，小编也是个小白
- 但你可以快速搭建简单的官网
- 副作用：可能触发“原来建站这么简单”的顿悟时刻
工具
| 工具名 | 优势 | 比喻 |
|---|---|---|
| XAMPP | 本地环境搭建最快（比泡面还简单） | 你的“虚拟工地” |
| WordPress | 插件生态比淘宝商品还丰富 | 网站的“乐高积木” |
| Elementor | 拖拽式设计，告别代码战争 | UI设计师的“加特林” |
| Astra | 主题自带“商业模板库” | 装修队的“精装房套餐” |
| ACF | 自定义字段，数据管理如臂使指 | 给网站装“数据库遥控器” |
搭建流程
第一章：环境搭建篇 - XAMPP本地服务器部署（Windows 10/11）****
1.1 XAMPP安装全流程
① 下载安装包
- 访问Apache Friends官网
- 下载
② 安装配置
- 运行安装程序 → 选择安装路径（禁止中文路径，如
D:\xampp） - 勾选组件：Apache、MySQL、PHP、phpMyAdmin（默认已选）
- 安装过程中若提示.NET Framework，跳过即可
③ 服务启动与测试
- 打开XAMPP控制面板 → 启动Apache和MySQL服务（状态变绿）
- 浏览器访问
http://localhost→ 出现XAMPP欢迎页即成功 - 点击phpMyAdmin可进入管理后台
-
常见问题处理：
-
Apache无法启动：检查端口占用（默认80→改为8080）
-
; 修改httpd.conf Listen 8080 ServerName localhost:8080 -
MySQL启动失败：修改
my.ini的port=3306为3307
-
1.2 本地数据库创建
① 浏览器访问http://localhost/phpmyadmin ② 点击顶部新建数据库 → 命名wordpress_local → 字符集选utf8mb4_general_ci ③ 记录数据库名、用户名（默认root）、密码（留空）
第二章：WordPress核心部署（含Astra主题预配置）
2.1 WordPress文件部署
① 访问WordPress中文站下载最新版 ② 解压后 重命名为mywebsite ③ 自动配置法：
- 浏览器访问
http://localhost/mywebsite→ 开始安装向导 - 填写数据库信息：
数据库名：wordpress_local
用户名：root
密码：（留空）
- 完成安装后设置管理员账号（建议密码强度≥8位）
2.2 Astra主题深度集成
① 主题安装
- 后台进入外观 > 主题 > 添加新主题 → 搜索"Astra" → 安装激活
- 推荐购买Pro版解锁电商/会员功能
② Starter Templates模板库配置
-
安装插件：
- Premium Starter Templates（Astra官方插件）
- Elementor Pro（拖拽建站核心）
-
模板导入流程：
- 进入外观 > Starter Templates → 点击Import & Export
- 选择"Astra Starter Sites" → 导入电商/博客模板
- 勾选Install required plugins自动安装依赖
③ 全站模板应用
- 编辑页面时 → 右侧面板选择Replace with Starter Template
- 混合编辑：保留原有内容，仅替换头部/产品模块
第三章：Elementor Pro全功能开发实战
3.1 页面构建基础操作
① 创建响应式页面
-
后台页面 > 添加新页面 → 点击使用Elementor编辑
-
画布设置：
- 单位：像素（PC端）/百分比（移动端）
- 宽度：PC端1200px，移动端自动适配
② 核心元素配置表
| 元素类型 | 关键配置项 | 最佳实践 |
|---|---|---|
| 容器 | 布局方向：水平/垂直 | 嵌套容器实现复杂布局 |
| 文本编辑器 | 行高1.6、字重600、字间距0.5px | 标题使用H2/H3语义化标签 |
| 图像 | 宽高比16:9、Alt文本优化 | 压缩至WebP格式（插件：ShortPixel） |
| 按钮 | 圆角8px、悬停过渡0.3s | 绑定Elementor表单/ACF字段 |
- 容器与容器内的内容都可以复制，这样复用组件开发时间会大大减少！
- Save as a template：如果你希望把当前你选中的这个模块变成一个组件保存起来的话，点这个，在其他区域可直接插入。
-
每一个Elementor组件都有独特的编辑区，比如上图我选择的是容器，则编辑区分为三栏为布局、样式、高级设置，可以满足我们对一些间距、定位以及其他各种样式的调整。
-
插入HTML：
- 首选要建立一个大小合适的空容器，设置好宽度
- 然后打开自己的编辑器，编码自己的HTML+JS+Css，设置宽度为100%，使内容自适应撑满容器
- 选中你插入的HTML内容框，粘如你刚刚写的所有代码（这里会有一些问题就是内容出现错误，可以把一些行后的空格删删调整调整）
- 注意：单页面会有样式冲突，假如要插入多个HTML，一定要注意类名的区分，否则会造成页面混乱。
- 使用Swiper这种开源组件时，不仅要主要d点的样式冲突，还要注意new出来的swiper名称要独立。
③ 动态内容绑定（氪金）
-
ACF字段调用：
-
安装ACF Pro → 创建"产品参数"字段组
-
在Elementor编辑器插入ACF字段小部件 → 选择字段组
-
通过
{{acf.product_description}}输出数据
-
3.2 高级交互实现
① 导航菜单动态生成
-
创建菜单：外观 > 菜单 → 添加"首页"、"产品"等页面
-
Elementor绑定：
- 拖拽WordPress菜单元素 → 选择刚创建的菜单
- 设置移动端汉堡菜单动画（推荐Slide Down）
② 表单验证与提交
- 插入联系表单 → 配置字段类型（邮箱/电话）
- 表单处理：
// functions.php添加
add_action('elementor_form_submit', function($fields, $form){
if(!empty($fields['email'])){
wp_mail('admin@site.com', '新咨询', $fields['message']);
}
}, 10, 2);
第四章：页眉页脚深度定制（含响应式设计）
4.1 页眉模块化开发
① 创建自定义页眉模板
这块没有实践过，只是查到的，我的项目使用的是AStra模板带的导航
- 进入元素 > 模板 > 添加新模板 → 选择"Header"类型
- 布局结构：
<header class="custom-header">
<div class="logo-container">
<img src="<?= get_template_directory_uri(); ?>/images/logo.png" alt="Logo">
</div>
<nav class="main-menu">
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
</header>
② 粘性导航实现
- CSS样式：
.custom-header {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
4.2 页脚三栏布局
① 结构规划
- 左栏：Logo+公司简介
- 中栏：社交媒体图标（Font Awesome集成）
- 右栏：联系信息+备案号
② Elementor实现步骤
-
添加容器 → 设置水平方向
-
每个容器插入：
- 图像框（Logo）
- Social Icons（绑定ACF字段）
- HTML小工具（备案代码）
-
响应式调整：
- 移动端隐藏中栏，显示垂直排列的联系方式
第五章：数据迁移
5.1 数据迁移全流程
① 数据库导出
- phpMyAdmin导出
wordpress_local.sql - 使用WP Migrate DB插件替换域名：
// wp-config.php添加
define('WP_HOME', 'http://localhost/mywebsite');
define('WP_SITEURL', 'http://localhost/mywebsite');
② 文件迁移
- 压缩
htdocs/mywebsite→ 上传至服务器 - 通过FTP上传时注意权限设置：
chmod -R 755 wp-content/uploads
chown -R www-data:www-data wp-content
小结
鉴于小编也是头一回接触wordpress这个产品以及这种概念，后续踩坑会持续更新，希望得到关注。
建议更细节的操作关注B站 犬哥网站，对wordpress的操作以及细节会讲述的更清晰一些。
