搜索全站
主题 14 分钟阅读

Twenty Twenty 系列官方默认主题值得用吗:适合做母版,不适合直接商用

官方默认主题每年更新、代码规范、100% GPL,但也极度过时且缺少商业常用功能。本文讲清它适合做什么、不适合做什么,以及如何基于它高效做出自己的主题。

U
UFO_PF 2020-02-09 · 阅读 14 分钟
Tw 主题
阅读提示
本文约 5,578 字,预计阅读 14 分钟。文中命令与配置均经过实测,可直接参考执行。

引言:装完 WordPress 就有的那个主题,能直接用吗

每个 WordPress 都自带一套默认主题,从 Twenty Twenty 到 Twenty Twenty-Five(近年来默认年初发布一个新版本)。它们的优势显而易见:免费、100% GPL、代码由核心团队 review、永远跟着 WordPress 版本走、可访问性经过专门打磨。

但很少有人直接用默认主题上线商业项目,原因也很直白:外观辨识度太高(“一看就是 Twenty Twenty-Three”)、缺少国内站常用的元件(面包屑、多列服务模块、联系表单样式)、对国内常见的移动端浏览器也没有做专门的适配取舍。

那么它到底该怎么用?答案是:作为母版(starter)和学习样板,它的价值极高(它已是标准区块主题,建议对照区块主题(FSE)与传统主题的区别来读它的源码);作为直接上架的成品,它几乎总是错的。

原理分析:默认主题的真实定位

官方默认主题有三层定位,理解这三点就不会误用它:

其一,它是 WordPress 新特性的“展示橱窗”。Twenty Twenty-One 起陆续引入区块图案,Twenty Twenty-Three 是第一个完整的区块主题,Twenty Twenty-Five 则把 theme.json v3 与新的 Patterns 目录结构带进实践。因此读默认主题的源码,等于在读一份“当年最新 API 的官方用法”。

其二,它是主题作者的参考实现。escaping、HTML5 support、wp_body_open、aria roles、skip-link、print styles 这些细节,默认主题写得很标准。想规范化自己代码的开发者应该逐行读 functions.php。

其三,它不是业务需求的实现者。默认主题刻意不含任何商业化元件(没有推荐插件、没有 TGMPA、没有演示导入、没有 license),这保证了它的纯粹性,也决定了它的“空白感”。

另一个关键事实:官方主题目录的主题,包括默认主题,全部采用 100% GPL 授权(含所有内联资源),这意味着修改、二次分发、商用都不受限——这是付费主题无法提供的自由度。

保姆级实操

第一步:确认你手上版本的代码组织。

wp core version
wp theme list --fields=name,status,version --format=table
ls wp-content/themes/twentytwentyfive/

Twenty Twenty-Five 这类区块主题的目录结构与传统主题完全不同:parts/(模板部件)、patterns/(区块图案)、templates/(HTML 模板)、styles/(配色变体)、theme.json。

第二步:用官方命令生成子主题骨架。

# 基于默认主题生成子主题,自动生成 style.css 与 functions.php
wp scaffold child-theme mytwenty --parent_theme=twentytwentyfive --activate

第三步:在子主题里覆写 theme.json 的个别设置。

