分类： 网页设计与定制

如何搭建自适应WordPress网站

引言

在本课中，我们将学习如何创建一个响应式网站，使其能够适应各种设备和屏幕尺寸并正确显示。响应式网页设计之所以重要，是因为访问您网站的人使用不同的浏览器，可能通过台式电脑、手机、平板电脑，甚至智能电视和智能手表来访问。超过一半的网站访问者可能会通过移动设备查看您的网站。还需要指出的是，有几十种标准屏幕尺寸，因此拥有一个响应式网站至关重要。

学习成果

今天，我们将涵盖使用响应式主题、简化导航菜单、使用移动友好表单、理解块的内在设计、利用块的可扩展性以及测试您的网站。

响应式主题

第一步是从主题仓库中找到并使用一个移动友好的主题。响应式主题是现代网页设计的关键方面，可确保在各种设备上提供最佳用户体验。这种方法意味着图像、文本和其他内容元素会自动调整其布局和比例，以适应所用设备的屏幕尺寸和分辨率，无论是台式电脑、平板电脑还是智能手机。幸运的是，大多数现代 WordPress 主题都设计为开箱即用即响应式。当您预览主题时，可以使用中等和窄显示选项来查看主题在较小屏幕上的外观。另一种选择是在您的测试网站或 WordPress Playground 上测试主题。您知道有一种简单的方法可以通过仅更新 URL 来自动在 Playground 上安装和激活主题吗？如果您添加一个问号、theme 和等号，后跟主题别名（即主题 WordPress.org URL 的最后一部分），它将自动在 Playground 上安装并激活主题，供您测试。让我们看看实际操作。如果我们查看 Frost 主题，我们会注意到别名是 frost。现在我们可以打开 WordPress Playground 并通过添加问号、theme、等号，然后是别名 frost 来更改 URL。现在，我们会注意到主题会自动安装并激活。然后，我们可以查看它在较小屏幕上的外观。最后，您还可以查看其他使用过该主题的用户评论。

简化导航

接下来，简化您的导航菜单。确保在所有屏幕上都有清晰整洁的导航至关重要。为了在较小屏幕上保持简洁的设计，避免在页眉和页脚中塞满内容。当您在模板中编辑页眉或页脚时，可以将其替换为响应式页眉或页脚模式，您可以根据需要更新这些模式。当我们编辑导航块时，可以打开设置，然后会看到汉堡菜单默认用于移动视图。汉堡菜单通过提供节省空间的极简导航解决方案来增强响应性，该解决方案可无缝适应各种设备。

移动友好表单

接下来，我们来谈谈使用移动友好表单。没有什么比在手机上费力填写表单更令人沮丧的了。确保您网站的表单是移动友好的，以提供流畅的用户体验。找到合适的插件，并使用适应不同屏幕尺寸的响应式表单设计，使用户能够轻松在任何设备上输入信息。此外，通过确保表单提供清晰的标签并支持正确的 Tab 键导航来提高可访问性。

块的可扩展性

接下来，我们来讨论 WordPress 块的内在设计。内在设计意味着编写网页布局和组件，这些布局和组件会根据内容和用户偏好动态适应可用空间，而不是仅仅关注屏幕尺寸。WordPress 支持使用块创建灵活且响应式的布局。这种方法允许您无需编写任何代码即可构建各种设计。块及其内容由于其内在特性，能够跨所有设备自适应。WordPress 块、排版和间距会根据屏幕尺寸增大或缩小。虽然在编辑器中改进响应式控制仍有工作要做，但块系统的美妙之处在于其可扩展性。有优秀的免费和第三方块插件提供精细的响应式控制，如果您想走这条路的话。您可以考虑使用诸如 Kadence Blocks、Stackable 或 Jetpack 之类的插件来增强体验，并获得更多块和设计选项。如果您愿意，甚至可以选择使用页面构建器。

测试您的网站

