归档： 文档

简介

在本课程中，我们将深入了解如何利用行(Row)和堆叠(Stack)块来实现设计需求。掌握群组(Group)块是精通区块编辑器的关键之一。当选择群组块时，您会看到其多种变体：标准群组块（将区块聚集在容器中）、行块（水平排列区块）、堆叠块（垂直排列区块）以及网格块（以网格形式排列区块）。下面我们来看几个行块发挥作用的常见示例。

使用行块

首先，我想展示如何借助行块创建示例的顶部区域。向下滚动会看到当前空白处，输入斜杠加row添加行块，然后插入标题并命名为”Green House”。按回车后文字会出现在标题右侧。复制示例文字”Make your home a sanctuary”并粘贴，通过列表视图选择标题和段落块，用区块工具栏将它们编组。现在文字位于标题下方，我需要移除块间距：打开侧边栏设置，进入样式>尺寸，将块间距设为零。标题与文字紧密排列后效果更佳。

关闭侧边栏后，在列表视图重新选择行块，点击插入器添加按钮块（如”Explore”），在侧边栏选择轮廓样式。接下来将按钮块右移——这正是行块的强大之处：在侧边栏选择行块，于区块工具栏的对齐选项中点击”元素间留空”，按钮块即被推至右侧。最后将按钮块底部对齐：在区块工具栏选择”更改垂直对齐”>”底部对齐”。可见通过行块的间距和对齐选项能实现丰富设计可能。

构建页眉

其次，行块非常适合构建页眉。进入外观>编辑器打开站点编辑器管理模板，在图案库点击加号创建模板部件，选择”页眉”并命名后开始构建。首先添加行块，插入媒体库中的网站标志并放大，回车后在其右侧添加站点标语块（如”Better beans, better coffee”）。通过列表视图选择标志和标语块，用堆叠块包裹它们，在侧边栏样式中将块间距设为零，并在区块工具栏设置居中对齐。

选择行块容器，在样式中将背景色改为鲑鱼色。插入导航块显示所有页面，点击三点菜单选择预设导航菜单。再次选择行块，在侧边栏布局设置中点击”元素间留空”使导航菜单右移，至此页眉完成。

使用堆叠块

最后我们深入探讨堆叠块。本例中有三列，左侧列内容较少。我希望背景色和按钮块能下移与中右列对齐。具体操作是：首先用堆叠块整合列内所有内容，其次将标题和段落单独堆叠，但保持按钮块独立。

选择主堆叠块后，在样式设置中修改其背景色（非列背景），并添加内边距。关键步骤是将堆叠块最小高度设为100%，此时背景色会扩展并与其他列对齐。最后选择按钮块，在区块工具栏设置”垂直对齐”>”元素间留空”，按钮块即下移与其他列对齐。

结语

这些区块表面看似基础，但通过应用间距、最小高度等附加设置，您已见证它们能实现的丰富效果。

简介

在本课程中，我们将探讨如何使用群组块进行设计。群组块是一个容器，允许你将多个块捆绑在一起。可以把它想象成一个能容纳其他盒子的盒子。这个功能帮助你组织内容，并一次性对多个元素应用样式。创建群组块时，你会发现有不同的变体可供选择，即群组、行、堆叠和网格。但在本次课程中，我们将重点讨论默认的分组选项，以在容器中排列成一个盒子。

自定义

添加群组块后，你可以开始填充内容。点击插入器或加号图标，然后逐个选择块。另一种方法是在列表视图中选择所有想要分组的块。然后，你可以使用块工具栏将它们分组，或点击三个垂直点，然后选择“分组”。现在你会注意到所有这些块都被嵌套在一个群组块中。接下来，我们可以开始按照自己的喜好对这个部分或群组进行样式和自定义。我们可以更改背景颜色。我们可以通过添加内边距来调整尺寸，并将群组块的对齐方式更新为全宽。为了保持设计的有序性，你还可以重命名群组块。点击列表视图中的三个垂直点，选择“重命名”，然后添加一个描述性名称。让我们看一个快速示例，将这些步骤结合起来。我想添加一个推荐部分，并已经添加了一个标题块和两个列块。

