在数字世界的广袤森林中，HTML 和 CSS 是建造网页的砖瓦，而 WordPress 则像一位聪明的建筑师，能将这些材料变成既实用又美观的房子。你是否曾好奇，能否在这位建筑师的魔法下，挥舞自己的 HTML 和 CSS 魔法棒，打造独一无二的网站？答案是肯定的，但方式却与你想象的有所不同。让我们翻开这本魔法书，一起探索静态网页与 WordPress 世界的奇妙差异吧！
📜 网页的史前时代：静态 HTML 的手工匠艺
想象一下，上世纪 90 年代的互联网就像一片原始丛林。那时的网页开发者，手持 Adobe Dreamweaver 或 Microsoft FrontPage 这样的“石器工具”，一砖一瓦地用 HTML 搭建网站。每一行代码都得亲手敲下，每一像素的样式都靠 CSS 精雕细琢。比如，我最近更新了一个自 1997 年就存在的静态网站——Gordon Bok 的歌词站。这是一个海洋民谣爱好者的宝藏，里面满是关于风暴和龙虾笼的诗意篇章。更新它就像修补一艘老木船：直接在 HTML 文件里添加新歌词，调整 CSS，上传到服务器，完工！
这种方式有个专有名词——“静态网站”。它就像一本印刷好的书，内容和样式融为一体，改动时得翻开每一页重新誊写。这种手工匠艺虽然原始，却充满了自由。你可以随心所欲地设计，因为一切都在你的掌控之中。然而，这种自由的代价是效率低下：想加一首新歌，得从头到尾调整导航、链接和样式，稍有不慎就可能出错。
🏰 WordPress 的魔法城堡：模板与内容的华丽分离
现在，让我们穿越到现代，走进 WordPress 的魔法城堡。这里，HTML 和 CSS 不再是直接的建筑材料，而是变成了蓝图和装饰品。WordPress 是个内容管理系统（CMS），它的核心魔法在于将内容与呈现分开。你提供一个 HTML 模板，它就像一个模具；你输入内容，它就像面团。每次有人访问网站，WordPress 就会把面团“倒进”模具，烤出一张新鲜的网页。
以 Gordon 的歌词网站为例，如果我用 WordPress 重建它，我不会直接写一堆 HTML 文件，而是创建“帖子”来存储每首歌词、“页面”来展示专辑，甚至用“分类”和“标签”来组织导航。HTML 和 CSS 的任务变成了设计这个模具：导航菜单怎么摆？歌词字体用多大？背景色是海蓝色还是木船棕？这些都可以在主题文件或“附加 CSS”里搞定，而歌词本身则作为独立的内容存在于数据库中。
这种方式的好处显而易见：改一首歌词只需登录后台编辑帖子，导航和样式自动更新，不用碰一行代码。就像给城堡添一幅新画，不必重建整座墙。但坏处呢？如果你想完全抛弃 WordPress 的模具，自己用 HTML 和 CSS 从头搭一座“静态塔”，那它就帮不上什么忙了——它只会站在一旁，困惑地看着你挥汗如雨。
🎨 自定义的魔法棒：HTML 与 CSS 在 WordPress 的妙用
别误会，WordPress 并非排斥自定义 HTML 和 CSS，而是换了个玩法。你仍然可以大展身手，只是施法的方式变了。比如，你可以在主题的 header.php 或 footer.php 文件里加入自定义 HTML，调整页眉页脚的结构；或者在“外观 > 自定义 > 附加 CSS”里写一堆样式，改变按钮颜色、字体大小，甚至添加动画效果。如果你是插件开发者，还可以写个小插件，把复杂的 HTML 和 CSS 逻辑打包进去。
回到 Gordon 的网站，如果我选了 WordPress，我可能会这么干：用 HTML 写一个歌词卡片的模板，CSS 设计成复古羊皮纸风格，然后让 WordPress 自动为每首歌生成这样的卡片。导航链接？交给 WordPress 的菜单系统，配上点 CSS 调色就行。想加个“下一首歌”按钮？可以用自定义字段或短代码实现，再用 CSS 美化一下。整个过程就像搭乐高：你提供零件，WordPress 负责组装。
但这里有个关键区别：在静态网站里，HTML 和 CSS 是“一次性产品”，写完就定型；在 WordPress 里，它们是“活的工具”，得跟系统的动态机制配合。比如，你不能直接在 HTML 里硬编码所有歌词的链接，得让 WordPress 根据帖子生成。这就像从手工缝衣服变成了用缝纫机：效率高了，但得适应机器的节奏。
⏳ 时间与选择的博弈：为什么我没用 WordPress 重建
说实话，我一度很想把 Gordon 的歌词站搬到 WordPress 上。想象一下：每首歌一个帖子，每个专辑一个页面，导航自动生成，访客还能搜索歌词，多方便！但最终，我还是选择修补老网站。为什么？时间。那个静态网站已经运行了近 30 年，结构简单直接，加几首新歌只要复制粘贴几段 HTML，调整下 CSS，几小时就搞定。而用 WordPress 重建，得先搭框架、导入内容、设计模板、调试导航，少说也得几天甚至几周。
这就像是修补一艘旧船和造一艘新船的区别。旧船虽然破旧，但修修补补还能航行；新船虽然先进，却得从头设计船舱、甲板和帆。如果 Gordon 的网站是个新项目，我肯定会选 WordPress，因为它能为未来节省无数时间。可对于一个已有内容的遗产站点，直接上手 HTML 更快。
🛠️ 两种世界的碰撞：静态与动态的优劣对决
让我们把这两种方式摆上擂台，看看它们的较量结果：
| 特性 | 静态 HTML/CSS | WordPress + HTML/CSS |
|---|
| 上手难度 | 较高，需懂代码 | 中等，需学 WordPress 逻辑 |
| 维护效率 | 低，改动费时 | 高，内容更新简单 |
| 灵活性 | 高，随心所欲 | 中等，受限于模板系统 |
| 初始投入 | 低，写完即用 | 高，需建框架 |
| 动态功能 | 无，需手动实现 | 强，内置导航搜索等 |
静态网站就像一幅手绘油画，每一笔都由你掌控，但改画得重画整张；WordPress 像是数字画板，框架搭好后，改动只是一键的事。Gordon 的网站因为内容简单且更新 infrequent，静态方式更合适。但如果是个博客、商店或歌词库，WordPress 的动态魔法显然更胜一筹。
🌟 给新手的魔法建议：从哪里开始挥舞 HTML 和 CSS
如果你是个新手，想在 WordPress 里试试 HTML 和 CSS，别怕！可以从这些小魔法开始：
- 玩转块编辑器：用“自定义 HTML”块，直接写点简单的标签，比如
<p style="color: blue;">Hello!</p>，看看效果。
- 调整主题样式：去“外观 > 自定义 > 附加 CSS”，加几行代码，比如
.site-title { font-size: 24px; }，改改标题大小。
- 动手改模板：复制主题到子主题，打开
style.css 或 single.php，加点个性化元素，比如一个独特的页脚。
这些小尝试就像魔法学徒的练习咒语，熟练之后，你就能驾驭更大的魔法——比如为 Gordon 那样的网站设计一个歌词播放器，甚至用 CSS 动画让歌词“漂浮”起来！
🎶 结语：网页世界的两种乐章
HTML 和 CSS 是网页世界的音符，而静态网站与 WordPress 则是两种不同的演奏方式。静态网站像独奏曲，自由奔放但费力；WordPress 像交响乐，结构复杂却省心。能不能用自定义 HTML 和 CSS 搭配 WordPress？当然能！只是你得学会在这场交响乐中找到自己的旋律，而不是试图独奏全场。对于 Gordon 的歌词站，我选择了修补老乐谱；但如果是你，下一个网站的故事会如何谱写呢？
参考文献
- Plum Island Media. "Can I Use Custom HTML and CSS with WordPress?" Plum Island Media, https://www.plumislandmedia.net/wordpress/can-i-use-custom-html-and-css-with-wordpress/.
- WordPress Codex. "Customizing Your Theme." WordPress.org, https://developer.wordpress.org/themes/customize-api/.
- Bok, Gordon. "Lyrics Archive." Gordon Bok Official Site, https://lyrics.gordonbok.com/.
- Nielsen, J. "Designing Web Usability." New Riders, 2000.
- W3Schools. "HTML and CSS Tutorial." W3Schools.com, https://www.w3schools.com/html/.
