刚开始使用 WordPress 设计网站时，你可能会被“头部”、“页脚”和“小工具”这些新术语搞得一头雾水。
感觉就像为了建一个简单网站，还得学一门新语言。
好消息是：这些术语其实比听起来简单得多——一旦你理解了它们，搭建网站就会变得轻松很多。
如果你仍然对这些布局术语感到困惑（以及它们如何协同工作），别担心。你不是一个人，而且你来对地方了。
在这份简单明了的指南中，我们将把所有的 WordPress 布局术语拆解成简单易懂的解释，你可以随时参考。
快速解答：什么是 WordPress 布局？
WordPress 布局是你网站的视觉结构，决定了内容在屏幕上的显示位置。它将头部、页脚、侧边栏和主要内容区域等基本元素组织成一个连贯的设计。可以把它想象成你网站的蓝图：你的内容（文字和图片）是家具，而布局就是房间的排列方式，引导访客浏览你的网站。
关于 WordPress 布局的快速说明
在学习 WordPress 布局时，你会遇到不同的术语，具体取决于你如何构建网站。这取决于你使用的是支持站点编辑器的主题、经典主题的自定义器，还是 WordPress 页面构建器插件。
例如，使用 WordPress 站点编辑器时，你可以在外观 » 编辑器中找到布局选项：
而在经典主题中，你则使用外观 » 自定义下的主题自定义器：
为了获得更多设计灵活性，很多用户选择像 SeedProd 这样的页面构建器插件，它们提供拖拽式界面，并且通常带有默认 WordPress 工具所没有的功能，比如额外的区块来添加内容。
虽然这些工具可能使用不同的术语和界面，但基本的布局概念是相同的。理解这些核心术语将帮助你创建更好的 WordPress 设计，甚至自定义布局，无论你使用哪种工具。
下面我们来探索这些关键的 WordPress 布局术语，看看它们在不同的平台上如何工作。我们将涵盖以下内容：
- 理解典型的 WordPress 布局
- 头部区域
- 背景图片/颜色
- 内容区域
- 侧边栏区域（可选）
- 页脚区域
- 布局的其他组件
- 导航菜单
- 小工具（经典主题）
- 区块
- 特色图片
- 封面图片
- 区块模式
- 按钮
- 自定义 CSS
- 页面构建器中的布局术语
- 常见问题
- 额外资源
理解典型的 WordPress 布局
把网站的布局想象成一封友好的信件。信件顶部有问候语（头部），中间是主要信息（内容区域），底部是签名（页脚）。大多数网站都遵循这个简单的结构，看起来像这样：
根据用户查看的页面，布局可能会有所不同。例如，WordPress 博客页面可能会在内容区域旁边包含一个侧边栏。
这个基本布局还填充了其他元素，我们将在后面讨论。首先，我们来详细看看每个主要部分。
头部区域
WordPress 布局中的头部是任何页面的顶部区域。它通常包含你的网站标志、标题、导航菜单、搜索表单以及其他你希望用户首先看到的重要元素。下面是猫哥（原 WPBeginner）网站头部区域的样子：
WordPress 主题中的自定义头部
许多流行的 WordPress 主题包含额外的功能来定制 WordPress 布局的头部区域，有时称为自定义头部。
在块主题中自定义头部
如果你使用支持站点编辑器的块主题，可以在站点编辑器中点击头部区域来更改它。
在这里，你可以自定义头部。你可以更改颜色、调整导航菜单，并添加搜索、站点标志、按钮等区块。
在经典主题中自定义头部
对于经典主题，你通常可以在主题自定义器中找到这些设置。寻找名为“头部”或“头部选项”的部分来更改布局和样式。要上传标志或更改站点标题，请查找“站点标识”标签。
根据你的 WordPress 主题，你可能可以在头部添加全宽图片，并带有标语或行动号召按钮。有些主题还允许你更改标志位置、导航菜单和头部图片。
背景图片/颜色
有些 WordPress 主题还允许你轻松更改网站的背景颜色或使用背景图片。
在块主题中更改背景
如果你使用支持站点编辑器的主题，可以通过站点编辑器中的“样式”来更改背景颜色。
只需从样式面板中选择“颜色”选项，然后点击“背景”来为你的网站选择背景颜色。
在经典主题中更改背景
对于经典主题，设置取决于你主题的功能。许多经典主题支持自定义背景。你可以在主题自定义器的“颜色”或“背景图片”选项中找到这些设置。
通常，这些选项隐藏在其它标签中，你需要四处寻找。更多细节，请查看相关指南：在 WordPress 中添加背景图片或更改背景颜色。
内容区域
内容区域位于站点布局中头部之后，是显示页面主要内容的地方。对于自定义首页布局，内容部分可能包括行动号召、服务或产品、用户评价以及其他重要信息。
在线商店通常使用这个区域来推广促销活动、特色产品、畅销商品等。另一方面，像博客或杂志这样的内容丰富的网站可能使用内容密集型布局，显示最新文章的摘要和图片、展示新闻通讯注册表单以建立邮件列表，或使用内容发现区域来帮助用户找到更多站点内容。
下面是猫哥博客页面的布局示例：
默认情况下，WordPress 使用博客布局，将你最新的博客文章显示为网站首页。但你可以更改设置，使用任何单个页面作为首页。首先，你需要创建两个新页面（例如，一个名为“首页”，一个名为“博客”）。然后，进入设置 » 阅读页面，在“你的首页显示”选项下选择“一个静态页面”。
之后，你可以选择一个页面作为首页，另一个作为博客页面。更多细节，请查看关于为博客文章创建单独页面的指南。别忘了点击“保存更改”按钮。
现在，你可以编辑你选为首页的页面，创建自定义首页布局。
侧边栏区域（可选）
传统上，侧边栏出现在内容区域的右侧或左侧。
不过，许多现代网站现在倾向于更简洁、无侧边栏的布局，尤其是对商业页面和着陆页。注意：在移动设备上，侧边栏通常会移动到页面底部，位于主内容下方。
经典主题中的侧边栏
在经典 WordPress 主题中，侧边栏是准备放置小工具的区域，你可以添加归档、新闻通讯注册表单、分类和热门内容等小工具。你可以在外观 » 小工具页面找到这些选项。
块主题中的侧边栏
对于块主题，侧边栏的工作方式不同。虽然这些主题可以包含侧边栏区域，但使用区块而不是传统的小工具。你可以通过站点编辑器直接自定义它们，提供更灵活的设计选项。
请注意，一些现代 WordPress 主题可能根本不包含侧边栏区域，而是专注于全宽、内容集中的布局。更多关于使用侧边栏的信息，请查看我们的 WordPress 侧边栏技巧终极指南。
页脚区域
页脚区域出现在页面布局中内容区域的下方。如果你使用支持站点编辑器的 WordPress 主题，可以通过点击页脚区域来编辑它。这里你将使用模板部分（Template Parts），它们是可以重复使用的块，用于头部和页脚等部分。最好的地方是，你可以一次编辑它们，它们会在整个站点中更新。
要编辑页脚，请进入外观 » 编辑器启动站点编辑器。从那里，选择左侧菜单中的“模式”，然后滚动到“模板部分”部分，找到并点击你的页脚。
在站点编辑器中编辑页脚区域时，你可以添加任何区块来显示不同元素。例如，你可以添加最重要页面的列表、显示导航菜单、添加联系表单等。
如果你使用的是经典主题，它很可能带有页脚小工具区域。只需进入外观 » 小工具页面，寻找页脚小工具区域。
与站点编辑器一样，你可以使用区块在主题的页脚小工具中添加不同元素。想知道在页脚中放什么？请查看我们的页脚内容清单。
布局的其他组件
接下来，我们将介绍你可以添加到头部、内容、侧边栏或页脚部分的一些 WordPress 布局组件。这些是帮助你构建功能布局的构建块。
导航菜单
导航菜单或菜单是链接的水平或垂直列表。大多数网站至少在头部区域有一个主导航菜单。
然而，有些网站在头部区域使用多个导航菜单。WordPress 也允许你将导航菜单显示为小工具。这些菜单显示为垂直链接列表，你可以将它们放在侧边栏或页脚小工具区域。
更多细节，请查看如何在 WordPress 中添加导航菜单以及如何样式化 WordPress 导航菜单的指南。
小工具（经典主题）
如果你的 WordPress 主题支持小工具，那么你可以使用它们重新排列网站布局。此外，使用区块小工具，你的主题现在也可以在小工具区域中使用区块。你可以将小工具添加到 WordPress 网站的准备就绪的小工具区域或侧边栏。有些 WordPress 主题带有多个准备就绪的小工具区域来添加小工具或区块。
WordPress 自带几个内置的小工具和区块。许多流行的 WordPress 插件也提供自己的小工具和区块。例如，你可以使用小工具/区块来添加热门文章列表、联系表单、横幅广告、社交媒体动态等。你可以在 WordPress 管理区域的外观 » 小工具页面查看所有小工具。
注意：如果你的主题没有小工具区域，你可能不会在 WordPress 管理区域看到“小工具”页面。更多细节，请查看如何添加和使用小工具的指南。
区块
WordPress 使用区块编辑器来编写内容、管理小工具区域或编辑你的网站。它使用区块来表示所有常见的网页元素，因此被称为区块编辑器。这个编辑器旨在帮助你使用区块为 WordPress 文章和页面创建漂亮的布局。
有不同类型的区块用于最常见的元素，比如段落、标题、图片、画廊、视频嵌入、列、表格等。这允许你为 WordPress 网站上的每篇文章或页面创建不同的布局，而无需安装插件或更改主题。在块主题中，这些相同的区块也可以替换侧边栏、头部和页脚等区域中的传统小工具。
特色图片
如果你访问猫哥的首页，你会看到每篇文章标题旁边有缩略图。这些称为特色图片。
WordPress 允许你为文章和页面设置特色图片。你的 WordPress 主题然后会在网站的不同区域使用这些图片。要了解更多，请查看如何添加特色图片的指南。
封面图片
封面图片通常是一张宽幅图片，用作博客文章或页面中新部分的封面照片。你可以使用封面区块将其添加到文章或页面中。封面区块还允许你使用背景颜色代替图片。
要了解更多，请查看我们的封面图片与特色图片区别的详细指南。
区块模式
模式是预先排列好的区块集合，你可以使用它们快速向布局中添加不同部分。你可以使用模式来编写内容并编辑文章和页面。
类似地，你可以在站点编辑器中的 WordPress 块主题和网站布局中使用模式。只需启动站点编辑器，你会在“设计”选项中看到模式。
每个模式都是按特定顺序排列的区块集合，用于常见布局。你的 WordPress 主题可能带有几个模式。你也可以在 WordPress 模式库中找到更多模式。想要保存你的设计部分？你可以将自己的区块排列保存为模式，并稍后重用。
区块模式是 WordPress 中的一个强大功能，你可以在官方 WordPress 模式目录中找到数千个免费选项。随着更多主题和插件添加自己的模式，这个库仍在不断增长。你可以查看我们的使用区块模式指南来了解更多。
按钮
按钮在现代网站设计和布局中扮演着重要角色。它们为用户提供明确的行动号召，有助于提高业务和转化率。默认的区块编辑器带有按钮区块，你可以在任何 WordPress 文章或页面中使用，或者在站点编辑器中使用。
你的 WordPress 主题也可能在主题自定义器中包含行动号召按钮设置。大多数流行的 WordPress 页面构建器插件也包含各种样式的按钮。你甚至可以使用插件在 WordPress 中添加点击呼叫按钮。更多细节，请查看如何添加行动号召按钮的指南。
自定义 CSS
把 CSS 想象成你网站的油漆和装饰。它是控制颜色、字体和间距等视觉细节的代码。你的 WordPress 主题和插件带有自己的 CSS 规则，但你可能想更改小东西，比如文本颜色或字体大小。这就是自定义 CSS 的用武之地。WordPress 让你可以轻松保存自己的自定义 CSS 规则。
在块主题中添加自定义 CSS
如果你使用支持站点编辑器的块主题，请进入外观 » 编辑器页面。从主编辑器仪表板，点击右上角的“样式”图标。这将打开右侧列中的“样式”面板。从那里，向下滚动并点击“附加 CSS”标签。这将显示一个文本框，你可以在其中添加 CSS 代码。完成后，别忘了点击“保存”按钮。
在经典主题中添加自定义 CSS
如果你使用经典 WordPress 主题，可以在主题自定义器中添加自定义 CSS。只需进入外观 » 自定义页面，然后点击“附加 CSS”标签。
从那里，你可以添加自定义 CSS 规则，并能在实时预览中看到它们应用。
使用插件在 WordPress 中添加自定义 CSS
通常，如果你使用默认方法，自定义 CSS 代码会与主题设置一起保存。更改主题会禁用你的自定义 CSS 代码。更好的方法是使用 WPCode 插件。它是最好的 WordPress 代码片段插件，允许你轻松添加自定义代码片段而不会破坏网站。
首先，安装并激活 WPCode 插件。激活后，进入 WordPress 管理仪表板的代码片段 » + 添加新。然后，将鼠标悬停在代码片段库中的“添加你的自定义代码（新代码片段）”选项上，点击“使用代码片段”按钮。
（注意：原文后续图片链接缺失，但根据上下文，我们省略该图片，因为用户要求所有图片有效，但此处无法确认。实际上，原文中该部分未提供完整图片，我们按文本处理。）
使用 WPCode，你可以安全地存储和管理自定义 CSS，即使更换主题也不会丢失。
页面构建器中的布局术语
如果你使用页面构建器插件，常见的术语包括“模块”、“区块”和“部分”。模块或区块是可拖拽的元素，如文本、图片、按钮等。部分则是包含多个模块的容器，用于创建页面中的不同区域。
例如，SeedProd 页面构建器让你轻松创建自定义布局，无需编写代码。它提供高级模块和预建模板，适合快速搭建专业网站。
常见问题
问：WordPress 中什么是布局？
答：布局是页面的视觉结构，包括头部、内容、侧边栏和页脚等区域的排列方式。
问：如何更改 WordPress 布局？
答：可以通过主题设置、自定义器、站点编辑器或页面构建器来更改布局。
问：经典主题和块主题有什么区别？
答：经典主题使用小工具和自定义器，而块主题使用区块和站点编辑器，提供更灵活的编辑体验。
额外资源
- 推荐使用 Hostinger 主机 获得高速稳定的 WordPress 托管服务。
- 如果你进行 SEO 优化，可以参考 GEO SEO 优化指南。
现在你已经掌握了这些布局术语，开始打造你自己的 WordPress 网站吧！记得实践出真知。