云策 WordPress 开发者社区

社区新闻

弥合鸿沟：混合主题

查看官方原文 ↗ 发布于

在本文中，你将了解 WordPress 主题类型，并学习如何将区块主题功能添加到经典主题中，融合两者的优点，创建一个强大而灵活的混合主题。

主题类型

主要有两种主题类型：经典主题和区块主题。

区块主题概述

2022年1月，WordPress 5.9发布，随之而来的是站点编辑器。这项新功能允许开发者完全使用区块创建主题，同时也让用户无需编写一行代码就能更多地控制其网站的各个区域，如页眉和页脚。

还引入了一种在整个站点全局应用样式的新方法，通过theme.json文件进行管理。区块主题通过利用可视化的、基于区块的方法简化了模板的创建，允许直接在编辑器中设计复杂的布局。这些功能使非开发者能够快速直观地进行全站更改，同时为开发者提供了实现高级功能和创建高度可定制主题的灵活性。

经典主题概述

经典主题是基于传统 PHP、HTML、CSS 和 JavaScript 的主题，其历史可以追溯到近二十年前的2005年，当时WordPress 1.5首次引入了主题系统。它们主要依赖 PHP 来提供高级功能，这使其成为需要创建具有高度自定义逻辑和集成主题的开发者的绝佳选择。不幸的是，这种依赖性使得非开发者很难使用它们，因为即使是最小的更改通常也需要直接编辑模板文件。虽然经典主题支持区块编辑器，但它们不支持站点编辑器，因为站点编辑器要求其模板的所有部分都是区块标记。

关键差异

两种主题类型有几个差异，理解这些差异对于帮助你为项目选择正确的主题类型很重要。尽管存在差异，它们也共享许多功能，你可以随着时间的推移逐步采用。

主题类型之间的主要区别是：

  • 站点编辑器：区块主题专为站点编辑器设计，它让用户对其模板的外观和感觉有更多控制，这是经典主题不支持的功能。
  • 模板：经典主题利用 PHP 文件，允许通过代码实现高度自定义的模板。区块主题需要由基于区块的标记组成的 HTML 文件，并且可以直接在编辑器中轻松创建。
  • 全局样式：经典主题对theme.json文件的支持有限，随着更多区块主题功能在经典主题中可用，这种支持可以扩展。

尽管在功能以及用户如何使用它们方面存在所有差异，但一个关键差异使得经典主题成为区块主题：包含一个/templates/index.html文件。当此文件存在时，WordPress 会将其视为区块主题。

混合主题

在经典主题和区块主题之间，存在第三种方法，它没有得到太多关注，但随着每个 WordPress 版本的发布而获得越来越多的支持。这就是混合主题的概念，它植根于经典主题的传统方法，但能够利用区块主题的大部分现代功能。

自WordPress 5.9以来，越来越多的区块主题功能已可用于经典主题，允许开发者逐步采用这些新功能，并混合使用 PHP 或 HTML 文件，而无需完全转向区块主题。这就是所谓的混合主题，在本文的其余部分，将详细探讨每个功能。

环境设置

为了更容易跟进，你可以克隆一个附带的GitHub 仓库，它使用underscores作为起点。该仓库包含一些新文件，允许你快速测试混合主题功能。

  • functions-hybrid.php
  • /assets/js/hybrid-theme.js
  • /assets/css/hybrid-theme.css

functions-hybrid.php文件包含两个区块资源入队，用于加载必要的 CSS 和 JS 文件。如果你在跟进时使用自己的主题，以下是示例仓库中的入队代码。

// 将脚本入队到区块编辑器
function hybrid_theme_enqueue_scripts() {
 wp_enqueue_script(
     'hybrid-theme-scripts',
     get_template_directory_uri() . '/assets/js/hybrid-theme.js',
     array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
     null,
     true
 );
}
add_action( 'enqueue_block_editor_assets', 'hybrid_theme_enqueue_scripts' );

// 在区块编辑器和前端入队样式
function hybrid_theme_enqueue_styles() {
 wp_enqueue_style(
     'hybrid-theme-styles',
     get_template_directory_uri() . '/assets/css/hybrid-theme.css',
     array(),
     filemtime( get_template_directory() . '/assets/css/hybrid-theme.css' )
 );
 add_editor_style( 'assets/css/hybrid-theme.css' );
}
add_action( 'enqueue_block_assets', 'hybrid_theme_enqueue_styles' );

现在你已经准备好了，让我们探索可以在经典主题中使用的区块功能以及如何设置它们。

如果你想跳过并查看包含示例的主题，仓库有一个分支，其中包含添加了以下大部分示例的主题版本。

全局样式

全局样式和设置 API 在WordPress 5.8中引入，开发者可以通过 theme.json 文件开始控制其主题中的设置、工具和样式。最初，此功能仅对经典主题有部分支持，但随着时间的推移，每个新版本都扩展了支持。