接下来，我将在列表视图中选择所有三个块，然后在块工具栏中点击“分组”。现在这些块被嵌套在群组块中，下一步是将块重命名为“推荐”。然后我们可以对块进行样式设置，所以我们将转到侧边栏设置，打开“样式”，然后我将选择Twenty Twenty-Five主题附带的一个样式变体，接着在块内容周围添加一些水平和垂直内边距或空间。最后，我将在群组块周围添加一个10像素的边框。

内部块使用内容宽度

接下来，让我们讨论“内部块使用内容宽度”。当你添加一个群组块并在其中嵌套其他块并更改背景颜色时，你会注意到“内部块使用内容宽度”默认是启用的。这是什么意思？这意味着群组内的块会继承主题定义的宽度。因此，即使你将群组块的对齐方式更改为宽宽度或全宽度，内部的块也不会跟随。内部块保持在一个标准宽度，通常是居中的，但如果你禁用“内部块使用内容宽度”，内部块将扩展到填满群组的宽度，从而在设计上提供更大的灵活性。

粘性标题

你知道吗，群组块可以设置为粘性？这在某些情况下特别有用，比如当你想要让标题固定时。让我们看看它是如何工作的。我在我的页面模板中，可以修改页眉和页脚。让我们选择页眉，点击三个垂直点，然后将其包裹在一个群组中。然后我们可以转到设置，向下滚动到“位置”。当你点击“默认”时，可以稍微向下滚动，然后选择将块固定在窗口顶部的选项。但有两件事需要注意：首先，更改群组块的背景颜色，使其不透明，这意味着如果你不更改背景颜色，滚动时文本会透出来。第二，返回设置并取消选择“内部块使用内容宽度”。现在我们可以在前端预览它。

响应性

最后，还需要注意的是，群组块默认是响应式的，当我们在移动设备上预览时，会看到它自动调整布局。

结论

总之，使用群组块可以简化设计过程，使其更加高效。

简介

在本课程中，我们将讨论如何测试内容的可访问性。如果您观看了该主题的第一课，您已经熟悉”可访问性”这个术语并了解其重要性。让我们回顾一下：数字可访问性是一个广义术语，确保尽可能多的人能够使用网络，无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业影响，但重要的是要记住，这些准则承诺为每个人提供更好的浏览体验。保证网站可访问性的最简单方法是在设计和开发阶段就加以考虑。然而，基于区块的主题提供了极大的灵活性，能力越大责任越大。幸运的是，许多技术性可访问性问题通常可以通过自动化工具轻松检测和修复，例如正确的标题级别、颜色对比度、有意义的替代文本、链接文本等。具有讽刺意味的是，这些正是网络上最常见的可访问性缺陷。本教程将重点介绍如何扭转这一局面，向您展示如何在发布前测试创建的内容，并确保您的文章和页面可用。

WordPress内置辅助工具

WordPress在编辑器中包含两个内置的可访问性辅助工具：

1. 语义结构

点击”文档概览”然后选择”大纲”，检查您的标题是否正确排序。应从H2开始按降序延续至H6，不能跳过任何级别。WordPress会用浅橙色标记错误的标题级别，并在您使用不正确标题级别时发出通知。

2. 颜色对比度

如果您选择的文本和背景颜色组合未能提供足够的对比度，WordPress会发出警告，提示这种颜色组合可能导致阅读困难。尝试使用对比鲜明的背景和文本颜色来增强可访问性。修复这些问题后，您的网站就已经比互联网上大多数大型网站做得更好。要调整颜色对比度，选择相关区块（本例中为按钮区块），然后在右侧边栏设置中打开”样式”，在颜色选项下可以更改背景色和文本颜色以确保良好对比。

插件

接下来让我们探索几款可访问性插件：WP Tota11y、Sa11y和Editoria11y是功能相似的变体。

