区块主题 (Block Theme)
本节内容适用于 区块主题。
必需文件
构建区块主题所需的唯一 文件是，
- index.html，这是用于显示文章列表的主模板。Index.html 需要放置在一个名为 templates 的文件夹内。
- style.css 文件，用于样式化内容。
- theme.json 文件，以结构化的方式设置样式属性。
对于高级的区块主题开发，您可以添加模板和模板部件。例如，
- 您可以在主题的文件夹内创建一个 templates 目录并将您的模板放在那里。模板示例如下：
- index.html
- archive.html
- single.html
- page.html
- 您可以在主题文件夹内创建一个 parts 目录并放置模板部件。模板部件示例如下：
- header.html
- footer.html
- sidebar.html
既然您已经了解了区块主题所需的文件，现在让我们创建您的第一个区块主题。
步骤 1 – 创建一个主题文件夹
首先，在计算机上创建一个新文件夹，并将其命名为 my-first-theme。这里将存放您主题的所有文件。
步骤 2 – 创建 style.css 文件
您可以使用计算机上的任何基本文本编辑器创建一个名为 style.css 的新文件。
如果您使用的是基于 Windows 的机器，暂时请使用记事本 (Notepad)；如果您是 Mac 用户，则请TextEdit。
将以下代码复制并粘贴到您新创建的 style.css 文件中：
/*
主题名称：我的第一个 WordPress 主题
*/
步骤 3 – 创建 theme.json 文件
在根文件夹中创建 theme.json 文件，并复制粘贴以下代码：
{
"version": 2,
"settings": {
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
}
}
}
步骤 4 – 在 templates 文件夹中添加 index.html
在您的主题目录中创建一个 templates 文件夹。在 templates 文件夹内创建 index.html 文件。
现在，您的主题结构应如下所示：
templates/
index.html
style.css
theme.json
您的区块主题现已准备就绪。您可以安装并激活该主题。首先，将您的主题目录打包成 ZIP 文件。ZIP 文件名应为 my-first-theme.zip
步骤 5 – 安装和激活您的主题
现在，进入 WordPress 管理面板并点击 外观 > 主题 > 添加新主题 > 上传。上传 my-first-theme.zip 文件，然后点击“安装”并随后进行“激活”。
恭喜——您已经制作了第一个 WordPress 区块主题。
若要了解更多关于区块主题的信息，您可以下载默认的 Twenty Twenty-Three 主题并将其作为参考使用。
经典主题 (Classic Theme)
必需文件
正如在“什么是主题”部分中提到的，WordPress 主题开箱即用所需的唯一 文件是一个 index.php 文件用于显示您的文章列表，以及一个 style.css 文件用于样式化内容。
一旦您进入更高级的开发领域，并且主题变得更大、更复杂时，您将发现将其拆分为许多单独的文件（称为模板文件）会更加容易。例如，大多数 WordPress 主题还将包括：
header.phpindex.phpsidebar.phpfooter.php
我们将在本手册的稍后部分介绍如何创建单独的文件，但现在让我们先启动您的第一个主题吧！
(注意：以下步骤假设您已完成“设置开发环境”部分。)
步骤 1 – 创建一个主题文件夹
首先，在计算机上创建一个新文件夹，并将其命名为 my-first-theme。这里将存放您主题的所有文件。
步骤 2 – 创建 style.css 文件
您可以使用计算机上的任何基本文本编辑器创建一个名为 style.css 的新文件。
如果您使用的是基于 Windows 的机器，暂时请使用记事本 (Notepad)；如果您是 Mac 用户，则请 TextEdit。
将以下代码复制并粘贴到您新创建的 style.css 文件中：
/*
主题名称：我的第一个 WordPress 主题
*/
body {
background: #21759b;
}步骤 3 – 创建 index.php 文件
现在创建一个名为 index.php 的文件并将其放入您的主题文件夹中，向其中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
<?php if ( have_posts() ) : while ( have_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() ) {
previous_posts_link();
}
?>
<?php else: ?>
<p>未找到文章。 :(</p>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>步骤 4 – 安装您的主题
将您的新主题复制到开发环境中的 wp-content/themes 文件夹并激活它以进行审查和测试。
步骤 5 – 激活您的主题
现在您已经安装了主题，请前往 管理 > 外观 > 主题 以激活它。
使用您的第一个主题
恭喜——您刚刚制作了第一个 WordPress 主题！
如果您激活了新主题并在浏览器中查看它，您应该看到类似以下内容：
好吧，它还不是最漂亮 的主题，但这是一个极好的开始！
我们学到了什么？
虽然您的第一个主题可能缺少其他主题中找到的功能元素和设计元素，但我们刚刚创建的 WordPress 主题的基本构建块都是相同的。
请记住，关键不在于现在如何完成所有那些事情，而是要了解制作 WordPress 主题的指导原则，无论代码或模板文件结构随时间如何变化，这些原则都能使您的主题经受住时间的考验。
所有网站，无论其底层是如何创建的，都需要通用元素：页眉、主要内容区域、菜单、侧边栏、页脚等。您会发现制作 WordPress 主题只是构建网站的另一种方式。
从这个最基本的主题开始，您将学习如何组合这些构建块来创建一个更复杂的主题。
接下来
在 第 2 章：主题基础中，我们将更深入地探讨主题并讨论构成大多数主题的模板和其他文件，以及用于制作动态主题的 PHP，包括：
- 模板标签 (Template Tags)
- The Loop（循环）
- 主题函数 (Theme Functions)
- 条件标签 (Conditional Tags)
- 等等