你的第一个主题-主题手册|开发者。WordPress.org网站

阻止主题

本节适用于块主题.

必需的文件

这个只有块主题所需的文件是

索引.html，这是显示帖子列表的主模板。Index.html需要放置在一个名为templates的文件夹中。
样式表文件以设置内容样式。
主题.json文件以结构化方式设置样式特性。

对于高级块主题开发，可以添加模板和模板部件。例如

您可以在主题文件夹中创建模板目录，并将模板放在那里。模板示例，
- 索引.html
- 档案.html
- single.html
- 页面.html
您可以在主题文件夹中创建零件目录并放置模板零件。模板零件示例，
- 页眉.html
- 页脚.html
- 侧边栏.html

正如您知道块主题所需的文件一样，现在让我们创建第一个块主题。

步骤1–创建主题文件夹

首先，在计算机上创建一个新文件夹，并将其命名我的第一个主题。这是所有主题文件的存放位置。

步骤2–创建style.css文件

您可以使用计算机上的任何基本文本编辑器创建一个名为样式表.

如果您使用的是基于Windows的机器，请暂时使用记事本，如果您使用Mac，请使用TextEdit。

将以下代码复制并粘贴到新创建的样式表文件：

/*
主题名称：我的第一个WordPress主题
*/

步骤3–创建一个theme.json文件

在根文件夹中创建theme.json文件，复制并粘贴以下代码：

{
“版本”：2，
“设置”：{
“布局”：{
“contentSize”：“840px”，
“wideSize”：“1100px”
}
}
}

步骤4–在templates文件夹中添加index.html

在主题目录中，创建一个模板文件夹。在模板文件夹中创建索引.html文件。

现在，你的主题结构应该是这样的，

模板/

索引.html

样式表

主题.json

您的区块主题现已就绪。您可以安装并激活主题。首先，创建主题目录的ZIP文件。ZIP文件将类似于，my-first-theme.zip

步骤5–安装并激活主题

现在，转到WordPress管理面板并外观>主题>添加新内容>上传。上传my-first-theme.zip并单击安装，然后激活。

恭喜你，你创造了第一个WordPress区块主题。

要了解更多关于区块主题的信息，您可以下载默认的Twenty-Twenty Three主题并将其用作参考。

经典主题

必需的文件

正如“什么是主题“部分只有WordPress主题开箱即用所需的文件是索引.php文件以显示帖子列表和样式表文件以设置内容的样式。

一旦您进入了更高级的开发领域，并且主题的大小和复杂性都在增加，您会发现将主题分解为多个单独的文件（称为模板文件)而不是。例如，大多数WordPress主题还包括：

页眉
索引.php
侧栏.php
页脚

我们将在本手册后面介绍创建单独的文件，但现在让我们启动您的第一个主题！

（注意：以下步骤假设您已经完成了“建立开发环境“第节。）

步骤1–创建主题文件夹

首先，在计算机上创建一个新文件夹，并命名我的第一个主题。这是所有主题文件的存放位置。

步骤2–创建一个style.css文件

您可以使用计算机上的任何基本文本编辑器创建一个名为style.css的新文件。

如果您在基于Windows的机器上，请使用便条簿现在，如果你正在使用Mac，那么使用文本编辑.

将以下代码复制并粘贴到新创建的样式表文件：

/*主题名称：我的第一个WordPress主题*/车身{背景：#21759b；}

参考Gist

步骤3–创建index.php文件

现在创建一个名为索引.php并将其放入主题的文件夹中，向其中添加以下代码：

<!DOCTYPE html><html><头部><meta charset=“<？php博客信息（'charset'）；？>”><标题><？php wp_title（“|”，true，“right”）；？></标题><link rel=“stylesheet”href=“<？php echo esc_url（get_stylesheet_uri（））；？>”type=“text/css”/><?php wp_head（）；？></头><body><h1><？php博客信息（“name”）；？></h1><h2><？php博客信息（“描述”）；？></氢气><?php if（have_posts（））：while（haver_posts）：the_post（）；？><h3><？php the_title（）；？></h3><?php the_content（）；？><?php wp_link_pages（）；？><?php edit_post_link（）；？><?php endwhile；？><?php（电话）if（get_next_posts_link（））{next_posts_link（）；}？><?php（电话）if（get_previous_posts_link（））{上一个posts_link（）；}？><?php其他：？><p>未找到帖子。：(</p><?php-endif；？><?php wp_footer（）；？></body></html>