WP Tota11y

WordPress Tota11y是一款轻量级插件，可检查前端和编辑器中的常见可访问性问题，包括错误的标题级别、颜色对比度、不良链接文本、表单元素缺失标签以及图像缺失替代文本。该工具有个巧妙的实验性功能”屏幕阅读器魔杖”，可以模拟屏幕阅读器查看元素。您可以浏览每个类别的警告并查看建议修复，但建议在前端操作，因为在编辑器中检查整个浏览器窗口可能会造成混淆。

Sa11y

第二款Sa11y提供前端全面检查。您可以在设置中启用额外检查项，如可读性、高级链接、颜色对比度和表单标签，还能使用颜色滤镜测试页面在不同类型色盲用户眼中的显示效果。虽然错误会被明确标记，但描述较为宏观，修复方案也不够直观。Sa11y允许管理员在其高级设置页面定义和控制各种功能。

Editoria11y

Editora11y专注于内容和结构检查，不涉及颜色对比度等设计元素。启用后，它会在前端和编辑器显示警报，通知您文档大纲、标题级别、链接文本和目标（即”在新标签页打开”）以及图像缺失替代文本等问题。其目标是帮助作者和编辑发现常见问题，用通俗语言描述缺陷，提供修复建议，并允许用户隐藏无关警报。Editora11y还能生成报告，让管理员根据CSS选择器排除警报、跳过某些测试或包含特定元素。

Accessibility Checker

另外还有流行的Accessibility Checker插件，它在文章/页面编辑器窗口添加新板块，并在前端添加浮动按钮。该插件会显示错误摘要、详细说明（包括相关代码片段）、潜在修复方案以及忽略单个警报的选项。

操作系统应用与浏览器扩展

如果您想更进一步测试其他技术细节，可以采取以下措施：

1. 键盘浏览测试

不使用鼠标，仅通过键盘浏览网站。使用Tab键在链接、按钮和表单字段间导航，按Enter或空格键激活页面交互元素。记录需要修复的无功能元素和缺失的视觉指示器。

2. 色彩模式测试

更改设备配色方案，确保在黑暗模式或高对比度模式下页面显示和功能正常。

结语

总结来说，创建或维护内容的作者和内容管理者可以直接控制标题级别、文本大小、颜色对比度、链接、图像替代文本等关键方面。换句话说，您无需接触代码就能避免产生不可访问的内容。只需保持细心和同理心即可。

简介

创建包容性网站的网页无障碍指南。在本课中，我们将讨论如何创建所有人都能使用和享受的网站，无论他们的能力如何。让我们从基础开始。网页无障碍是指设计适用于所有人的网站，包括那些有视觉、听觉、运动或认知障碍的人。但当我们为无障碍设计时，实际上是在提升所有用户的体验。你不仅在做正确的事情，还能提升网站的SEO和整体可用性。此外，在许多国家，这是一项法律要求。

WordPress与无障碍

WordPress在无障碍方面取得了巨大进步。许多主题和插件正在努力实现无障碍，平台本身旨在达到AA级的《网页内容无障碍指南2.2》。作为设计师，我们可以利用这些功能并进一步提升它们。那么，我们该怎么做呢？

关键原则

让我们将其分解为一些关键原则。首先是颜色对比。你需要确保文本和背景颜色之间有足够的对比度。一个名为WebAIM对比度检查器的工具可以帮助你完成这项工作。接下来是排版。选择易于阅读的字体，并将基本大小至少设置为16像素。请注意，这只是一个最佳实践指南。为了最佳可读性，使用至少1.5的行高，避免全大写和小型大写字母，并仅将下划线用于链接。此外，不应使用完全对齐的文本。默认情况下，WordPress不允许对齐文本，因为它会因间距不规则而降低可读性。现在来看结构和布局。将你的网站想象成一本组织良好的书。你需要一个清晰、一致的布局和逻辑阅读顺序。使用适当的标题层次结构，就像为你的网站创建一个目录。导航是网站的另一个关键部分。设计菜单时要确保它们易于使用鼠标和键盘操作。别忘了表单。清晰地标注所有内容。每个表单输入都应有一个与字段充分关联的对应标签，所有表单元素都应可通过键盘操作。按钮还应具有描述其操作的有意义的文本。最后，始终为图像添加描述性替代文本。替代文本是对图像的简短描述，用于提高无障碍性并帮助搜索引擎理解图像。