要利用此功能，只需在主题根目录创建一个theme.json文件。以下是一个入门示例。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": "768px",
      "wideSize": "1024px"
    },
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#DE7D0D",
          "name": "Primary"
        },
        {
          "slug": "secondary",
          "color": "#7C0DDE",
          "name": "Secondary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "slug": "default",
          "name": "Default",
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
        }
      ]
    }
  }
}

在此示例中，你正在添加布局尺寸、基本调色板并设置默认字体。有很多资源可用，因此我不会详细介绍你可以和不能使用 theme.json 文件做什么，但如果你想进一步探索，我鼓励你查看主题手册中的可用资源。

区块主题支持

你可以向经典主题添加几个主题支持，以包含区块主题功能和区块功能。在WordPress 开发者资源中阅读更多关于主题支持的信息。

  • responsive-embeds – 添加对响应式嵌入的支持
  • editor-styles – 添加在区块编辑器中加载样式表的支持
  • disable-custom-colors – 禁用区块的颜色选择器
  • disable-custom-font-sizes – 禁用排印的自定义字体大小

当存在theme.json文件时，以下主题支持将不起作用（因为它们可以在你的theme.json文件中完成，下文将详细介绍）。

  • align-wide – 添加对编辑器中全宽和宽对齐的支持
  • custom-line-height – 添加自定义行高的排印选项
  • custom-spacing – 添加对区块自定义内边距的支持
  • custom-units – 添加对自定义测量单位的支持
  • editor-color-palette – 添加创建自定义调色板的支持
  • editor-gradient-presets – 添加创建自定义渐变预设的支持
  • editor-font-sizes – 添加为排印创建自定义字体大小的支持
function hybrid_add_theme_supports() {
  add_theme_support( 'responsive-embeds' );
  add_theme_support( 'disable-custom-colors' );
  add_theme_support( 'disable-custom-gradients' );
  add_theme_support( 'disable-custom-font-sizes' );

  // 不能与 theme.json 文件同时使用
  add_theme_support( 'align-wide' );
  add_theme_support( 'custom-line-height' );
  add_theme_support( 'custom-spacing' );
  add_theme_support( 'custom-units', array( 'rem', 'em', 'px', 'vw', 'vh' ) );

  add_theme_support(
    'editor-color-palette',
    array(
      array(
        'name'  => __( 'Dusty Blue', 'hybrid-theme' ),
        'slug'  => 'dusty-blue',
        'color' => '#367cb3',
      ),
      array(
        'name'  => __( 'Faded Brown', 'hybrid-theme' ),
        'slug'  => 'faded-brown',
        'color' => '#7a6a53',
      ),
    )
  );

  add_theme_support(
    'editor-gradient-presets',
    array(
      array(
        'name'     => __( 'Dusty to Faded', 'hybrid-theme' ),
        'gradient' => 'linear-gradient(135deg, #367cb3 0%, #7a6a53 100%)',
        'slug'     => 'dusty-to-faded',
      ),
    )
  );

  add_theme_support(
    'editor-font-sizes',
    array(
      array(
        'name' => 'Small',
        'slug' => 'small',
        'size' => 12
      ),
      array(
        'name' => 'Medium',
        'slug' => 'medium',
        'size' => 18
      ),
    )
  );
}
add_action( 'after_setup_theme','hybrid_add_theme_supports' );

theme.json 中的主题支持

有一种更简单、更高效的方法来添加这些主题支持。事实上，当你在本文前面部分创建theme.json文件时，你已经设置了其中的几个。下面的示例添加了对上面列出的所有内容的支持，除了responsive-embeds支持。

{
 "$schema": "https://schemas.wp.org/trunk/theme.json",
 "version": 3,
 "settings": {
   "layout": {
     "contentSize": "1024px",
     "wideSize": "1280px", // align-wide
   },
   "typography": {
     "customFontSize": false, // disable-custom-font-sizes
     "lineHeight": true, // custom-line-height
     "defaultFontSizes": false,

     // editor-font-sizes
     "fontSizes": [
       {
         "name": "Regular",
         "slug": "regular",
         "size": "16px"
       },
       {
         "name": "Very Big",
         "slug": "very-big",
         "size": "36px"
       }
     ]
   },
   "color": {
     "custom": false, // disable-custom-colors
     "customGradient": false, // disable-custom-gradients

     // editor-color-palette
     "palette": [
       {
         "name": "Primary",
         "slug": "primary",
         "color": "#DE7D0D"
       },
       {
         "name": "Secondary",
         "slug": "secondary",
         "color": "#7C0DDE"
       },
       {
         "name": "Dusty Blue",
         "slug": "dusty-blue",
         "color": "#367cb3"
       },
       {
         "name": "Faded Brown",
         "slug": "faded-brown",
         "color": "#7a6a53"
       }
     ],

     // editor-gradient-presets
     "gradients": [
       {
         "name": "Dusty to Faded",
         "slug": "dusty-to-faded",
         "gradient": "linear-gradient(135deg, #367cb3 0%, #7a6a53 100%)"
       }
     ]
   },
   "spacing": {
     "units": [ "px", "em", "rem", "%" ] // custom-units
   },

   // custom-spacing (done on a per block basis)
   "blocks": {
     "core/columns": {
       "spacing": {
         "padding": true,
         "margin": true
       }
     }
   }
 }
}