最后，在发布网站之前，务必在各种设备上查看并进行测试。在智能手机、平板电脑、智能电视等设备上打开网站，确保它能正确缩放。你也可以拖动浏览器窗口的边缘，手动调整屏幕尺寸，观察网站布局如何适应。此外，还可以尝试放大和缩小。在 Mac 上按 Command +，在 Windows 上按 Control + 进行放大，按 Command – 或 Control – 进行缩小，确保没有内容被隐藏或溢出。建议使用浏览器中的检查工具测试不同的断点。在大多数浏览器中，按 F12 或右键点击页面选择“检查”打开开发者工具。点击开发者工具工具栏中的设备图标（通常是手机或平板），进入响应式设计模式。拖动视口的边缘手动调整屏幕尺寸，观察网站布局如何调整。

结论

总之，创建响应式网站是提升用户体验和覆盖更广泛受众的关键部分。

使用创建块主题插件进行导出和主题变体

介绍

在本课中，你将学习如何使用创建块主题插件来保存和导出设计变体。如果你想探索该插件提供的更高级选项，请查看创建块主题插件课程，该课程是中级主题开发者学习路径的一部分。以下是本课的学习目标。为什么需要导出你的主题自定义设置？如何创建你自己的自定义 WordPress 主题？使用创建块主题插件将修改后的主题作为 zip 文件安装，并在另一个网站上安装和使用该自定义主题。

创建块主题

一旦你在网站上安装并激活了一个主题，你可能想要进行一些更改，例如调整颜色和布局以匹配你的品牌或个人偏好。默认情况下，这些更改会作为数据库条目存储。它们不会集成到主题文件中。但是，如果你正在一个测试网站上工作，并希望将你创建的设计转移到另一个网站，你需要将其保存为主题的一部分。这就是创建块主题插件发挥作用的地方。它允许你将你的自定义设置转换为原始主题的永久变体，并将修改后的主题导出为 zip 文件，从而有效地创建你自己的自定义主题。然后，你可以在其他 WordPress 网站上使用它，而无需重新设计相同的元素。这种方法特别重要，因为它可以避免在更新主题时覆盖你的自定义设置。最后，它还可以作为你更新后设计的备份。让我们前往插件页面，搜索创建块主题插件。安装并激活该插件后，你可以转到外观并选择创建块主题。在这里，你会看到几个选项。你可以将当前主题导出为 zip 文件，创建一个新的空白主题，克隆当前主题，或创建一个子主题。

自定义设置

接下来，让我们讨论自定义你网站上的当前主题。你可以在不编写代码的情况下自定义主题的各个方面。这包括调整全局样式，如排版、颜色和间距，以及修改主题模板和模板部分，如页眉和页脚。你还可以创建自定义块样式、设计块模式，以及管理网站布局选项，包括网站宽度和对齐方式。对于这个示例，让我们进行一些自定义设置来实际看看效果。那么，让我们前往外观并打开站点编辑器。然后我们可以继续打开样式，前往颜色，因为我想为我的网站创建一个自定义颜色。然后我可以点击调色板，点击自定义旁边的加号，然后创建我的自定义颜色。完成后，我会给它起一个合适的名称，然后点击完成。现在，我可以返回元素，将我的文本和标题颜色更改为我的自定义颜色。接下来，我将打开我的样式手册，点击设计，然后更新我的按钮块。首先，我会更改背景颜色，然后将文本颜色更改为我的自定义颜色，向下滚动，添加一个像素的边框，并将边框颜色也更改为我的自定义颜色。然后我会继续点击保存。最后一个示例，我将自定义我的一个模板。在这种情况下，是 404 模板，当然，这是当找不到页面时显示的页面。我会添加一张手拿指南针的图片，表示一个人正在寻找方向。

将更改保存到主题文件

现在我们已经完成了自定义设置，我们可以点击小扳手或创建块主题扳手，然后选择将更改保存到主题，接着保存我们所做的所有更改。选择将更改保存到主题后，你会注意到一些变化。例如，我添加的自定义颜色现在列在主题下方，因为它已被添加到 theme.json 文件中。提醒一下，theme.json 是一个配置文件，用于定义 WordPress 主题的全局设置和样式。换句话说，我的更改现在已成为主题文件的一部分。让我们看另一个示例，看看 404 模板的主题文件是如何变化的。我们可以前往主题文件编辑器，点击模板，然后选择 404.html。在这里，我们会注意到我们添加的图片现在已成为主题文件的一部分。所以如前所述，创建块主题插件允许我们将自定义设置转换为原始主题的永久变体。

重命名主题并导出 zip 文件