此外，应始终提供视频字幕和音频转录。所有这些步骤都有助于为你的视觉内容赋予声音。

WordPress专属技巧

现在，让我们深入一些WordPress专属技巧。选择主题时，在WordPress仓库中寻找标有“无障碍就绪”的主题。这将帮助你在无障碍方面取得先机。接下来，测试插件怎么办？某些类型的WordPress插件如果没有按照最佳实践设计，可能会导致无障碍问题。一个好的方法是仅依靠键盘导航来检查插件的可用性。此外，你可以使用WebAIM的WAVE等工具来检查插件的无障碍问题。还有一些优秀的无障碍插件，提供检查和改进内容无障碍性的工具。在下一课中，我们将进一步探讨这一点。测试至关重要。将其视为校对，但针对包容性。在设计网站时始终完成无障碍审核。不要将其留作事后考虑。记住，为无障碍设计是一个持续的过程。通过在WordPress设计中优先考虑无障碍性，你不仅是在遵循最佳实践，还在为每个人创建一个更具包容性的网络。

简介

本节课我们将探讨使用站点编辑器进行设计和原型制作的优势。学习目标包括：识别站点编辑器的优点、通过编辑器预览样式选择，以及掌握网页设计核心原则。站点编辑器是WordPress的可视化设计工具，支持从页眉页脚到整页布局的全方位定制。

使用站点编辑器的优势

该编辑器具备多项优势：

掌握区块功能后，你可以轻松管理整个网站，因为所有内容都由区块构建。区块替代了短代码、小工具、嵌入内容和自定义HTML等传统方式，简化了创作流程。

直接在WordPress中设计能缩短从构思到实现的路径，便于后续更新维护，同时减少设计师与开发者之间的交接障碍。

编辑器提供实时交互式设计预览，支持即时测试与优化。

使用WordPress原生设计工具可确保平台兼容性，降低外部设计软件的学习成本。

在站点编辑器中设计

接下来让我们探索具体操作。首先需安装并启用区块主题（如Twenty Twenty-Five），然后打开站点编辑器。通过”样式”面板选择”缩小视图”即可开始设计：

1. 先更新文本字体和标题样式

2. 进入”颜色”面板调整配色方案，包括背景色、对比色和强调色

3. 强化按钮等交互元素：选择按钮区块，将文字设为半粗体

接着修改页眉页脚模板：

– 打开”页面模板”（模板决定页面结构）

– 在列表视图中选择页眉，从预设图案库中挑选并调整

– 同理编辑页脚模板

– 可继续定制归档页模板、单篇文章模板或搜索结果模板，例如修改404错误页的布局

区块优先设计意味着将网站拆解为可复用的组件：

1. 复制主题自带图案，保存为同步/非同步模式

2. 在”我的图案”中修改组件

3. 或新建图案：命名→分类→选择同步选项→自由构建

网页设计核心原则

最后介绍指导设计的格式塔原则：

邻近性

将相关元素就近分组以建立视觉关联。上例中因间距不足导致分组不明确。

相似性

统一关联元素的样式。案例中分类标签的相似性帮助用户快速定位，而下方不同颜色的行动按钮通过相同尺寸/形状保持关联。

连续性

通过对齐创造视觉流动路径。

闭合性

利用用户脑补能力简化视觉元素（如WWF熊猫徽标仅用轮廓勾勒）。

结语

掌握站点编辑器与这些设计原则，你就能在WordPress中创建专业级网站。

简介