子主题可以有自己的 theme.json,只需写需要覆盖的片段,其余继承父主题:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "base", "color": "#ffffff", "name": "底色" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "主色" },
        { "slug": "accent-1", "color": "#0b6e4f", "name": "强调色" }
      ]
    },
    "typography": {
      "fluid": true,
      "fontSizes": [
        { "slug": "small", "size": "clamp(0.9rem, 1vw, 1rem)", "name": "小" },
        { "slug": "large", "size": "clamp(1.5rem, 3vw, 2.25rem)", "name": "大" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

第四步:追加自己的区块图案(Patterns)。

<?php
// functions.php —— 注册一个自定义的区块图案
add_action( 'init', function () {
    register_block_pattern( 'mytwenty/cta-banner', array(
        'title'       => 'CTA 横幅',
        'description' => '带主按钮的居中行动号召区',
        'categories'  => array( 'featured' ),
        'content'     => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"backgroundColor":"accent-1","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-accent-1-background-color has-background" style="padding-top:4rem;padding-bottom:4rem">
<!-- wp:heading {"textAlign":"center","level":2} --><h2 class="wp-block-heading has-text-align-center">从这里开始</h2><!-- /wp:heading -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrast"} --><div class="wp-block-button"><a class="wp-block-button__link has-contrast-background-color has-background wp-element-button">联系我们</a></div><!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->',
    ) );
} );

第五步:补上商业站点常见的缺失能力。

// 默认主题不含面包屑等元件,按需自己加(这是子主题的正确用法)
add_action( 'after_setup_theme', function () {
    add_theme_support( 'yoast-seo-breadcrumbs' ); // 若使用 Yoast,启用其面包屑支持
} );

// 给日志/归档页补充 meta 排序等最小能力
add_filter( 'the_content', function ( $content ) {
    if ( is_singular( 'post' ) && in_the_loop() && is_main_query() ) {
        return $content;
    }
    return $content;
} );

第六步:上线前跑官方主题检查。

wp plugin install theme-check --activate
# 后台运行后有理论和默认一样的清白结果,子主题的改动若引入问题会立刻显示

第七步:本地化字符串。

# 检查文本域是否与子主题 slug 一致
grep -rn "__(\s*'" wp-content/themes/mytwenty/ --include="*.php" | grep -v "'mytwenty'" | head

文本域不一致会导致你在 Poedit/Loco Translate 里扫不到字符串。

常见踩坑

  1. 直接改动默认主题的文件。核心每年随大版本更新一次默认主题,改动会被覆盖;必须子主题化。
  2. 子主题 theme.json 直接复制父主题全文。这样父主题日后更新新配置时你完全收不到,只写差异部分。
  3. 保留默认主题的 slug/文本域。二次开发后应改名为自己的 slug,避免与原主题混淆。
  4. 期待默认主题带演示站或选项面板。官方主题刻意不含这些,需要自己做 or 依赖区块编辑器与 patterns。
  5. 未考虑国内访问场景。默认主题默认氛围更偏国际化,字体、emoji、Gravatar 头像等可能需要自托管替换。
  6. 以为默认主题轻量就等于快。Twenty Twenty 系列曾内置 Inter / system fonts 字体文件,某些版本包含 .woff2 资源,需确认体积。
  7. 案例:某个人博客把 Twenty Twenty-Two 直接改出一个明显的模仿 “WordPress 默认风格”,上线后被某客户指为“看起来像没做好”。后来他们改用 _s(Underscores)作为起点重做保留默认主题的代码规范 + 自定义视觉,同样的工作量得到完全不同的商业感。同样的代码质量,观感决定商业接受度——这就是默认主题不适合直接交付的原因。

总结

判断口径:把它当教材和母版,不要当成品。

适合用默认主题的场景:学习 WordPress 现代 API(theme.json、wp:pattern、wp_body_open);快速做一个 demo/技术验证站;作为自有主题项目的起点(配合 wp scaffold child-theme);做不需要独特视觉的内部工具站点。

不适合直接上架的场景:面向客户收费交付的商业站(辨识度问题)、需要大量自定义模块的营销落地页、国内访客为主且对字体/CDN 资源敏感的站点。

推荐路径:用 Twenty Twenty-Five 读标准写法 → 用 wp scaffold child-theme 起骨架 → 先在 theme.json 里定视觉 → 再补 blocks/patterns → 最后 Theme Check 与 Theme Unit Test。导入 挑选 WordPress 主题的 10 个硬指标 里的检查项一起用,这套流程既享受了官方代码质量,又规避了“像默认主题”的问题。

U
UFO_PF作者

专注 WordPress 生态的实战作者,内容以「可复制、可验证」为第一原则。

留下你的想法

邮箱地址不会被公开。带 * 的为必填项。