下一步是重命名我们的主题，为此，我们将点击创建一个新的空白主题。然后，我们可以给它起一个合适的名称，在这个例子中，是海洋蓝，并添加主题描述和主题作者。我们现在可以继续自定义我们的主题，当我们准备好导出修改后的主题时，我们可以再次点击小扳手，然后选择导出 Zip。一旦 zip 文件下载到你的设备，你就可以将其导入到另一个在线或测试网站。例如，要将其导入到在线网站，我们可以点击外观，选择主题，点击添加新主题，然后在顶部选择上传主题。然后，我们可以从设备中选择 zip 文件。点击现在安装，然后激活。然后我们就可以开始使用我们的新主题了。

结论

祝你导出和使用创建块主题插件顺利。

充分利用字体库

介绍

在本课程中，你将了解字体库并学习如何充分利用它。学习目标是访问和使用字体库，并考虑字体系列搭配和易读性。WordPress 6.5 带来的一项出色新功能是能够访问和使用字体库。这个工具简化了你网站上的字体管理，允许你安装、使用和移除自定义字体。可以把它想象成字体的媒体库。就像你可以向媒体库添加和上传照片一样，现在你也可以对字体进行同样的操作。任何已安装的字体，无论是由你还是主题分发者安装的，都可以在编辑时选择。

字体库

要开始使用，请点击网站编辑器右上角的全局样式图标，选择排版，然后点击管理字体。在库下方，你将看到已安装的字体以及主题中定义的字体。如果你想从电脑上传许可的网络字体，请点击上传，然后选择文件。如果你无法安装字体，可能是由于托管服务提供商的限制。请联系你的主机商并请求启用字体安装，或者考虑切换到更灵活的托管方案。要从 Google Fonts 安装字体，请点击安装字体标签。首次操作时，你需要允许 WordPress 连接到 Google 服务器。你可以随时撤销访问权限。当你点击三个垂直点时，只需点击撤销对 Google Fonts 的访问权限即可。

本地托管

你安装的字体将从 Google 下载并存储在你的网站上。这意味着它是本地托管的。本地托管的字体能让你的网站更快，并保护访客的隐私。让我进一步解释一下。如果你的字体是本地托管的，网站访客无需连接到 Google 的服务器即可访问这些文件。因此，你可以最大限度地减少加载时间，并避免将用户数据发送给 Google。这确保了符合数据保护法规。如果你知道要使用的字体名称，可以直接搜索。在这个例子中，是 Merriweather。你还可以按类别筛选以显示特定的字体样式。当你选择一种字体时，你会注意到单个变体或多个变体。因此，字体库提供了对不同字重和样式的精细控制，鼓励你注意安装和启用了哪些字体变体。

搭配字体系列

接下来，我们来讨论搭配字体系列。字体系列是一组具有共同设计特征的相关字体。例如，像 Georgia Pro 或 Times New Roman 这样的衬线字体在字母末端有小的线条或装饰，赋予它们经典正式的外观。另一方面，像 Ariel 或 Helvetica 这样的无衬线字体缺少这些装饰，提供了干净、现代的美感。虽然使用多种字体来让你的设计脱颖而出可能很诱人，但混合太多字体会造成杂乱、不一致的外观，并减慢加载速度。最好坚持使用两种灵活、高质量的字体系列，以保持和谐、专业的设计并确保快速加载。常见的做法是使用一种字体用于标题，另一种用于正文，并对引用或标注等特殊元素应用不同的样式。这种方法能让你的设计保持连贯性。

字体搭配示例

让我们看一个例子。我决定使用一种衬线字体和一种无衬线字体，它们相互补充。对于标题，我选择了 Merriweather，正文则使用 Ubuntu Sans。Merriweather 以其经典而精致的风格吸引注意力，Ubuntu Sans 则使正文既醒目又易于阅读。将拉引文设置为浅色、斜体字重和样式，以独特的触感突出特殊文本，而无需加载第三种字体系列。这种搭配创造了一个统一而有效的设计，平衡了冲击力和可读性。最后，我们来谈谈易读性。你还需要确保选择的字体呈现的文本是清晰易读的。这种可读性的视觉方面意味着你网站上的文本内容清晰明了。字母要清晰且设计良好。字体大小要足够大，颜色与背景色要有足够的对比度。

