首页 / 主题开发手册 / 区块主题 / 网站编辑器创建新主题

网站编辑器创建新主题

使用代码从头开始创建主题的另一种方法是在网站编辑器中对现有的主题进行更新,然后导出这些变化。

导出功能将你的主题文件复制到一个可下载的压缩文件中。该功能在WordPress 5.9中得到了有限的支持,在WordPress 6.0中得到了改进。

  • 5.9:网站编辑器导出模板和模板片段,但没有导出theme.json配置文件,导出包括文件结构,但不包括调色板或区块设置。
  • 6.0:网站编辑器会导出启用主题的完整副本,包括对模板和样式的修改。导出的主题已经准备好被安装和激活。

如果你熟悉区块编辑器但不熟悉区块标记,你可以使用这种方法来加快主题的创建。

编辑一个现有的主题

网站编辑器只有在区块主题激活时才能使用。正因为如此,你必须首先安装并激活一个区块主题,作为新主题的基础。
确保你使用的主题有一个与GPL兼容的许可证,这样你就有合法的权利进行修改并将其转化为你自己的主题。你可以使用WordPress主题目录中的任何区块主题作为你的基础主题。

作为选择,你可以从主题实验的GitHub仓库下载Empty主题。你不需要从这个主题中删除任何多余的模板或区块样式,因为这个主题几乎是空的。

只有具有相应能力的用户角色(例如,管理员)可以访问模板。

在网站编辑器中,点击顶部工具栏中的WordPress图标或网站图标,打开模板或模板片段的列表:

The Site Editor Template list.

 

点击模板或模板片段的名称,在网站编辑器中打开它。
你也可以使用添加按钮来创建模板。
一旦进入网站编辑器,你就可以通过移动、删除或替换区块开始编辑。

 

导出

要导出你在网站编辑器中所作的修改,打开更多工具和选项菜单,选择导出。导出将下载一个名为theme-name.zip的文件(如果你使用WordPress 5.9,文件名是edit-site-export.zip)。根据主题的大小,导出可能需要几秒钟。

 

从导出的文件中创建一个主题

 

使用WordPress 5.9

要将导出的文件转换为完整的WordPress主题,你必须添加最低要求的文件。

第1步:将主题文件夹重命名为你的主题名称。如果你的主题被称为 "My first theme",文件夹的名称应该是my-first-theme.

接下来,请创建一个新的style.css文件,并将其放在根文件夹中。

创建一个空的index.php文件并将其放在根文件夹中。

你的主题现在应该有以下结构:

parts(dir)
templates(dir)
index.php
style.css

现在你可以激活新的主题,你几乎不需要使用代码就已经创建了一个主题。
你可以添加theme.json文件、区块模式和区块样式来进一步改进主题。

 

使用WordPress 6.0

导出的主题是已启用的主题的一个副本。如果你通过WordPress管理区的"添加主题"页面安装该压缩文件,你会被询问是否要替换当前主题。
如果你已经编辑了别人的主题,请不要这样做,因为如果原始主题被更新,你会失去你的修改。
相反,重新命名主题,使其成为你自己的。如何重命名主题取决于原始主题的构建方式。你需要更新:

  • 主题文件夹名称
  • style.css中的主题名称和text-domain
  • style.css和readme.txt中的作者名和链接

大多数情况下,你可以使用搜索和替换工具替换以下内容:

  • 翻译字符串中的文本域(text domain)
  • PHP函数的前缀
  • 模式块中使用的slug

示例

if ( ! function_exists( 'twentytwentytwo_support' ) ) :

    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * @since Twenty Twenty-Two 1.0
     *
     * @return void
     */
    function twentytwentytwo_support() {

        // Add support for block styles.
        add_theme_support( 'wp-block-styles' );

        // Enqueue editor styles.
        add_editor_style( 'style.css' );

    }

endif;
add_action( 'after_setup_theme', 'twentytwentytwo_support' );

应该改为:

if ( ! function_exists( 'my_theme_name_support' ) ) :

    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * @since My theme name 1.0
     *
     * @return void
     */
    function my_theme_name_support() {

        // Add support for block styles.
        add_theme_support( 'wp-block-styles' );

        // Enqueue editor styles.
        add_editor_style( 'style.css' );

    }

endif;
add_action( 'after_setup_theme', 'my_theme_name_support' );
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-heading-and-bird"} /-->

应该改为:

<!-- wp:pattern {"slug":"my-theme-name/hidden-heading-and-bird"} /-->

 

分享你的新主题

如果你想与他人分享你的主题,首先需要完成重命名。
你还需要编辑模板文件,删除图像ID和导航菜单引用,这些都是你的网站所特有的。
这是因为如果你的主题导航菜单指向的是只存在于你的网站上的链接,或指向你的媒体库中的图片,这些都将无法正确显示。

<!-- wp:navigation {"ref":123} /—>

应该为:

<!-- wp:navigation /-->

最后,给原主题的主题作者添加贡献者。

了解如何在WordPress.org上分享你的主题:发布你的主题

 

更新日志:

  • Created 2022-01-20
  • Updated 2022-05-19