使用WordPress的最大优势之一就是能够选择和安装插件来扩展网站功能。各类插件可用于增强社交媒体、数据分析、安全性、营销、会员订阅、性能优化、SEO等方面的功能。这些插件能帮助您充分发挥网站潜力，使其更具动态性。无论是添加地图或联系表单、创建多语言网站、搭建电商平台，还是通过缓存提升速度，都能通过合适的插件实现。

插件目录

访问WordPress.org并浏览插件目录时，您能看到数千款可用插件。虽然WordPress.org插件库中的所有插件都是免费的，但某些插件可能提供功能更强大的付费高级版本。

添加插件

要添加插件，请进入WordPress仪表盘的”插件”菜单，选择”安装插件”。系统将打开特色插件页面，您可以查看最受欢迎插件、推荐插件和收藏标签。当您准备寻找合适插件时，可使用页面右上角的搜索功能。例如输入”SEO”，仓库就会根据搜索词列出相关插件。

插件评估

现在我们来探讨选择插件时的注意事项。比较三款热门插件时，需要关注四个要点：首先是星级评分，这反映了已安装用户的反馈；其次是最后更新时间，表明插件是否持续维护，建议避免长期未更新的插件；第三是活跃安装量，代表插件的受欢迎程度；最后是兼容性，确保插件支持最新版WordPress。点击”更多详情”可查看插件支持情况，还能查阅常见问题区和用户评价。

安装与激活插件

让我们以表单插件为例演示安装流程。搜索”forms”会出现多个选项，如Contact Form 7、WP Forms的联系表单和Ninja Forms等。选择安装WP Forms的联系表单后，点击”激活”按钮即可。安装完成后，使用区块编辑器即可轻松在任意位置添加表单。您也可以通过上传本地zip压缩包的方式安装插件，许多高级插件都需要从WordPress插件库外部下载。

停用与删除插件

如需停用插件，进入插件管理界面点击”停用”即可。停用后会出现永久删除选项。

故障排除

若遇到插件冲突，有两种主要排查方式：1. 手动停用插件并逐个测试；2. 使用故障诊断插件（如Health Check and Troubleshooting）。请始终牢记选择优质插件，并参考前文提到的四个评估标准。

结语

插件是为网站增添功能的强大工具，相信您一定能找到满足需求的合适插件。

引言

本课程将指导您如何寻找、激活和自定义满足设计需求的区块主题。作为WordPress设计的未来，区块主题完全由区块构建，提供惊人的灵活性和定制选项，让您能够直观地编辑从页眉到页脚的所有网站元素。

查找与激活区块主题

官方目录查找

访问WordPress.org官网，依次点击「扩展」→「主题」，筛选「区块主题」查看目录中所有可用选项。选择时需关注：最后更新时间、活跃安装量、WordPress版本兼容性、用户评分和技术支持情况。

仪表盘操作

通过控制面板的「外观」→「主题」→「添加新主题」，使用「区块主题」筛选或「功能过滤器」缩小范围。记住：区块主题只是设计起点，您完全可基于默认主题进行深度改造。选定后点击「安装」→「激活」即可启用。

主题定制

通过「外观」→「站点编辑器」进入全站定制界面，这里可以：

• 编辑所有模板
• 创建新布局
• 调整全局样式

高效选型建议

选择与目标最接近的主题可大幅节省时间：

• 作品集网站：优先选择作品集类主题
• 企业官网：寻找含首页布局和模式的商业主题

激活后您可自由操作：

• 调整品牌配色与字体
• 修改布局适配内容
• 增减功能区块
• 甚至从极简默认主题开始改造

祝您享受WordPress区块主题带来的设计自由！

简介

欢迎来到设计师的WordPress快速展示。WordPress是实现创意自由的理想平台。无论您是经验丰富的设计师还是刚刚起步，WordPress都能为您提供将想法变为现实的工具。

WordPress工具

