分类： 熟悉WordPress界面

学习成果

我们将尝试回答一个问题：区块编辑器和站点编辑器有什么区别？我们会比较区块编辑器和站点编辑器，并探索站点编辑器的工具。最后，我们将能够自信地将两者结合使用，创建整个网站布局。话不多说，让我们开始吧。

区块编辑器与站点编辑器

站点编辑让你可以自由地构建 WordPress 网站的每个方面，从页眉到页脚，利用站点编辑器功能中的区块。但什么是站点编辑器？它和我们习惯的区块编辑器有何不同？我们如何在站点编辑器中使用模板来创建整体结构？

让我们通过仪表盘来回答这些迫切的问题，并比较两者。区块编辑器是网站内容的基础，用于向页面和文章添加内容。让我们回顾一下如何添加页面和文章内容。在仪表盘中，如果你要创建静态页面，请前往“页面”；如果是动态内容（如博客文章），请前往“文章”。当你点击“添加新”时，你就在为该页面或文章创建内容。

相比之下，站点编辑器允许我们做什么？站点编辑器允许我们统一编辑网站。页面和文章仅用于使用区块添加静态或动态内容。另一方面，站点编辑器使用区块通过模板创建网站的整体外观和感觉。但它也允许我们添加和编辑页面，以确保无缝的站点编辑体验。如果你已经安装了像 Twenty Twenty-Four 这样的区块主题，可以通过“外观”然后点击“编辑器”来访问站点编辑器。

站点编辑器会加载网站首页进行编辑。左侧是站点视图侧边栏。这个工具让你可以在网站的关键部分之间切换：导航、样式、页面、模板和模式。

导航

让我们从导航开始。在这里，你可以快速查看和调整所有菜单。你可以重命名它们、重新排列菜单项等。

样式

当你点击“样式”时，你可以更改主题的样式组合。当你点击“编辑样式”时，你可以更改整个网站的排版、颜色和布局。如果你往下看，还可以自定义整个网站中特定区块的外观。要查看编辑这些区块后它们会如何变化，请前往网站的样式手册。如前所述，你可以预览在此所做的任何更改。

页面

在“页面”下，你可以创建和编辑页面，与在仪表盘中相同。此功能允许你在编辑网站或页面内容时留在站点编辑器中。在站点编辑器中处理页面时，我们向内容区块添加内容。

模式

接下来，我们进入模式。在“模式”下，我们可以访问一个模式库。我们将能够创建和管理自己的模式。我们可以查看主题提供的模式。然后，我们还可以创建和管理模板部件。关于模板部件的快速说明：这些是可重复使用的区块组，用于创建模板中的重复部分，如页眉和页脚。

模板

但现在，让我们专注于模板。当我们打开模板时，让我们看看顶部菜单，并了解这些元素允许你做什么。左上角的加号图标或插入器允许你向正在处理的任何模板添加任何区块或区块模式。在插入器旁边，有撤销和重做按钮。接下来是列表视图。这是一个非常有用的工具，允许你查看页面上所有区块的列表。这对于查看页面结构以及编辑、移动和删除区块非常有用。顶部中间是模板的名称。

当你点击预览按钮时，你将能够看到网站应用更改后在桌面、平板或移动设备上的外观。然后，如果你点击“保存”，可以保存更改。接下来，设置选项卡允许你显示或隐藏模板和区块设置侧边栏。例如，当你选择一个区块时，可以使用设置侧边栏进一步设置区块样式。在设置选项卡旁边，有样式选项卡，这是另一个访问样式设置的地方。最后，如果你点击三个垂直点，你将获得更多选项，例如选择聚光灯模式等。现在我们已经简要介绍了菜单选项。让我们更仔细地看看模板。

顶部显示“用模板表达你网站的布局”。模板使用区块来创建网站的整体设计，例如添加页眉、页脚甚至侧边栏。当我们打开侧边栏模板的页面时，可以看到这三者都在发挥作用。我们可以看到页眉、侧边栏和页脚提供的结构。请注意，模板可以应用于单个或多个页面。考虑到这一点，假设我们想要添加应用于我们页面的模板，例如。这里我们的主题提供了几个选项，例如默认页面模板或带宽图的页面。但我们选择无标题页面。

当模板加载时，你会看到这个模板在没有内容时的示例。这时列表视图就非常方便了。左侧的侧边栏会显示构成此模板的区块是如何结构的。在这里，你可以看到组成这个页面模板的组件。当你点击页眉时，它会像页脚一样被清晰标记。在中间，你会看到一个包含文章内容区块的群组区块。这非常重要。内容区块允许你的页面或文章内容出现在这个模板中。把这个区块想象成你写在页面或文章部分内容的容器。没有容器，你的页面内容就没有地方显示。所以请记住，我们不会向模板添加内容。我们只修改页眉、页脚或侧边栏。

