现代WordPress主题开发入门：从Underscores starter theme开始-源码库

现代WordPress主题开发入门：从Underscores starter theme开始插图

如果你曾经尝试设计或改造WordPress网站，就会知道一个“主题”的好坏，对网站的体验、速度与美感有着决定性的影响。对于很多初学者来说，直接上手编写一个主题，往往意味着从一堆复杂的PHP文件和样式表中摸爬滚打，这不仅枯燥，而且容易在第一天就被劝退。

事情的转折点，在我发现Underscores这个东西的时候出现了。它不是一个完整的商业模板，而是官方推荐的startertheme——换句话说，它是一块干净的画布，帮你打好地基，却不干涉你发挥创意。没有过度设计的界面，没有臃肿的功能插件，它给你的，是精心排布的主题结构、基本的模板文件和人性化的注释。

这意味着，你不用从零去猜测WordPress的主题结构如何运作，也不用为兼容性和标准担心。

想象一下造房子。用一个现成主题改造，就像买了一栋已经装修好的房子，要改动时，你得先拆掉别人留下的墙、地板和家具才能重新做。而用Underscores，就像拿到了一套刚竣工的毛坯房——你提前知道所有的结构布局，可以尽情定制它，让它变成你想要的样子。

而且，Underscores的“轻”是真正的轻。它不会夹杂一堆你暂时用不到的短代码或小工具，甚至连样式都尽量保持最精简的基础版，让你可以根据需求慢慢扩充。对于现代开发来说，这意味着你可以搭配流行的前端工具（比如Sass、PostCSS、Webpack）去构建你的样式与脚本，而不必从一堆奇怪的默认配置中“解救”自己。

为什么说它适合现代WordPress开发？因为WordPress本身的生态越来越多元：Gutenberg编辑器带来的模块化内容、RESTAPI的可扩展性，以及移动优先的设计趋势，让开发者需要一个灵活、干净、可扩展的主题基础，而不是被沉重的旧代码拖慢节奏。

Underscores正好提供了这样的起点。

它的学习成本相对低。如果你会一点HTML、CSS，再加上一点基础的PHP语法，你就能很快理解每个模板文件的处理逻辑：比如index.php控制文章列表页面，single.php控制单篇文章，header.php与footer.php分别是网站的头尾结构。

在它的文件夹里，你几乎能“一眼看到故事的全貌”。

其实，Underscores背后的理念比它的代码更打动人——它想告诉你：主题开发不必复制粘贴别人的成品，不必害怕WordPress的结构，你只需要一个可靠的骨架，剩下的都是创造的乐趣。

在下一部分，我会详细聊聊从下载Underscores到构建你专属主题的具体步骤，以及一些能让你快速产出成品的小技巧，让它在你的项目中真正闪光。

如果你已经对Underscores有了兴趣，下一步就是——动手。整个过程比你想象的轻松，只需要三步，你就能获得一个可运行的自定义主题。

第一步：获取你的专属骨架访问underscores.me网站，你会看到一个简单的生成页面。输入主题名称（比如“MyModernTheme”），选择是否添加Sass支持，点击生成，就会得到一个打包好的ZIP文件。这个文件，就是你的主题起点，干净、规整、无冗余。

解压后，将整个文件夹放到WordPress安装目录的/wp-content/themes/里，登录后台，在“外观-主题”中启用它。此时你的网站已经运行在你的新主题上，而且你完全掌握其中的代码。

第二步：定制结构与样式Underscores的CSS文件非常简单，所以你可以立刻用自己的方式改造它。习惯用Sass？可以打开_sass文件夹开始写；喜欢原生CSS？直接编辑style.css。不要忘记，在WordPress中，style.css不仅保存样式，还存有主题的元信息，所以改主题名称的时候要顺便调整这里的注释。

页面结构的调整同样直观。比如你想在头部加一个导航菜单，只需要在header.php里加入wp_nav_menu()函数，并在后台创建对应的菜单。Underscores已经提前做好了Header、Footer、Sidebar等模块，你只要在这些模块里插入内容即可。

第三步：让它更现代化想让主题在移动端也拥有良好体验？加上响应式设计的媒体查询；想提升性能？用Webpack打包你的JS和CSS，或者用npm脚本进行自动化构建。Underscores本身的轻量化，让这些现代工具无缝嵌入，没有传统主题改造的痛苦。

更妙的是，你可以直接把它当作一个“模板引擎设计自由”的双重保障。因为它符合所有WordPress的主题开发标准，所以无论未来你要接入Gutenberg区块、RESTAPI数据，甚至把它变成一个HeadlessWordPress项目，都不会有结构上的障碍。