凭借强大的区块编辑器、丰富的模式库和站点编辑功能，WordPress让您无需编写任何代码即可设计出精美的网站。站点编辑器允许您使用区块设计网站的每个部分，从页眉到页脚。全局样式帮助您定义整个网站一致的设计，设置颜色、布局和字体以确保统一的视觉效果。您可以轻松上传来自Google Fonts或其他字体库的网络字体。直观的样式书让您可以控制单个区块的外观，包括标题和按钮等交互元素。您可以创建展示独特风格和愿景的网站，从自定义布局到复杂的排版和动态媒体。使用可重复使用的部分或模式，可以轻松地在网站的不同区域应用设计元素。

插件和区块

通过插件扩展网站的功能。例如，您可以使用插件在网站上添加表单、高级图库甚至滑块。您还可以使用网格区块创建独特的设计，或者选择简洁、现代的设计，优先考虑直观且易于访问的用户体验。封面区块还允许显示带有叠加文本的图像，通常用于页眉、横幅或部分分隔，让您可以添加媒体和内容的组合，并自定义样式。查询循环区块为新闻网站、杂志和内容丰富的区块提供了强大的内容分段和复杂布局功能。

结论

WordPress让您在创新设计和表达创意技能时可以利用各种区块。开始使用这个为全球超过40%网站提供支持的开源平台进行设计吧。

简介

本节课我们将学习如何将样式书作为设计指南使用。学习目标是理解样式书的功能用途，并通过它预览和优化设计选择。

样式书

要查看样式书，请依次进入外观 > 编辑器 > 样式。左侧会显示样式变体和调色板，点击眼睛图标即可查看样式书。这个工具弥合了传统设计与WordPress区块编辑系统的鸿沟，相当于数字化的风格指南，能预览站点各区块组件的视觉效果和交互关系。

点击铅笔图标打开样式面板后，左侧显示样式书，右侧是全局样式设置。样式书与全局样式功能深度关联（后续课程会详解），它提供了另一种预览全局样式修改效果的视角。修改全局样式后，既可以在样式书中聚焦具体区块查看变化，也能直接在站点编辑器的模板/页面上观察调整效果。例如修改网站背景色后，可立即在首页预览效果。这对内容较少的站点特别实用——即使尚未创建图库文章，也能提前设计图库样式。

样式书结构

样式书分为多个标签页：
1. 文本：预览标题、段落、列表等文字元素
2. 媒体：查看图片等多媒体显示效果
3. 设计：按钮、分栏等布局元素
4. 小工具：日历、最新文章、社交图标等
5. 主题：站点标志、特色图片等主题区块

实践案例

设计时可利用样式书：
* 可视化不同元素的设计方案
* 确保设计系统一致性
* 尝试多种样式变体
* 定位需要优化的环节

操作示例：
1. 字体定制：在样式书中选择”排版”，上传Frauncis和Rubik字体后，将正文设为Frauncis，标题设为Rubik，实时观察变化。还可单独调整H1-H6标题大小，并将H3/H4设为细体。
2. 媒体样式：将图片区块圆角设为10像素，该设置会同步应用到图库区块。
3. 色彩系统：在调色板添加深绿色等自定义颜色后，统一修改背景色、文本色、按钮及标题颜色，确保视觉协调。

结论

样式书是可视化设计罗盘，助您高效实验、打磨完美设计。

实操练习

使用WordPress Playground应用所学知识：

样式书导航

1. 通过仪表盘 > 外观 > 编辑器 > 样式 > 眼睛图标进入
2. 浏览各标签页元素展示效果
3. 切换主题预设样式变体，选择符合审美的方案

自定义实施

字体：
* 在”排版 > 管理字体”中添加Google字体（如正文用Poppins，标题用Playfair Display）
* 更新全站字体配置

色彩：
* 创建包含以下颜色的自定义调色板：
– 主色：#005A8D（深蓝）
– 背景色：#F4F4F4（浅灰）
– 强调色：#708090（石板灰）
* 应用至文本、背景、链接悬停、按钮等元素