结论

避免使用过于装饰性的字体，通常是手写体，这些字体可能难以阅读，无论是对你自己、视障人士，还是对母语不同的访客来说。总之，易于阅读的字体应该始终是你设计决策中的首要任务。

用WordPress创建单页网站

简介

在本课中，我们将学习如何创建一个单页网站。我们将探索如何创建首页模板、制作固定头部、添加链接和锚点，以及实现平滑滚动。

示例网站

这是我创建的示例网站，带有固定头部。当我点击菜单项时，它会直接跳转到页面的相应部分。我通过创建页面内链接和锚点实现了这一点。由于我正在创建一个单页网站，我没有创建任何页面，而是添加了一个首页模板，并在首页模板上构建整个网站。为此，我们进入站点编辑器。选择模板，然后点击“添加新模板”。接着，我们可以添加首页模板。然后，我添加了页面的所有内容。如你所见，我添加了带有网站标志和导航块的头部、一个封面区域、一个关于区域、一个展示作品的部分（因为这是一个建筑师的个人作品集网站），以及一个联系区域。我使用了一个表单插件来添加这个联系表单。在最底部，是我们的页脚。

链接

让我们从头部开始添加链接。我们要添加到导航菜单的第一个链接叫做“关于”。在侧边栏设置中，“文本”下方是链接的名称，而“链接”下方我们填写 #about 或链接的名称。然后，我们对其他两个部分进行同样的操作。第二个链接叫做“我的作品”，然后将链接改为 #mywork。接着，我们处理联系导航项，在“链接”下方添加 #contact。然后，我们可以点击保存。

锚点

接下来，我们需要为页面上的每个部分添加 HTML 锚点。为此，在列表视图中选择该部分，然后进入侧边栏设置底部的“高级”选项。在“HTML 锚点”下方，添加相关链接的名称。在我们添加的“关于”链接下方是 #about，所以在这种情况下，HTML 锚点应命名为“about”。添加锚点时，请记住它应该使用小写字母且不含空格。请注意，锚点是网页上可以直接链接到的特定点。可以将它们视为页面内的书签。当你点击带有锚点的链接时，它会直接带你到页面的那个部分。接下来，我们可以选择“我的作品”部分并添加 HTML 锚点。我们将输入“mywork”，全部小写且不含空格。最后，对联系部分进行同样的操作。然后点击保存。你会注意到，在列表视图中，每个部分旁边都添加了锚点。在前端，我们现在可以看到导航菜单已就位，当我们点击链接或导航项时，它会直接带我们到那个部分。但我们还需要让头部固定。

固定头部

让我们回到首页模板。要使头部固定，我们需要将头部包裹在一个组块中。一旦将其包裹在组块中，我们可以进入侧边栏设置，在“位置”下方。点击“默认”，然后选择“固定”。接下来，我将把组块的背景颜色改为与网站相同。点击保存后，我们可以在前端查看网站，会看到头部已经固定。而且锚点也已就位。

平滑滚动

最后要讨论的是平滑滚动。我添加了一些 CSS 来实现在从一个部分移动到另一个部分时的平滑滚动。在本课中，我们没有时间深入探讨 CSS，但我会向你展示如何获取这段代码片段，为你的网站添加平滑滚动。简而言之，CSS 代表层叠样式表，通过将规则应用于 HTML 内容来决定网站的外观。要为你的网站添加额外的 CSS，请点击右上角的样式图标，然后点击三个垂直点。接着点击“额外 CSS”。如我们所见，我已经添加了一段简短的代码片段来为网站添加平滑滚动。我也会将其放在视频下方，供你复制粘贴。为了可访问性，我将此功能包裹在一个首选的减少运动媒体查询中。这尊重用户的偏好，并且仅在他们没有在设备上明确禁用该选项时生效。让我们移除 CSS 来看看它对网站的影响。移除后，我们可以返回网站前端。当我们点击链接时，它会直接带我们到那里，不再有平滑滚动。但我们可以通过重新添加 CSS 代码片段来快速恢复。

结论

我相信你现在对添加首页模板、固定头部、标签、锚点以及一些 CSS 代码来实现平滑滚动更有信心了。