区块变体

区块变体 API在WordPress 5.4中引入，为开发者提供了一种简单的方法来创建具有独特起始属性的现有区块变体。在经典主题中添加区块变体有几个步骤，但它们简单明了。

通过将以下代码粘贴到/js/hybrid-theme.js中来添加区块变体。在此示例中，你正在创建一个名为“介绍段落”的段落区块变体，该变体为字体大小设置新默认值，将首字下沉设置为 true，并使用唯一的占位符。

wp.blocks.registerBlockVariation('core/paragraph', {
   name: 'intro-paragraph',
   title: 'Intro Paragraph',
   description: 'A paragraph with large text and a drop cap.',
   attributes: {
       fontSize: 'medium',
       dropCap: true,
       placeholder: 'Write an introduction.',
   },
});

将新的Intro Paragraph区块变体添加到页面，你应该会看到类似此截图的内容。

编辑器中使用的介绍段落区块变体示例。

区块样式变体

WordPress 5.3向我们介绍了区块样式变体，允许开发者在为区块创建替代样式方面具有更大的灵活性，这些样式可以在编辑器中快速选择。有可以在 JavaScript 或 PHP 中利用的选项来注册区块样式变体，但自WordPress 6.6以来的首选方法是使用类似于theme.json文件的 JSON 文件。

在你的主题中创建/styles/block/blue-heading.json并粘贴以下代码，为标题和段落区块添加“深蓝背景”选项。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "slug": "dark-blue-bg",
  "title": "Dark Blue Bg",
  "blockTypes": [ "core/heading", "core/paragraph" ],
  "styles": {
    "color": {
      "background": "#2860a6",
      "text": "#ffffff"
    },
    "spacing": {
      "padding": {
        "top": "0.5em",
        "right": "1em",
        "bottom": "0.5em",
        "left": "1em"
      }
    }
  }
}

将Heading区块添加到页面并选择Dark Blue Bg样式变体，你会看到类似此截图的内容。

编辑器中使用的深蓝标题样式变体示例。

要更深入地了解区块样式变体，请参阅 WordPress 开发者博客上的这篇文章。

模板和模板部件

当WordPress 5.9引入站点编辑和区块主题时，它还包括了在经典主题中使用区块模板和部件的能力。只需添加一个新的主题支持，你就可以开始使用 HTML 文件中的区块标记创建模板部件，例如页眉和页脚。你甚至可以更进一步，利用区块创建完整的模板。

在经典主题中使用区块模板和模板部件有几个方面。在使用任一功能之前，你必须通过将以下代码粘贴到functions-hybrid.php文件中来添加区块模板部件主题支持。

function hybrid_add_template_parts_support() {
  add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'hybrid_add_template_parts_support' );

区块模板部件

你现在可以开始创建可以在 PHP 模板中使用的区块模板部件。每个模板部件必须使用包含区块标记的 HTML 文件。所有文件还必须位于主题根目录的/parts文件夹中。

创建/parts/footer.html并粘贴以下区块标记。

<!-- wp:group {"backgroundColor":"vivid-cyan-blue","layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background">
 <!-- wp:group {"style":{"spacing":{"padding":"20px 30px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
 <div class="wp-block-group" style="padding:20px 30px">
   <!-- wp:paragraph {"align":"left","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"medium"} -->
   <p class="has-text-align-left has-white-color has-text-color has-link-color has-medium-font-size">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
   <!-- /wp:paragraph -->
   <!-- wp:loginout {"style":{"spacing":{"padding":"10px 12px"}},"backgroundColor":"white"} /--></div>
 <!-- /wp:group -->
</div>
<!-- /wp:group -->

要在主题的页脚中使用新的模板部件，请将以下代码粘贴到footer.php文件中，可以放在现有footer代码之后，也可以完全替换它。

<?php block_template_part( 'footer' ); ?>

对要在主题中创建的任何其他区块模板部件重复这些步骤，并在block_template_part函数中，将`footer`替换为你创建的新文件的名称。

设置好页脚区块并刷新站点的前端后，你应该会看到类似此截图的页脚。

前端视图中的区块页脚模板示例。

让我们再添加一个；这次是header.html文件。创建新文件并粘贴以下代码。

<!-- wp:group {"align":"full","style":{"