让我们继续，用主题自带的另一个页眉模式替换这个页眉。我们可以滚动浏览可用的选项。然后我会选择带有标志的居中页眉模式。我还会选择一个现有的导航菜单，名为“生活方式”。选择完成后，我们可以继续保存。太棒了，页面模板已保存。但是我们如何将这个模板添加到页面中呢？我们可以导航回主仪表盘，进入页面。然后，点击你想要应用此模板的页面。在右侧的侧边栏中，你会看到一个模板标题。点击它。这个下拉菜单列出了你当前保存的所有模板。在这种情况下，让我们选择“无标题页面”。然后我们可以更新。这是默认页面模板下的页面样子。这是应用了无标题页面模板后的样子。你可以根据需要为任意多个页面重复此操作；文章也是如此。

结论

如你所见，区块编辑器和站点编辑器协同工作。区块编辑器只允许我们向页面和文章添加内容。然而，站点编辑器让你能够整体编辑你的网站。你可以编辑外观和感觉、修改模板以及向页面添加内容。

介绍与学习目标

在本课中，我们将深入探讨媒体库。我们将学习如何浏览和管理媒体库、添加替代文本，并理解优化图片的重要性。

什么是媒体库？

媒体包括你上传并在网站上使用的图片、视频和文件。当然，媒体会被插入到页面和文章中。我相信你也会同意，媒体在提升网站的整体体验和效果方面起着关键作用。你可以向媒体库添加各种类型的媒体，从照片、截图、音频、PDF文档、电子表格、PowerPoint演示文稿等等。

浏览媒体库

当你打开媒体库时，它会默认以网格视图显示。在网格视图中，图片缩略图、音频图标等都以网格结构排列。在这里，你可以筛选媒体以找到所需内容。在顶部，网格视图图标旁边，你可以按媒体类型和日期筛选媒体。“所有媒体项目”下拉菜单允许你按媒体类型选择，如图片、音频、视频、文档，甚至电子表格。你还可以查看未附加到任何文章或页面的媒体。这意味着媒体在你的媒体库中，但尚未在网站的任何地方使用。例如，让我们使用筛选选项，仅查看音频文件。或者文档，如PDF。甚至电子表格。然后，当然，你可以返回查看所有媒体项目。接下来，“所有日期”下拉菜单允许你根据上传日期查看图片。你可以快速找到在特定月份上传的媒体，或者选择查看所有。当你点击“批量选择”时，可以同时删除媒体。你还可以使用右上角的搜索框搜索媒体，例如，使用描述或文件名中的词语。在这种情况下，我想通过简单搜索查看所有与鞋子相关的图片。你也可以在列表视图中查看媒体。顾名思义，在列表视图中，所有媒体会依次列出。你还可以看到文件名和文件类型，例如PDF或JPEG。要向媒体库添加媒体，请点击侧边栏或顶部的“添加新媒体文件”。选择后，你可以将单个或多个文件拖放到页面中，或使用“选择文件”选项。

从媒体库添加媒体

当你使用图片块或画廊块向页面或文章添加媒体时，你可以直接从计算机上传图片到文章或页面及媒体库，或直接从媒体库中选择。对于较大的视频，最好通过YouTube或视频块嵌入，这样可以节省媒体库空间并提高性能。

编辑媒体

当你打开一张图片时，你可以添加属性，如替代文本、标题、说明和描述。始终为图片添加替代文本非常重要。替代文本是对图片的简洁描述，供无法查看图片的用户使用，同时也有利于网站的SEO（搜索引擎优化）。添加描述也能增强SEO，并有助于更好地组织和理解图片的目的或内容。当你点击“编辑图片”时，可以裁剪、缩放或调整图片大小以进行图片优化。更改高度或宽度后，尺寸会自动更新。别担心，当你选择“恢复原始图片”时，可以将图片恢复到原始格式。你还可以选择旋转或翻转图片。

图片优化

最后，让我们简要谈谈图片优化。建议在上传到媒体库之前优化图片，以提高页面加载速度并节省服务空间。你可以使用基于网页的工具来实现这一点，例如TinyPNG、Bulk Resize或Squoosh.app等网站。记住，在将图片添加到媒体库之前，使用描述性和相关的文件名保存图片。这有助于搜索引擎理解图片内容，从而提升SEO。搜索引擎在索引和排名内容时可能会将文件名作为参考因素。另一个选择是使用图片优化插件。在搜索插件目录时，有多种图片优化插件可供选择。找到适合你需求的插件后，你可以安装、激活并按照必要步骤操作。这两种方法（使用基于网页的工具或插件）都能通过压缩图片而不牺牲视觉质量来提升整体性能。祝你在使用媒体库将网站提升到新水平的过程中一切顺利。

实践练习

使用WordPress Playground并完成以下活动以测试你的知识：

1. 上传两张图片和一个PDF或电子表格到你的WordPress媒体库。如果你的计算机上没有图片，可以使用https://unsplash.com/。
2. 使用媒体库中的筛选选项仅显示图片，然后仅显示文档。然后，返回查看所有媒体项目。
3. 在你的 WordPress 网站上创建一个新文章或页面。使用相应的区块（例如，图片区块、画廊区块）从你的媒体库中插入至少一张图片。
4. 将 YouTube 的视频网址添加到视频区块中。
5. 从你的媒体库中选择一张图片，并编辑其属性，如替代文本、标题、说明文字和描述。
6. 通过缩放图片并提供新尺寸来编辑图片。完成后恢复原始图片。