背景使用Ai建站将会越来越多了解建站的底层方式才能更快更个性化的使用AI来制作网站。之前讲过一个wordpress和html 基础 网站基础在了解了这些基础之后接下来就可以着手搭建一个网站了。一.手搓是什么意思搞明白做站不烧心做网站大致有三条路。第一条是模板站买个现成的主题装上 WordPress在后台点点点换图换字一天能上线。快但长得像别人想改点结构性的东西就动不了。第二条是拖拽建站Elementor、Wix 这类鼠标拖模块所见即所得。灵活一些但代价是背上一堆插件、页面变得很重、动效和排版精度受限。第三条就是这篇文档要讲的手搓。拿一套静态 HTML 模板当起点把它拆开重新组装成 WordPress 主题。每一页的模板文件自己写每一处样式自己调遇到问题自己查。拿一套 HTML 模板当骨架一页一页改成 WordPress 主题。好处是所有细节都在你手里——页面结构、加载速度、SEO 标签、每一条内链都能按需要去设计。坏处是每个细节都要你自己负责出了 bug 没人替你兜。二、所需工具和文件1. 本地搭建服务器环境 php创建本地环境2. 编码工具 Vscode,Sublime 等3. 模板一套纯html 页面主题 可直接AI制作4. Wordpress 文件三、模板选择一套 HTML 模板。它的作用是提供三样东西一套能用的页面结构、一套响应式栅格、一套完整的样式文件。选模板只看三条和好不好看关系不大。看什么合格的标志不合格的标志样式是否分层有 SASS 或 SCSS 源文件颜色写成变量只有一个几万行的 style.css颜色散落各处结构是否语义化用 header、nav、main、section 这类标签满屏 div类名叫 box1、box2栅格是否规范基于 Bootstrap 或 Tailwind断点统一每个区块单独写一套宽度手机上手调四、用什么当引擎引擎指后台程序。绝大多数情况下答案是 WordPress理由很实在客户要自己发内容、换图、看留言必须有个看得懂的后台而 WordPress 的后台是现成的插件生态也最全。真正要选的是怎么把模板接进去有三条路。方案做法适合谁代价用现成主题 子主题在别人的主题上改样式只想改外观结构动不了模板改造成自定义主题自己写模板文件把静态页拆开重组需要控制结构工作量最大但最自由静态站 无头 CMS前端用模板内容走 API追求极致速度后台体验差客户学不会五、搭建本地环境、域名、主机把要做的站变成一个能跑起来的空壳。做完之后你会有一个本地能打开的 WordPress后台能登录主题是自己的。5.1 先在本地跑一个 WordPress不要在服务器上边改边试。本地改坏了能重来。三种常见做法按省事程度排集成环境。phpstudy、XAMPP、MAMP 这类装完就有 Apache/Nginx PHP MySQL点两下建站。Windows 上最省事。Local by Flywheel。专门给 WordPress 做的本地环境一键建站、一键换 PHP 版本缺点是占内存。Docker。一条命令起全套最干净但要先懂一点容器。有一个坑要提前说PHP 版本别用太新的。WordPress 对最新版 PHP 的兼容总会慢半拍本地用比线上低一个小版本最稳。5.2目录结构一个主题里都装了什么本地环境跑起来之后进到wp-content/themes/新建一个文件夹名字全小写、不带空格比如mysite。里面最少要有两个文件。style.css不是给你写样式的是给 WordPress 读主题信息的。文件开头一段注释写主题名、版本、作者。index.php兜底模板。任何请求找不到更具体的模板时就用它。这个文件缺失后台会报主题缺少样式表或 index.php主题直接不可用。一个完整的主题目录通常是这个结构。mysite/├── style.css 主题信息必须有├── index.php 兜底模板必须有├── functions.php 主题的总开关注册菜单、加载资源、加功能├── header.php 页头head 标签、导航├── footer.php 页脚版权、脚本├── front-page.php 首页模板├── page.php 普通页面├── single.php 单篇内容├── archive.php 列表页├── searchform.php 搜索框├── inc/ 拆出来的功能模块├── assets/│ ├── css/ 样式│ ├── js/ 脚本│ └── images/ 图片└── screenshot.jpg 后台外观-主题里显示的缩略图1200×900别把所有代码都塞进functions.php。它会被整站加载塞满之后改一处要翻两千行。按功能拆到inc/下的独立文件用require_once引进来——这是后面能维护下去的关键。5.3 模板层级一个网址怎么变成一个页面WordPress 收到一个网址会按一张固定的清单从上往下找模板文件找到第一个就用它。想象你寄快递。快递员不会挨家挨户问他按地址一层层找先找小区再找楼栋再找门牌。WordPress 找模板文件是同一个逻辑。访问example.com/product/abc/时它会依次尝试single-product.php ← 专门给 product 这个类型的单页single.php ← 通用单页singular.php ← 单页兜底index.php ← 最终兜底永远存在访问分类页example.com/product-cat/press/时顺序变成taxonomy-product_cat-press.php ← 最具体某个分类法下的某个词taxonomy-product_cat.php ← 该分类法通用taxonomy.php ← 所有分类法通用archive.php ← 所有列表页通用index.php ← 兜底这个机制的好处是你只需要写最具体的那一层剩下的自动继承。十种内容类型不一定要写十个模板文件写一个archive.php就能全兜住等某个类型需要特殊样子时再单独加一个。5.4 把静态页拆成三块模板里每个页面都是完整的 HTML。拆的时候按哪部分每页都一样来切。每页都一样、且在body最前面 → 切到header.php每页都一样、且在最后 → 切到footer.php中间那块每页不同的 → 留在各自的模板文件里切完之后页面文件长这样?php get_header(); ?main classsite-main!-- 这一页独有的内容 --/main?php get_footer(); ?get_header()和get_footer()会自动把对应的文件插进来。这样导航改一次全站生效。一个小细节header.php里必须有?php wp_head(); ?footer.php里必须有?php wp_footer(); ?。这两个函数是插件往页面里注入样式和脚本的入口漏了它们很多插件会莫名其妙不工作。5.5 主题文件的命名规则命名不是随便起的每个名字都对应一种页面。常见的一套如下。文件名什么时候用它front-page.php首页优先级最高page.php普通页面page-contact.php标题为 contact 的页面按别名匹配single.php单篇文章或单条内容archive.php任何列表页search.php搜索结果页404.php找不到页面functions.php不是模板是主题的功能文件六、制作一个page页以首页为例对应的index.php结构上header /header body/body footer/footerindex.php 常用的引用代码引用样式?php bloginfo(stylesheet_url); ? 输出主题文件夹中style.css文件的路径 link href?php bloginfo(template_url); ?/style.css relstylesheet引用header 部分?php get_header(); ?引用footer 部分?php get_footer(); ?访问页面链接?php bloginfo(url); ?