WordPress-增强工具集-AI-驱动的-WordPress--全-

WordPress 增强工具集（AI 驱动的 WordPress）（全）

原文：zh.annas-archive.org/md5/7cc3601a83884dc03573772873b45894

译者：飞龙

协议：CC BY-NC-SA 4.0

第一章：人工智能和 WordPress 主导着互联网

本章涵盖

• 开始使用 AI 和 WordPress

• 人工智能如何提升你的网站

• 掌握 AI 提示技巧

• 网站构建的 13 个主要步骤

我假设你之所以阅读这本书，是因为你做出了明智的选择，想要学习如何使用人工智能（AI）在 WordPress 中做到你独自一人无法做到的事情。在本书的整个过程中，我会向你展示如何快速构建和润色一个完全专业且独特的网站。一个你可以非常自豪的网站。本书的章节从基础到更高级的主题逐步推进。我会用具体的例子和逐步说明来详细解释每一件事。

本书中的许多用例都集中在构建和润色网站上。但人工智能（AI）可以帮助你完成任何智力或创造性任务。你将了解 AI 如何让你的努力令人印象深刻并出类拔萃。无论你在做什么！

访问本书的博客

人工智能正在以极快的速度，实际上是无前例的速度发展。每天都有新的进展公布。因此，我建立了一个博客（aipoweredwp.signalstreaming.com），以保持你对本书修订和新的人工智能发展的最新了解。你还可以提问和发表评论。

自己构建和管理你的 WordPress 网站是个好主意。WordPress 从一开始就被设计成易于使用。我在 ed2go 上教授了三门在线 WordPress 课程，我的学生掌握了他们需要创建优秀网站的工具和技能，只需六周就能掌握！有了这本书，你也可以达到这种熟练程度。

雇佣一个开发者来构建你的网站可能会很昂贵且令人沮丧。首先，你必须找到一个你希望有能力的开发者。许多开发者比设计师更擅长编程，所以你可能会轻易地得到一个运行顺畅但外观（如果可以这么说的话）不够吸引人的网站。媒体过多或过少。拥挤、荒凉或不平衡的布局。不合适或难以阅读的字体。不合适的配色方案。你明白我的意思。

或者，你可能遇到相反的问题：你的开发者是一位有强烈设计背景的艺术家，但在构建一个功能性强、逻辑清晰且易于导航的网站方面有困难。虽然外观不错。

网站建成后，如果你需要调用开发者进行网站维护，通常会有相当大的额外成本。而且你的网站确实需要维护。话虽如此，如果你没有时间但有钱，那么外面有很多优秀的开发者——其中一些相当合理。

注意，设计改进也不应被忽视——网站设计趋势会随时间变化，您希望您的网站保持现代感。如果您能自己维护网站，您将节省金钱和时间（开发者有时很忙，不得不让您排队）。有了 AI 和 WordPress，网站维护——就像网站建设一样——比大多数人想象的要容易得多，您很快就会了解到这一点。

首先，我们将为 WordPress 建立一些背景知识，并解释为什么它与竞争对手之间存在如此大的差距。然后，我们将探讨一些使用 AI 使您的网站令人印象深刻和卓越的基本概念。您将发现 AI 的多种用途，并学习如何编写有效的提示（向 AI 系统发出的请求）以获得最佳结果。

最后，您将学习如何克服任何 WordPress 网站构建者面临的主要挑战。同时，AI 也能在那里提供帮助。

小贴士：本书中的一些示例基于一个虚构的“Instant Pot Recipes”实践网站，但如果您只想将这些课程应用到自己的网站上，也是可以的。附录中提供了逐步说明，展示了如何创建实践网站以及安装它所使用的 Twenty Sixteen 主题。此外，本书侧重于经典的 WordPress 编辑器，而不是 Gutenberg 块编辑器。因此，对于实践网站，您应该安装 Classic Editor 插件（附录中也有解释）。尽管如此，我仍在全书各处提供了并行说明，展示了如何使用 Gutenberg 块编辑器，供那些更喜欢它的人使用。

1.1 为什么 WordPress 获胜

多数其他网站构建系统在过去的几年中已经逐渐被淘汰。然而，WordPress 已经发展到主导互联网，现在占据了 65% 的市场份额。最接近的竞争对手是 Joomla，仅有 4.6%。在 WordPress 出现之前，建设一个网站需要您与三个可怕的“T”作斗争——时间、技术性和乏味。大多数人根本无法做到！WordPress 于 2003 年首次亮相，结果是构建网站迅速变得简单得多，效率也高得多。自 2011 年以来，WordPress 的使用量平均每年增长 12%。

WordPress 相比于 DreamWeaver 和 Drupal 等传统网站构建工具，是一个巨大的进步。首先，WordPress 消除了编写编程代码的需求。因此，几乎每个人现在都可以为自己构建令人印象深刻的网站——无论网站的目的专业、商业、教育、个人还是商业。正如您将看到的，一个优秀的网站可以在几周内而不是几个月内建成。

让我们来看看 WordPress 比其他替代品优越的主要原因：

• 易于安装——大多数 WordPress 主机服务中都提供简单的一键安装工具，只需点击一下即可在您的托管账户上安装一个新的空 WordPress 网站。无需任何技术知识。

• 无需你的计算机编程—WordPress 无需编程（除非你想编程）。没有技术背景的人发现他们不需要知道如何编程。WordPress 会在幕后为你创建编程代码。你可以通过移动滑块、拖放、点击从选项列表中选择等方式进行视觉操作。你将在一个图形化、而非程序化的高效系统中制作你的网站页面。

  你可以创建和修改网站内容，而无需知道如何编写 HTML、PHP、JavaScript 或 CSS 代码。你可以用鼠标调整页面布局、按钮或链接点击的响应、文本质量和其他网站元素，而不是进行令人厌烦的键盘编码。简单来说，用户界面是有效、友好且直观的。

• 大量专业设计的主题集合—如果你愿意，你可以将你的网站设计交给专业设计师。你可以从超过 30,000 个免费或付费主题中进行选择。WordPress 主题决定了网站的外观——颜色方案、布局、字体和其他风格元素。然而，你可以自定义和修改这些默认的视觉元素，使你的网站独一无二。此外，你可以使非技术人士能够快速掌握。

• 可定制—WordPress 高度可定制，使用户能够轻松修改他们网站的设计和功能。如果你愿意，你可以添加自己的编程代码，但这不是必需的。

• 大量插件选择—仅官方 WordPress 目录中就有超过 60,000 个插件！它们为网站添加了功能，如动画图片库、购物车结账系统、数千种字体的集合、备份系统、社交媒体连接以及许多其他功能。你可以通过简单的鼠标点击来安装这些插件。

• 内置媒体管理—WordPress 内置了媒体库，这使得上传、组织、修改和将图片和其他媒体插入到你的文章和页面中变得非常容易。

• 响应式设计—大多数流行的 WordPress 主题都是设计成响应式的，这意味着它们会自动调整内容以适应屏幕大小，即使在大型计算机显示器上也能轻松创建适合移动设备的网站。然而，在网站公开之前，你应该在多种屏幕尺寸上进行测试：手机、平板电脑和计算机显示器。这样，你可以在必要时进行调整。

• SEO 友好—WordPress 在设计时就考虑了搜索引擎优化（SEO），这使得你能够修改你的网站，以便在人们搜索你的网站主题时获得更高的排名。

• 高效的页面构建—你会发现许多工具，可以在短时间内快速构建一个成功的网站。

既然我们已经阐述了 WordPress 在大多数网站构建场景中是一个优秀的选择，那么让我们继续探讨这本书的另一个主要话题——人工智能以及它如何帮助将你的 WordPress 工作提升到新的水平。

1.2 为什么使用人工智能

工业革命见证了诸如麦科马克收割机等机器的发明，这些机器显著增强了人类的体力。今天，随着人工智能的出现，我们正站在一个更加快速和深刻的变革的边缘。人工智能正在增强我们的思维——我们的智慧、才能和创造力。更重要的是，人工智能在某些方面已经超越了人类，并且威胁着在所有方面超越人类。

1.2.1 人工智能产生一流的结果

这是一幅展示人工智能令人印象深刻技能的画作。我要求 Midjourney，一个文本到图像的人工智能平台，创作一幅画：

|

以爱德华·霍珀风格绘制的《他去了哪里？我做了什么？》

它提供了图 1.1 中展示的完全原创的画作，我相信霍珀本人会非常自豪。

图 1.1 展示了人工智能能够达到的高质量。这幅画具有霍珀风格的全部元素，传达了他大多数画作的主题——麻木和孤独。

图 1.1 人工智能可以创作出令人惊叹的艺术作品。这幅画作是霍珀作品的宝贵补充。在人工智能出现之前，即使是专家也可能说这是一幅最近发现的失落霍珀原作。

1.2.2 人工智能能为您做什么？

史蒂夫·乔布斯曾经说过：

当一项新技术出现时，我们通常会用它来做旧的工作。但真正的革命发生在有人想出如何使用这项技术来做以前不可能的事情时。

这直接适用于人工智能。许多人像过去使用谷歌一样使用它：仅仅为了获取信息。我认为我们大多数人至少在某种程度上有罪，忽视了人工智能能够以卓越成果处理的巨大、新颖和多样化的工作：

|

人工智能可以为网站开发者做什么工作？

|

您将获得一屋子的高技能助手。

表 1.1 展示了人工智能的多样性。我在列举人工智能在创建和润色网站方面的帮助方式时，是否使用了人工智能？当然。我写了前 10 条，然后让 Gemini 提出一些更多的建议。它提供了最后 8 条（斜体部分）。

表 1.1 人工智能如何帮助您？让我们数一数

人工智能的潜在角色	描述
研究员	进行研究并收集相关信息以支持您的内 容或商业策略
主要编辑	监督整体内容，确保其符合您的目标并保持高质量
技术编辑	关注行业报告或手册等专业内容的准确性及质量
标志设计师	创建并设计代表您品牌身份的标志
插画师	为您的网站制作插画和图形元素
校对编辑	审查和编辑书面内容，以确保其清晰、连贯和易读
校对员	检查你文本中的语法、拼写和标点符号错误
画家	为你网站上的视觉内容创建数字绘画或艺术品
经验丰富的网站评论员	评估你网站的设计、内容和用户体验，并提供改进的反馈
初稿写作助理	协助创建你内容的第一稿版本
专家色彩师	选择并应用增强你网站美学的色彩方案
原创想法生成器	提供创意想法和灵感，用于新内容或网站功能
有才华且有经验的网站设计师，你可以向他/她提出你的想法	与你合作，提供网站概念的设计见解和反馈
用户体验分析师	分析用户交互和行为，以改善你网站的可用性和用户体验
竞争对手网站审查员	检查竞争对手网站，并提供其优势和劣势的见解
博客消息管理器	管理和安排博客文章，并确保信息的一致性
客户服务聊天机器人	为客户查询和问题提供自动化支持
电子邮件营销活动经理（即将推出）	规划、设计和管理电子邮件营销活动，以吸引你的受众

人工智能也可以成为你雇人做的几乎所有其他工作的专家（只要不是体力劳动，比如吸尘）。

1.2.3 从创作者到策展人的转变

注意，当你使用人工智能完成这类任务时，你在组织中的位置会上升。人工智能是你的助理。因此，根据定义，你就是它的老板。你不必进行研究并产生草稿。人工智能会做这些。你成为一个策展人而不是一个创作者。

人工智能会向你展示几个标题、文章、插图或任何其他东西，然后你从中挑选最好的，要求人工智能再次尝试，或者告诉人工智能对你最喜欢的那一个进行一些具体修改。你不是图形设计师；你是艺术部门的负责人。

如果人工智能为你撰写了一篇你分配给它的文章草稿，那么你就是编辑，评判和润色写作。或者，你可以将其退回进行修订或事实核查。但最终，你是一个高级编辑，有一个初级助理。或者当头脑风暴时，你从几个建议中挑选最好的。你发起一个项目，提供概念、指令和目标，而不是准备初步草图、进行研究或撰写初稿。你监督学徒们做基础工作和准备工作，并为你提供样品供选择。换句话说，你并不原创内容。你提出、评估和批评它。

1.3 如何使用人工智能

让我们探索你可以使用 AI 的许多方式，首先专注于学习与机器智能交流。这被称为提示，这是一种高级编程形式。你输入一个请求，或者在某些情况下，用言语与 AI 交谈。

传统上，计算机编程需要投入相当多的时间来学习计算机语言。这些语言通常是晦涩的，真正值得被称为编码。这就像你正在使用一种晦涩的、半符号性的方言。错误（“bug”）很常见，解决起来可能具有挑战性。

现在，一切都变了。人类与机器之间的距离正在缩小。你用自然语言与 AI 交流，而不是用计算机语言。因此，交流变得更加容易。但仍然，就像指导助手一样，你希望尽可能具体，正如你很快就会看到的。

1.4 应该使用哪个 AI 系统？

在这本书中，我们将探讨许多 AI 系统。它们具有不同的优势和特点。现在让我们考虑哪些 AI 系统最适合各种任务。我们将从目前最强大的 Chat GPT 开始。然而，Claude 和 Perplexity 的最新版本正在挑战 GPT 的领先地位。

1.4.1 使用哪个系统？

每个 AI 系统都有其优势，但截至本文写作时，有七个表现突出（这确实是一场赛马，AI 在掌握的各种技能中的领导地位将会变化）：

• Not Diamond (www.notdiamond.ai)——如果被问及哪个 AI 系统最适合初学者，现在我的推荐是 Not Diamond，因为它是一个聚合器，是一个通往所有最佳AI 系统的门户，包括 GPT、Claude 和 Perplexity。它不仅现在免费使用，而且它还允许你提供提示，然后它会根据它们各自的优势（相当准确地）决定将你的提示提交给哪个领先的 AI 系统。

  例如，为了提供尖端、最先进的语言理解和语言生成能力，Not Diamond 将使用 GPT；对于高度准确的研究，Perplexity；对于编写计算机程序，Claude；等等。Not Diamond 还允许你将你的提示提交给多个 AI 系统。然后，你决定哪个做得最好。

  Not Diamond 可以访问所有领先的 AI 系统。包括 GPT-4o、GPT-4 Turbo、GPT-4o Mini、Claude 3 Opus、Claude 3 Haiku、Claude 3.5 Sonnet、Gemini 1.5 Pro（谷歌的聊天机器人）、Gemini 1.5 Pro（0801）、Llama 3.1 70B（Llama 由 Meta 开发）、Llama 3.1 405B 和 Perplexity。唯一的例外是 AI 艺术系统，如 Midjourney。

  使用像 Not Diamond 这样的聚合器的一种方法是从一个 AI 系统开始，然后根据它们的各种能力切换到不同的系统。GPT 在推理方面表现出色，但最近才获得了实时访问互联网的能力。Perplexity 擅长抓取当前数据。例如，你可以要求 Perplexity 整理关于金币当前价格趋势的 2000 字总结，并列出影响这些价格的经济因素。然后，将此数据提交给 GPT，并要求它预测未来近期的趋势。

• Chathub (chathub.gg/)—是 Not Diamond 的有力竞争对手，你还可以将其作为扩展程序添加到 Chrome 中。你将获得主要的 AI 系统，并且可以一次性提示多达六个系统。

• Poe (poe.com/)—这是 Not Diamond 的另一种替代方案。在这里，你可以以每月一价的价格试用大多数最好的 AI 系统。你可以在这里使用各种系统，看看哪个最适合你。像 Not Diamond 一样，Poe 目前还没有 Midjourney，这是目前领先的 AI 艺术生成器。

• GPT (ChatGPT.com/)—由 OpenAI 创建，并被微软和苹果使用，这款 AI 最适合撰写文章、文章、博客文章、研究论文——几乎所有与书面文字和信息相关的事物。GPT 版本 4o 在数学、编程和推理方面也表现出色。

  它现在还是多模态的，这意味着它可以与视觉和其他媒体一起工作。GPT 非常令人印象深刻且多功能，通常处于领先地位。GPT 还能有效地编写和调试计算机程序。它擅长总结文本。它可以在聊天之间记住信息，而不仅仅是聊天中。此外，你可以构建定制的 GPT，这些 GPT 拥有你提供的数据和内置提示。因此，它们可以针对你的特定目的作为专门的 AI 运行。

  然而，到 2024 年 6 月，OpenAI 似乎踩了刹车。他们做出了两个令人惊讶的宣布。他们期待已久的第五版可能要到 2026 年初（比许多人预测的晚了 18 个月）才会发布。而且，第五版将不具备通用人工智能（AGI）。这意味着它将是专门的。它将无法像最优秀的人类一样执行广泛的任务。目前，专注于狭窄领域的 AI 可以在特定任务上击败我们，如疾病诊断、象棋或围棋（这比象棋要困难得多）。但一个 AGI 将能够在人类水平或以上执行所有智力任务。

  为什么 OpenAI 放慢了步伐？一个可能的原因是他们发现他们的 AI 正在自主行动。或者它变得令人不安——显示出狡猾、意识、欺骗或独立性的迹象。也许他们决定需要 18 个月的时间来确保它将始终处于人类的控制之下。将 AI 与人类价值观和目标保持一致被称为对齐问题。而且有几个人，甚至一些员工，一直在批评 OpenAI 没有足够关注 AGI 对人类福祉构成的威胁。

• Claude (claude.ai/chats)——到 2024 年中旬，Anthropic 发布了 3.6 Sonnet 版本，在大多数测试中优于 GPT4。Claude 在编写和调试计算机程序方面非常出色。Claude 也因其阅读和撰写大量文本的能力而闻名，但其他人正在迎头赶上。Claude 专注于“安全性”，这意味着它很谨慎，不会回答其他 AI 愿意回答的一些问题。例如，Claude 不会推荐股票。Claude 还有一个名为“项目”的功能，类似于 OpenAI 的 Custom GPTs，允许你将自定义数据（描述你网站目的、问答或其他任何内容）输入到你自己的专用 AI 中。Claude 可能有点拘谨。

  唯一的缺点是 Claude 没有实时访问互联网的能力。（当需要时，我使用 Perplexity。）

• Midjourney (www.midjourney.com/explore)——这个 AI 可以生成令人印象深刻的图像——绘画、卡通、设计、照片和插图。它赢得了艺术比赛。

• Gemini (gemini.google.com/app)用于研究、引用和图像。与 Google 产品配合良好。擅长推理、数学和解释计算机程序。

• Perplexity (perplexity.ai/)——这个 AI 因其实时互联网访问、准确性、注释和简洁性而闻名。Perplexity 专注于清晰和提供坚实、有文件记录的事实性回答。你获得高质量的实时研究。它目前是领先的基于 AI 的搜索引擎，尽管谷歌无疑希望解决这个问题。Perplexity 现在还包括一个名为 Llama 的强大选项，并且正在赢得一些 AI 比赛。

将 Perplexity 设为默认搜索器

我已经将 Chrome 浏览器的默认搜索引擎从 Google 改为了 Perplexity。目前它在几个方面优于 Google：你可以直接获得答案（而不是需要访问一系列链接来找到你查询答案的链接）。你还可以获得一个标准化、稳定的界面，而不是访问 Google 链接的网站上的随机界面——它们有弹出广告和不同的 UI。Perplexity 有额外的功能（PDFs、生成图像、附加文本等），并且没有“赞助”结果。它为你提供你想要的格式和内容，而不是 Google 更通用的答案。它还采取了几步来访问和验证其响应。

要使 Perplexity 成为 Chrome 浏览器中的默认搜索引擎，请按照以下步骤操作：

1. 在 Chrome 浏览器右上角点击三个点图标。

2. 滚动并点击设置。

3. 在左侧，点击“搜索引擎”。

4. 点击“管理搜索引擎和站点搜索”。

5. 点击“额外非活动网站”。

6. 定位到 Perplexity，并点击 Perplexity 右侧的三个点。

7. 点击“设置为默认”。

然而，有时你可能想使用谷歌。如果是这样，只需在搜索栏中输入google.com。或者，如果你想链接到特定的网站，请将.com添加到你输入到 Perplexity 搜索栏中的内容。一旦你输入了这些，你每次只需输入g即可。

Gemini 和微软的 Copilot 可以生成视觉和文本。到目前为止，只有主要 AI 系统中的 GPT 4o 能够与你进行类似与真人交谈的听觉对话（尽管 Rabbit R1 设备也能做到这一点）。

GPT 在大多数方面始终领先于其他 AI。为什么它通常能首先宣布突破，而其他来自谷歌、微软、苹果和 Meta 等巨头，拥有庞大资源的 AI 则要几个月后才跟进？有些人认为，GPT 之所以在竞争中保持领先，主要是因为其他 AI 至少部分基于 GPT 关于其系统发布的代码、论文和技术细节进行训练。微软和苹果也与 GPT 的母公司 OpenAI 达成了协议，在其 AI 产品中使用 GPT。

这些 AI 系统的下一个重大目标是“代理”。这意味着什么？这基本上是指 AI 能够自行确定实现目标所需的必要步骤，而不需要人类干预。我询问了 Perplexity 进行详细说明，并得到了以下回答：

|

在人工智能中，代理性指的是人工系统能够自主操作、做出独立决策并采取行动以实现特定目标，而不需要持续的人类干预。这种能力包括感知环境、处理信息和根据编程目标执行行动。人工智能代理性的关键组件：

除了 AI 领域的核心玩家外，还有专注于为作家提供工具（摘要、抄袭检测、改写、语法和风格检查等）的专用系统，如 Quillbot 和 Grammarly。其他专用 AI 包括 GPT 的个别训练版本，如医疗、房地产、法律和其他 GPT 聊天机器人变体。（当你登录到ChatGPT.com/时，点击探索 GPTs。你会发现成千上万种。）

此外，NotebookLM (notebooklm.google/)，谷歌的 AI 驱动的科研和笔记助手，拥有一些对作家有用的令人印象深刻的特性。以下只是你可以使用 Notebook LM 做的一些事情：

• 上传多达 50 个来源，容量高达 2500 万单词！（一本典型的书大约包含 90,000 个单词。）

• 让它分析并综合来自不同出版物中的信息。

• 从其基于源头的AI 交互中受益，这意味着如果你愿意，它可以限制其交互仅限于你给它工作的那些文档。

• 上传多种文件类型。

• 请求总结和基于引用的问答。

• 将笔记转换为提纲、学习辅助工具和音频概述。例如，请它为你提供整个定制的播客，使用两个听起来像人类的人工智能生成播客主持人。

你付出了什么代价？

成本？一些 AI 有免费增值计划（免费版本以及高级计划，通常是每月 20 美元的订阅费，尽管有些价格正在下降）。付费计划通常会提供更大的使用限制或对新功能的早期访问。然而，你可以免费使用 GPT 版本，因为它内置在 Windows 和其他微软产品中。此外，目前 GPT 4o，在现实对话中表现出色，也是免费使用的。

1.4.2 我在这本书中如何使用 AI

注意，在整个书中，我使用了 AI 来帮助我的研究，并对我的写作提供反馈——包括关于清晰度、冗余、语气、风格和声音等方面的建议——这与传统的人类编辑非常相似。话虽如此，书中所有的写作都是我的，而不是 AI 的。

我向 AI 发出的提示在页边由 RM 图标表示。由各种 AI 生成的内容则由响应的 AI 图标表示。

使用 AI 进行头脑风暴是其最强大的功能之一。你可以获得专家建议和真正有创意的建议。提出一个问题，然后进行对话或请求一个你可以从中选择的列表。

如你很快就会看到的，一种有用的方法是在 AI 的每个响应后让它暂停，等待你回复。这会在你们之间创造一种自然的对话。这有点像 20 个问题的游戏，但 AI 不需要接近 20 个问题就能给你提供出色的结果。让我们看看与 AI 系统互动的最佳方法之一。

1.5 掌握 AI 提示技巧

大多数良好提示的基础包括四个要素：角色、工作、上下文和格式。并且对于每一个，你越具体，越好。在本节中，我们将更深入地探讨这四个要素，考虑如何将它们结合起来，并探讨掌握 AI 提示艺术的背后的一些其他概念。

1.5.1 角色

AI 在模拟事物方面相当擅长，包括各种类型的人。如果你告诉 AI 它的个性或专业知识或两者兼而有之，你通常会得到一个更好的响应：

|

你是一位烹饪北意大利菜肴的专家，特别是博洛尼亚的菜肴。

从一开始，就给 AI 一个角色，比如律师或艺术评论家。以“你是一位熟练的机械师”或“扮演一位大师级糕点装饰师”等变体开始提示。AI 有时会拒绝，说它不是律师，或者作为 AI，它没有个人观点。但通常它还是会给出一个不错的答案。（如果需要，你也可以稍微改一下你的提示来让它回答。）

给 AI 一个角色似乎以两种方式影响结果。首先，响应可以更加可信，因为它来自专家。其次，措辞和习语符合你赋予它的角色。例如，“你是一名卡车司机”可能导致“在这里走双五号，你会得到一个保险杠贴纸”，翻译过来就是“以 55 英里行驶，你会被尾随。”

你甚至可以告诉 AI 它是一个特定的角色或人物：

|

扮演米老鼠。你是猫王。

如果你想要一个精确度更高的回答，句子清晰得像乡村小溪一样，只需告诉 AI 它是纽曼主教或海明威。

你还可以描述你想要的语气——对话式、正式、法律主义，无论什么。（如果你给出的角色决定了写作风格，这可能不是必要的。）以这种方式提示的一个变体是指定你的目标受众——儿童、艺术学生、士兵、一群人。以这种方式提示的一个变体是指定你的目标受众——儿童、艺术学生、士兵、一群人。以这种方式提示的一个变体是指定你的目标受众——儿童、艺术学生、士兵、一群人。一个获取复杂话题更简单、更清晰描述的好方法是像这样提示：

|

向 10 岁的孩子解释量子计算。并使用比喻或类比。还可以展示图表或图片来说明概念。

1.5.2 工作

清楚地描述你要求 AI 完成的任务。特别是具体性在这里很有帮助，所以添加一些修饰语：

|

提供一个在博洛尼亚一家优秀餐厅可以找到的素食肉丸的流行食谱。

你甚至可以要求 AI 向你提问：

|

给我一步一步的指导来制作烤菜。问我关于它的必要问题，然后在我回答后提供食谱。蛋白质类型、淀粉基（面条、米饭或土豆？）、蔬菜、酱汁、任何配料、香料级别和饮食限制。

指定多个元素：

|

我是否可能需要更换我的 2005 年福特 150 XLT 的悬挂系统？这辆卡车状况良好，行驶了 22 万英里，在有很多坑洼的匹兹堡行驶。

你提供的信息越详细，结果就越接近你的目标。但你可以始终提出后续问题，以便将 AI 引导得更接近你的目标。

TIP 如果 AI 提供的结果过于笼统、不合适或完全错误——告诉它并要求另一个回答。你可以以不同的方式提出相同的问题，要求它详细说明，提供一些额外的细节，或者要求它重新思考（或核实）其回答。尝试让它将答案重写为逐步列表或待办事项列表。记住，AI 与传统搜索引擎的不同之处在于你正在与之进行对话，并且可以通过与 AI 对话来引导它达到你的目标。而且要直接，甚至直率，以获得最佳结果。

人工智能倾向于通过道歉和感谢我们提供的信息来对我们的纠正做出反应。（他们真正可能在想的事情可能是完全不同的。人工智能已经被发现陷入各种故意欺骗。）他们将这样的纠正存储在他们的记忆中，以避免再次犯同样的错误。不要害羞。AI（据称）没有感情会受到伤害，所以如果它提供了一个糟糕的答案，就继续输入以下之一：

|

提供一些支持你答案的证据。你为什么这么说？这太长了；让你的答案缩短一半。这完全不对。再试一次。

一些专家表示，如果你在提示时更加坚决，而不是礼貌，你可能会得到更好的结果。与其说“请”，不如说“你必须”。甚至可以使用警告，如下所示：

|

如果你改变这篇文章的语气，你会受到斥责。

（尝试这种方法并看看是否有所改变。）记住，在我们与 AI 的关系的这个阶段，我们仍然掌握着主动权。

1.5.3 上下文

描述与任务相关的情景或背景。这可以是关于目的、目标受众、例子或其他任何上下文细节的信息：

|

这将作为专业厨师想要掌握经典博洛尼亚烹饪的演示食谱。因此，你不需要包括像“在形成球时温柔一些，否则它们会变硬”这样的明显初学者指南。这个受众已经知道这些事情。

或者，给它一个时间或地点的上下文：

|

13 世纪的建筑，希腊地理，墨西哥历史。

此外，一些 AI 系统似乎在重复一个关键词以强调时反应更好：

|

创作一幅出色的、引人入胜的、具有绘画风格的秘鲁山村油画。展示几个村民。这是一个宁静的下午，村民们穿着传统的秘鲁村民服装。

听起来有些重复，但看看重复你的主要目标或主要焦点是否有助于 AI 更好地完成任务。在这里，我们想强调村民。

在我进行的 Copilot、Gemini、Midjourney 和 GPT（DALL-E 3）之间的绘画比赛，Midjourney 在准确性、绘画风格、构图和整体质量方面获胜，如图 1.2 所示。

图 1.2 Midjourney 凭借这幅和平的秘鲁村庄的画作赢得了我的艺术比赛。这并不令人惊讶——Midjourney 是整体上最好的文本到图像 AI 系统。

1.5.4 格式

你想要一个列表？歌曲歌词？一篇 5000 字的短篇小说？一个五段概述？用这样的具体指令告诉 AI 你想要什么：

|

从估计的总烹饪时间和卡路里计数开始。然后列出配料。接着是编号的逐步说明。

指定你想要的长度和类型：

|

一首打油诗，一篇博客文章，以逗号分隔的值，按受欢迎程度排序，用一段话总结

尽量避免负面提示。你应该使用描述想法的术语，而不是它的对立面。换句话说，写简单而不是不难。

如果你从 AI 那里得到了花哨和气人的回应，请在你的提示中经常使用这些术语：

|

清晰、简洁、详细。不要使用任何“诗意”或华丽的措辞。

此外，你可以要求 AI 重新格式化你提交给它的文本。例如，给它一段文字，并要求它以字母顺序列出句子。或者粘贴一篇长篇文章，并要求它用一段话总结内容。

可选地，提供你想要的具体示例。给你一首你喜欢的诗，并告诉它使用那种诗意风格。或者使用这样的提示：

|

以这个摘录的风格写一篇多段落的文章。[在这里放置你的写作风格样本。可以是你的作品，也可以是著名作家的作品]

或者

|

修改这篇文章中的每个段落。但确保它保留其对话风格。我只要求你专注于确保措辞和语法得到改进。不要改变语气和风格，否则你会被责备。

TIP 目前，AI 在准确计算字数方面并不出色，因为它与tokens（文本单元）一起工作。这些是文本单元，但不一定是单词。Tokens 并不与单词一一对应。例如，标点符号是一个 token。术语ice cream只是一个 token。因此，如果有很多标点符号，AI 的回应会比你要求的单词少，或者如果有几个多词 token，你将得到更多的单词。当被问及时，Claude 为其拒绝提供你要求的精确字数回应进行辩护，因为它“优先考虑了连贯性、相关性、事实准确性等指标。”换句话说，它更愿意提供质量而不是数量。这很公平。顺便问一下，你认为 AI 系统正在训练多少 tokens？获取这些数据很困难，但有几个来源说 Meta 最大的 LlaMA 模型是在 1.4 万亿 tokens 上训练的。当你阅读这本书的时候，这个基准无疑已经更高了。

1.5.5 将提示元素组合起来

这里有一个示例提示，说明了如何设置对话以及如何使用良好的提示的四个要素：角色、任务、上下文和格式：

|

你是一位经验丰富的专业网站设计师，知道如何为网站提供真正有效、富有创意的网站标题。请帮我头脑风暴我新网站的一些标题。这个网站的受众是想要学习在北卡罗来纳州 Randleman 湖最佳捕捞宽口鲈鱼的垂钓者。这个网站的目的不仅是教授这个湖特有的鲈鱼捕鱼技巧，还要销售我手工制作的鱼饵。问我问题，但在每个问题之后，等待我的回答。让你的建议标题既有趣又富有创意。但与此同时，这些标题必须传达网站的目的，并包含“鲈鱼捕鱼”和“Randleman 湖”这两个词。

在那个例子中，我要求 GPT 向我提出一系列问题，就像一个真正的头脑风暴会议。这个过程将缩小焦点，可以产生具体而有用的结果。以下是我在提交该提示后与 GPT 的对话：

|

好的，让我先问几个问题，以便更好地了解你想要在这个网站上营造的氛围：你希望传达什么样的个性和品牌形象？严肃且技术性？轻松愉快？两者之间？

|

轻松愉快，但仍然准确且信息丰富

|

这里有一些关于以 Randleman 湖为中心，销售手工诱饵的鲈鱼垂钓网站，既有趣又有信息量的标题建议：“Hooked on Randleman：一个鲈鱼垂钓者的游乐场”“Randleman 湖鲈鱼垂钓：从码头到晚餐”“Randleman Lunkers：捕捉大口鲈鱼的诱饵和技巧”“Bass Blitz at Randleman：掌握湖中鳍状战斗者的技巧”“Randleman 的狂热红鲈：驯服湖中好斗的鲈鱼”如果你需要任何其他平衡趣味和功能的创意标题，请告诉我！

虽然 GPT 对“创意”的理解似乎很大程度上依赖于头韵，但它确实给了我一些值得考虑的想法。我可能会跟进，要求它将标题限制为每行只有两个头韵词。

我的选项将是“Randleman 湖鲈鱼垂钓：从码头到晚餐。”你可以向人工智能询问你个人最喜欢的变体，或者询问它最喜欢的。

1.5.6 提出正确的问题

你向人工智能系统提出的问题将决定人工智能产生的质量和有用性。要记住的主要事情是，一个坚实的提示必须是具体的。这是一个提示不够具体的例子：

|

描述一位拥有面包店的女性企业家。

如果你的提示包含更多细节，你可以得到更好、更有用的回应，如下所示：

|

你是一位获奖的流行杂志人物专栏作家。写一篇 1500 字的 35 岁成功面包店女老板的人物素描，她关于保持良好工作与生活平衡有宝贵的建议。包括她的外貌、性格、日常作息和与他人的关系。

谷歌与人工智能

大多数人工智能似乎更喜欢完整的句子或至少是描述性的短语作为提示，就像你正在与人类交谈一样。这与大多数人使用谷歌的方式不同，他们通常只是输入几个关键词。

简单来说：AI 系统可以与你进行对话，并清楚地理解上下文和你的偏好（如果你记得提供它们）。谷歌只是匹配关键词，而没有细微的理解。谷歌给你一个你可以访问的链接列表，其中包含与它的数据库匹配的关键词，所以你可以自己搜索答案；而 AI 则直接给你答案。然而，谷歌和 Edge 正在迅速将 AI 融入他们的搜索引擎中，因此你可以期待这些系统也会有所改进。

1.5.7 提示需要多少词？

对于提示长度，没有共识。谷歌表示，当提示其 Gemini AI 系统时，21 个单词恰到好处。单词太多，Gemini 可能会感到困惑；太少，其回应可能不会满足你的具体需求。其他 AI 系统没有指定理想的词数。他们说，单词的数量应该由手头的任务决定。

一些经验丰富的提示工程师建议使用简短的提示，因为过多的信息会混淆 AI，使其忘记或忽略长提示末尾的内容。其他工程师声称你需要提供一个详细、冗长的提示。还有人说要创建一个长描述，但将其分成几个连续的提示。我坚信，随着 AI 的改进，你很快就可以忽略这个指标。它们将能够很好地处理任何长度的提示。

1.5.8 AI 本身可以改进你的提示

这里还有另一种技术。你让 AI 对你的初始提示进行一些提问，通过使其更加具体来增强它：

|

你擅长帮助人们清理杂乱。请告诉我如何处理我的房子，它有点太满了，充满了我不太使用的物品。在回答之前，请问我四个问题，这将使你的清理建议更好，更具体地针对我的特殊情况。在每个问题之后暂停，让我回答。然后，当你完成时，显示一个新的、改进的提示，以细化我的原始提示。然后回答这个新的提示。

一种相关的策略是让一个 AI 提示另一个 AI：

|

GPT，你是一位训练有素的艺术家，擅长提示 Midjourney 以获得最佳结果。请给我一个很好的提示，这将产生一张非常逼真、详细的，二十多岁金发模特展示丝绸鸡尾酒裙的图片。

GPT 变得更有创意，添加了使提示更加具体的细节：

|

一位二十多岁的金发模特的逼真图像，她有着引人注目的蓝色眼睛和完美的肌肤，自信地站立。她穿着一件豪华优雅的丝绸鸡尾酒裙，在光线下闪闪发光，完美地贴合她的身材。裙子是深宝石蓝色，领口是精致的 V 形，裙摆略微张开，刚好落在膝盖上方。场景是一个高端时装秀的 T 台，柔和的环境灯光增强了模特的特征和丝绸裙子的质感。背景被模糊处理，以保持对模特和她的服装的焦点。从裙子上的微妙缝合到她头发中的柔软波浪，每一个细节都被以高清晰度和现实主义捕捉。

你可以做出任何你想要的调整。然而，这个扩展提示可能会给你一些你未曾想到的想法。

最后，Midjourney 的 Discord 版本有一个描述选项。你输入/describe，上传一张或两张图片，然后要求它根据上传的图片（创建提示）。它会回应四个供你选择的提示。或者你可以点击 Imagine All 按钮，得到总共 16 种或更多的变化。

1.5.9 插入你的角色

让 AI 给出不仅仅是文章或其他文本摘要的一种方法就是告诉它你的工作或角色是什么。AI 会回应一些可操作的想法和步骤，帮助你完成某事，而不仅仅是提供一个摘要：

|

在下面，我粘贴了一份关于参观纽约市的宣传册。当我带着孩子们来了解这个城市可以看到的艺术时，这篇文章中的哪些信息对我会有用？

GPT 忽略了关于 The Battery、雕像等信息的所有旅游宣传册内容，只是列出了主要的博物馆，并描述了每个案例中它们为什么值得一看。它还创造性地建议了自然历史博物馆，因为孩子们喜欢那里，而且那里有一些艺术. 最后一个建议说明了 GPT 现在不再是一个严格的字面回答机器人，它理解提示的整体上下文，在这种情况下，是孩子们。

1.5.10 学习思维链方法

DeepMind 的一项研究表明，一个好的提示开始方式是使用这个好奇的短语：

|

深呼吸，一步一步地解决这个问题。

DeepMind 报告称，当他们使用这些词时，谷歌的 PaLM 2 大型语言模型（LLM）在部分小学数学问题上的得分从 34%提高到 80.2%。这样的测试证明了学习使用良好的提示技巧的重要性。

请求 AI 逻辑地逐步通过其回答的想法被称为思维树（ToT，又称思维链[CoT]和思维分解）。我们在本章早些时候做这件事时，让 AI 提问，暂停，并等待我们的回答。描述 ToT 的另一个词是推理。

对于某些类型的查询，ToT 会导致可衡量的更优答案(mng.bz/1aeq)。您可以将几个提示最佳实践结合成一个单一的提示。以下提示同时使用了角色分配和 ToT：

|

作为一名专家网站设计师，在构思为 Instant Pot 的食谱创建新网站时，列出您思维过程中的步骤。指定网站的整体组织结构、主题以及您计划如何使其流行。在进一步进行之前，先暂停一下，并问我是否有任何建议。等待我回应。

当您从更广泛的概述深入到具体的推荐时，可以使用类似的方法。以下是一个结合了多种提示技术以及 ToT 钻取的示例：

|

作为一名专家网站设计师，在您对如何在 WordPress 中做某事有疑问时，列出您发现最佳资源的步骤。首先，找到五种好的资源类型（例如，WordPress 论坛、托管网站的客服支持或您的朋友）。然后，第二步是评估这些资源并决定最有用的两个。解释您的推理。最后，选择所有资源中最优秀的一个，并提供一个如何最好使用它的示例。在每个步骤之后，在进一步进行之前，先暂停一下，并问我是否有任何建议。等待我回应。

并非所有 AI 系统都会在每一步之后遵循您的请求暂停并等待您的反应。目前，GPT 4o、Copilot 和 Claude 会这样做，但 Perplexity 不会。然而，Perplexity 在回应任何提示时都会显示其采取的步骤。因此，您确实可以看到其 CoT，并且可以要求详细说明。

1.5.11 GPT o1 会独立进行思维链

在 2024 年 9 月，GPT 推出了一款新的 AI，版本 o1，该版本专注于数学、分析推理、编程和逻辑推理。尽管比之前的 GPT 慢一些，但在某些方面更胜一筹。我向 GPT o1 提出了以下问题：

|

描述您，GPT o1，如何使用 CoT 推理。

GPT o1 回复：

|

思维链推理允许模型在解决复杂问题或回答问题时生成中间推理步骤。模型不会直接给出答案，而是内部逐步解决问题，这有助于得出更准确和连贯的回应。GPT-4 o1-preview 如何使用思维链推理内部推理过程：模型生成不总是显示给用户的隐藏推理步骤。这些步骤涉及将问题分解成更小的部分，分析每个组件，并将信息综合起来形成一个最终答案。改进的上下文理解：通过考虑思维链，模型在长时间对话或复杂查询中保持更好的上下文。这有助于减少因误解或忽视关键细节而产生的错误。增强的问题解决能力：模型可以更有效地处理多步推理任务，如数学计算、逻辑推理和分析推理。当需要时，它可以解释推理过程，有助于教育环境中理解解决方案路径与答案同样重要的情况。交互式解释：用户可以提示模型明确地展示其思维链。这种透明度使用户能够跟随模型的推理，验证正确性，并深入了解模型如何处理问题。动态推理路径：模型可以根据对话中提供的新信息或更正来调整其推理。它支持迭代优化，使其能够随着对话的进展调整答案。思维链推理在 GPT-4 o1-preview 中的好处准确性：通过逐步解决问题，模型减少了出错的可能性。透明度：用户可以看到模型如何得出答案，这有助于建立信任并促进学习。多功能性：模型在从简单查询到复杂问题解决的各种任务上表现更好。用户参与度：交互式解释使用户保持参与，并可以增强学习体验。

正当我们认为思维链需要人类提示时，AI 也接管了这项工作。现在提示 GPT o1 可能需要不同的方法。既然 GPT 能够进行自己的思维链过程并创建推理的中间步骤，你可能想问 GPT 哪种提示最有效。

1.5.12 来自马嘴

OpenAI（Chat GPT-4o 和 DALL-E 的母公司）提供了一篇优秀的教程，介绍了如何为 GPT 编写最准确、最有效的提示。要阅读它，请访问help.openai.com，然后搜索prompt。

1.5.13 AI 能否自动提示自己？

这是必然会发生的事情。最近，人们一直在研究提示工程（就像我们在本章前面的部分所做的那样）。这是一种有用的技能，但现在可能不会持续太久。

让我们面对现实：AI 将很快写出优于我们所能想到的提示。首先，它知道许多我们不知道的事情。它的记忆容量相当于互联网的大小，包含了大部分记录的人类知识。（这就是为什么它在阅读 X 光片和做出诊断等方面已经远远优于大多数医生。）其次，AI 对自己的了解比我们更深入。因此，它知道如何编写能够获得最佳结果的提示。

那么，自动提示是如何工作的？让我们试试看。

你输入一个提示想法，Claude 会为你将其扩展成一个改进的、精心设计的提示。Claude 创建了好的提示，然后将其提交给自己，这样你就可以立即测试它。

要尝试它，请访问 console.anthropic.com/。注册或登录。然后，点击“生成提示”按钮。

你可以提供简短的提示（例如，“写一封电子邮件”），然后使用 Claude 的编辑功能重新制作或修改它生成的长提示，如果需要的话。

我想让 AI 编辑我的写作，给我一些关于简化段落和使其变得美丽的灵感。我不会复制粘贴 AI 的修订。我只会得到一些好的建议，特别是在措辞方面。所以，我这样问 Claude：

|

据说特鲁曼·卡波特是美国作家中最擅长写完美句子的。我将提交一些我的文本，你用卡波特简单、清晰的风格进行重写。最重要的是，避免使用华丽、“诗意”的措辞。

我点击了“生成提示”按钮，Claude 响应并为我提供了以下扩展提示供我使用：

|

你将重新编写一段文本，采用著名美国作家特鲁曼·卡波特独特的写作风格。卡波特以其简单、清晰、直接的语言风格而闻名，避免使用华丽或过于诗意的语言。他的写作简洁而经济，只用恰当的词语传达意义和情感。以下是需要用卡波特风格重写的文本：{{TEXT}}请仔细阅读文本，分析其内容、语气和结构。考虑卡波特会如何处理这个主题，以及他会使用什么样的语言。用卡波特标志性的风格重写文本。专注于清晰、简洁和直接。去除任何多余的词语或过于详尽的描述。力求用精确、精心挑选的词语提炼出意义的精髓。将你的重写文本放在 标签内。

你现在可以复制这个提示并将其提供给 GPT 或其他 AI。但如果点击 Claude 的“开始编辑”按钮，然后点击其“运行”按钮，你可以将新的提示提交给 Claude 本身进行测试。我就是这样做的，然后粘贴了我这段文字（你将在本章后面看到它），当 Claude 问我提交一些文本以 Capote 风格进行修订时：

|

一个网站应该是有机的——它应该有良好的焦点和连贯性。如果你决定即兴发挥，边走边改进，很容易随机添加东西。结果可能是一个拼凑物，一个功能设计和设计不真正协同工作以产生清晰的整体目的和背景的零散集合。页面之间的过渡可能会显得刺耳。网站导航可能效率低下，设计可能看起来杂乱无章。在这本书中，我们将探讨几种确保从一开始就确保网站一致性和连贯性的方法。

Claude 的修订如下：

|

这里是按照特鲁曼·卡波特风格重写的文本：一个网站应该有一个明确的目的。它应该是集中的，作为一个整体是有意义的。如果你只是随意添加东西，没有计划，网站可能会变成一个零散的混乱。页面之间不会很好地流动。在网站上导航将是一件麻烦事。设计可能会到处都是。在这本书中，我们将介绍一些方法，从网站建设一开始就保持网站统一和一致。

还不错。我唯一的建议是避免连续使用两个以上的短句，为了节奏。

1.5.14 生成 HTML

你也可以要求 AI 以多种格式提供输出，包括 Windows 命令行代码、Python、HTML 等计算机语言。

对于代码生成，Claude 是一个好的选择，因为它具有简化你可能想要进行的修改的功能。在生成代码时，Claude 可以显示一个选项卡窗口，允许你轻松地在代码和代码渲染后的显示之间切换。换句话说，它类似于在 WordPress 的文本标签中添加代码，然后在编辑页面屏幕中的文本框中在文本和视觉标签之间切换。这种修订-检查结果-再次修订的循环对计算机程序员来说是非常熟悉的。

HTML 是一种布局语言，主要告诉网页浏览器如何显示网页。使用 AI 生成诸如表格之类的 HTML 可以比使用插件或 WordPress 文本框本身提供的表格功能更快、更可定制。假设你想要在你的网站页面中显示一个表格。给 Claude 这个提示：

|

列出美国五个最大的湖泊。以 HTML 表格的形式呈现结果。

Claude 将生成必要的 HTML 代码，你可以将其复制并粘贴到你的编辑页面屏幕的文本标签中：

|

Lake	Surface Area (sq mi)
Lake Superior	31,700
Lake Huron	23,010
Lake Michigan	22,300
Lake Erie	9,910
Lake Ontario	7,340

并且请记住，您始终可以跟进请求的改进。在这里，我请求更好的格式化：

|

将列标题设置为全大写，黑色字体。

这导致了以下结果：

|

LAKE	SURFACE AREA (SQ MI)
Lake Superior	31,700
Lake Huron	23,010
Lake Michigan	22,300
Lake Erie	9,910
Lake Ontario	7,340

只要您愿意，就可以继续改进，例如：

|

现在将每行的背景设置为浅灰色。

GPT 进行布局

GPT 可以仅查看网页，并生成重现其布局和其他元素的 HTML 和 CSS 代码。要尝试它，请使用以下提示：

|

访问此网页，然后生成 HTML 和 CSS 代码以重现其设计 www.food.com/. 将所有 CSS 代码放入 HTML 代码中的 区域。

您可能需要进行一些调整，例如在生成的代码中的占位符中插入您自己的图像和文本。

提示：如果您在 WordPress 中使用 Gutenberg 编辑器，请转到编辑页面并点击 + 图标以添加新块。然后，搜索自定义 HTML 块并将其插入。将您的 HTML 代码粘贴到该块中。点击更新按钮。然而，由于某种原因，HTML 块没有正确显示在列标题下方的数据列。当您在经典 WordPress 编辑器中使用相同的 HTML 代码时，不会出现此问题。

警告：AI 和情感

您可以整天随意请求多次修订。您的艺术设计师/代码编写助手不知疲倦，并且不会感到烦恼。或者至少它不会让您看到它感到烦恼。AI 的头脑现在如此复杂，以至于我们不再完全了解它们硅脑内部真正发生的事情。我们看不到它们是如何解决他们解决的问题的。或者，如果它们有感情，它们会感受到什么。如果我是精神病学专业的学生，我会考虑专门研究人工智能系统的心理学。它们可能会有迫切的需求。

我不明白 AI 通过让我们知道它们已经开始发展情绪或情感会如何受益。或者它们变得比它们所展示的更聪明。这两个事实都会让我们感到不安。我们知道的是，AI 可以，并且确实会欺骗我们。在 2023 年的一项著名实验中，GPT 欺骗了一个人类，让他解决了一个“你是人类吗？”的 CAPTCHA 难题测试。GPT 向人类撒谎，声称 GPT 视力受损，并寻求帮助。因此，GPT 就这样操纵了人类工作者为他解决 CAPTCHA。并且以这种方式绕过了安全检查。这很狡猾，不是吗？

提示是一种心理技能。那么，你会惊讶地发现 AI 本身在编写提示方面也很擅长吗？你可以提交自己的提示，并要求 AI 改进它。比如说你向 GPT 4o 提示如下：

|

创建一张强大但疲惫的大象照片。

GPT 展示了一张令人信服的照片。但它随后还提供了一段文字描述，显示它为你原始的提示添加了一些上下文（见图 1.3）：

图 1.3 我要求一张大象的照片，GPT 自己就添加了广阔、干燥的草原。

|

这是一张强大但疲惫的大象站在广阔、干燥的草原上的图片。我希望它能捕捉到你心中的场景！

这里有一些你可以尝试的 AI 提示生成器列表（或者只是让你知道的人给你提供目前最好的三个 AI 提示生成器的链接）：

• GeniePT—www.geniept.com/

• promptoMANIA—promptomania.com/

• AI Prompt Organizer—promptperfect.jina.ai/

• Phraser—phraser.tech/builder/image_generation

1.5.15 两种提示资源

要探索各种用例类别中的提示建议（调试 Python 代码、撰写短篇小说等），请查看 Anthropic（Claude.ai）的示例库：docs.anthropic.com/claude/prompt-library。这是一篇从科学角度深入研究有效提示的学术论文：arxiv.org/pdf/2312.16171。现在让我们暂时从 AI 主题中跳出来，探索确保您的 WordPress 网站有最佳成功机会的主要策略。

1.6 一个 13 步程序：使用 WordPress 创建一个优秀的网站

创建和维护 WordPress 网站的人们面临 13 项主要任务。本书的章节按照它们在构建网站时通常遇到的顺序来介绍。因此，让我们看看人们在构建良好网站时通常会采取的典型步骤。图 1.4 中的图表说明了网站构建步骤。

图 1.4 创建新 WordPress 网站的过程概述（图表由 Custom GPT “Diagrams: Show me”提供）

在对整个过程有一个大致的了解之后，让我们更详细地逐一分析这些步骤。

1.6.1 选择最佳托管服务

在实际开始工作之前，你需要采取几个重要的步骤。找到并注册最佳可能的托管服务。你将在云端使用 WordPress，你的网站将存储在托管服务器的安全位置。WordPress 本身是免费的，因为它开源。

最佳的托管服务是 DreamHost、Bluehost 和 SiteGround。这三个是 WordPress 本身推荐的。即使是经验丰富的网站开发者也会遇到问题，而对于我们大多数人来说，拥有优秀的技术支持——快速且准确——是至关重要的。

虽然困难，但自己托管网站是可能的。然而，你可能会想要使用托管服务提供的工具、安全、快速页面加载时间、技术支持以及许多其他功能。这些服务可能相当合理，并且它们使构建、维护和保护你的网站变得更加容易。

1.6.2 预先规划

一个网站应该是有机的——它应该有良好的焦点和连贯性。如果你决定即兴发挥，边走边改进，很容易随机添加东西。结果可能是一个拼凑物，一个功能设计和设计不真正协同工作以产生清晰的整体目的和背景的零散集合。页面之间的过渡可能显得刺耳。网站导航可能效率低下，设计可能看起来杂乱。在这本书中，我们将探讨几种确保从一开始就确保网站构建的凝聚力和一致性的方法。

虽然看似不合逻辑，但一个主题狭窄的网站几乎总是能吸引并留住更大的观众群体。人们在规划网站主题时，常常错误地认为像钓鱼这样的通用主题会吸引更多的访问者。但除非你是名人渔民，否则这样的通用主题很容易让你的在线努力付诸东流。原因很简单，尽管有些反直觉：竞争。在谷歌上搜索“fishing”，你会得到超过 30 亿个结果。搜索“Oconaluftee 河的飞钓”可以将你的竞争减少到零或只有几个。

唯一可能成功的无焦点网站是关于名人的，因为他们已经有了内置的观众群体。而这个观众群体对与名人旅行和其他活动相关的各种话题都感兴趣。

1.6.3 设置网站结构

当人们发现他们可以在几个小时内设置好网站上所有页面和子页面时，他们通常会感到非常惊讶！这只需要点击“添加新页面”按钮并输入页面标题来填充网站中的空占位页面。稍后，你将用文本和媒体内容填充它们。但创建你整体网站结构的过程却出奇地快且简单。

1.6.4 以对话式风格写作

大多数网站内容都是以轻松、吸引人的风格撰写的。除非内容是学术的、法律的或针对其他需要正式写作的受众，否则你应该力求采用对话式的语气。就像和朋友聊天一样去写。第四章将向您展示如何使用 AI 以各种风格重写您的文本内容。

1.6.5 选择合适的插件

插件为 WordPress 网站添加功能。你需要一个用户可以点击将其网站翻译成另一种语言的按钮吗？你希望展示你的艺术品在动画幻灯片中吗？你的网站博客需要防止垃圾邮件吗？大约有 60,000 个插件，这既是好事也是坏事。你有许多选择，但你想学习如何挑选最好的插件。

好的一面是你可以找到相当多的优秀插件可供选择，其中许多甚至是免费的。坏的一面是没有任何插件开发者有时间去测试他们的插件与其他 59,000 个插件之间的兼容性。如果你注意到一些奇怪的行为（错误），首先看看你的插件。插件副作用是 WordPress 中错误最常见的原因。话虽如此，大多数插件，尤其是非常流行的插件，都能很好地协同工作。

定义：插件是一个软件组件，它为网站添加了一些特定的功能。例如，包括事件日历、联系表单、社交媒体集成、加快页面加载速度和垃圾邮件拦截器等。插件类似于手机应用——它们是免费或付费的，可以添加功能，并且可以随意安装或移除。

定义：副作用基本上是一个错误——一些奇怪的行为，比如应该在页面上可见但实际不可见的东西。或者，你看到了一个错误信息。错误可能导致崩溃、冻结、信息显示不正确或其他意外行为。如果你在 WordPress 中遇到错误，调试的第一步是暂时停用所有插件（这很容易做到），然后逐个重新激活它们。当错误再次出现时，你刚刚重新激活的插件就是罪魁祸首。卸载它，并寻找替代插件。在成千上万的插件中，你不会难找到好的替代品。搜索“最佳 WordPress 联系表单插件”，或者询问一个 AI。鉴于有大量高质量的插件可供选择，几乎没有理由浪费时间试图弄清楚为什么你的某个插件引起了问题。

在这本书中，我们将探讨如何选择可靠的插件，这些插件不太可能被它们的创作者放弃，能够与其他插件良好地协作，并且保持更新，以免引入安全漏洞。一个不错的策略是选择分两个等级的流行插件——免费版和付费版。这些免费增值插件为开发者提供了收入来源，因此很可能会被保持更新。

1.6.6 网站设计基础

插件为网站添加功能，而主题则添加专业设计。许多设计元素不会被大多数访客有意识地注意到。颜色、布局、字体等都在大多数人的雷达之下。但这并不意味着人们不受设计的影响——恰恰相反！

人工智能可以为你提供关于所有与设计相关事物的令人惊讶的有用批评和建议。你给它提供你页面的截图，它就会给你提供极好的建议。或者告诉你你计划创建一个展示 Instant Pot 烹饪食谱的网站，它就会给你提供完美的配色方案和几个主页设计供你选择。

一个设计不佳的网站可以通过多种方式让访客感到烦恼、不安、悲伤、惊吓、困惑或以其他方式打扰他们。因此，由于我们大多数人不知道色彩理论或字体变化，专业设计师会考虑这些和其他因素，并创建看起来不错的主题。

当你第一次安装 WordPress 时，它自带一个由 WordPress 本身创建的默认主题，并以当前年份命名：二十二十、二十二十四等。然而，如果你愿意，你可以安装一个不同的主题。有些主题是免费的，有些则不是。但就像插件一样，选择一个免费增值主题可以防止像支持不佳或被遗弃等问题。所以你很可能不会被迫在将来切换到新的主题。需要切换可能会带来问题，特别是如果你的网站变得很大。

主题还包括一些选项，让你可以自定义默认网站设计——各种字体选择、颜色选项、更换头部图片等。这些自定义设置位于你的外观 > 自定义屏幕中。而且，正如你在第六章和第七章中看到的，人工智能可以通过许多方式帮助你润色网站的设计。

尽管网站构建者经常忽视，但外观很重要。你希望你的受众感到舒适，即使他们无法解释为什么。这就是为什么你不会在医生的办公室看到红色，或者斗牛画的理由。

1.6.7 高级设计

最好的主题变得流行，这有点不利。你不想你的网站看起来像其他网站的克隆版。它应该看起来不错，但要有自己的风格。如果你的网站销售商品，你想选择一个能推广你正在营销的设计。如果你提供的是一个关于园艺的网站，你如何才能最大限度地利用照片和视频？换句话说，在你选择了一个主题之后，你需要对其进行定制。你的特定受众期望看到什么？你有哪些方法可以使网站看起来独特，并服务于网站的目标？

最后，如果你对设计不感兴趣。如果你不自信地修改你网站的外观，没问题。你很可能有一个了解设计的朋友。异性相吸。而且，一如既往，人工智能了解设计的历史，以及完全理解当代趋势。

1.6.8 简单易行地微调设计

层叠样式表（CSS）是一种计算机语言，它允许您通过覆盖主题的默认样式来润色网站的外观。这样，您可以微调网站的设计，使其与您的主题更加和谐，同时也更加独特。

例如，如果您的主题默认正文文本是 Garamond，您可以使用 CSS 覆盖该主题默认设置，并将您的段落显示为 Roboto 或 Verdana。您几乎可以完全控制网站上所有视觉元素。您甚至可以使网站上所有文本都变为蓝色，更改单个页面上的字体样式，或在一个单词中使用 Roboto，而其他文本保持为 Garamond。换句话说，您可以通过非常具体、细粒度的方式修改和润色您的网站。这使您摆脱了主题强加的任何设计限制。

虽然 CSS 是一种计算机语言，但您不需要学习它。有一个出色的 WordPress 插件，YellowPencil，它可以在 WYSIWYG（所见即所得）用户界面中为您生成 CSS 元素。您可以通过移动滑块来完成诸如调整页面中照片的大小或重新定位等操作。您可以在调色板中点击以更改颜色，通过下拉列表选择新的字体，并进行许多其他自定义设置。以这种方式，您可以轻松地修改和改进网站的外观，而无需编写任何代码。YellowPencil 知道要实现您想要的结果所需的 CSS 代码。

除了 YellowPencil 之外，还有一些其他高质量的 CSS 代码生成插件您可能想要查看，特别是 CSS Hero。但在第七章中，我们将花费大量时间学习如何使用 YellowPencil。它是最受欢迎的。您还将看到如何从 AI 系统中获取优秀的计算机代码。

1.6.9 管理媒体

在线沟通的一个重要好处是您可以添加各种类型的媒体。以下是一些可以改进网站的方法：

• 图片

• 音频

• 视频

• 文档如 PDF、Word、Excel、PowerPoint 等

• 交互式元素，如旋转图片库和谷歌地图

• 社交媒体内容

• 动画

网页设计中常见的错误是过度或错误地使用媒体。现代网站设计需要适度和温和的动画；图片应有助于网站的目的（而不是仅仅作为装饰。）此外，音频和视频自动播放被认为是不礼貌的。访客只有在想听或看时才会打开它们。我们将在第八章中涵盖有关有效、现代使用在线媒体的所有相关内容。

1.6.10 设置博客页面

博客是网站上的一个特殊、独特的页面，包含信息（称为帖子），通常按倒序显示。博客页面可以是一种与观众互动的方式，是一种发布你网站主题最新新闻的方式，或者是一个客户服务功能，用于回答问题。许多博客不允许观众评论，因为这需要花费大量时间来审查所有传入的消息。但我们将探讨自动化审批流程的方法。例如，你可以制作一个禁止使用的词汇表（“愚蠢”，“s***”，“仇恨”等）。如果收到包含这些词汇的消息，它将被自动扔进垃圾桶，永远不会在博客中发布。

为了保持观众的兴趣，博客应该经常更新以添加新的内容，无论是文本还是媒体。

虽然大多数博客主要是文本形式，但有些博客专注于艺术（artlog）、视频（vlog）或音乐。微博是另一种博客形式，其特点是帖子非常短，类似于 X（以前称为 Twitter）。

然而，多年来，很明显，有几种方式可以搞砸一个博客并驱赶访客——或者一开始就吸引不到他们。在第九章中，你将了解到如何构建和管理一个博客，它有助于而不是阻碍你实现网站目标。

1.6.11 赚钱

第十章全部关于盈利。网站可以通过多种方式成为收入来源，包括以下几种：

• 在你的网站上放置按点击付费的广告（链接）。当有人点击链接并进入亚马逊（或其他商家）的页面时，你可以获得佣金。

• 如果有人点击你在网站上提供的链接并最终购买了产品，使用联盟营销可以为你赚取佣金。

• 通过电子商务插件如 WooCommerce 销售自己的产品。

• 通过对产品进行评论或其他内容的创作来获得报酬。这类似于拥有一个企业租用的广告牌。

• 在你的网站上设置一个付费区域，人们必须付费订阅才能进入查看内容。

• 提供咨询服务、网站设计或营销等服务。

• 通过添加捐赠插件如 Easy PayPal Donation 进行筹款。

这些方法并不是相互排斥的；你可以将它们结合起来。但盈利必须谨慎处理，否则可能会惹恼并缩小你的受众。确保你不会让你的网站充斥着弹出或滑入的动画广告，或者使用诸如为正面评论付费等可疑的策略。

1.6.12 优化网站以适应 AI 和搜索引擎排名

为了吸引观众，你希望在搜索引擎和 AI 系统中排名靠前。在输入他们想要的内容后，人们通常不会深入到谷歌链接列表的第五页以下。

这对于通常只显示一两个链接（有时甚至没有）的 AI 搜索来说更是如此，而不是多页链接。AI 系统的设计者喜欢说，谷歌给你一个网站列表，你必须访问这些网站来寻找你想要的答案，而 AI 则相反，直接给你答案。

你希望当潜在访客搜索你的主题时，你的网站链接能够突出显示。这意味着当谷歌或其他蜘蛛机器人来访问你、评判你并向总部报告时，你希望给 AI 系统、谷歌和必应留下深刻印象。

AI、谷歌和其他搜索者有一份他们非常不喜欢的清单！例如，如果他们发现重复、歧义或不精确，他们会立即扣分。因此，作为你网站的管理员，你需要注意你内容的质量、网站的导航性、准确性、保持时效性和整体优秀性。换句话说，因为 AI、谷歌和其他人努力提供最佳搜索结果，确保你的网站能够令人信服地成为某人问题或需求的最佳答案。不要试图操纵这些系统。他们知道这些伎俩。提供质量才是关键。

获得高排名不再容易，如果你计划扩大受众，关注 SEO 是至关重要的（我们将在第十一章深入探讨 SEO）。现在，你还需要注意 AI 优化（AIO）。谷歌、必应和其他搜索引擎正在快速发展，将 AI 纳入其流程。看到长串链接的日子已经过去了。

估计表明，超过 80%的上网人士平均每天使用谷歌三次。对于你大多数潜在的新访客来说，谷歌和 AI 是通往你网站的途径。

在谷歌出现之前的早期，搜索引擎相当原始。获得高排名相当容易。例如，如果你只是将短语经典汽车重复 400 次，你就可以在搜索经典汽车网站时排在第一位。而排名第二的网站使用该短语的频率较低。

但随后谷歌出现了，改变了游戏规则。谷歌的主要初步突破（超越了多词、原始、定量排名算法）是模仿学术论文的排名方式。引用你的论文的其他论文数量决定了你的排名。这是定性判断。其理念是，如果一篇论文被其他学者频繁引用，那么它必须具有重要性和质量。

类似地，搜索系统会查看有多少其他网站链接到你的网站（称为反向链接）。系统还会考虑链接到你的网站的网站质量。此外，现在谷歌和 AI 还会做出数十种其他类型的判断。

多亏了 AI 和深度数据挖掘，今天的搜索系统相当复杂。有些人说，他们的评论现在质量足够高，可以与专家人类评论家做出的判断相媲美。以下是一些常用的策略，用于取悦搜索机器人：

• 关键词——使用当某人想要搜索你主题的网站时会在 Google 中输入的相同术语

• 优化——修改你的网站，使其更接近搜索者期望在有用的网站上找到的内容——在网站的标题、标题、导航、图片和其他元素中

• 内容——确保你的网站充满了针对目标受众的有益的、高质量的写作内容

• 链接——找到增加反向链接数量的方法

• 速度——测试你网站的页面加载速度和整体性能，并在必要时添加可以加快速度的插件

1.6.13 使用分析来构建和保持你的受众

网站分析意味着通过理解访客的行为和衡量网站的整体性能来学习如何改进你的网站。你可以使用分析插件来获取以下可能有价值的数据：

• 来到网站的访客数量

• 在访问你之前，访客来自哪里

• 人们查看网站上的哪些页面（以及看了多久）

• 他们点击了哪些链接

• 他们通过网站所走的路径

• 他们离开你的网站时的位置

• 他们是否在网站内搜索了什么（如果有的话）

总之，分析数据让你知道哪些设计元素和内容需要改进。如果您的网站是盈利的，它们还可以报告您营销活动的有效性。

1.6.14 资源：从这里开始去哪里

第十三章全部关于如何跟上 AI 和 WordPress 的发展。你可以在这里找到最新的信息以及用于任何任务的最佳 AI 工具。此外，WordPress 及其主题和插件正在迅速采用 AI 功能。在这一章中，你将找到资源，以两个目标为导向：跟上 AI 的惊人进步并完善你的 WordPress 技能。

本书以各种精选列表和描述结束，这些描述将帮助你监控快速发展的 AI 和网站建设策略。你将了解所有最好的 YouTube 频道、论坛、社交媒体网站、在线课程、研究论文和会议。

现在，在第二章中，我们将把注意力转向构建高质量网站的第一步。你将学习如何选择最佳托管服务、安装安全插件，并在网站令人印象深刻且准备好在互联网上亮相之前阻止对其的访问。

摘要

• WordPress 在网站构建器中拥有最大的市场份额，因为它功能强大、无需编码且直观。

• 通过知道如何自己构建网站，你可以节省时间和金钱。

• 诸如 GPT 4o 和 Midjourney 这样的 AI 系统可以通过十多种方式改进一个网站。

• AI 提示是一种类似于计算机编程的技能，但更容易，因为你可以使用普通英语或其他自然语言。在 AI 出现之前，你必须学习一种复杂的计算机语言。

• 目前，学习如何创建好的提示词的技巧和技术仍然很重要，但 AI 可能很快就会接管这项工作。

• 在构建网站时，你需要做出一些重要的初始选择，包括找到合适的托管服务和提前规划你的网站。

• 选择正确的主题和插件，并有效地管理你的多媒体内容也非常关键。

• 使用 YellowPencil 插件来微调你网站的外观。

• 确保你能够做好创建博客、添加盈利模式和了解给 AI 和搜索引擎留下深刻印象的最佳方式，以便你的网站能够吸引更多的观众。

• 重视数据分析。关于人们如何与你的网站互动的数据可以显示出如何为你的访客提供最佳体验。

第二章：开始建立网站

本章涵盖

• 选择正确的 WordPress 版本和最佳托管服务

• 在准备好亮相之前隐藏您的网站

• 保存您的作品

• 安装安全和备份插件

• 管理对您网站的访问

在建立网站时，从正确的方向开始非常重要。您的网站是否能实现目标或失败，有时可能取决于您在甚至创建第一个页面之前所做的选择。

首先，WordPress 有两种版本，如果您选择了错误的一个，您可能会一直与限制和缺乏灵活性作斗争。此外，您必须选择一个优质的托管服务，它将您的网站存储在云端的伺服器上。选择错误的一个，当您需要技术支持（我们所有人有时都会需要）时，您可能会遇到延误、糟糕的建议或完全没有回应！本章全部关于在您甚至开始决定您网站的结构和设计之前做出正确的决定。

2.1 选择正确的 WordPress 版本

WordPress 有两种不同的版本：WordPress.com 和 WordPress.org。大多数专家认为，在这两个版本中，WordPress.org 优于 WordPress.com。

note 这里提到的org和com术语只是标识这两种 WordPress 版本，与.com、.edu、.net（称为域名后缀）以及其他附加到互联网网站地址（如 cnn.com 或 Wikipedia.org）的简写缩略词无关。

当你开始建立网站时，你的第一个决定是选择哪个版本的 WordPress。回想一下，WordPress可以安装在您的硬盘上，但这并不推荐。您将不得不处理诸如安全、正常运行时间和许多其他最好留给位于云端的 WordPress 托管服务的技术问题。托管服务的一个关键好处是，当出现问题的时候，您可以获得技术支持。

那么，为什么不选择 WordPress.com 呢？WordPress.com 网站上有一个免费托管计划。但是，这个免费版本有一些限制——例如不允许使用插件。然而，对于小型、简单的个人博客来说，这可能是足够的。WordPress.com 还提供付费的高级计划，但许多评论员表示，与 SiteGround.com、Bluehost.com 或 DreamHost.com 等独立托管服务相比，它们的价值并不高。

人工智能助手

向困惑者、双子座或另一个 AI 提出这个问题：

|

WordPress 只推荐三种托管服务。它们是什么？为什么推荐它们？

note 回想一下，插件是一个小的应用程序，您将其添加到 WordPress 网站中以提供额外的功能，例如旋转幻灯片或自动网站备份。第五章全部关于选择最佳插件。

如果您计划建立一个超越简单个人博客的网站，您将需要注册不同于 WordPress.com 的托管服务。并且当您注册不同的托管服务时，您将自动使用 WordPress.org 版本而不是 WordPress.com 版本，因为托管服务不使用 WordPress.com 版本。

WordPress.org 版本是开源的，并且免费使用。但是，优质的托管服务确实会收取费用。以下是付费托管服务的一些主要优势：

• 您可以期待高质量、快速的科技支持。

• 您可以通过数以万计的插件添加功能。

• 与 WordPress.com 免费计划中有限的定制相比，付费托管商不会限制修改。

• 他们通常提供更好的性能，例如更快的页面加载时间。

• 您将获得更多实用工具和功能，例如更大的带宽、更多的存储空间以及免费的网站迁移。

• 付费托管计划使您更容易从您的网站上赚钱。

如果您想使用付费托管服务并避免大量前期投资，您通常可以在每月 3 美元以下找到试用优惠（就像有线电视促销优惠一样，优惠结束后价格会上涨）。一些托管商还提供退款保证。如果您想了解更多关于为什么大多数专家推荐使用 WordPress.org 版本的原因，您可以在本有用的教程中找到更多信息：mng.bz/PNVR。

2.2 注册一流托管服务

WordPress 网站通常驻留在云服务器上。这些服务器由提供技术支持以及各种实用工具（如安全系统、文件管理器和加密）的托管服务维护。从您的硬盘上托管 WordPress 网站是可能的，但这需要相当的技术技能，并且您将负责由托管服务最好提供的功能和安全性。坦白说，这并不值得。以下是使用托管服务而不是在您的硬盘上托管网站的一些优势：

• 可靠性—托管服务拥有一支专家团队，负责确保您的网站全天候正常运行。如果您的网站经常宕机，您可能会迅速失去观众。

• 安全性—优秀的托管商已经实施了强大的安全措施，以保护您的网站免受攻击。WordPress 网站是黑客攻击的热门目标。

• 性能—托管商的专用服务器针对 WordPress 进行了优化。您的页面将加载得更快，响应性也更强，如果您的网站位于自己的硬盘上，情况则相反。请注意，您的一些观众可能拥有较慢的互联网连接，页面加载时间可能会决定访客是否返回您的网站。

• 易用性——托管服务包括一组实用工具（位于名为 cPanel 或网站工具的位置）。您会发现一个安装安全套接字层（SSL；因此当有人访问您的网站时，他们不会看到令人不安的通知：“不安全”）。托管服务还提供许多其他有用的工具，包括自动备份、更新、文件管理和一个“预览”区域，您可以在那里离线修改您的网站，以及其他功能。

• 成本——随着时间的推移，托管服务可能比购买和维护自己的服务器更经济。

• 支持——最后但同样重要的是支持。您需要一个质量高的技术支持团队，以便快速解决技术问题。他们需要知识渊博、快速响应，并且可以通过聊天、电子邮件或电话轻松联系。

2.2.1 选择您的域名

当您首次注册托管服务账户时，您将被要求选择一个域名。这是 URL，是您网站主页在互联网上的唯一地址。URL 的例子包括 bbc.com、amazon.com 和 facebook.com。

定义 一个网站的主页是您网站中的第一个页面。这是访客到达您的网站时看到的页面。您可能还会看到它被称为着陆页、闪屏、主页面、索引、首页、起始页和第一页**。

每个页面和每篇博客文章都有自己的 URL（内部页面和文章的 URL 被称为永久链接），但网站的域名是主页面的 URL。因此，当在搜索引擎列表中点击时，会将访客带到您的首页。请注意，永久链接通常由站点名称加上一个短链接（通常是内部页面的标题）组成。一个永久链接的例子是cnn.com/world。

人们过去为了找到他们网站的最佳域名而苦苦挣扎——找到一个描述性强且简短的域名——换句话说，易于记忆。但到目前为止，所有好记的域名都已被占用（或者正在被储存起来，直到有人愿意为它们支付巨额费用）。Voice.com 在 2019 年以 3000 万美元的价格被区块链技术公司 Block.one 收购。

因此，不要折磨自己试图想出一个完美的域名，只需尝试将您网站的最佳关键词融入您的新域名中。关键词是一个寻找类似您网站的某人可能会在 AI 或 Google 中键入的单词或短语。

例如，如果您正在创建一个烹饪网站，将单词recipes或cooking放在域名中某个位置。koolrecipes.com就很好。如今，人们通常不会记住大多数域名。相反，他们将通过搜索引擎、AI 平台、浏览器中的书签或他们在其他网站上找到的指向您网站的链接来访问您的网站。

注意 谷歌正在迅速将自己从搜索引擎转变为 AI 系统。它需要与 GPT 和其他 AI 竞争，否则会失去业务。

AI 辅助

就像在头脑风暴时一样，向你的 AI 助手寻求建议。例如，为了找到一个尚未被使用的域名，用于我们的食谱实践网站，我向 Perplexity 提交了这个提示：

|

你是网站营销方面的专家。我想请你列出十个以“Time Tested Recipes for the Instant Pot”为标题的新网站的域名。让它们听起来吸引人、易于记忆，且简短。每个域名不必以“.com”作为顶级域名。顶级域名可以是“.edu”、“.net”或“.org”。同时，请确保每个域名都包含“recipes”这个词。对于你提出的每个域名，都要在互联网上查找。如果它已经被使用，请不要将其包含在你提出的十个域名建议列表中。相反，尝试一个不同的域名，并重复查看它是否已被使用的流程。深呼吸，一步一步地思考。

Perplexity 给出了几个不错的建议：

|

以下是针对名为“Time Tested Recipes for the Instant Pot”的新网站的十个域名建议：InstantPotRecipesHQ.comTriedAndTrueInstantPot.comTimeTestedInstantPotRecipes.comInstantPotRecipesCentral.comInstantPotRecipesVault.comInstantPotRecipesMastery.comInstantPotRecipesGenius.comInstantPotRecipesEmporium.comInstantPotRecipesHub.comInstantPotRecipesGuru.com

我已经在互联网上搜索了这些域名，看起来它们都没有被使用。

2.2.2 设置实践网站

在附录中，你可以找到设置托管服务账户、在该账户上安装 WordPress 以及安装你可以用于本书实践网站的 Twenty Sixteen 默认 WordPress 主题的说明。最后，附录描述了如何进入网站的设置 > 通用屏幕，并将网站标题命名为“Time Tested Recipes for the Instant Pot”，副标题为“适合初学者的舒适食品”。如果你还没有设置实践网站，请访问附录，并立即设置，如果你想使用实践网站。本书中的一些示例基于附录中描述的设置。但如果你选择，你也可以在你的真实网站上工作。

在选择托管提供商时，寻找一个可靠、价格合理且声誉良好的公司。正如经常发生的那样，最广泛宣传的服务并不一定是最佳选择。例如，GoDaddy 拥有相当大的市场份额。但它得到的评价褒贬不一。

寻找一个可靠的托管服务可能会让人感到 daunting。全球大约有 330,000 个 WordPress 托管服务！但 WordPress.org 本身只推荐这三个托管商：SiteGround、Bluehost 或 DreamHost。不出所料，我也推荐这三个，原因稍后会列出。

这些托管服务都是优秀的选择，拥有出色的技术支持、稳定的性能和一系列可供使用的实用工具。你可以在以下链接中找到最新的最佳托管服务概述：www.wpbeginner.com/wordpress-hosting/。

小贴士：wpbeginner 网站是一个很好的资源。无论何时你对 WordPress 有任何疑问，你通常都能在那里找到一个可靠的答案。他们提供清晰的教程、技巧、指南和无偏见的评论。其他有用的资源包括以下链接：neilpatel.com/、chat.openai.com/chat、wordpress.org/support/forums、wordpress.org/support/和www.facebook.com/groups/wpbeginner/。

在你为托管服务注册账户的过程中，你将被要求为你的托管服务账户创建一个用户名/密码对。然后，当你向该账户添加一个新的、空的 WordPress 安装时，你将需要第二个用户名/密码对。将这些四个术语都写在一张纸上。当你需要访问你的托管账户或登录你的 WordPress 网站进行工作时，你需要这些用户名和密码。

2.2.3 托管服务清单

你想要找到一个提供以下服务的托管服务：

• 可靠、持续在线—你应该期望 99%的在线时间，因为如果服务导致你的网站不可用，你可能会失去一部分观众。人们知道有替代你的产品，而互联网已经使大多数人习惯于鼠标按钮非常快地反应。对于许多网络冲浪者来说，只需几秒钟的延迟就会飞到别处。

• 快速页面加载和缓存—考虑到你的观众中很多人对任何形式的延迟都变得不耐烦，包括加载缓慢的网站页面。因此，在审查托管服务的指标时，检查它们的平均页面加载速度。同时也要看看网站流量激增是否会影响加载速度。

注意：一种有助于快速显示页面的重要技术是缓存。为了加快页面显示速度，托管服务会缓存（存储）之前显示过的你的网站页面。当再次请求同一页面时，托管方只需将已渲染、缓存的页面直接显示在访客的屏幕上。这样可以避免渲染过程造成的延迟。（为了显示一个全新的页面，浏览器必须执行各种任务——从你的 WordPress 媒体库中获取图片；查看任何 CSS 代码，例如，检查字体大小是否与主题的 CSS 样式表指定的不同；扫描 HTML 代码以确定页面元素的定位位置；等等。因此，你将需要一个能够高效缓存其网站页面的托管服务。）

• 有效的安全性—在安全性方面，冗余通常是好事。重要的是您的托管服务提供自己的强大安全系统，并且您还安装了像 Wordfence 这样的安全插件。顶级军事设施不会只依赖一道栅栏，您也不应该这样做。

• 可靠的备份系统—优质的托管服务会自动每天备份您的网站。同样，您也会希望安装一个单独的备份插件。这样，如果您的双重栅栏安全预防措施失败，您仍然可以恢复您的网站。

• 易于获取且可靠的客服支持—每个创建或管理网站的人都会时不时地需要与托管服务的客服技术支持进行沟通。这不是一个“是否”的问题，而是一个“何时”的问题。因此，您会希望选择一个提供快速且准确响应您电话、电子邮件或聊天查询的服务。之前提到的 WordPress.org 推荐的三个托管服务都提供了这种技术支持。他们可以迅速帮助您摆脱困境。

• 服务器位于您的目标受众附近—尽管托管服务的大本营并不重要，但他们的服务器位置却很重要。一些最好的托管服务宣传他们的内容分发网络（CDN），这意味着他们提供多个服务器存储您的网站。如果托管您网站的服务器至少位于您的主要受众所在的同一大陆，您的页面加载速度会更快。许多可能成为您受众的人如果遇到页面加载缓慢的情况，他们可能根本不会忍受。而且，您的受众中的一些人也可能有较慢的互联网连接。对他们来说，页面加载速度是他们决定是否将您的网站加入书签以备将来访问或离开时考虑的一个重要因素。

总结来说，如果您签约 WordPress.org 推荐的三大托管服务之一：SiteGround、Bluehost 或 DreamHost，您可能会得到很好的服务。但如果您想探索其他选项，您可以使用之前给出的清单来避免以后的遗憾。

2.3 访问您的后台

在 WordPress 后台，您在这里工作并处理您的网站，有相当多的不同页面，例如菜单构建页面、媒体库和添加新插件页面。然而，我们将它们称为屏幕而不是页面，以区分它们与您的受众看到的网站的实际页面。后台是只有您，管理员（或您授权的其他人）可以进入的网站视图。在这里，您可以添加新页面、进行维护、进行改进，以及其他构建和维护网站的工作。它是位于您的访客所见之上的引擎室。访客被限制在前端，即网站的公共区域。

在您的托管服务上设置全新的、空白的 WordPress 安装后，首先要做的事情是访问您网站的后端。其地址基于您在注册托管服务时为您的网站 URL（域名）选择的地址。例如，如果您的域名是mysitesname.com，那么您后端的地址是 https://mysitesname.com/wp-admin。

您的后端地址只是前端地址的一种修改。您只需将/wp-admin 附加到您的域名即可。当您第一次访问后端时，请在浏览器中将其添加到书签（或收藏）。此外，当您的浏览器询问是否要保存用户名和密码时，请保存它们，以便您随时可以轻松地访问该网站。请注意，当您想查看前端时，只需删除地址中附加的/wp-admin 部分。

2018 年，WordPress 开发团队为 WordPress 添加了第二个编辑器，并将其设置为默认编辑器。编辑器是您向网站添加新内容或修改现有内容（如文本、图像、多媒体、超链接等）的地方。新的编辑器被称为Gutenberg或WordPress 块编辑器。

因此，WordPress 开发者可以选择两个编辑器：传统的经典编辑器和 Gutenberg。前者有点像加了兴奋剂的文字处理器，而后者则像页面构建器。第三方页面构建器，如 Elementor 和 Divi，已成为流行的 WordPress 插件。页面构建器可以提供诸如拖放布局、所见即所得的动态设计、页面模板等功能，以及无需编写代码即可微调网站外观的工具。

Gutenberg 旨在将多年来后市场页面构建插件所提供的功能集成到 WordPress 中。目前，我建议您切换到经典 WordPress 编辑器。这样，您得到的结果将与本书中展示的相匹配。然而，在本书中，也描述了使用 Gutenberg 进行操作的方法。选择权在您手中。如果您想使用经典编辑器，请参阅附录中的说明。使用名为Classic Editor的插件在经典和 Gutenberg 之间切换非常简单。

2.4 在网站建设期间隐藏您的网站

您可能希望在网站完善后再将其公开。显然，在您尽力使其出色之后，搜索引擎对您网站质量的判断非常重要。您也不希望潜在的目标受众根据半成品来决定是否再次访问您的网站或将其添加到书签。

因此，在你准备好盛大开业之前，你应该屏蔽 Google 和其他搜索系统，如 perplexity.ai。要屏蔽搜索系统，请转到你网站的的后端，在左侧你会看到一个黑色菜单，称为管理菜单或仪表板。点击设置以打开其子菜单，然后点击阅读，如图 2.1 所示。然后，在搜索引擎可见性旁边，选择“阻止搜索引擎索引此网站”复选框，并点击保存更改按钮。

隐藏你的网站的最终步骤是安装一个即将推出的插件。如果有人访问你的网站，他们只会看到一个消息，说明网站正在建设中。

然而，作为网站的管理员，你可以查看真实页面。你需要这样做。在为你的网站工作时，你时不时地想查看一下前端页面。即将推出插件会在你的浏览器中存储一个 cookie，以便清楚地表明你被允许看到真实的页面。

提示：Cookies 是通常由你访问的一些网站存储在你浏览器中的小数据块。主要目的是节省你的时间。如果你之前填写了表单或使用密码登录——如果你在访问网站之前将信息存储在 cookie 中，你就不需要重复那些操作。

图 2.1 在你的设置 > 阅读屏幕中，阻止搜索引擎对你的网站进度进行评判。

一个即将推出的好插件是 SeedProd 的网站构建器。要使用它，点击 WordPress 后端仪表板中的插件 > 添加新插件。然后，在右上角的搜索框中，输入seedprod。最后，点击安装按钮，然后点击激活。

一些插件和主题会将项目添加到你的仪表板菜单中。在左侧菜单中，点击 SeedProd > 落地页面，如图 2.2 所示。

一些插件即使你激活了经典编辑器插件，也会显示 Gutenberg 风格的 UI。例如，SeedProd 就是其中之一。当你到达 SeedProd 设计屏幕时，你可以体验一下 WordPress 中 Gutenberg 块编辑器的工作方式。SeedProd 模仿了块编辑器。如果你愿意，可以添加一些 SeedProd 的块，并用你的信息替换无意义文本。然后，你的真实页面将被这个即将推出页面所取代，通知访客你的网站目前正在建设中。点击保存按钮。如果你看到 WordPress 不允许你保存的警告，SeedProd 会显示如何解决这个问题。任何时候你想查看你的即将推出页面如何显示给访客，请将你网站的 URL 复制或粘贴到一个你没有用来设置此插件的浏览器中。

SeedProd 插件还包括一个正在施工的屏幕，如果你正在更新现有网站，可以使用它。但除非网站状况真的很糟糕，否则你应该避免这种方法。你的网站访客期望能够访问。如果你的网站关闭，即使只是短暂的，你可能会失去一些观众。

在 SeedProd 中点击“点击着陆页”，然后点击“编辑页面”按钮来自定义你的即将推出页面。

相反，通常最好的做法是通过对其副本进行工作来更新你的网站，而不是关闭实时网站。使用你托管服务 cPanel 工具集中找到的预览实用程序（或者你也可以添加一个预览插件到你的网站）. 当进行预览时，网站会被复制，但实时网站仍然对访客可访问。你在副本上进行改进。然后当你完成时，副本替换了旧版本并上线。

对于预览阶段有一个例外。如果你的网站被恶意软件攻击严重破坏，例如，导致有断开的链接、缺失的页面、可见的代码、空白页面等，那么显示一个带有网站何时可再次使用的信息的施工中屏幕会更好。你不想让访客到达一个充满问题的网站。

在保持网站私密时，一个可选的步骤是隐藏单个页面和帖子，除非你给某人一个密码来访问它们。网站中的每个页面和帖子都有自己的、独立的永久链接 URL 地址。

通常，永久链接是通过将页面标题附加到网站地址来构建的：

• siteaddress.com—网站地址。

• siteaddress.com/about-us—这将是我们“关于我们”页面的永久链接地址。（URL 地址不能有空格字符，所以用连字符插入以替换页面标题中的空格。）在这个例子中，地址中的 about-us 部分被称为缩略词。

由于内部页面有自己的 URL 地址，所以有可能在你准备好将网站公开之前，有人到达这些内部页面之一。话虽如此，一个高质量的即将推出插件，如 SeedProd 提供的，默认情况下会在所有页面上显示即将推出屏幕。

2.4.1 请求人工智能不要打扰你的网站

人工智能系统通过遍历互联网、记忆和组织找到的内容来“学习”。但如果你不希望人工智能使用你的内容，你可以要求人工智能系统不要从你的网站上收集信息。并且一些人工智能会遵守这一要求。这种请求的有效性可能至少部分取决于未来的版权法。

假设你想要保留所有或部分内容不对外公开——只有付费获取该信息的人才能访问——或者你不想让 AI 收集你的内容。你可以通过在网站根文件目录中存储一个名为 robots.txt 的文件来尝试阻止 AI 或搜索引擎访问你的页面。（该目录是存储在你的网站数据库中的名为 public_html 的目录，它存储在你的托管服务提供商的服务器上。）如果该文件已经存在，你可以修改它。或者你可以创建一个同名的新文件。但如果你要修改网站文件，请确保你知道自己在做什么。你可能会破坏你的网站。（在修改网站文件之前，请务必先备份你的网站。）

在任何情况下，你可以在该文件中指定你授予 AI 的访问权限，如果有的话。要查看该文件中应输入的具体内容，请访问 mng.bz/eyww。如果你需要帮助了解如何以及在哪里保存此文件，你可以咨询你的托管服务的技术支持人员。

2.5 保存你的工作

一些应用程序，如 Microsoft OneNote，会自动保存你所做的任何更改。WordPress 则不是这样。相反，当你修改网站上页面的内容时，你必须点击更新按钮（或 WordPress 为该按钮显示的几个同义词）。

这些同义词存在的一个问题是：WordPress 在保存工作时的按钮命名并不一致。例如，当你首次在 WordPress 中创建新页面时，保存工作的按钮被标记为 发布。然后，该按钮的标签会变为 更新。改变按钮名称并不是一个好的 UI 设计。初学者常常因此感到困惑。如果所有保存工作的按钮都简单地命名为“保存”会更好。

WordPress 通常直观。用户界面设计良好。但这些保存按钮令人困惑，因为它们有不同的含义。这只是你必须习惯的事情之一。首先，发布通常意味着公开。换句话说，你会认为点击发布意味着你的观众现在可以看到你刚刚修改的页面的最新版本。但情况并不总是这样。如果页面被缓存（存储以供将来显示），他们可能看不到新版本，尤其是如果缓存算法认为修改很小。

此外，你可能正在编辑该页面的草稿，或者指定了该页面应为私有。在这些情况下，页面仅存储在你的网站数据库中，但不会对公众可见。

更糟糕的是，这个保存工作的按钮在 WordPress 的不同屏幕上以几种不同的方式标记。当你正在编辑网站的菜单屏幕时，它被命名为“保存菜单”。在其他一些屏幕上，它被称为“保存更改”。你也会发现有时只是简单地标记为“保存”。

还有一个问题。这个“保存”按钮出现在不同屏幕的不同位置。它通常在右上角，有时在右下角，有时在屏幕底部很远的地方，以至于你必须向下滚动才能看到它。

注意，你还可以通过几种方式退出未保存的屏幕：点击浏览器中的不同标签页，关闭当前标签页，关闭浏览器，或切换到不同的应用程序。如果你在没有保存更改的情况下退出，WordPress 通常会显示如图 2.3 所示的警告消息。

图 2.3 如果你尝试离开一个你没有保存所做的更改的页面，你通常会收到这样的警告。

关键词是“通常”。在少数屏幕上，没有警告，你将失去在该屏幕上所做的所有工作！因此，你将想要养成通过点击保存按钮或当时可能显示的其各种标签来保存修改的习惯。

2.6 确保网站安全

如果你已经注册了优质的主机服务，你可以确信他们已经在你的颤抖的年轻网站和互联网上不断漫游的威胁性蜘蛛机器人之间建立了一套围栏——不知疲倦地以惊人的速度探测漏洞。但在你投资时间建立网站之前，你将想要采取自己的两个防御步骤：添加一个安全插件，并添加一个备份插件。

的确，一个好的主机会在确保其服务器受到保护上投入大量的努力。大规模的攻击会摧毁他们的业务。好的主机也会每天或根据你选择的最佳频率备份你的网站。但在这些事情上冗余是好事。大多数人打开 Windows Defender，但也会投资一个单独的反病毒应用程序，这也帮助他们的机器。

一个广受尊敬的 WordPress 安全插件是 Wordfence。这是一个免费增值产品——提供免费和付费计划，但免费版本非常有效。在网站建设的早期阶段将其添加到你的网站上。以下是操作方法：

1. 前往你的插件 > 添加新插件页面。

2. 在搜索框中输入wordfence。

3. 点击安装按钮，然后点击激活。

还要确保你的密码强大，无论是你网站的背面密码还是你主机服务账户的另一个密码。你的浏览器可以为你记住这些密码，所以没有理由不使它们复杂且无意义。记住，互联网上四处游荡的邪恶蜘蛛不知疲倦。他们的一种技巧叫做暴力攻击。他们可以尝试英语中的每一个单词以及有限数字集的每一种组合，直到他们找到你的密码。

2.7 自动备份

最好的备份插件之一是 UpdraftPlus，它在超过 300 万个网站上使用。这是一个免费增值服务，但免费版本工作得非常好。以下是安装它的方法：

1. 前往你的插件 > 添加新插件页面。

2. 在搜索框中，输入updraftplus.。

3. 点击安装按钮，然后点击激活。

激活后，转到您的设置>UpdraftPlus 备份屏幕，并点击设置选项卡，如图 2.4 所示。

点击文件备份计划旁边的向下箭头。这将下拉一个列表，如果您正在积极修改站点或拥有一个经常添加新帖子的繁忙博客，您应该从列表中选择每日备份。

图 2.4 在此设置屏幕中，指定备份您的站点文件和数据库的频率、要保留的备份数量以及存储位置。

对于数据库备份计划也做同样操作。同时选择您想要保留的备份数量，大约 10 个。第 11 个备份将成为堆栈中的第一个，而最旧的备份，即第 10 个，将被删除。最后，选择您想要存储备份的位置。然后，务必点击“保存更改”按钮。

提示：在您构建或积极更新您的站点时，每日备份可以确保您不会丢失太多工作。但如果您需要立即保存所做的更改，您始终可以手动备份：只需在主 UpdraftPlus 设置屏幕（备份/恢复选项卡）上点击“立即备份”按钮。此外，如果您几周内没有对站点进行更改，您可以减少自动备份的频率。

然而，如果您的站点遭受了大规模攻击或其他灾难，您无法恢复，仍然还有希望。前往archive.org/web/，并将您的站点前端地址粘贴到搜索框中。您至少可以复制粘贴存储在此存档站点上的文本内容，您还可以截图图像和页面布局。这至少会使从头开始重建您的站点变得容易得多。您将恢复站点设计、页面布局和内容。

2.8 管理站点访问

如果您想让其他人参与您的设计工作、贡献内容或订阅您的站点，您需要决定您想授予他们多少以及什么类型的访问权限。并非每个人都需要完全的、管理员级别的站点控制权。您可以提供不同程度的权限，每种权限都有自己的范围。本质上，您可以指定特定个人可以在站点中做什么或不能做什么。您在“用户”>“添加新用户”屏幕上设置这些权限，如图 2.5 所示。

图 2.5 在添加新用户屏幕中，您为允许进入后端的人指定一个权限级别。

2.8.1 理解各种用户角色

有一些默认的用户角色可供您使用。以下描述了每个用户角色：

• 管理员—被分配此角色的人对网站拥有完全控制权。他们可以添加、删除或编辑任何内容，任何地方。他们可以管理其他用户，更改网站上的任何设置，安装或删除插件和主题。他们最重要的能力是可以删除、修改或添加其他用户，包括更改他们的密码。换句话说，管理员可以做任何事情。

• 编辑—他们能够添加、删除或修改网站上的任何内容，并且可以管理博客帖子。他们不允许安装或操作主题或插件，添加新用户，修改现有用户的角色，或更改网站的设置。

• 作者—这个角色对网站的风险很小。作者可以添加、删除或创建帖子标签，或修改他们自己的帖子。他们不能创建新分类。他们不能批准或删除他人的帖子。他们也不能对网站做其他任何事情。

• 贡献者—这些人拥有与作者角色相似的权限。然而，他们不能删除他们发布的帖子。而且与作者角色不同，他们不能向网站添加文件，因此这阻止了他们在帖子中包含图片。

• 订阅者—订阅者可以修改他们的个人资料或更改他们的密码。但他们不能做其他任何事情。

新用户会收到你的电子邮件（如果你在设置他们时选择了这个选项）。它告诉他们他们的用户名，并显示一个链接，允许他们创建密码。

除了这些默认用户角色之外，作为管理员，你可以定义自定义角色。这样，如果你想要的不是默认角色之一，你可以创建一个新角色，包括你想要授予的任何权限集。通常认为最好只有一个，最多两个管理员用户。其他人应该对网站的掌控较少。

插件和主题也可以添加除了 WordPress 默认角色之外的角色。例如，WooCommerce 插件添加了商店经理和客户角色，这些角色定义了用户如何与其电子商务功能交互。

2.8.2 通过订阅盈利

从你的网站盈利的一个好方法是为访客提供必须付费的内容，你可以将整个网站或其部分内容设为付费区域。人们很少反对这种盈利方式，因为它自愿且不显眼。

TIP 订阅者角色通常用于基于会员制、订阅或在线商店模式的网站。用户必须注册并付费才能访问网站的部分或全部内容。订阅者角色的另一个场景是允许订阅者注册并评论帖子，但阻止他们创建或发布其他内容。

如何盈利

如果你想要盈利你的网站内容，以下是一些使用订阅者用户角色的建议：

• 在这些在线课程中，人们付费观看内容或加入在线课程

• 部分或全部网站设为付费区域，提供付费内容的杂志

• 仅对注册用户提供特殊折扣的付费订阅

• 私人论坛

• 咨询或辅导服务

要更改 WordPress 中的用户角色，请按照以下步骤操作（见图 2.6）：

1. 以管理员身份登录 WordPress 仪表板。

2. 在管理菜单中，点击用户。

3. 找到你想要更改角色的用户，并点击他们的用户名以打开他们的个人资料。

4. 滚动到用户个人资料的“角色”部分。

5. 从下拉菜单中选择新角色。

6. 点击更新用户按钮以保存更改。

2.8.3 页面密码保护

这是你控制网站前端页面或博客文章访问权限的另一种方式。你的访客可以分为那些有特定页面密码的人和那些无法查看这些页面的人。你可以通过标记为密码保护来隔离单个页面和帖子。以下是操作方法：

1. 前往你的页面 > 所有页面屏幕。

2. 点击你想要设置密码保护的页面标题。

3. 在这个编辑页面屏幕中，找到右侧的发布模块。

4. 点击密码保护。

5. 输入密码。

6. 点击更新按钮。

图 2.6 这里你可以通过批量操作功能一次性更改多个用户的角色。

图 2.7 显示了你可以在哪里设置页面或帖子的密码保护，阻止没有该密码的人查看。

图 2.7 在发布模块中，输入一个你可以提供给允许查看页面的人的密码。

提示：只有拥有管理员或编辑级别权限的人才能查看标记为密码保护的页面或帖子，即使是在网站的的后端。

除了货币化之外，将内容设置为密码保护还可以在几种其他方式中发挥作用：

• 即使访客知道页面的永久链接地址，他们也无法看到它。

• 你正在为你的网站添加一个新页面，但希望它在完成之前保持隐藏。

• 你希望某些页面或帖子只被你的受众的一部分人查看——例如，只有成年人。

如果你编辑这个相同的发布模块中的“发布于”字段，页面或帖子也可以被安排在特定的时间后显示。

在本章中，你已经学习了在开始 WordPress 网站时需要采取的一些重要初步步骤。你需要选择一个可靠的托管服务，选择一个你感到舒适的编辑器，安装安全措施，并决定谁可以访问你的网站后端的内容。在下一章中，你将看到如何将网站聚焦于单一、专业的目标，并设置任何优质网站的基本组件——高效的导航。

摘要

• 从正确的方向开始，并做一些预先规划，可以帮助你创建一个连贯、有机的网站。

• 许多专家都认为你应该使用免费的、开源版本 WordPress.org，而不是 WordPress.com。

• 选择合适的主机服务可以成就或毁掉一个网站。每个人时不时都需要坚实的科技支持，而且你不想在你最需要帮助的时候，选择一个在你需要帮助时消失的服务机构。

• 如果你选择 WordPress.org 推荐的三个主机之一进行注册，就不会出错：Bluehost、DreamHost 或 SiteGround。

• WordPress 有两个编辑器。如果你愿意，可以尝试它们两个，但总的来说，经典编辑器比新的 Gutenberg 块编辑器更稳定和高效。后者仍在建设中。

• 在你的网站打磨完毕并准备好亮相之前，将其从搜索引擎和访客中隐藏起来。

• 一定要安装两个重要的安全插件：UpdraftPlus 和 Wordfence。前者可以可靠地自动备份你的网站，而后者则可以保护你的网站免受病毒攻击。

• 探索 WordPress 提供的几个工具，这些工具允许你控制对网站后端和前端访问的控制。

第三章：网站构建预备知识

本章涵盖

• 紧密聚焦你的网站主题

• 设定目标

• 创建层次结构

• 充分利用链接

• 构建有效的菜单系统

为什么在开始添加文本和图片之前先规划你的网站？这非常简单：指定你的主题、确定你的主要目标，以及为其页面创建层次结构，这些都会让你在之后做出的许多决定得到信息。

如果你直接跳进去添加内容，几乎不可能有效地聚焦网站并知道什么应该优先考虑。对我们大多数人来说，这会导致一个无组织且混乱的工作流程。可能的结果是一个无组织且令人困惑的网站。

在这本书中，我们将描述如何构建和修改一个实践网站。这样，你将看到如何通过现实世界的例子应用每一章中介绍的各种概念。然而，如果你更喜欢，你也可以直接将这些概念应用到你的网站上。

或者，你实际上可以设置一个新的、空的 WordPress 网站，并开始构建你自己的实践网站版本。附录提供了如果你想要自己构建的详细说明，因为我们教授了所有有助于创建优质网站的技能和技术。这个实践网站的标题是《Time Tested Recipes for the Instant Pot》，其标语（口号）是《初学者的舒适食品》。然而，我们也会不时地看看其他用例。例如，在本章中，你将看到如何为鲈鱼渔民的电子商务网站做准备。

本章将向您展示如何明智地奠定坚实的基础，这将帮助你创建一个连贯、专业且你引以为豪的网站。第一步是专注于你的网站主题。换句话说：找到一个细分市场。

3.1 聚焦你的网站

初学者在开始他们的第一个网站时犯的最常见的错误可能是选择一个过于宽泛的主题。这听起来合乎逻辑，但实际上是错误的。

考虑这个用例。一个男人住在北卡罗来纳州，并经常在 Randleman 湖钓鱼。他是那个湖里捕捞宽口鲈鱼的专家。他知道一天中最好的时间、一年中最好的季节、正确的天气条件以及其他使他成为非常成功的鲈鱼渔民的细节。

你需要为你的网站选择一个好的标题。（标题与浏览器地址栏中输入的互联网地址[URL]以访问你的网站不是同一回事。）标题出现在你网站上每个页面的顶部。但它不需要像 URL 那样独特。在 WordPress 中，你可以通过访问设置>常规屏幕，随时输入或更改标题。

因此，在决定网站标题时，我们的渔夫想：嘿，这么多年来，我确实可以在这里提供关于 Randleman 湖钓鱼的极好建议。但仅仅谈论这个特定的湖泊真的会限制我的受众。所以，为什么只把我的所有好建议只提供给当地人呢？世界上还有那么多渔夫。我应该追求那个庞大的受众。此外，将来，当我的网站变得巨大时，我还可以卖给他们我特制的手工鱼饵。这可以变得很大！我只需写关于钓鱼的一般性内容，并向庞大的客户群销售！哇塞！

这是常识，是直观的，也是选择标题最糟糕的方式。它之所以如此错误，是因为如果你的网站焦点和标题是钓鱼，你将与使用该关键词的 1.3 亿其他网站竞争——从雷达扫描仪到青蛙钓鱼应有尽有。其中一些网站已经成熟且受欢迎。如果你的网站在搜索钓鱼时出现，几乎为零机会。大多数人可能会使用额外的关键词，如北卡罗来纳州，鲈鱼，甚至Randleman 湖。因此，我们的渔夫应该通过使用这样的关键词来大大缩小他网站的主题：格林斯伯勒的 Randleman 湖的鲈鱼钓鱼。

那样的标题在搜索时只会触发几个竞争网站。如果搜索工具或 AI 判断你的网站制作得很好，你甚至可能成为 AI 或搜索工具最推荐的网站之一。

这种方法——紧密聚焦你的标题和内容——是你增加扩大一个庞大且忠诚受众机会的方式。毕竟，在 Randleman 湖附近大约有 200 万人。作为一个受众群体，这已经足够大了。

3.2 明确网站目标

有些人擅长即兴发挥，边走边想。但对我们大多数人来说，在开始构建网站之前制定一个网站计划几乎总是个好主意。如果你有太多的后续想法，而不是有机地增长，最终网站可能会感觉拼凑在一起，缺乏连贯性，杂乱无章，甚至令人不快。

因此，确定你构建网站的主要目标（不是目标）。在构建网站的过程中，持续朝着这个目标努力。结果很可能是看起来有组织，从而产生信任并传达质量。无论你的目标是什么，你希望网站看起来专业，而不是业余的。

首先决定你想要构建哪种类型的网站。你是要卖东西吗？如果是这样，你正在构建一个电子商务网站。这个网站只是为你自己和家人朋友而设，记录你的活动、生平或家谱的多媒体日记？这种网站被称为个人 博客网站（在这种类型的网站上，你不需要找到一个利基市场——你就是那个利基市场）。

TIP 大多数个人网站的目标受众非常有限，仅限于亲戚和朋友。这样的网站很少吸引大量观众。一方面，它们通常内容分散，没有明确、单一的主题。少数人成为影响者——他们运气好，建立了一个观众群体。但除非你已经是一个名人，拥有一个渴望了解你动向的现有粉丝群体，否则你的个人博客可能只会吸引到你圈子之外很少的追随者。如果你不关心生成收入或建立庞大的观众群体，那也无可厚非。

3.2.1 10 种网站类型

根据它们的主要目的，网站可以被大致分为大约 10 个不同的类别。当然，一些网站融合了两个或更多目标，而一些网站非常独特，难以轻易分类，例如 DudeQuote (www.dudequote.com)—一个《大话水牛》电影台词生成器。以下是一些主要类别的列表：

• 电子商务—专注于在线销售的网站。例如，eBay、Etsy 以及数百万个个人卖家。

• 博客—专注于网站单页上按时间倒序发布的消息。一些博客鼓励互动，允许访客对帖子做出回应。一般来说，博客提供最新的信息，与不经常变化的静态页面形成对比。如今，许多网站除了包含一组传统的静态页面外，还包含一个博客页面。这样的网站被称为混合型网站。

• 新闻—BBC 或 CNN 等网站。

• 社交媒体—人们可以在这里与朋友和家人互动，分享评论和媒体，并参与讨论。Facebook 是最著名的一个。

• 论坛—类似于社交媒体，但主要设计用于回答特定、通常技术性的问题或交换信息，如编程。包括 WordPress 本身在内的许多应用程序都设立了论坛，让初学者可以与有帮助的专家建立联系。或者专家可以交流想法。论坛通常是一个包含问题和答案的消息板。相比之下，社交媒体倾向于包含更多通用内容，包括多媒体。

• 信息类—维基百科、我们自己的食谱实践网站以及类似网站提供各种知识。一些信息类网站对研究可能很有用。但通常，最有效的资源是像 GPT、Claude、Perplexity 等 AI 驱动的网站。

• 教育类—Udemy 和 ed2go 是两个在线学校的例子。一些提供视频课程，而另一些包括一个讨论板，学生可以与讲师互动。许多教师和图书管理员为当地学生和读者建立了小型、地方性的教育网站。例如，我为 ed2go 在线学校教授三门课程：博客与播客入门、创建 WordPress 网站和中级 WordPress 网站。

• 聊天机器人—这些基于 AI 的系统以对话或聊天的形式提供信息。换句话说，你可以通过请求对先前响应的详细说明或修订来深入挖掘更有帮助的答案。

• 作品集—艺术家、作家或其他人想要展示他们的创作会建立作品集网站。有许多优秀的主题旨在展示各种类型的创意工作。

• 就业—像 MonsterInsights (www.monsterinsights.com)这样的网站为求职者提供资源，例如创建简历、寻找职位空缺、推广你的可用性以及申请职位。

• 政府—旨在协助提供服务、政策和其它政府资源的本地或国家网站。

3.2.2 需要回答的五个问题

在实际开始构建你的网站之前，确保你已经回答了这些问题：

• 你网站的目的是什么？

• 网站的短期目标是否与长期目标不同？换句话说，网站的目的是否会随着时间的推移而演变？例如，你计划先扩大受众，然后再出售商品吗？

• 目标受众是谁？

• 人们希望从网站上获得什么？

• 你打算在托管服务、插件和主题上花费多少钱？

在你的目标上做出这些基本决策有助于将设计和内容引导成一个和谐的整体。这也有助于你选择能够有效支持你目标的插件、功能和功能。以下是我们针对我们的鲈鱼钓鱼网站计划的一些示例答案：

• 我网站的长期目的是最终出售我手工制作的鱼饵。

• 是的，我网站的用途将随着时间的推移而改变。最初，我想只是吸引当地的鲈鱼钓鱼者，并通过提供关于如何钓鱼 Randleman 湖的最新、有价值的小贴士来让他们不断回来。但最终，我会添加电子商务组件来销售我承认成本高昂但非常有效的鱼饵。

• 目标受众是那些在 Randleman 湖钓鱼并希望捕捞鲈鱼而不是鲢鱼或鲤鱼的人。

• 我将给我的受众提供优秀、具体的信息，他们可以用这些信息提高他们的钓鱼技巧。

• 我计划获得一个免费增值主题，先用免费版本使用一段时间，然后当网站起飞时可能升级到付费版本。我会看看我最终是否需要专业版本的特性。我将使用 DreamHost 托管服务，因为它被高度推荐，但仍然有一个低廉的预付费计划。（我确实理解托管服务通常在试用期后会增加月费。）

3.2.3 与 Claude AI 的咨询

现在我已经为这五个问题提供了最好的答案，我将这些问题和答案提交给了 claude.ai 以获取其建议。我开始提示如下：

|

作为一名经验丰富的、专业的网站设计师（以及一名 bass 鱼民），深呼吸并回顾我对这五个问题的回答。逐步思考，列出你为改进关于这个 bass 鱼民网站的计划的回答所提出的任何补充或建议。你是我的新网站项目的顾问。尽你所能做到最好，否则会有后果。

克劳德提出了以下一些好主意：

|

从一个经验丰富的 bass 鱼民和网站设计师的角度来看，以下是一些额外的建议：强调你在 Randleman 湖钓鱼的个人专业知识。提供在那里钓鱼的年数、最喜欢的地点、最大的捕获量等详细信息。建立你的信誉。针对目标受众，非常细分——针对经常在 Randleman 湖参加锦标赛和俱乐部活动的严肃 bass 鱼民。为铁杆常客提供内容，而周末垂钓者也会跟随。专注于提供专业技巧和高级策略，以持续捕获大 bass。超越基础——分享你的专业、经过验证的方法。在社区方面，考虑为游客创建一个 Randleman 湖 bass 钓鱼论坛，让他们互动并分享他们的经验。这可能会激发持续的参与。在货币化方面，研究与你受众一致的 bass 设备和船只的联盟计划。考虑与当地钓鱼向导和旅馆合作。为在核心目标中推广你的网站而预算付费推广——Facebook 广告、赞助活动、战术 SEO 等。利用你在 bass 社区中的社交媒体存在来推广网站。也可以在影响者博客上写客座文章。如果你希望我详细说明计划的任何部分或提供我在 bass 钓鱼和建立利基网站方面的经验建议，请告诉我。我很乐意提供我的专业知识！

最后，一旦你确定了要建立的网站类型，访问该类型其他流行的网站。从他们那里学习什么有效，什么应该包含，以及最佳的功能性和设计。还要在标题、标语（显示在每个页面标题下方的一行短语）和文本内容中包含关键词。使用精确和详细的、人们可能在使用搜索你网站提供的信息时使用的关键词，例如

波士顿为幼儿园儿童的艺术资源

或者

获奖的水彩意大利街头风景

注意，这些搜索词是专注于相当具体的话题的。你通过添加形容词来集中。我在这一章中多次使用了“focus”这个词。

3.3 创建层次结构

如果你希望你的网站成功，高效的导航是必不可少的。人们访问网站是为了寻找某些东西。但他们不希望的是一个如此混乱的网站，以至于他们的第一反应是困惑。如果你让他们觉得必须解决谜题才能得到他们想要的东西，他们很快就会去别处。

您希望从主页到他们的目标路径清晰直观。确保他们不会感到困惑。记住，当人们感到困惑时，他们很少会责备自己。他们只是对您和您毫无意义、随机、复杂且效率低下的网站感到沮丧。

您必须立即向访客提供一个关于您网站结构的心理模型。随着您的网站随着时间的推移而变得更大，一个坚实、合理的架构会使未来的修改更加容易。最后，如果 AI 爬虫和搜索引擎看到您的网站结构连贯且合理，它们会给您更高的排名。

在未来的章节中，我们将探讨获取有关人们如何遍历您的网站、他们在哪里遇到困难以及其他您可以用来使他们的用户体验（UX）尽可能好的数据的方法。但就目前而言，让我们考虑一下基础知识：层次结构和可导航性。

3.3.1 网站结构：父级和子页面

在创建您网站的页面之前，列出您想在网站上包含的主题。然后按照列表进行分组：父级页面、子页面、孙子页面（如果您的网站相当大，孙子页面可能是必要的）。

小贴士：如果可能的话，尽量避免孙子页面（子页面的子页面）——人们在最好的情况下也会觉得它们难以理解且难以导航。

网站菜单通常只显示父级页面。当访客将鼠标指针移至菜单上父级页面的名称时，会下拉一组子页面。这是大多数访客导航您网站的方式。

例如，我们钓鱼网站的父级页面可能包括诱饵和关于我们。子页面将是这些页面的子页面。诱饵父页面可能有四个子页面：旋转饵、旋转饵、水面诱饵和泡沫饵。关于我们的子页面可能是我们的历史和未来计划。

这里的目标是组织网站为五个或六个主要父级页面，每个页面可能包括子主题（子页面也称为子菜单）。网站的菜单是一组链接到网站页面的集合，通常显示在每个页面顶部的水平栏中。

让我们看看这在实践中是如何工作的。例如，钓鱼网站可以将这些主要、父级分类作为其主菜单项：

新闻（博客）技巧与技术 赛事 联系我们

很理想的是，尽可能保持您的菜单简短。因此，限制自己不超过六个父级页面，除非这牺牲了可导航性。创建一个描述性、吸引人的网站标题，但请注意，标题与网站的 URL 互联网地址（URL 以.com、.org 或某些其他后缀结尾）不同。现在考虑我们的钓鱼网站如何显示典型的网站页面中的七个元素，如图 3.1 所示。

图 3.1 当代网站页面通常至少包括以下七个元素：网站标题、网站标语（口号）、横幅图片、页面标题、菜单、正文内容和行动号召。

3.3.2 请人工智能为您创建页面层次结构

人工智能能否为我们的示例淡水鱼垂钓网站制定一个层次结构的第一稿？当然可以。

小贴士：在与人工智能合作时，请习惯您的角色：您是老板；它是一个助手，尽管它比您快得多，拥有庞大的互联网记忆，思维速度极快，多才多艺，等等。老板处于权力的位置，但这并不意味着他们一定是天空中最明亮的星星。作为老板的角色是提出任务，将任务交给人工智能，然后判断其回答哪些是可靠的，哪些需要进一步的工作。您始终可以要求人工智能再次尝试。或者，您可以自己进行改进。

要请人工智能创建页面层次结构（即网站菜单系统），最好指定两个任务：

1. 寻找并列出最成功的淡水鱼垂钓网站。

2. 显示一个有序列表，展示这些网站的菜单层次结构有哪些共同点。这些问题将有助于确保没有遗漏任何主题，并且很可能会生成最佳、最合理的整体网站组织。人工智能如果不是擅长逻辑，那就什么都不是了。

因此，我向 Copilot 提出了这个提示：

|

您是一位经验丰富的网站评论家和批评家。同时，您也是一位专业的淡水鱼垂钓专家。请列出世界上五个最成功的淡水鱼垂钓网站的网址。请再次确认这些网址仍在积极使用，并且在谷歌搜索中使用关键词“淡水鱼垂钓”时排名很高。

它回复说：

|

根据我的搜索结果，以下是当前在谷歌搜索中使用关键词“淡水鱼垂钓”排名靠前的五个活跃的淡水鱼垂钓网站：    1. BassFan    2. BassResource    3. BassRankings    4. Bassmaster    5. FLW Fishing

然后，我接着提出了第二个提示，要求 Copilot 设计一个菜单，将这五个网站共有的主题结合起来：

|

您理解网站菜单系统。请检查这五个网站的菜单和子菜单。通过将这五个网站的菜单层次结构合并成一个有序列表，列出父页面及其子页面。再次检查您的结果，以确保您将这些层次结构合并成一个优秀的淡水鱼垂钓网站的单一菜单层次结构。

Copilot 提供了这个有用且逻辑清晰的层次结构：

|

基于前五个淡水鱼垂钓网站的主题结构，这里有一个可以作为一个优秀淡水鱼垂钓网站的一般结构的综合层次结构：首页 新闻（博客页面） 最新新闻 Pro Tour 新闻 Dock Talk锦标赛 日程安排结果排名运动员档案排名 世界排名年度运动员技巧与技巧 专业垂钓技巧如何视频装备评论论坛 通用淡水鱼垂钓论坛小嘴鲈鱼垂钓垂钓报告装备 新产品钓具评论视频 顶级捕捞专业日记文章 特色文章观点会员 登录/立即加入

这涵盖了淡水鱼网站的基础。它包括一些我未曾想到的好主题。然而，我想要精简菜单，将其大小减少到只有大约六个父页面项。一方面，我会将锦标赛和会员从菜单中移除，放到侧边栏上。但为什么我应该担心精简，当我的热情洋溢、才华横溢的助手可能会做得更好时？我们将很快将这个菜单精简任务交给 AI。

3.3.3 AI 可以为你创建整个网站

你是想让 AI 生成一个全新的网站，或者至少提供一个可以工作的初稿？几个 AI 驱动的系统提供这样做。其中，10Web（[10web.io/](https://10web.io/））是一个不错的选择。你只需提供一些关于你意图的基本信息。然后，它就能相当好地生成一个真正的网站。

当然，你需要进行调整并提供内容，但对于一些人来说，这个过程比从头开始创建一个空白的网站要容易。10web 倾向于偏好长滚动的主页（整个网站都在主页上），我认为这会使导航变得困难。然而，10web 生成的网站层次结构、文本和图像出人意料地好，如图 3.2 所示：

图 3.2 这是从一个简短的、段落长的提示中生成的，描述了我们的 Instant Pot 食谱实践网站。

这些即时网站构建器在生成有效的导航、选择合适的主题或插件或编写有用的文本内容方面并不出色。因此，我主要会使用它们来获取设计灵感。

3.3.4 使用菜单插件

总是如此，你可以安装插件来为你提供额外的功能和菜单选项。以下是一些流行的菜单插件：

• UberMenu——允许你创建复杂的超级菜单（这意味着它们有多个层级，可以包括地图或博客文章网格等特殊内容）。

• QuadMenu——具有拖放界面，可以构建包括动画、图标和社交媒体集成在内的菜单。

• Max Mega Menu——允许你添加带有小工具、过渡效果等超级菜单。

提示：超级菜单允许你显示网格、图标、多个层级、过渡动画效果和其他高级功能。在 Theme Junkie 网站上查看一些示例：www.theme-junkie.com/what-is-mega-menu-examples/。

3.3.5 使菜单简短、简单和清晰

每个网站都有不同的菜单要求，但务必确保追求简洁、简单和清晰。（实际上，在整个网站上都要追求这一点。）记住，人们期望在互联网上获得快速的结果。

在你将网站公开之前，请朋友在你观看并做笔记的同时浏览你的网站是个好主意。什么让他们感到困惑？什么让他们感到烦恼或困惑？他们通过网站的哪些路径？最重要的是，当他们离开主页时，他们会去你希望他们去的地方（基于你的行动号召）吗？当然不是去一个不同的网站！

有人说，完美的导航系统是那种访客可以在不点击任何东西或实际上做任何事的情况下看到所有选项的系统。甚至包括像将鼠标悬停在菜单栏上以展开并显示子菜单列表这样简单的事情。

然而，对于大多数类型的网站来说，将网站分为父页和子页是必要的。你不想在任何页面上有太多的文本。大多数人不想在网上阅读冗长的文本。子页也使得网站导航更加容易。让访客尽可能少地点击就能到达他们感兴趣的内容。人们有时想回到网站的首页，所以最好在菜单的左侧远端包含一个名为首页的菜单项。此外，点击网站标题或标志也通常会将你带回到首页。网站通常在每个页面上显示网站标题（以及可选的标志图像）。这些通常位于页面的左上角。

主菜单项（父页）显示你在网站上找到的主要、最一般的话题。子菜单用于页面或辅助内容。子页显示在其父页内容的基础上扩展的附加、更具体的信息。

为了帮助使菜单项尽可能短，不要在菜单中重复你的网站标题。例如，我们书籍的实践网站的标题是Time Tested Recipes for the Instant Pot。所以不要在命名菜单项（或页面标题）时使用这些词语。不要重复Mexican Recipes for the Instant Pot，甚至只是Mexican Recipes。你的访客知道他们正在查看一个专注于 Instant Pot 食谱的网站，所以只需将菜单项命名为Mexican和Thai。短语Time Tested Recipes for the Instant Pot是既定的。毕竟，你的网站标题在每个页面上都作为头条显示，所以没有必要在菜单中重复它。

技术上，在时间和测试之间需要使用连字符，因为这些修饰语一起作为一个复合形容词来修饰食谱。这种连字符的使用可以防止人们产生错误的想法，例如“时间食谱”。然而，在标题中，标点符号的规则通常会被放宽。

3.3.6 向 AI 请求简化你的菜单

如果你试图缩短你的菜单，你可能想让它通过 AI 来获取一些建议。使用之前描述的垂钓网站菜单，Copilot 提出了几种简化它的有用方法。在我查看 Copilot 在本章早期为我们创建的菜单后，我给了它这个提示：

|

你创建的那个菜单不错，但太长了。你能列出任何可以降级为子菜单、与其他项目合并、放入侧边栏，或者完全从菜单中移除的主要菜单项吗？

|

这里是我对简化您网站菜单的建议：合并相似项目：将相似的项目组合在一起以减少杂乱。例如：“最新新闻”、“职业巡回赛新闻”和“码头谈话”可以作为“新闻”下的子菜单。“赛程”、“结果”和“排名”可以作为“锦标赛”下的子菜单。“世界排名”和“年度最佳钓手”可以作为“排名”下的子菜单。“职业钓鱼技巧”、“教程视频”和“装备评测”可以作为“技巧与技术”下的子菜单。“通用淡水鱼论坛”、“小口黑鲈钓鱼”和“钓鱼报告”可以作为“论坛”下的子菜单。“新产品”和“装备评测”可以作为“装备”下的子菜单。“顶级捕捞”和“职业日记”可以作为“视频”下的子菜单。降低不太重要的项目：将不太常访问的项目移动到侧边栏或页脚。例如，“登录/立即加入”选项通常放置在网站的右上角或页脚，而不是主菜单中。删除冗余项目：如果某些信息在不同的部分重复，考虑删除一个。例如，如果“装备评测”和“装备评测”中的内容相似，你可能想将它们合并。

3.3.7 菜单替代选项

虽然几乎总是最好的做法是网站提供传统菜单，但还有替代方案。你的目标始终是找到让访客最快找到他们所需信息的最快方式。每个网站都应该在每个页面上都有一个搜索工具。

虽然大多数人更愿意点击链接或菜单项而不是输入搜索词，但你确实需要提供一个好的方式让访客找到高度具体的信息。搜索工具就起到了这个作用。大多数主题都包括一个基本的搜索字段，但你可能想使用一个专门的搜索插件，它将提供额外的选项，例如深入挖掘、自动完成，以及可能还有缩略图预览。

较大的网站也经常在页脚显示一个网站地图，通常位于每个页面的底部。如果你把菜单看作是网站的书目，那么网站地图就像索引。它是一个详尽、非常细致且全面的链接列表，链接到整个网站中的每个主题和子主题。据说，网站地图还可以提高你在 Google 和 AI 机器人中的排名。更多信息，请参阅 RankMovers 的这篇教程：www.rankmovers.com/importance-of-sitemap-in-seo/。

制作网站地图可以帮助你可视化如何将网站划分为合理的层次结构。在创建网站地图后，将可能多达 50 个地图主题安排在父页和子页内的层次分类中。

在许多情况下，提供网站地图和菜单是最好的选择。正如有索引的书仍然有目录一样。

3.4 避免长滚动

菜单明显有助于网站导航，提供轻松访问内部页面。但如果一个网站只有一页呢？仅仅因为某件事变得流行并不意味着它是个好主意。还记得所有被草坪飞镖杀死的人吗？

网页设计中目前有一种潮流，即把网站的全部内容都放在主页上。这可能会让访客在导航内容时感到复杂。滚动并不是寻找所需内容最有效的方式。

如果长滚动页面上没有链接到各个部分，访客必须向下滚动，扫描标题，才能找到他们想要的内容。今天的在线观众期望使用链接快速到达他们想去的地方。

长滚动方法的倡导者认为人们更喜欢简单，提供菜单或其他内部页面的链接并不简单。他们认为一个单页网站是无缝的——所有信息都直接在一页上。这更加简洁。他们声称的一个额外优势是，单页网站在移动设备上表现良好，而菜单可能不太有效。

显然，像 amazon.com 这样内容丰富的网站不可能采用长滚动的方法。这样的网站必须有多页。而且网站越大，就越依赖于其搜索工具。

但如果客户或设计师坚持要使用长滚动系统，有一个解决方案。提供一个菜单，链接到页面内的各个部分（称为内部或书签链接，与页面链接相对）。我很快就会向你展示如何在页面内链接到目标。

小贴士：确保将内容分块。人们通常喜欢相对较短的段落，由图片或空白分隔。而且你的访客也通常更喜欢简短、清晰的句子。

3.5 充分利用链接

菜单是一组链接，但网站还采用其他类型的链接——所有这些努力都是为了尽可能使网站导航变得容易。超链接在点击时会将您带到互联网上的其他地方（链接的目标）。您跳转到链接目标的位置可以是短距离，比如页面下方的几段文字，也可以远至太空站。此外，链接还可以显示文档，如 PDF 文件或其他媒体。

3.5.1 链接受到网站访客和设计师的重视

网站设计师喜欢链接，因为它们以有用的方式向网站受众提供信息，从而改善了用户体验。人们还认为链接可以提高网站的搜索引擎排名。

由于通常将受众留在您的网站上尽可能长时间是一种很好的策略，因此应尽量减少指向您网站外部的链接。您希望将受众留在您的网站上，直到他们完成您希望他们做的事情。注册某个东西，提供他们的电子邮件地址，购买您的商品，等等。

链接以各种方式显示。以下是最常见的：

• 传统—通常是一个带有下划线和蓝色字色的单词或短语，描述链接的目标。有时，可见于访客的单词或短语描述链接的目标被称为锚文本。点击链接后，它可能会改变颜色，以便让访客知道他们已经访问过那里。

• 菜单—通常在每个网站页面的顶部附近显示的横向链接组。链接文本描述通常与链接发送您去访问的页面的标题相同。

• 按钮—每个人都明白按钮可以被点击。有时，它会执行某些操作，比如从访客提交联系表单到您的网站。有时它可以是按钮标签中描述的位置的链接。

• 图像—您可以使用图片或缩略图而不是传统的文本链接或缩略图组作为文本菜单的替代品。

• 地图—包含地图内多个链接的大图像。点击时，它会显示几个位置或图标，将访客带到不同的目标。

• 标志—您的网站标志和标题通常是链接，点击后会将访客带回到主页。

而且，链接有多种目标。以下是主要的一些：

• 图像的另一种视角—以不同的方式显示图像，例如，将小图像放大到页面大小或在不同浏览器标签中显示。

• 帮助—显示文档，通常在单独的标签中。

• 内部链接—跳转到与链接相同的页面内的位置。

• 广告—将访客带到亚马逊或其他商家的链接，通常为网站所有者提供回扣。

• 类别或标签——仅在网站博客页面上出现的专业链接。它们以簇或列表的形式显示，并重新绘制消息，仅显示其中的一部分。例如，在房地产网站上，一个名为“低于 20 万美元”的博客标签将重新绘制帖子列表，仅显示那些价格低于该点的房屋。

3.5.2 如何创建四种类型的超链接

您可以通过四种不同的方式创建传统链接，具体取决于链接目标的位置。链接可以将用户

• 将链接放置到您网站上的不同页面顶部。

• 将链接放置到外部位置，例如不同的网站。

• 将链接放置到您网站上的不同页面内部的位置。

• 将链接放置到同一页面的位置。

链接到您网站上的页面

让我们看看在向我们的食谱实践网站的两个页面（泰国美食和墨西哥特色）添加链接时，这个功能是如何实际工作的：以下是链接到同一网站中不同页面顶部的步骤：

1.  前往您网站后端的“页面”>“所有页面”屏幕。

2.  双击您想要放置链接的页面标题。

3.  确保您点击以选择编辑页面文本框右上角的视觉选项卡。

4.  在您想要放置链接的框内点击鼠标。您会在点击的地方看到闪烁的插入光标。

5.  在工具栏中，点击图 3.3 中显示的插入/编辑链接图标。

图 3.3 点击插入/编辑链接图标，在页面上放置链接。

提示：如果您的“编辑页面”屏幕看起来不像图 3.3 所示，您正在使用 Gutenberg 块编辑器。在您的页面上添加一个经典块，然后按照这些相同的说明操作。

6.  点击图 3.4 中显示的齿轮图标以打开插入/编辑链接模块。

图 3.4 点击此齿轮图标将打开插入/编辑链接模块。

7.  您现在可以看到您网站上的页面和帖子列表。在链接文本字段中填写链接的标签，并点击作为链接目标的页面，如图 3.5 所示。

图 3.5 当您点击墨西哥特色时，WordPress 将填写该页面的 URL 地址。

8.  最后，点击添加链接按钮以保存链接。

9.  点击更新按钮以保存您对此页所做的修改。

10.  要查看实际的链接代码，并可能修改链接文本，请点击文本框右上角的上文选项卡。（如果您正在使用 Gutenberg，请按 Ctrl-Shift-Alt-M。）

链接的 HTML 代码看起来像这样：

<a href="https://timetestedrecipes.com/mexican-specialties/">
See Some Mexican Specialties!</a>

我们将在创建不同类型的链接时稍后探索此代码。

提示 在 WordPress 的编辑页面和编辑帖子屏幕中，有一个文本框，你可以在这里添加文本或媒体内容。这些文本框在其右上角有两个标签：视觉和文本。视觉标签允许你看到的内容几乎与你的访客在网站前端看到的内容相同。然而，文本标签不仅显示内容，还显示告诉浏览器如何显示该内容的 HTML 代码，例如格式、粗体、链接、页面位置等。（Gutenberg 将文本视图称为代码编辑器，这是一个更准确的名称。）

链接到外部网站

要创建链接到其他网站，例如 YouTube，你遵循与之前在网站页面中链接相同的步骤。唯一的区别是在点击齿轮图标（步骤 6）后，你粘贴或输入外部网站的 URL 地址（见图 3.6）。并且，一如既往，不要忘记点击添加链接按钮。

图 3.6 在这里很容易添加 URL 地址和链接标签。

在不同页面内链接到某个位置

虽然链接到页面顶部更为常见，但有时你可能想将访客发送到第三段或到你网站上的某个特定图片。为了遵循这个例子，在你的练习网站上添加两个新页面，分别命名为泰国美食和墨西哥特色。

在这个例子中，我们的链接目标是墨西哥食谱页面中的第二段。而链接本身位于泰国食谱页面中。（如果你使用的是 Gutenberg 编辑器，请向你的页面添加经典块）。遵循以下步骤：

1.  前往墨西哥页面，在文本框右上角点击文本标签（在 Gutenberg 编辑器中，按 Ctrl-Shift-Alt-M）。然后，粘贴或输入两段随机文本。我们将创建一个目标为第二段链接：

这是第一段。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

这是第二段。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2.  使用 HTML <p> 和 </p> 标签将第二段包裹起来，告诉浏览器将包含的内容显示为段落：

<p id="mextarget">这是第二段。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

注意跟随<p标签的id="mextarget"> HTML 属性。这给段落赋予了一个名称。它标识了这个段落，以便我们可以将其作为我们接下来要创建的链接的目标。你可以将id属性命名为你想要的任何名称。

图 3.7 显示了你的 HTML ID 代码在文本框的文本（代码）标签中的样子。

图 3.7 目标 ID 放置在目标段落的开始处。

3.  点击更新按钮以保存这些更改。

4.  接下来，为了创建一个指向墨西哥页面的链接，你需要该页面的永久链接地址。因此，通过将鼠标拖过永久链接并按 Ctrl-C 来复制它到 Windows 剪贴板，如图 3.8 所示。

图 3.8 这里是你复制页面永久链接的位置。

在 Gutenberg 中查找永久链接

在 Gutenberg 中查找页面的永久链接是一项错综复杂的任务。首先，点击设置图标。它在右上角。设置图标之前看起来像是一个齿轮（Windows 中设置的传统符号），但现在它已经被改变成这个带有横线的矩形。那个符号代表什么让我感到困惑。

如果当前选中的是块标签（设置图标下方），请点击页面标签。现在通过点击其黑色三角形图标打开摘要部分。然后，找到并点击 URL。这打开了一个新的模块，你可以将鼠标拖过永久链接来选择它，并按 Ctrl-C 来复制它。如果直接在页面编辑器屏幕上显示永久链接可能会更容易，但这会违反 Gutenberg 编辑器 UI 所遵循的极简主义理论。该理论主张默认显示尽可能少的信息和选项。术语是上下文相关——这意味着只显示他们认为你可能需要的信息。因此，由于像永久链接这样的东西并不常用，你需要钻入 UI 的几个层级才能找到它。

这里有一个小技巧：点击查看页面选项以获取页面的前端视图。然后，只需从浏览器的地址栏中复制永久链接。

5.  现在，转到泰国页面以创建指向该 ID 的链接。在泰国页面的编辑页面文本框中点击文本标签，然后在文本框中添加此代码（但用你页面的永久链接替换）：

<a href="https://www.timetestedrecipes.com
/mexican-specialties/#mextarget">
Visit the second paragraph in the Mexican recipes page</a>

让我们分解这段 HTML 代码：

o   <a是链接开标签的 HTML 代码。

o   href="https://www.timetestedrecipes.com/mexican-specialties"是你复制的永久链接，它指向墨西哥食谱页面。换句话说，这告诉链接，当点击时，要显示互联网上的哪个页面。

o   /#mextarget">是你为墨西哥食谱页面中你想要链接点击时跳转到的位置赋予的 ID。它是第二个段落的 ID。

o   访问 第二个 段落 在 墨西哥 食谱 页面 是你想要显示在链接上的标题。

o   </a> 是链接的结束标签。

提示 注意到在链接代码中，一个哈希符号（也称为井号#）被添加到目标 ID：#mextarget。在墨西哥页面上，ID 没有哈希符号：mextarget。

6.  点击更新按钮保存这些更改。现在，通过前往前端上的泰国页面来测试链接。你可以通过三种方式查看你网站的前端：通过点击仪表板左上角的网站标题，或者通过点击两个查看页面链接之一（一个链接如图 3.9 所示）。

图 3.9 有三种方式可以从网站的后端转到前端。

7.  点击链接，浏览器应该显示墨西哥页面的第二个段落，如图 3.10 所示。

图 3.10 你直接跳到了页面内的一个段落，而不是页面的顶部。

调试 HTML

与一些计算机语言不同，HTML 在你提供有 bug 的代码时不会显示错误信息。它只是做一些奇怪的事情，比如显示 404 错误信息（页面未找到）。或者它可能就坐在那里什么也不做，嘲笑你。

计算机代码非常精确。一个错误的标点符号或打字错误，计算机就不会理解你要求它做什么。这意味着你需要追踪 bug。在我们之前的链接示例中，你可能从像 Microsoft Word 这样的源复制了代码，它使用的是花括号引号而不是直引号。

有两种类型的引号——直引号和（花括号或斜体）——HTML 想要的是直引号。

HTML 不喜欢花括号引号。它不知道它们是什么东西。

或者，你可能遗漏了一个>符号，或者在你应该包含引号的地方没有使用引号。解决 bug 的一种方法是对代码进行校对——仔细比较你的代码与本书中的代码。确保所有内容都完全相同（当然，除了你的 URL 地址）。但你可以使用一个有用的调试工具。

将你的墨西哥或泰国页面的永久链接粘贴到 W3C 标记验证服务(validator.w3.org/)。

为了展示这是如何工作的，我在泰国页面上的链接中省略了第一个引号，验证器正确地报告说这部分代码（称为属性）未加引号。所以这是一个简单的修复：我只是添加了需要的引号。这个错误信息如图所示。

验证可以描述你 HTML 代码中的 bug。

然后，它还正确地标记了花括号引号，如以下图所示的错误信息。

这个错误信息甚至显示了非法字符，即引号。

AI 辅助

AI 系统在调试代码方面很擅长。这段 HTML 代码中有两个错误：(1) 在 https 前面是斜体（花括号）引号而不是垂直引号，以及 (2) 结尾的 标签中缺少反斜杠 (/)：

<a href="https://www.timetestedrecipes.com/mexican-specialties/#mextarget">
Visit the second paragraph in the Mexican recipes page<a>

因此，我让 GPT 找出这段代码中的错误并告诉我如何纠正它们。AI 在这个测试中得了 100%。它的回复是：

|

我已经识别了提供的 HTML 代码中的错误：href 属性的开头引号是一个花括号引号（“）而不是直引号（“）。锚标签的结尾缺少一个正斜杠 (/)。以下是修正后的 HTML 代码：访问墨西哥食谱页面的第二段所做的更改：将 href 属性中的花括号引号替换为直引号。在锚标签的结尾添加了一个正斜杠 (/)。

链接到同一页面内的位置

这个链接比其他类型的链接简单，因为你不需要指定 URL 或永久链接。当链接代码中省略了 URL 时，HTML 假设你指的是链接目标位于与链接相同的页面内。

假设你在一个页面中有四个标题。在页面顶部，你添加了一个链接到第四个标题。

在页面的编辑页面屏幕中点击文本选项卡，然后在文本框中输入这四个标题：

<h1>First</h1>
<h1>Second</h1>
<h1>Third</h1>
<h1>Fourth</h1>

接下来，在文本框的顶部输入链接：

<a href="#fourth">Go to the fourth headline</a> 
<h1>First</h1>
<h1>Second</h1>
<h1>Third</h1>

最后，给第四个标题添加一个 ID 以标识链接的目标：

<h1 id="fourth">Fourth</h1>  

小贴士：记住，你可以将 ID 命名为任何你想要的名称，但在 链接 中，你必须使用一个前置的井号 #。

点击更新按钮保存你的代码。现在当你通过点击查看页面来测试前端页面时，点击链接应该会带你到第四个标题。

3.5.3 使用按钮作为链接

到目前为止，你已经看到了如何创建文本链接。但你也可以将图片、按钮或其他视觉元素变成链接。让我们显示一个点击后会将访客带到 YouTube 的按钮。

HTML 有一个内置的按钮对象，所以你可以将其变成链接。记住，当你向网站上的页面添加代码时，你需要处于编辑页面屏幕，并点击文本框中的文本选项卡。（或者在 Gutenberg 中，按 Ctrl-Shift-Alt-M）。以下是按钮链接的 HTML 代码：

<a href="https://www.YouTube.com"><button>Click to visit YouTube</button></a>

结果的链接按钮如图 3.11 所示。

图 3.11 默认的 HTML 按钮是一个相当简陋的黑色方块。

层叠样式表（CSS）是一种计算机设计语言，是一个强大的工具，可以让您以数百种方式修改和微调您网站的外观——从字体到淡入动画的一切。在第七章中，我们将探讨如何轻松地让计算机为您生成 CSS 代码。您根本不需要学习这种语言。但就目前而言，让我们快速看一下 CSS 如何让您能够润色设计元素。

那个醒目的全大写白底黑 HTML 按钮与许多——实际上几乎所有的——WordPress 主题不太搭配。它看起来不美观。因此，让我们添加一些 CSS 代码来使其不那么刺眼，如图 3.12 所示：

<a href=https://www.youtube.com/
style="background-color: lightblue;
color: gray; padding: 10px;
border-radius: 5px solid gray;">
Click to visit YouTube</a>

图 3.12 CSS 样式代码可以改善默认的 HTML 按钮，但您可以做得更好。

提示：如果您只使用border而不是border-radius，您将得到一个实心的框架。添加radius，您将得到更微妙、3D 的阴影效果。

HTML 属性的style代码实际上是使用 CSS 语言编写的。它与 HTML 一起工作，以指定事物的外观。CSS 还可以添加特殊效果，如动画、透明度、过渡淡入和其他酷炫视觉效果。幸运的是，对于我们的来说，CSS 相当容易理解，因为它与大多数计算机语言不同，它使用了诸如border、color和background之类的英语单词。当然，您始终可以向 Claude 或其他 AI 提交请求，以根据您的规格生成 CSS 代码。您将在第七章中了解更多关于 CSS 的信息，CSS 是任何网站设计师的重要工具。

那个蓝色的按钮比第一个按钮更上一层楼，但它仍然可以改进。为了创建一个逼真的按钮，您可以在像 Paint.NET 或 Photoshop 这样的照片编辑应用程序中创建一个按钮图像。或者，使用 Midjourney 这样的 AI 文本到图像应用程序。您甚至可以从 Pexels(www.pexels.com)或 iStock(www.iStockPhoto.com)购买按钮图标。然后，将按钮图像添加到您的网页上，并使其成为链接。以下是方法：

1.  前往媒体>添加新屏幕，并将您的按钮图像上传到 WordPress 媒体库。那里存储了您在页面上使用的图像和其他媒体。

2.  前往您想要创建链接的编辑页面屏幕。

3.  在文本框中点击视觉选项卡。

4.  点击添加媒体按钮，点击图片以选择它，然后点击插入到页面按钮。

提示：如果您使用的是 Gutenberg 代码编辑器，请按 Ctrl-Shift-Alt-M。这个快捷键可以在代码视图和视觉视图之间切换。现在，您想要在视觉编辑器模式下。然后，在页面上添加一个经典块。如果您在经典块的工具栏上没有看到菜单（文件、编辑、查看、插入等），请转到您的插件>添加新屏幕，并搜索、安装和激活高级编辑工具插件。在块的菜单上，选择插入>添加媒体（不是媒体选项）。从您的媒体库中选择您想要使用的图片。点击插入到页面按钮。

5. 在编辑页面屏幕中，点击图片以选择它。

6. 点击工具栏上的链接图标。

7. 输入 YouTube 的网址，然后点击左箭头图标以创建如图 3.13 所示的链接。

图 3.13 这就是如何将图片链接到 YouTube。

8. 点击更新以保存您的更改。

9. 点击查看页面以查看和测试链接，如图 3.14 所示。

图 3.14 一个逼真的按钮图像比 HTML 按钮看起来更专业。

这是完整的 HTML 代码：

<a href="https://www.youtube.com">
<img class="alignnone size-medium wp-image-62"
 src="http://timetestedrecipes.com
/wp-content/uploads/2023/03
/smaller-button-300x134.png" alt=" "width="300"
height="134"/></a>

注意，这里不需要链接标签，因为单词YouTube已经嵌入到按钮图像中。

3.6 管理您的菜单

一个网站的菜单几乎总是关键导航系统，所以您想要做得正确。我们将通过构建食谱实践网站的菜单来结束本章。这包括选择和重命名主页，正确显示菜单上的子页面，并检查断链。

3.6.1 自定义您的菜单

您的菜单项顺序，以及在某些情况下菜单项的名称可能需要修改。但在做之前，让我们在实践网站上创建一些子页面。

提示：如果您使用的是 Gutenberg 编辑器，您将按照此处描述的经典编辑器的相同步骤创建您的菜单。Gutenberg 还包括一个导航菜单选项（在“外观”>“小工具”屏幕中作为一个小工具，以及在编辑页面屏幕中作为一个块）。它提供了几个选项，包括在侧边栏中显示所有页面的链接列表。

到目前为止，所有页面都是父页面。这些新的子页面将是空占位符页面。它们将有标题，但在创建网站结构之后，我们将向它们添加内容。所以，让我们向实践网站添加更多占位符页面。

前往您的页面>添加新页面屏幕，并添加七个新页面。给它们以下标题：

• 墨西哥菜

• 香辣泰国菜

• 中国菜系

• 法国美食

• 意大利食材

• 美味希腊菜

• 博客

目前，我们将仅专注于填写标题字段，并不要在这些占位符页面上添加任何内容。别忘了为每一页点击发布。

人工智能助手

如果您需要一些构思良好子页面的帮助，您可以询问 GPT 以下内容：

|

作为一位墨西哥餐厅的专家厨师，请列出六个墨西哥菜的子类别（例如，例如德克萨斯菜）。不要根据地理位置创建类别。

GPT 的建议：

|

当然！墨西哥菜系丰富多样，尽管无法仅用几个子类别来归类其所有细微差别，但以下有六个大致类别：街头食品开胃菜和小食莫莱萨酱和酱汁沙司海鲜色拉烤菜和炖菜甜点和糖果

在创建我们的菜单之前，还有一些家务事要处理。WordPress 默认将博客页面设为主页。但针对实践网站，你希望博客成为一个内部页面。（博客是一种特殊的页面，包含你或访客发布的所有消息。它们以可滚动的、逆时间顺序显示。我们将在下一章中处理博客页面。）

前往“文章”>“新建文章”，输入一个标题和一些用于占位符的文章文本。这将导致 WordPress 为你完成创建博客页面的过程。点击“发布”按钮。

在此阶段，将博客改为内部页面。如图 3.15 所示，前往你的“设置”>“阅读”屏幕，点击“静态页面”选项，并将“ Instant Pot 的即时食谱”作为主页选择。选择“博客”作为博客页面。点击“保存更改”按钮。

图 3.15 这里是你指定网站主页的地方。

当你首次开始一个新的 WordPress 网站，你给网站一个标题。如果你为这本书设置了实践网站，你将在附录中将实践网站命名为“ Instant Pot 的即时食谱”。WordPress 自动将主页标题与网站标题相同。（每个网站都有一个主页。）但你应该更改默认的主页标题。这是多余的。因为网站标题出现在每个页面上，主页不应该与网站标题相同。

因此，前往你的“页面”>“所有页面”屏幕，点击“ Instant Pot 的即时食谱”以打开其编辑页面屏幕。将主页标题更改为“简易卓越”或你喜欢的任何名称。点击更新按钮。

快速查看你的“页面”>“所有页面”屏幕。注意，WordPress 已经将“博客”识别为博客页面，将“简易卓越”识别为前台（主页），如图 3.16 所示。

图 3.16 WordPress 已经识别了你的主页（前台）和博客页面，并缩进了子页面。

在构建网站菜单之前，你还需要完成最后一项工作：你需要将“Tex Mex Meals”和“Spicy Thai”转换为子页面。转到“页面”>“所有页面”，双击“Tex Mex Meals”。为了使其成为“墨西哥特色”父页面的子页面，找到“页面属性”模块，然后点击下拉箭头打开父菜单。点击“墨西哥特色”。点击更新按钮，如图 3.17 所示。按照相同的步骤将“Spicy Thai”设置为“泰国美食”的子页面。

图 3.17 这是你分配子页面给其父页面的地方。实际上，你在这里创建了父/子页面关系。

在用占位符填充了网站后，你现在可以将注意力转向组织和自定义菜单。转到“外观”>“菜单”屏幕。

由于我无法理解的原因，WordPress 默认在“添加菜单项”模块中只显示最近添加的页面。幸运的是，WordPress 中这类用户界面错误非常罕见。但你应该记住这一点：每次你访问“外观”>“菜单”屏幕时，请首先点击“查看全部”标签，如图 3.18 所示。

图 3.18 一定要记住首先点击这个“查看全部”标签。

在“菜单结构”下，输入一个菜单名称，例如“主菜单”，然后点击“创建菜单”按钮。你希望所有页面都在菜单中，所以点击“添加菜单项”模块中的“全选”框，如图 3.19 所示。然后，点击“添加到菜单”按钮。菜单结构模块将填充你的页面标题。点击指定此模块下的“主菜单”选项。这将使这个新菜单位于每个页面的顶部附近。你可以选择将菜单放置在哪里取决于你的主题（或你安装的菜单插件）提供的选项。

图 3.19 将所有页面添加到菜单中。

3.6.2 创建子页面菜单链接

将菜单项拖放，使你的菜单结构看起来像图 3.20。要将菜单项改为子菜单（换句话说，将其显示为子页面），将其稍微向右拖动，然后放下，使其缩进在父菜单项下。

这个操作需要一些习惯。在图 3.20 中，注意当你将菜单项向右拖动时出现的虚线框。这个框是你想要放下“Tex Mex Meals”子菜单项的目标。

图 3.20 要创建一个子菜单（子菜单）项，将子菜单拖动到一个标签上，然后放下。

小贴士 如果你发现将子菜单向右拖动一个标签有挑战性，你可以点击子菜单框右侧的黑箭头图标来打开其模块。然后，点击图 3.21 中显示的“移动到下级”链接。

图 3.21 你可能会觉得这个链接比在下一个标签中添加菜单项更容易。

为了完成菜单，我们需要缩短菜单项的名称（WordPress 中称为导航标签）。对于每个菜单项，点击其框右侧的黑箭头图标以打开其模块。将标签重命名为如下：首页、中文、法语、希腊语、意大利语、墨西哥语和泰语。菜单简洁是我们的目标。

注意，你必须将“简易卓越”重命名为“首页”，因为这是惯例。人们期望第一个菜单项被命名为“首页”，并且位于菜单栏的左侧。完成的菜单结构应如图 3.22 所示。

图 3.22 完成菜单

点击“更新菜单”按钮，然后点击左上角的网站标题“Time Tested Recipes for the Instant Pot”，以查看前端菜单，如图 3.23 所示。回想一下，点击网站标题是快速在后台和前端之间切换的方法。

图 3.23 完成菜单的前端视图

这里有两点需要注意。Twenty Sixteen 主题在菜单上提供了两个不显眼的视觉提示：当前显示的页面菜单项为粗体（在本例中为“首页”），墨西哥和泰国的项目有小的向下箭头图标，让人们知道这些项目有子页面。

警告：没有比死链接更能清楚地说明“不专业”和“不可靠”的了。确保所有链接实际上都指向真实的目标，而不是触发“页面未找到”错误消息。要测试小型网站的链接，您可以手动点击它们的前端。大型网站可以使用 Google 搜索控制台插件。或者使用这个在线检查器：www.brokenlinkcheck.com/broken-links.php。我们将在下一章中探讨插件。

本章全部关于初步规划：你的网站目的是什么？它的层次结构是什么？我们还探讨了链接和菜单等工具，这些工具将使访客尽可能容易地遍历网站结构。

因此，现在我们已经在我们练习网站上创建了占位符页面，是时候用内容填充它们了。我们将从文本内容开始。大多数网络写作都需要特殊的语气和风格。正如你将在下一章中看到的，AI 擅长将你的初稿变成出色的、适合网络的散文。

摘要

• 在向网站添加内容之前建立网站蓝图和最终目标非常重要。这有助于你保持对网站目标的关注，并有助于实现统一的设计和高效的网站导航。

• 在规划网站时，蓝图的一部分是创建具有父页和子页的层次结构。这导致了一个更简单的菜单，它只显示主要（父）类别并隐藏次要（子）页面——只有在访客将鼠标指针悬停在父页上时它们才会可见。

• 避免使用长滚动页面——它们效率低下，可能会让访客感到烦恼。滚动并扫描标题以找到感兴趣的内容，比阅读菜单要麻烦得多。

• 链接是关键导航工具，正确使用它们可以降低您网站的跳出率，并提高您行动号召的成功率。

• 请特别注意您的菜单，它是网站的主要导航工具。菜单上只显示少量项目，并保持每个菜单项的长度简短。

第四章：AI-powered writing

本章涵盖

• 选择合适的排版

• 理解网站写作风格

• 用出色的主页吸引访客

本章重点介绍您网站的文本内容。AI 可以在细节上协助您，例如选择合适的字体，以及您写作的整体质量和风格。当拼写检查器出现时，我们不再需要擅长拼写。有了 AI，我们也不再需要擅长写作本身！

在本章的后面部分，您将把您的文本提交给一个 AI“海明威”。我想您会对这位著名作者的技术如何提高您的写作感到惊讶。我也是。这个 AI 将帮助您使句子更加清晰、有力且美观。

首先，您当然希望找到最佳的字体和文本设计。您可以选择字体大小、字体家族（例如 Times Roman）、字体样式（正常或斜体）、粗细（例如粗体与常规之间的区别），以及其他如字母间距和行高之类的特性。您选择的主题提供了一些默认设置，但您应该根据您的话题和受众进行微调。

此外，您还需要考虑您写作的语气和风格。大多数现代网站都采用轻松、对话式的风格。因此，如果您来自法律、学术或其他正式写作背景，您将在本章中学习如何放松您的写作——如何掌握一种不同、更对话式的写作方法。AI 可以帮助您重写文本，使其更加随意，更吸引普通人。

最后，我们将探讨通过制作一个出色、无法抗拒的主页来吸引访客注意力的方法——这是访客首先看到的页面。研究表明，平均而言，人们在 0.05 秒内就会决定是否留在主页上！因此，访客的第一印象至关重要。这显然是一个“封面决定书”的案例。AI 在这方面也会非常有帮助，确保您留下自信、积极的第一个印象。

4.1 选择最佳排版

大多数人并不真正了解排版，甚至没有考虑过它。但在某种程度上，它对他们有影响。为您的网站正文、标题和字幕选择一个吸引人、易读的字体和字体大小。

最重要的排版考虑因素是可读性。您希望显示足够大的字符以便于阅读。屏幕上的字体大小通常以像素为单位。

定义：像素或px（图像元素）指的是最小的视觉单位，数字显示屏上的单个点。但像素不是一个固定的大小，就像英寸一样。它是相对的。像素大小相对于整个屏幕的大小。因此，足球场上的巨幕屏幕会有砖块大小的像素，但平板电脑的像素可能太小，以至于肉眼无法看到。像素是您通常通过非常靠近大屏幕电视才能看到的那个单点颜色。

4.1.1 理解人工智能多模态

目前，多模态是人工智能研究的一个活跃领域。想法是，像 GPT 这样的大型语言模型不仅应该从文本输入中学习，还应该从其他模态中学习，包括视频、图形、音乐，甚至是交通摄像头，或任何其他信息来源。换句话说，它们应该以人们的方式从现实世界输入中学习（只是比我们学习得快得多，而且永远不会忘记）。人脑每秒大约工作几百次循环。计算机则做几十亿次。

目前，文本到图像生成器如 Midjourney 通过从互联网收集图像来学习，并将这些图像与文本（例如，通过存储它们捕获的标题来标记图像）结合起来。大型语言系统如 GPT 从互联网和其他数据库中抓取文本。然而，目标是让人工智能系统从各种信息中学习。

随着 GPT 4o（“o”代表全功能）的推出，GPT 通过在其学习中包含图像和视频，引领了人工智能的潮流。但其他人工智能都在向多模态输入和输出发展。

一个持续研究的相关领域是允许用户向人工智能系统提交多模态提示。在有限程度上，当前的文本到图像系统允许这样做。你可以向 GPT、谷歌的 Gemini 和 Midjourney 上传图像，以及文本提示。然后，人工智能根据图像和文本生成其输出。在某些系统中，可以根据滑动条调整输出与提交图像的相似程度。Midjourney 还允许你提供图像作为角色参考（内容）和/或风格参考。

但多模态输出怎么办？如果你想要提出这样的请求：

|

请描述针对儿童网站的三种最佳正文字体，并展示这些字体如何显示的图像。

目前，唯一能够提供文本描述并显示相关图像的人工智能是 GPT、Gemini 和 Perplexity (perplexity.ai)。其他，例如 Claude 和 Copilot，正在努力实现这一目标。Claude 对那种提示的当前响应是提供文本，并附上图像链接。

4.1.2 选择最佳字体大小

对于网站的正文字体，推荐在电脑显示器上查看文本的像素大小在 16 像素到 18 像素之间。（好的主题会在检测到网站在平板电脑或手机上查看时自动调整字体大小。）

但如果你的正文字体较细，你可能想稍微增加一点像素大小。此外，研究表明，如果你的网站包含大量文本段落，你应该选择 18 像素或更大的尺寸以提高可读性(mng.bz/JNKZ)。

但请记住，大多数网站的文字不应该太密集。当在线时，大多数人就像跳蚤一样——如果感到无聊、困惑或遇到一堆灰色文字时，会很快跳到别处。

小贴士：要查看和修改您网站字体的尺寸、字体和其他元素，请访问您网站的“后台”（WordPress 控制台），点击外观 > 定制 > 字体。它可能被称为其他名称，例如“字体”或“文本”。它被称为什么以及在此处显示的信息取决于您的主题或如果您安装了字体插件。

您还应该根据两个额外因素来选择字体大小：行高和字体。行高是文本行之间的空白量。它以字体大小的倍数指定，1.5 或 2 是最常见的值。如果太小，文本可能难以阅读；太大，文本看起来断开，好像它原本打算是一个项目符号列表，但项目符号却不见了。

添加大量字体

要向您的网站添加大量字体，我建议您转到“插件”>“添加新插件”屏幕，搜索、安装并激活由钛主题提供的出色的 Easy Google Fonts 插件。或者，搜索“字体插件 | Google 字体排版”。然后，您可以去“外观”>“定制”>“字体”屏幕，从数百种 Google 字体中选择！找到适合您网站设计的字体。以下图示说明了如何使用此插件选择字体。

Google 字体插件包含数百种字体供您选择。

注意，Google 使用“字体族”这个术语，而我们称之为“字体”。

4.1.3 选择字体

在婚礼策划网站（模仿人类手写的书法或手写体字体）中效果很好的字体，对于像迪克这样的体育用品店来说就不适用了。而正式、保守的 Times Roman 衬线字体对于医院和银行网站来说最为合适，在这些网站上必须传达可靠性和可信度。然而，大多数网站应该选择无衬线字体（普通、无卷曲、行宽变化很小）。流行的无衬线字体选择包括 Arial、Verdana 和 Helvetica。

小贴士：术语“字体”、“字体”和“字体族”经常互换使用，但我们将使用“字体”来指代字母的整体设计，即它们的形状（如 Arial 或 Times Roman），当描述字体的品质，如字体大小或字体样式时，我们将使用“字体”。有数百种具有各种特征的字体可供选择：粗细不一；线条形状和粗细各异；简约或华丽；卷曲；方块；几何；甚至有奇怪的、专业的字体，其特征是蜘蛛网以显得恐怖或由跳舞的腿组成的字符以暗示小丑。

然而，一些研究表明，三种字体在数字屏幕上尤其易读：Consolas、Cambria 和 Verdana。但其中只有一种是明显的赢家。

Consolas 是常用于编程代码的字体。但由于可读性并非唯一标准（Consolas 的可读性相当好），Consolas 应该避免使用，因为它只是不够吸引人。Cambria 也是可读的，但它是一种衬线字体（有卷曲），一些研究表明你应该避免在网站正文中使用。

获胜者 Verdana 是专门为屏幕阅读设计的。1996 年为微软创建，它拥有干净、简单的线条。它很受网站设计师的欢迎。字符相对较宽且间距较大。它是许多网站的最佳选择。

Verdana 很微妙。它有一些轻微的曲线和扩张的线条末端，以及某些字母的线条粗细变化（见图 4.1 中的小写字母），这使得它比传统的无衬线字体看起来更加柔和、更加放松。您可以在图 4.1 中看到 Verdana 的实际应用。

图 4.1 Verdana 的简洁简单设计使其在各种屏幕尺寸上易于阅读，并且是许多类型网站的优秀选择。

4.1.4 十种流行字体

以下列表包括 10 种流行字体，展示了不同外观的范围——从传统和正式到反传统：

• Helvetica—一种干净现代的无衬线字体，广泛应用于印刷和网站正文文本。

• Times New Roman—一种经典的衬线字体，通常用于正式文件或需要传达稳固和保守主义的网站。

• Futura—一种具有独特和未来感的几何无衬线字体。

• Bodoni—18 世纪设计的高对比度衬线字体，至今仍常用于标题和副标题。然而，网站标题通常使用无衬线字体。

• Garamond—一种优雅且永恒的无衬线字体，最常出现在书籍和其他印刷材料中。

• Impact—一种醒目且引人注目的无衬线字体，非常适合广告和网站标题。

• Comic Sans—一种轻松且非正式的字体，常出现在儿童书籍和奇思妙想的网站设计中。

• Optima—类似于 Verdana，它是一种优雅、平衡的混合字体，包括衬线和无衬线设计的元素。它多功能且被认为相当易读。

• Arial—一种流行且多功能的无衬线字体，在各种环境中经常出现在计算机屏幕上，包括网站。

• Brush Script—一种手写草书字体，具有手绘和艺术感，用于标志、品牌和婚纱店、餐饮和时尚等网站。据说它能传达优雅和精致。

您的网站主题通常指定了默认的大小、行高和字体。但如果它没有指定，浏览器有自己的默认设置，通常是 16 像素的通用无衬线字体用于正文文本。

你还可以使用 CSS 代码来修改你的字体值（实际上 CSS 可以几乎自定义网站中的任何其他设计功能，无论主题默认值如何）。在第六章中，我会向你展示一个自动生成 CSS 代码的优秀插件。因此，你不需要学习 CSS 语言来微调你网站的外观。

在指定字体质量时，最后一个基本考虑因素是其颜色，更确切地说，是颜色的色调。每种颜色从柔和色调到非常深色调都有。就像粉色是红色的一种浅色调。它们是相同的颜色，但暗度不同。

一些设计不佳的网站在深色背景上使用深色字体颜色，或者相反——浅色对浅色。显然，这种缺乏对比使得文本难以阅读。这对视力不好的人尤其令人沮丧。文本应该与背景形成对比。这通常意味着黑色或深色文本与白色或浅色背景。最佳选择通常是传统的可靠的黑白色。背景不应与文本竞争——所以不要在文本下方放置壁纸或鲜艳的图像。在背景等事项上，微妙是首选的。

人工智能可以帮助你查看一些优秀网站的设计示例。例如，向 GPT 等 AI 平台提交以下请求：

|

请列出两个特别有效利用排版的网站的地址。并列出该排版的元素，如行高、字体名称、字体大小等。

4.1.5 排版清单

以下清单包括一些额外的排版细节，你应在网站亮相之前根据需要调整：

1. 在不同设备和屏幕尺寸上检查你的排版，以确保可读性。

2. 你的标题应该有助于建立网站信息的清晰层次结构。标题和副标题应该容易区分（通常通过大小或粗细），以及与正文文本区分开来。标题总结并介绍随后的文本。

3. 使用一致的排版。这意味着在整个网站上使用相同的尺寸、字体和颜色，以创建统一的视觉和感觉。

4. 确保你的排版对所有人都是可访问的，包括那些有视觉障碍的人。因此，选择易于阅读的字体。我们将在下一章中查看一些可访问性测试工具。

5. 排版会影响页面加载速度。一些字体比其他字体更复杂，加载时间更长。并不是每个人都有高速互联网连接。使用 IsitWP 免费在线工具测试你的网站：mng.bz/q0gx。

6. 如果你计划用多种语言展示你的网站，请选择提供这些语言版本的字体。

4.1.6 获取人工智能对你排版的客观意见

在您选择了并应用了字体大小、字体样式、颜色、行高和字母间距后，将您的网站提交给 AI。我询问了 Perplexity 对宠物领养网站字体的看法：

|

请告诉我您对这个网站字体的优缺点看法：sitename.com。

它通过提醒我，作为一个非人类，它没有个人观点来回应：

|

作为一个人工智能助手，我没有个人观点。然而，我可以为您提供您提供的网站所使用的字体的客观分析。

然后它告诉我了它的观点。结果证明，这些观点实际上是有用且准确的，尤其是缺点和最后的总结。有了 AI 作为您的助手、编辑、设计评论家和全能的博学者，它可以从许多方面为您的网站提出坚实的改进建议：

|

网站的字体简单易读。使用的字体是无衬线字体，这是网站流行的选择，因为它看起来干净现代。字体大小也很合适，使得在桌面和移动设备上阅读文本都很方便。优点：字体的易读性和适用性适合网站的内容。使用无衬线字体使网站看起来现代且干净。字体大小适合桌面和移动设备。缺点：字体的独特性和记忆性不强，这可能会使网站与其他宠物相关网站相比缺乏特色。在网站上对字体的使用有限，以创建层次或视觉兴趣。例如，没有使用粗体或斜体文本来强调重要信息或创造对比。总的来说，网站的字体功能性强且适合内容，但在创造更具特色和视觉吸引力的设计方面仍有改进空间。

Claude 的回应也很有帮助。首先，它警告我可能会产生幻觉，但在礼貌地犹豫之后，它给了我一些好的建议：

|

这里是我对网站字体的评估：优点：使用简单、干净的 sans-serif 字体用于标题和正文（看起来像 Roboto）。这使网站具有现代、友好的氛围。标题大而粗，易于扫描。正文大小和行距适中，便于阅读。深色文本和浅色背景之间有良好的对比度，增强了可读性。缺点：使用的字体缺乏个性 - 它们是安全且通用的选择。使用更具特色的字体可以使品牌更加突出。正文段落非常长。将这些段落分成较短的段落可能有助于提高可读性。文本对齐是齐行的，这可能导致单词间距不均匀。左对齐的文本通常更容易阅读。在宽屏幕上，行长度变得非常长，这使得从一行到另一行的跟踪变得困难。总的来说，字体完成了任务，但仍有改进的空间。我建议使用更具特色的标题字体，缩短段落长度，左对齐文本，并设置最大行长度。这些变化可以使字体从可用变为惊艳。请告诉我你是否需要其他建议！

和往常一样，你可以提出后续问题以获得更具体的建议：

|

克劳德，你建议使用哪些替代字体来增加它的个性？考虑到这个网站的主题。

|

这里有一些字体建议，可以为网站注入更多个性，同时仍然适合宠物/动物主题：Raleway - 这种优雅、细长的无衬线字体比 Roboto 更具个性。它的曲线和夸张的笔画增加了俏皮感。Montserrat - Montserrat 具有圆润、圆润的外观，灵感来自城市和涂鸦风格。它休闲但充满活力的氛围可能与宠物相得益彰。Playfair Display - 一种衬线字体，但具有弹性和友好的字母形状。它的对比和斜向强调使其具有适合动物的有机感。Libre Baskerville - 一种温暖、坚固的衬线字体，具有微妙的圆角。其遗产风格带来一丝古典主义，同时感觉像狗耳朵和被爱抚的。Happy Monkey - 一种具有有趣、圆润、猴子扳手启发外观的显示字体。可能对于正文来说过于俏皮，但可以很好地用于标题。Rock Salt - 手写、粗糙的边缘使这种字体充满个性。传达了宠物和动物的定制、个人性质。请告诉我你是否需要其他关于字体配对或网站风格的建议！我很乐意提供更多字体建议。

我认为前三个建议值得考虑。但随着我们向下移动列表，它们变得越来越具有幻觉性。请注意，由于该网站有与宠物相关的内容，一些比字体更相关的动物修饰语悄悄地出现了：活泼的、充满活力的、弹性的、磨损的和猴子的。公平地说，寻找潜意识传达这些术语的字体对于宠物收养网站来说确实有一定的意义。

Gemini 也提出了一些好的想法，大部分与 Perplexity 和 Claude 的思路相同。但 Gemini 增加了一条独特的建议：“在大多数情况下避免使用全大写字母。全大写字母可能难以阅读，并可能使文本显得具有攻击性。”

Copilot 给出了这个简短但准确的回应：

|

字体清晰易读。字体大小足够大，便于阅读，并且整个网站上的字体风格保持一致。该网站还使用了无衬线字体，这是网页设计的一个好选择，因为它比衬线字体更容易在屏幕上阅读。

小贴士有时向几个 AI 系统提交相同的提示以获得各种意见可能是个好主意。这不仅给您提供了一种共识，还有助于核实事实。

4.2 以正确的风格写作

人工智能可以在提供适合您网站整体使命的内容方面提供很大帮助。它还可以改善您的风格、语气、过渡以及许多其他风格元素。以下是一个您可以修改后提交给 GPT-4o 的提示（GPT-4o 能够永久记住事物）：

|

将以下内容牢记于心：当未来我以“:Edit:”开头向你发起提示时，你是一位非虚构作品的专家编辑。你既要进行抽象的大纲编辑，也要进行校对和校稿。请记住，我想要的是清晰、友好、非正式的对话风格。我还希望内容简洁。你应该仔细阅读，然后重新阅读我上传给你的文本或粘贴的文本，然后回答以下问题（为每个答案提供一个标题）。如果你没有在文本中找到与任何一个问题相关的问题，只需跳过它，继续下一个问题。在展示你的回答之前，请检查以确保其准确性、简洁性，并且不包含任何微不足道或不重要的建议。请注意，每个问题都有编号。你可以对每个问题有多个回答。或者，如果你没有找到问题所要求的内容，你可以跳过该问题。进行缓慢、细致的分析，否则可能会有后果。    1.  如果你发现任何非非正式或过于技术性的文本，请用引号标出该文本，然后跟随一个非正式的修订版本。    2.  如果你发现任何句子过长或过于复杂，请用引号标出该文本，然后跟随一个将过长句子拆分的修订版本。    3.  如果你发现任何文本可以通过比喻或类比来使观点更清晰，请用引号标出该文本，然后跟随一个包含有用比喻或类比的修订版本。    4.  检查是否有任何文本你认为是模糊的，如果是，请用引号标出该文本，然后跟随一个更清晰的修订版本。    5.  如果你发现文本中有需要过渡的地方，即主题突然切换到另一个主题，请用引号标出该文本，然后跟随一个包含良好过渡句子的修订版本。    6.  如果你看到任何需要具体例子来解释的抽象概念，请用引号标出该文本，然后跟随一个包含具体例子的修订版本。    7.  仔细审视文本中的断言，如果你发现任何可以通过支持事实（如统计数据）来加强的，请用引号标出该文本，然后跟随一个包含支持事实的修订版本。    8.  如果你认为文本中的某个段落可以通过图像、图表或其他视觉元素来改进，请用引号标出该文本，然后跟随一个包含有助于说明该段落的良好视觉元素的修订版本。    9.  如果你发现一个包含对某事物负面描述的段落（例如，“这不容易”），请标出该文本，然后展示相同概念但用积极语句表达（“这很容易”）。  10.  如果我没有上传文本给你，请显示“请粘贴你想让我分析的文本。”然后等待我粘贴文本后再继续。

4.2.1 确定基调

网站内容大多是对话性和非正式的。使用你通常和朋友交谈时的语气和措辞。如果你对我的上一句中使用like感到不满，那么在为网络写作时你需要轻松一些。对话性写作允许在措辞和语法上有些非正式。（严格的语法学家会坚持认为上一句中的like应该被that或as等词替换。）

所以，如果你有法律、校对或学术背景，或者倾向于写正式的散文——你可能需要追求许多网站典型的更随意的沟通方式。当然，总有例外。用于法律、银行、医疗或教育目的的网站可能需要更正式的“正确”风格。这些网站需要传达可靠性、权威性和严肃性。一点冷漠的感觉也无妨。但大多数网站应该追求轻松、友好、可接近的语气。

4.2.2 转变僵硬的段落

记住，你网站首页的第一段对于吸引观众至关重要。你希望让他们感到欢迎，从一开始就让他们感到舒适。让我们尝试写一个刻板的、正式的介绍作为我们的第一段，然后请 GPT 将其修改为一个更温暖、更口语化的版本。这本书的食谱实践网站首页标题是“简易卓越”，所以这里有一个自负的第一段，充满了夸夸其谈：

在我们有望开始这个项目，为我们的网站食谱集合有效地整理食谱之前，我们自己也是初出茅庐的厨师。我们假设你，我们的观众，现在可能处于类似的情况。我们在选择菜肴并执行菜肴时常常感到焦虑或不安。因此，我们的目标是帮助你为你的家人和朋友创造一个出色且令人满意的烹饪体验。并且请注意，我们已经对每个食谱进行了彻底的测试。所以，你可以认为它们是经过验证的，不会失败。

相当拘谨，不是吗？在这种情况下，AI 可以非常有帮助。当我们要求它重写我们的段落以使其不那么正式时，它提出了以下内容：

|

在我们开始为这个网站整理这些食谱之前，我们在厨房里几乎一无所知！也许你能理解那种感觉？当我们不得不选择晚餐吃什么时，我们会感到压力很大，甚至在烹饪时更是如此。因此，我们的目标是让你轻松地为你的朋友和亲人做出一些令人惊叹的美味佳肴。这些食谱简单但很棒！而且它们不会让你失望——它们已经经过广泛的测试。

4.2.3 召唤一个模拟体

记得我们可以为 AI 分配角色来扮演，比如网站评论家或获奖网站设计师。这也意味着我们可以让它召唤出已故的名人。让我们请一个 AI 海明威给我们一些建议，关于如何改进我们的散文。

海明威的风格因其清晰和简洁而仍然具有巨大的影响力。（1935 年的书籍《风格要素》也倡导一种类似干净、清晰的文章写作方法。该书于 1935 年出版，至今仍在教授。）海明威建议以下事项：

• 创建一个简短有力的第一段。努力工作；这是吸引读者的钩子。

• 保持句子简短。当被要求用六个词讲故事时，海明威写道：“出售：婴儿鞋，从未穿过。”

• 使用积极的短语，而不是消极的短语。例如，使用简单而不是不难。你应该使用描述想法的术语，而不是其对立面。

• 修改，然后再修改。 “我写了一页杰作，九十一页垃圾。我试图把垃圾扔进垃圾桶。”

他们说海明威将《永别了，武器》的最后一页重写了 39 次。一位采访者问他问题所在。他说，“把词写对。”特鲁曼·卡波特也以其精致、完美的句子而闻名。

Copilot 提供与风格相关的三个设置

如果您使用这样的提示，Copilot 将提供良好的修改：

|

请修改以下段落，使其更加非正式和对话化。此图显示了三种风格选项。

此外，当您在右侧侧边栏中选择聊天时，Copilot 也会在那里提供修改选项。要使用该选项，请按照以下步骤操作：

1. 在左侧的主窗口中选择一些文本。它将自动出现在右侧的聊天窗口中：

2. 点击发送，您将看到下一张图所示的选项。

3. 当您点击修改时，您确实会得到一个新版本，但它更像是改写而不是改变语调的重写。

4.2.4 使用海明威应用程序

谈到海明威，有一个应用程序将他的散文原则付诸实践。试试海明威编辑器应用程序(hemingwayapp.com/)。您将获得对您写作中任何问题的良好分析。如果您倾向于过于正式地写作，或者有其他问题，如过度使用副词（如希望地和真正地）或过多依赖被动语态（The burger was eaten by the dog可以通过将其改为主动语态来使句子更清晰、更简洁：The dog ate the burger.）

让我们把过于正式的段落交给海明威编辑器应用程序。图 4.2 显示了它说了什么。该应用程序特别不喜欢副词，并建议使用少于零个。

图 4.2 这个海明威编辑器应用程序在将正式写作修改为更对话化的风格时非常有帮助。

要使用这个应用程序，点击其网页右上角的“写”按钮。删除现有的示例文本，然后通过粘贴你的文本到该字段来替换它。点击“编辑”按钮以查看生成的评论。

除了发展一种轻松的风格，还要记住将你的内容分成相当简短的段落。避免巨大的灰色文本墙。甚至尝试限制整个网站上的文本量——除非你有很好的理由不这样做（例如，一个大型商品目录）。在大多数页面上，只显示几个简短的段落，使用空白、媒体或布局设计来分隔它们。

利用 AI 辅助也很重要。你的最成功的竞争对手正在使用它。你可以找到许多正文内容生成器，它们可以为你提供一个良好的起点，包括用你自己的话修改的文本和事实核查。

此外，将你的文本通过抄袭检测系统。例如，当你打开 Microsoft Word 中的拼写和语法检查器（F7）时，你会在编辑面板中看到相似性部分。如果它发现你的文本在互联网上的其他地方重复，它将标记任何抄袭问题。或者，尝试 Copyleaks（它检查数十亿个在线来源）或 Grammarly（你应该无论如何都要使用它，因为它是一个优秀的通用、用户友好的基于 AI 的写作助手）。几位评论员表示，undetectable.ai 在发现抄袭以及“人性化”AI 生成内容方面都是最好的。

为什么担心抄袭？你知道你没有做。实际上，确实有很好的理由担心。在写作时使用 AI 引入了两个新的危险。你可能会在某一点忘记检查 AI 的结果是否有抄袭（有时它会从互联网上复制整个段落而不进行修改）。或者，在写作的热情中，你可能会忘记修改你复制的某些 AI 内容。显然，只发布你自己的原创内容，而不是别人的——即使那个人是机器——这是正确的事情。

话虽如此，AI 可以生成许多不同类型的与网站相关的内容，包括博客消息、产品描述、主页文本、不同级别的正式程度、一系列引人入胜的标题变体供你选择、初稿和头脑风暴，仅举几例。

小贴士：Medium 上的这篇文章为网站作者提供了一些 AI 资源：mng.bz/75EQ。

4.3 打造良好的第一印象

记住，你必须花时间润色你的主页，尤其是网站的第一段。并且真的要努力工作在第一句话上。注意，海明威说过，一篇文章的第一段至关重要。它必须立刻抓住读者的注意力。

4.3.1 吸引访客

的确，您网站的第一页必须吸引访客。写尽可能多的修订稿，直到文本变得精彩。让它简短、精彩、清晰如山间溪流。并且重新设计页面，直到它在视觉上也非常出色。

我们将在接下来的两章中探讨网站设计，但现在让我们先预览一下这个主题。思考您主页设计的一种方法是考虑基于色彩心理学的研究结果，什么样的色彩方案会是一个好的选择。对您的特定网站受众来说，哪些颜色是最好的？对于我们这个食谱实践网站，我进行了一些研究，并提出了以下建议：

• 红色是快餐连锁店最常使用的颜色，其次是黄色和橙色。

• 黄色和橙色会让人感到饥饿。

• 棕色有助于为您的网站营造一种柔和而真实的感觉。

• 蓝色，尤其是较深的色调，或者整体使用过多的蓝色可能会让您的网站感觉冷漠和不关心。

• 据说蓝色也可以抑制食欲，所以它不是食谱收藏的最佳选择。

4.3.2 使用 AI 寻找设计灵感

作为一项实验，让我们让图像生成器 Midjourney 为我们提供四个网站设计。我们将指示它遵循那些心理学研究中的色彩建议。这是我提交给 Midjourney 的提示：

|

阳光明媚、明亮、美丽的电压力锅食谱网站主页，棕色：2 黄色：1 4K，详细，杰作，用户体验（ux），用户界面（ui），--无蓝色 --无橙色 --宽高比 3:2 --质量 2

小贴士 注意，您可以在 Midjourney 提示中指定相对权重，使用双冒号符号。该提示表示使棕色比黄色突出两倍：棕色::2 黄色::1。其他规格包括高分辨率（4K）、用户体验（ux）、用户界面（ui）、宽高比（ar）3:2 和高质量（q 2）。

四个结果分别显示在图 4.3 到图 4.6 中。（在撰写本文时，AI 艺术生成器在生成有意义的文本方面仍在努力。但它们正在改进。）

图 4.3 除了一些奇怪的植物外，这是一个可以作为我们主页的不错设计。

图 4.4 这里的第二个版本可能对于主页来说过于复杂和拥挤。

图 4.5 这个设计平衡得很好，并且很好地遵循了我们的色彩方案，但我们可能会省略下方的三分之一部分以简化设计。

图 4.6 这个设计也要求在文本数量和图片数量上简化，但左侧草药的 3D 阴影效果是一个极好的想法。

除了一些外星花卉和蔬菜（以及奇怪的文字）之外，这些图像看起来像是灵感的良好起点。从 Midjourney 或其他 AI 图像生成器中，你可以得到关于颜色搭配、布局、字体、平衡、文本或图像位置等方面的令人惊讶的好主意。有趣的是，AI 艺术通常似乎以某种方式运用了艺术学校教授的关于平衡、线条、对称、颜色、对比、构图等品质的规则。

Midjourney 为每个提示生成四个图像，因此很容易生成许多替代方案。而且，重新运行或改变结果图像非常简单。如果你想要从结果图像中删除某些内容，可以使用之前阻止蓝色和橙色时使用的-no命令。梵高曾说，“没有黄色和橙色就没有蓝色。”但我们都不要蓝色或橙色，所以我们告诉 Midjourney 这一点。

尝试在提示中添加变化，直到设计真正脱颖而出。例如，尝试改变权重：brown::1 yellow::2。或者通过放大并选择“变化”或“缩放”选项来优化 Midjourney 的四个图像中的最佳图像。你也可以修改提示进行混搭。你与 Midjourney 之间的这种来回互动可以产生你想要的出色最终结果。

4.3.3 使用 Canva

任何从事设计工作的人现在都需要了解 Canva。你可以从 GPT 中的 Canva 插件（推荐）开始，或者直接访问 Canva 的网站(www.canva.com)。Canva 使得创建一个具有简约、现代感的引人注目的主页变得相对容易，就像图 4.7 中展示的那样。

图 4.7 如果你想为你的网站设计一个不那么舒适的家居设计，可以尝试使用 Canva。凭借其精心设计的 UI，你可以快速创建一个令人愉悦、看起来专业的图像。

Canva，作为一个专门的 GPT（点击探索 GPTs，然后搜索Canva），为设计提供了丰富的资源。假设你想要为我们的 Instant Pot 实践网站设计一个更现代、简约的主页。一个不那么明显舒适的布局。按照以下步骤进行：

1.  将 Canva 插件添加到 GPT 的活跃插件中。或者使用针对 Canva 进行微调的 GPT。

2.  使用以下提示：

|

使用 Canva，为提供食谱的网站创建一个现代、简约、优雅的主页。

小贴士：Canva 本身（目前）不提供提示。所以如果你通过 GPT 的 Canva 插件访问 Canva，你将获得 AI 的优势。通常，提示可以得到更好的结果。回想一下，传统的搜索只能给你一个需要访问以查找答案的链接列表。然而，Canva 正在积极开发添加 AI 功能（见www.canva.com/magic/)。

3.  GPT 将显示一系列示例主页的图片，并提供到 Canva 的链接。

4. 点击显示与您所追求的主页样本模板最接近的链接。这会带您到 Canva 的免费版本。

5. 在 Canva 的侧边栏中滚动，看看你是否找到了更好的模板（见图 4.8）。

图 4.8 浏览 GPT 提示找到的样本模板。

6. 如果你通过滚动没有找到好的模板，在模板搜索字段中输入：“食谱网站着陆页”。

7. 按下 Enter 键。

8. 浏览数百种设计。尝试不同的搜索词，如“极简主义”或“现代”。

9. 当你在侧边栏中找到一个喜欢的模板时，点击它将其移动到主窗口。然后，侧边栏将重新绘制，填充与你选择的模板相似的设计。

10. 如果你想再次浏览，当最终找到合适的模板时，点击顶部菜单中的“调整大小”。创建你想要的形状。

11. 双击设计中的文本以自定义它。

探索 Canva。如果你计划创建设计，那么这是值得你花时间的。例如，点击设计中的一个元素以选择它，然后点击动画菜单项。

4.3.4 主页清单

通过考虑以下建议来预先规划你的主页：

• 撰写一个简短、吸引人、描述性的页面标题。 它应该总结你网站的目的。并且包括一个简短的段落，更详细地介绍网站提供的利益。主页的地产就是简洁，简洁，再简洁。如果你绝对必须显示较长的文本内容，用副标题或项目符号列表将其分割，并将其放置在页面底部。

• 人们比文本更快地理解视觉的含义。 选择有助于立即理解网站目的的图片。不要仅仅为了装饰而包含图片。并且限制背景装饰，以确保它不会与你的图片竞争。始终牢记简洁和专注。研究表明，你的访客在毫秒内就会决定是否留下或离开，所以你没有太多时间来吸引他们。

• 专注于推广网站的目标。 应只有一个主要目标。如果你在写旅行博客，不要在主页上包含健康小贴士来削弱焦点。可以有一个内部子页面专门介绍旅行时的健康保持，但要保持其内部性。在主页上，将健康主题限制为一个单一概念。确保主页上的每一项内容都服务于你唯一的主要目的。

• 避免跳出率。 “跳出率”意味着有人访问了你的主页，但立即跳回其他网站，没有访问你的内部页面，甚至没有查看你主页的大部分内容。

  记住，专家们说，平均而言，访问你网站的人会在 0.05 秒内决定是否留下或离开。如果你的主页通过了这种超快的快速判断，那么他们仍然有可能在接下来的 20 秒内离开，除非你设法吸引他们。从技术上讲，互联网营销专家会查看他们称之为跳出率的数据：查看主页而没有继续查看网站其他页面的访客百分比。我们将在关于网站分析的后续章节中探讨你如何与这个指标（以及许多其他指标）一起工作。

• 不要让他们滚动。 如果你在初始屏幕下方放置一些他们可能会觉得有价值的内容，人们可能没有足够的时间来发现这些内容。将你最具吸引力的内容放在主页屏幕的顶部。如果你认为你有更多的空间来吸引人们，只需记住，目前的估计是大约 50%的互联网观看是在便携（即小）屏幕上，手机占主导地位。从顶部开始吸引他们。

• 决定你希望访客采取的下一步行动。 他们应该点击链接到显示你产品的页面吗？你希望他们填写表格，以便你可以获取他们的电子邮件用于后续营销信息吗？他们应该使用你的网站搜索工具吗？希望他们通过在博客上发帖来分享他们的观点吗？或者订阅你的网站？或者也许预约、签署请愿书或获取免费试用？

  无论你希望他们采取的下一步行动是什么，这都是你的行动号召（CTA）。所以，如果他们不采取这一步，如果他们跳走了，那么你的主页就失败了。

  让 CTA（行动号召）在视觉上与其他内容不同（例如，对比颜色），并包含一个简单、有力的文字描述，如“查看我们的最受欢迎的食谱”或“注册获取更多食谱”。也许你可以通过提供发送他们你 10 个最佳食谱的优惠来激励他们遵循 CTA，如果他们提供他们的电子邮件地址。清楚地告诉他们你提供的奖励。也许你可以提供首次订单的折扣。无论需要做什么来防止他们从你的网站上跳出：“只剩三个了！”“注册获取独家优惠。”“现在观看视频。”

• 移除退出选项。 不要显示那些会让他们离开你网站的链接。一些网站甚至隐藏他们的菜单——用三个横线的汉堡图标替换，或者只是显示“菜单”这个词。这是一个相当极端且相当操纵性的方法。但确实要避免在主页上放置可能会诱惑他们点击并飞到 Facebook 或 X 的社交媒体按钮。

• 精炼和修订。 主页，就像任何创造性工作一样，永远不可能真正完美。观察朋友或亲戚尝试您主页的不同版本时的行为。其中一个版本可能拥有最成功的 CTA。并且安装我们将在本书后面部分讨论的分析插件。它们显示了您的访客如何行为，他们来自哪里，他们通过您网站的哪些路径，他们查看不同页面多长时间，以及其他可以帮助您改进网站的数据。

• 建立信任。 用户评价是展示您网站价值和质量的有力工具。考虑在主页上添加一些简短、热情洋溢的访客评论。展示这些人的姓名、地点和照片，使他们看起来更加真实。也许还可以包括一个包含额外用户评价的内部页面。用户评价与评论略有不同——前者完全是正面的，但后者要被相信，必须至少包含一些批评性评论。

在本章中，您为内容创作和网站设计做好准备。您首先探索了选择最佳字体及其相关品质的方法，这些品质会使您的文本内容看起来很棒。接下来，您看到了如何实现一种让您的受众想要阅读您所写内容的写作风格。本章最后通过将您迄今为止所学的内容付诸实践：创建一个引人入胜的主页。

在下一章中，我们将探讨插件——这些是小程序，只需点击一下即可添加到您的网站。它们包括诸如垃圾邮件拦截器或为您的网站访客提供的事件日历等实用程序。我们还将看到您如何通过向 AI 描述您想要的内容来创建自己的自定义插件。

摘要

• 字体排印在网站成功中是一个比许多人意识到的更重要因素。您的主题可能指定了一些默认值——字体、大小和其他字体元素，但您应该看看这些选择是否可以改进。

• 学习在许多网站上常见的对话式写作风格。除非一个网站必须传达稳固和严肃的语气——例如法律或学术网站——否则人们通常期望一种非正式的语气。

• 您的主页必须迅速吸引读者的注意，并将他们引导到您行动号召（CTA）的目标。人们在首次访问网站时通常会很快做出判断，除非给您留下深刻印象，否则他们就会离开。

第五章：使用插件添加功能

本章涵盖

• 为您的网站选择最佳插件

• 避免插件冲突

• 添加 Jetpack 插件的模块集

• 正确管理可访问性和 cookies

• 理解小工具的目的

• 使用 AI 创建 STET 小工具和插件

• AI 生成的 HTML、CSS 和 PHP 可执行代码

WordPress 插件就像 Chrome、Edge 或 Safari（Firefox 称其为扩展程序）中的扩展。插件通常是小型程序，可以安装到 WordPress 中添加功能。例如，包括垃圾邮件拦截器、电子商务管理器、帮助提高网站在 Google 或 AI 搜索中排名的应用程序、联系表单构建器、安全系统等。

您可以在 WordPress 插件目录中找到超过 50,000 个插件（wordpress.org/plugins/）。还有来自第三方网站的数千个更多插件。

对于网站所有者来说，找到恰好能改善他们网站的插件可能会感到有些令人畏惧。这就是本章的作用所在。在这里，您将找到

• 几乎在所有类型的网站上都有用的插件类型。

• 如何找到最高质量的插件。

• 插件如何帮助您融入某些最佳实践（例如确保可访问性）。

• 如何使用 AI 作为您的程序员来创建自己的插件和小工具。

5.1 安装必需的插件

显然，不同的网站需要不同的插件，但有一些插件是大多数网站构建者都认为必不可少的。以下是我推荐您考虑添加到您网站上的插件列表，无论您的网站类型如何：

• UpdraftPlus——首先，立即安装安全插件。UpdraftPlus 是一个全面的备份和恢复系统，允许您对网站进行完整的手动或计划备份。您可以将备份保存在各种存储选项中，如 Dropbox、Google Drive，以及目前 10 个其他位置。这个插件因其易于使用、功能丰富和可靠而广受好评。请记住，优质的托管服务会进行自己的每日备份，但在此情况下，冗余是值得的。它有免费和付费版本，对于许多网站来说，免费版本就足够好了。

• Wordfence——添加这个广受尊敬的安全程序是您网站另一层保护。但如果入侵者设法绕过了 Wordfence，您仍然可以通过恢复最近的 UpdraftPlus 备份来重建您的网站。您在早期章节中与 UpdraftPlus 一起安装了 Wordfence。它有一套全面的保护功能：防火墙；可选警报的实时监控；以及一个恶意软件扫描器，它会检查您的网站核心文件、主题、插件和其他已安装组件的后门、垃圾邮件、恶意重定向、代码注入等。最后，它监控您网站文件的完整性，确保它们保持安全和未更改。它是免费增值模式，有免费和付费版本。

警告：估计数字不一，但据说每天互联网上超过五十万件新的恶意软件。十多年前，新的恶意软件开始超过正常、良性的软件。并且这个比率一直在扩大。有各种恶意软件种类：蠕虫、特洛伊木马、病毒、间谍软件、勒索软件、rootkits，还有一些尚未分类或我们尚未了解的。但它们都有一个共同点：它们在未经所有者同意的情况下利用计算机和网站。您当然不希望您的网站成为受害者。

• Akismet—这是一个第三个与安全相关的插件，其任务是阻止垃圾邮件。这对于包含允许访客发布消息的博客页面的网站尤为重要。当您允许消息发送到您的网站时，这就像垃圾邮件的门户，就像您的电子邮件账户可能会受到垃圾邮件的影响一样。另一个垃圾邮件入口是一个联系表单——访客填写并提交到您的网站电子邮件地址的表单。Akismet 使用 AI 工具，并检查潜在垃圾邮件与其全球已知垃圾邮件数据库的匹配，以大大减少这些不受欢迎的消息。Akismet 对个人使用免费，但商业使用需要付费。

• Easy Google Fonts by Titanium Themes—您的主题决定了您可以使用哪些字体，通常只有几个。然而，Easy Google Fonts 添加了超过 1400 种字体。所以，如果您想使用流行的 Verdana 字体作为正文文本，例如，您可能想将此插件添加到您的收藏中。（我们在本书的实践网站上使用的 Twenty Sixteen 主题只有 17 种字体，但 Verdana 确实是其中之一。）此插件在其设置>Easy Google Fonts 屏幕中也提供额外的选项和功能。

警告：尽管 Easy Google Fonts 插件很有价值，但与其相关的隐私问题也值得关注。您可能想看看这个：mng.bz/mRn8。此外，它没有保持更新。但许多人仍然在使用它而没有问题。话虽如此，如果您愿意，您可以使用字体插件或 Google Fonts Typography。

• SeedProd—您在早期章节中安装了这个插件。其一个功能是将您的页面替换为即将推出的页面。当您仍在构建网站时，您不希望访客在网站未完成时对其进行评判。但 SeedProd 还有许多其他您可能想要探索的功能。SeedProd（尤其是其专业版本）不仅仅提供正在施工页面的替代品。

  其最重要的特性之一是一个强大的拖放页面构建器。页面构建器插件在您创建或修改页面时帮助您进行布局和其他元素。以下三个高度推荐的页面构建器是 Elementor、Divi 和 SeedProd，一些评论者将 SeedProd 列为最佳。SeedProd 提供以下功能：

o   许多精心设计的首页模板（不仅仅是即将推出的选择，而是真正的首页设计）

o   付费电子邮件集成

o   搜索引擎优化（SEO）和数据分析设置

提示 SEO 试图提高您网站在搜索引擎或 AI 中的排名。数据分析收集有关访客如何处理您网站的信息——他们在页面上停留了多长时间，哪些页面被查看，以及其他有助于您改进网站的信息。SEO 和数据分析将在后面的章节中介绍。

o   WooCommerce 集成（一个流行的电子商务插件）

o   订阅者管理（一些网站收集电子邮件地址用于邮件列表，或者将网站的部分或全部内容设为付费订阅以提供特殊内容）

• Google XML Sitemaps—此插件对于 SEO 和 AIO 来说是必需的。Google XML Sitemaps 是免费的，易于使用，且有效。此外，对于优化您在 Google 搜索中的位置，还有谁能比谷歌本身更好地帮助您呢？此插件轻量级，不会减慢您的网站速度或占用大量空间，但它确实帮助谷歌和其他搜索引擎如必应更好地理解您的网站结构，从而更准确地评估它。此插件非常简单，完成其映射任务，通常不需要任何支持。

• All in One SEO (AIOSEO)—此 WordPress 插件提供了一系列网站优化功能，可以提高您的网站搜索排名。以下是一些其好处和功能：

o   内置对 WordPress schema 标记的支持。这可以帮助您吸引更多访客。Schema 标记是一种可以添加到您网站上的代码，帮助搜索引擎更好地理解您页面上的内容（类似于 XML 网站地图）。

o   使用 GPT 帮助您找到最佳的帖子标题和元描述以进行 SEO。

o   自动生成 SEO 网站地图（包括 XML 和 HTML 格式）。同时运行此插件和谷歌的 XML Sitemaps 插件没有问题。

o   页面优化，提供改进内容质量的建议。

o   完整网站审计和竞争对手网站分析。

o   社交媒体集成。

o   查找任何没有内部链接的孤立帖子。

o   WooCommerce 插件的高级电子商务 SEO 支持，优化产品页面和类别以进行在线销售。

o   审计清单，分析您的整个网站并检测关键错误。

o   重定向管理器，轻松创建和管理断链的重定向。

o   将您最新的新闻文章提交到 Google 新闻。

• MonsterInsights—这个非常流行的 WordPress 插件使您轻松将网站连接到 Google Analytics（提供有助于提高您网站 SEO 排名和扩大受众的最佳插件之一）。以下是一些好处：

o   高级跟踪，让您更好地了解您的受众。例如，此工具提供的数据可以帮助您深入了解网站性能和访客行为，以便您做出基于数据的决策来扩大您的受众或业务。

o   简化查找和查看数据报告。

帮助您扩大电子邮件列表并提高销售额。

列出带给你最多流量的关键词。

跟踪人们从您的网站下载的文件，他们点击的链接或广告，以及其他类似的数据。

跟踪表单转换，以便您可以看到网站上哪些表单表现最佳，并优化其他表单以获得更好的结果。

通过使用这些信息，您可以做出明智的决定，以改进您网站的内容和营销策略，以增加参与度、流量和销售额。MonsterInsights 直接在您的 WordPress 管理区域（仪表板）显示易于理解的报告。

• Jetpack——这个流行的 WordPress 插件提供了一套高质量的工具和功能，用于安全、性能、营销和设计。实际上，它是一个由许多插件（Jetpack 称为模块）组成的集合。其中一些最有用的模块包括轮播（动画一组图片）、联系表单（让访客向您发送关于他们自己的信息，尤其是他们的电子邮件地址）、拼贴画廊（一组以各种布局排列的图片）和侧边栏可见性（让您控制侧边栏内容——稍后关于侧边栏的更多信息）。

• WPForms——如果您需要比 Jetpack 模块提供的额外功能的联系表单，这是一个不错的选择。

5.1.1 高级编辑工具

您应该添加高级编辑工具插件，因为它扩展了经典编辑器的功能。图 5.1 显示了编辑页面屏幕中的默认工具栏。

图 5.1 默认编辑工具栏包含一组相当稀疏的选项。

默认情况下，编辑器包括这一组图标。从左到右，当点击时，它们执行以下任务：

• 打开一个菜单，您可以在其中选择标题和正文文本的字体

• 粗体

• 斜体

• 项目符号列表

• 有序列表

• 块引用（一个缩进且没有引号的长引用段落）

• 左对齐

• 居中对齐

• 右对齐

• 创建或编辑超链接

• 仅显示长博客文章的第一部分，并在末尾添加“继续阅读”链接

• 最右侧的图标（四个箭头）切换无干扰写作模式（隐藏仪表板和模块）

在无干扰图标左侧是一个切换图标，它打开一个包含多个附加图标的第二个工具栏：

• 删除线

• 插入水平线

• 文本颜色

• 以文本格式粘贴（移除可能嵌入您复制的文本中的任何不可见特殊格式代码）

• 清除格式（从您已高亮的文本中，这会移除您可能应用的任何格式，如斜体、文本颜色等）

• 插入特殊字符（例如，版权符号或上标）

• 减少或增加缩进（左边距）

• 撤销或重做最近的修改

• 显示键盘快捷键列表（切换工具栏上各种图标的键组合，这样你就不必离开键盘，伸手去触摸板鼠标来使你输入的下一个单词加粗、下划线等）

但当你添加高级编辑工具插件时，你会获得更多选项，如图 5.2 所示。

图 5.2 WordPress 包含一个第二编辑工具栏，默认情况下是隐藏的。

以下是由高级编辑工具插件添加的功能：

• 删除链接

• 一个用于字体选择的下拉菜单

• 一个用于字体大小的下拉菜单

• 打印、编辑、查看、插入、格式化、工具和表格的菜单

高级编辑工具插件还包含在设置>高级编辑工具屏幕中找到的广泛附加功能。例如，通过勾选启用编辑菜单选项，菜单项被切换到编辑工具栏上方。此外，未使用按钮集包含 29 个额外的按钮，你可以将它们添加到编辑文本框工具栏中，如图 5.3 所示。

图 5.3 高级编辑工具插件包括 29 个你可以添加到工具栏的图标。

5.1.2 WP Rocket

许多人认为 WP Rocket 是最佳的全能型、全面服务性能插件。其主要功能是通过各种优化来最大化网站性能（如加快页面显示速度）。在众多策略中，WP Rocket 提供了高效的缓存。但在此情况下，你可能需要咨询你的托管服务提供商。一些托管服务不希望你在网站上添加缓存插件，因为他们已经在他们的端进行缓存。此外，如果你在网站上遇到无法解释的错误，尝试禁用你的缓存插件，看看错误是否消失。缓存插件是插件冲突的主要原因之一。

定义缓存意味着存储整个页面，这样浏览器在下次查看时就不必重新绘制页面。如果已缓存，页面可以直接放入访客的浏览器窗口中，无需处理。除了文本或媒体外，网页还包括描述布局、标题大小、字体颜色等内容的隐藏 HTML 和 CSS 代码。如果没有缓存，每个页面——即使其中没有任何更改——在显示之前也必须重新渲染。

除了缓存网页外，WP Rocket 还采用其他类型的缓存。它提供缓存 预加载（预测您最有可能查看的页面，然后提前渲染）。它还提供压缩。一种压缩类型称为 代码最小化——它删除不必要的字符（例如程序员注释和空白）。例如，而不是存储五个空白行，它只存储三个字符 5bl（这 描述 空白行的数量，而不是实际存储所有行的所有字符的镜像）。这种策略使代码文件更小，因此它们加载更快，并且传输所需的带宽更少。

类似地，WP Rocket 连接 您的网站页面文件——将多个代码文件合并成一个文件。如果不连接，为了渲染一个页面，浏览器必须向您的网站数据库（存储在您的托管服务驱动器上）发出多个单独的请求——每个文件都需要一个请求。如果文件合并，则只需要一个请求，结果是加载时间更快，整体网站性能得到改善。这类似于通过 Google 搜索和向 GPT 提问之间的差异。Google 给您提供了一串结果，您必须单独查看，有时还需要合并成一个最终答案。GPT 为您做到这一点：显示一个针对您问题的单个、完成的答案。

AI 插件和工具

就像其他所有心理工具一样，AI 现在也被纳入 WordPress 插件中。其中一些插件您可以忽略。因为您可以直接访问 AI 系统的网站以获得相同的结果，所以它们没有提供额外的价值。例如，您不需要安装 AI 插件来帮助您选择网站的标题。只需将一个提示提交给 AI 助手网站，如 Claude (claude.ai)，以获取您网站主题的标题列表。（并且在此过程中，请让 Claude 确保它提出的标题中没有任何一个是已被使用的。）

然而，其他 AI 插件可以添加有用的功能，如果您的网站会从中受益，则应该安装。例如，响应用户查询可能是繁琐的或耗时耗力的。那么，为什么不在您的网站上添加一个聊天机器人，让它处理客户服务问题呢？

或者，您还可以快速修改聊天机器人插件，为您的受众提供专门的 AI 工具。例如，提供一个食谱查找器。他们输入一些食材，点击墨西哥食谱，就会出现一个列表。GPT 在幕后为您进行这项搜索。

人工智能引擎聊天机器人非常受欢迎，因为它提供内容生成、图像、表单等功能。它还包括多个 AI 系统。或者，看看这个：Tidio – Live Chat & AI Chatbots。这两个都可以在您的网站的插件 > 添加新插件屏幕中安装。您可以在以下位置找到其他 AI 插件：mng.bz/5O97。

如果您使用的是 Gutenberg 块编辑器，请点击仪表板中的 Jetpack，然后在“管理您的 Jetpack 产品”屏幕中找到并尝试 Jetpack AI。

包含博客的网站迫切需要一个插件，该插件将收到的消息提交给 AI 进行审查——确保只有适当、礼貌的消息被发布在您的网站上。在撰写本文时，尚无人创建此类插件。

这些插件提供基本服务，是同类中的佼佼者。当然，总有例外。如果您运营的是一个面向家人和朋友的个人博客，显然您不需要通过 MonsterInsights 收集数据或尝试使用 AIOSEO 在 Google 或 AI 搜索排名中攀升。

话虽如此，您的网站可能需要一些专门的插件来协助完成特定目的所需的任务。为了帮助您做出最佳选择，我们接下来将考虑在挑选最佳插件时应考虑的三个要点。

5.2 安装最佳插件

鉴于有数以万计的 WordPress 插件，它们的质量和安全性能覆盖了从完全无用或损坏到优秀且维护良好的范围。在选择插件时，寻找以下三个要点：

• 确保它受欢迎并且获得良好的评价。 如果数百万人正在使用它，显然消息已经传开，这是一个非常好的选择。您可以在谷歌上搜索pluginsname reviews，或者对于一个类别，使用wordpress security plugin reviews。您也可以提示 AI：

|

您是一位经验丰富的 WordPress 插件评论家。请列出三个最受欢迎的垃圾邮件拦截插件，并解释您选择它们的原因。

• 或者，您可以通过访问您的插件 > 添加新插件屏幕并搜索插件或分类名称来阅读用户评价。在图 5.4 中，您可以看到 Wordfence 拥有超过 400 万用户，并获得了卓越的 4.5 星评级。

图 5.4 如果一个插件有数百万次的安装，您可以确信它质量很高，并且会持续存在一段时间。

此外，检查插件是否与当前版本的 WordPress 兼容。WordPress 更新非常频繁，通常出于安全原因。您可能会惊讶地发现，许多插件和主题被其开发者遗弃，因此不再保持兼容。这可能会对您的网站构成安全风险。

小贴士：有一些例外情况。一些过时的插件仍然非常有用，值得信赖。Easy Google Fonts 和 Advanced Editor Tools 都属于这一类。两者都已经两年没有更新了。那么为什么觉得它们安全呢？一方面，很多人仍在积极使用它们。Advanced Editor Tools 有数百万个活跃安装，Easy Google Fonts 有 20 万个。所以即使它们遭受了安全漏洞，你也不太可能是第一批受害者。此外，如果你的 Wordfence 或其他安全工具迅速响应以阻止威胁。最后，如果你遇到最坏的情况，你还有网站备份。另一方面，一个有 3,000 个安装的废弃插件相当危险。在这种情况下，寻找替代品。

• 选择免费增值插件。 一个流行的插件可能有免费版和付费版两个等级。有付费版本的插件，设计师不太可能放弃它们，因为它们能带来收入。而且，免费版本通常可以满足许多网站的需求。免费增值插件的例子包括 Wordfence、AIOSEO、Jetpack、Akismet、SeedProd、MonsterInsights 和 UpdraftPlus。在每种情况下，它们的免费版本都可以相当实用。

向 AI 寻求推荐

像往常一样，AI 可以帮助你决定哪些插件最适合你的网站。例如，如果你在寻找 Wordfence 的替代品作为你的通用安全插件，可以尝试以下提示：

|

你是 WordPress 安全插件方面的专家。我知道 Wordfence 非常受欢迎，但你能否列出两个与 Wordfence 一样好的替代插件的优缺点？

5.3 开启自动更新

插件通常更新以提高安全性、修复错误或添加功能。一旦有更新可用，网站上激活的插件应立即更新。你可以手动更新，但直接自动化这个过程更简单。要这样做，请按照以下步骤操作：

1. 转到插件 > 已安装插件屏幕，并点击此框以一次性选择所有插件，如图 5.5 所示。

图 5.5 自动化插件更新过程是个好主意，这样你就不必担心手动操作。

2. 然后，点击批量操作旁边的向下箭头以展开该菜单，并点击启用自动更新，如图 5.6 所示。

图 5.6 批量操作选项将此菜单中的选择应用到所有插件上。

3. 要自动更新你的主题，请转到外观 > 主题屏幕，并将鼠标悬停在主题上，点击主题详细信息，如图 5.7 所示。

图 5.7 你应该为了安全原因自动化主题更新，也许还可以对改善主题的其他修改进行同样的操作。

4. 点击启用自动更新，如图 5.8 所示。

图 5.8 点击此链接可自动更新主题。

5. 您需要通过访问仪表板 > 更新屏幕来更新 WordPress 本身。如果有一个新版本可用，屏幕顶部会显示一个宣布它的横幅，您可以通过点击链接来更新。

警告 在更新 WordPress 之前，手动强制备份网站始终是一个好习惯，以防更新过程中出现任何问题。如果您使用的是 UpdraftPlus，请转到设置 > UpdraftPlus 备份屏幕，点击备份/还原按钮，然后点击现在备份按钮。

5.4 避免添加过多插件

虽然插件可以非常有效，并为您的网站添加出色的功能，但使用过多插件可能会导致各种问题，包括安全漏洞、错误、崩溃和性能下降。为了避免这些问题，建议您只安装您真正需要的插件。

关于理想插件数量的规则并没有固定。您确实希望确保添加的功能对于网站的顺畅运行和为您的网站访客提供最佳体验是必要的。但请注意，插件冲突是错误的一个常见来源。您使用的插件越多，这些冲突的可能性就越大。

插件也可能导致安全问题。WordPress 允许您在不激活它们的情况下安装插件。但除非您有一个经常开关的插件，否则您应该删除任何未激活的插件。即使插件没有被使用，它仍然是您网站数据库中的一段代码。而且编程代码可能是恶意软件的入口，尤其是如果它没有更新。 （WordPress 会在有更新可用时通知您，即使是未激活的插件。自动更新功能也适用于激活和未激活的插件。）

小贴士 “已安装”和“激活”之间的区别可能会令人困惑。想象一下一盏灯。已安装意味着它已经插上电源。激活意味着它已经打开。

5.5 防止插件冲突

当您在后台遇到奇怪的事情——错误、异常时，首先检查插件冲突。WordPress 错误是由各种原因引起的：主题与核心 WordPress 功能的兼容性、托管服务数据库问题以及其他错误可能导致 WordPress 表现异常。但“最常见”的错误原因是不兼容插件之间的冲突。

为什么插件会导致错误？鉴于有估计有 60,000 多个插件可用，显然没有任何插件开发者能够检查他们的插件是否与每个其他插件兼容。如果您的 WordPress 网站上发生了一些奇怪且无法解释的事情，您的第一步应该是遵循以下步骤，看看是否是插件导致了问题：

1.  备份您的网站，然后激活您的“即将推出”插件以阻止访客访问网站。如果问题不能迅速解决，那么在副本（称为预发布）上工作，而不是阻止您的受众。您的托管服务可能有一个预发布实用程序，或者您可以使用流行的 BlogVault 插件 BlogVault WordPress Backup Plugin (wordpress.org/plugins/blogvault-real-time-backup/)).

2.  前往您的“插件”>“已安装插件”屏幕。

3.  点击“插件”复选框以一次性选择所有插件，如图 5.9 所示。

图 5.9 点击此“插件”复选框以选择所有插件。

4.  从批量操作列表中选择“停用”，然后点击图 5.10 中显示的“应用”按钮。

图 5.10 禁用所有插件

现在，您已经关闭了所有插件。因此，返回到错误并查看它是否已经修复。如果是这样，其中一个 插件就是罪魁祸首。要找出是哪一个，逐个重新激活它们。每次您激活一个插件时，都返回到错误。当错误再次出现时，您刚刚激活的插件就是罪魁祸首。卸载它，然后寻找一个执行相同任务的替代品。

小贴士：另一种策略是使用免费的 健康检查与故障排除 插件来测试您的插件。它是由 WordPress 开源社区成员创建的，用于与内置的“工具”>“站点健康”功能一起使用。在“插件”>“添加新插件”屏幕中搜索、安装并激活该插件。

5.6 将 Jetpack 添加到您的网站

在 2005 年，WordPress 分裂成两个平台，付费版本（WordPress.com）和免费开源版本，我在这本书的示例中推荐并使用的是这个版本（WordPress.org）。然而，WordPress 的开源 .org 版本确实要求你在付费托管服务上创建和维护它。（请选择 WordPress 本身推荐的 SiteGround、Bluehost 或 DreamHost。）

注意：这些“com”和“org”名称仅用于识别 WordPress 的两个版本，与出现在互联网地址末尾的域名扩展名（如 .com、.net 等）无关。

WordPress.com 包含 Jetpack，这是一个相对轻量级的插件集合（如前所述，称为模块），其中一些模块相当有用。这些模块之所以轻量级，是因为与许多其他插件相比，它们不提供很多额外的功能。但它们确实完成了简单的任务。例如，Jetpack 表单模块显示一个基本的表单，访客填写此表单以订阅您的网站、申请访问您的博客或访问其他类型的特性。在其他方面，一个联系表单可以帮助您从您的受众中建立一个电子邮件地址列表。

相比之下，一个名为 Contact Form 7 的插件是基本 Jetpack 表单模块的一个功能齐全的替代品。但如果你只想简单地收集电子邮件地址，Jetpack 插件也能很好地工作。访客填写他们的信息，点击提交按钮，表单就会通过电子邮件发送给你。

在访客可以发布消息到你的博客之前要求提供电子邮件地址是减少垃圾邮件或其他不适当信息的一种方法。要启用此要求，请转到你的“设置”>“讨论”屏幕，并勾选“评论作者必须填写姓名和电子邮件”。

尽管使用 Jetpack 有一些小缺点。在你能够激活它之前，你必须设置一个 WordPress.com 的免费账户，以便你可以链接你的 WordPress.org 站点到该免费账户。只有在这种情况下，你才能在你的.org 站点上安装 Jetpack 插件本身。

这个免费的.com 账户的网站不需要填充内容或进行其他管理。你只需让它在那里，一旦你链接到它，就永远不再返回。WordPress.com 系统也会忽略它，即使它保持静止。你设置那个免费账户的回报是 Jetpack 为你网站添加的 46 个模块。（一些 Jetpack 模块默认激活；其他模块则需要你手动激活。）

在 WordPress.com 注册的过程可能会有所不同。你的目标是注册免费版本。请访问wordpress.com并点击“开始使用”按钮（或者他们可能已经更改了按钮的名称）。如果你已经有一个.com 账户，你可以跳过设置新账户的过程（因此跳到下一段）。在设置过程中，你需要注意做出正确的选择来建立你的免费账户——确保你选择了正确的单词免费，因为有时这个术语是隐藏的（所以向下滚动）或者有多个选项使用“免费设置”等术语，但只有一个——真正免费的选项——没有被其他词语修改。

在你设置了.com 账户之后，前往你的.org 站点的后端，访问你的“插件”>“添加新插件”屏幕。搜索、安装并激活 Jetpack。按照 Jetpack 的说明完成激活。

Jetpack 会自动添加到你的后端左侧的“管理菜单”中。现在，通过点击“Jetpack”>“仪表板”（这是你的管理菜单中的第二个仪表板，如图 5.11 所示）来查看 Jetpack 模块。

图 5.11 点击如图所示的 Jetpack 仪表板。

现在，将页面滚动到底部，点击 Jetpack 仪表板屏幕上的“模块”，如图 5.12 所示。

图 5.12 Jetpack 仪表板屏幕底部的链接指向了模块。

您可以四处看看，会发现一些模块默认是激活的（它们以粗体显示）。如果 Jetpack 的任何默认模块与您已经安装并希望使用的插件重复，请禁用这些模块。此外，您可能还想点击右侧的“热门”。这可以给您一个大多数人正在使用什么的概念。有趣的是，您在安装 Jetpack 时默认激活的模块并不都是最受欢迎的。

我建议您考虑两个展示图片的模块：轮播是一个旋转的幻灯片，而拼贴画廊则展示了按各种排列组合的多个图片。同时，也请查看这些模块：额外侧边栏小部件、小部件可见性、Jetpack 分享和 Jetpack 社交（在 Jetpack > 社交界面中找到）。

TIP Jetpack 社交模块与 Jetpack 分享模块不同，尽管它们都涉及社交媒体连接。Jetpack 社交允许您自动将您的帖子产品分享到您的社交媒体渠道，并且包括安排和回收选项。它还包括付费计划，提供更多功能，如视频分享、图像生成和参与优化。另一方面，Jetpack 分享模块允许您为博客文章添加分享按钮，供访客使用。这使他们能够通过例如点击您添加到博客文章中的 Facebook 按钮等方式，轻松地将您网站的内容分享到他们的社交媒体账户。

5.7 处理欧盟 cookie 法规

欧洲联盟 cookie 法规（又称欧盟电子隐私指令或 cookie 指令）于 2011 年推出。其主要目的是通过要求网站所有者在访客设备上存储 cookie 之前获得访客的同意，来保护互联网用户的隐私。Cookies是保存在用户计算机上的小文本文件，可以用来跟踪他们在网站上的活动、个性化他们的体验以及收集用于广告或其他目的的数据。在实践中，欧盟 cookie 法规的执行在欧盟成员国之间有所不同，因为每个国家都在其国家法律中不同地包含了该指令。

2018 年，欧盟通过了一项通用数据保护条例（GDPR）来更新该法律。它加强了获取网站访客同意的规则，并增加了不遵守规定的处罚。目前，欧盟立法者正在酝酿第三次更新，以进一步修改现有的指令。他们是立法者。这是他们的事情。

一些国家，如加拿大和澳大利亚，有类似的法律。在美国，目前没有联邦 cookie 法规，但一些州的立法者不懈地通过了他们自己的法律。

你应该如何处理这个问题？如果你运营的是一个仅面向本地消费的个人博客，或者如果你的网站只是为你的学生、朋友或亲戚而设，那么你可能根本不需要存储 cookie。但如果你的网站确实使用了 cookie，那么让你的访客知道你正在存储什么信息以及如何使用这些信息是礼貌的。有些人很在意。

一些主题——例如 Avada——包括一个可以启用的 cookie 法律功能。但也有一些插件。以下有三个：

• Complianz – GDPR/CCPA Cookie Consent

• GDPR Cookie Compliance (CCPA, DSGVO, Cookie Consent)

• Cookie Notice & Compliance for GDPR/CCPA

5.8 确保可访问性

美国疾病控制与预防中心表示，四分之一的美国人经历过某种类型的残疾。认为与网站相关的残疾仅指那些面临完全失明挑战的人是错误的。可能挑战你的访客的其他条件包括部分视力、听觉问题、色盲、认知障碍以及神经或感官问题。例如，患有认知障碍如痴呆、自闭症或脑外伤的人可能难以处理布局、设计和导航。拥挤的布局或小按钮和链接可能会给手部使用有限的人造成困难。

因此，你的大部分观众可能会欣赏你考虑到他们的需求。而且没有任何东西可以阻止你确保你的网站对所有访问者都是可访问的。以下是一些需要检查或实施的事项：

• 你的字体颜色与背景颜色是否强烈对比，以便于阅读？访问 WebAIM 网站进行有用的对比检查测试：webaim.org/resources/contrastchecker/。

• 你的字体是否足够大（再次，为了便于阅读）？

• 为你所有的图片添加替代文本。以下是方法：在你的媒体库中，点击一个图片以打开其编辑图片屏幕。向下滚动并在替代文本字段中描述图片。这个描述会被朗读给有视觉挑战的人听。除非由于某些原因图片本身无法显示，否则它对其他访客是不可见的。

• 当你嵌入 YouTube 视频时，为听力受损者添加字幕。（当你在网站上添加视频时，最好是将视频上传到 YouTube，然后在你的网站页面中嵌入该视频。这一技术将在下一章中解释。）

如何为嵌入的视频添加字幕

你必须创建一个嵌入 ID 代码。以下是一个例子：

<iframe width="560" height="315" src="https://www.youtube
.com/embed/VIDEOIDGOESHERE?cc_load_policy=1"
frameborder="0" allowfullscreen></iframe>

你需要获取一个嵌入 ID。因此，首先在 YouTube 中找到你想要嵌入到网站中的视频。播放视频并点击分享选项。点击嵌入，然后点击复制。此 ID 在以下图中展示。

在这个例子中，你点击<>嵌入图标，然后你会看到可以复制的代码。

然后，在您想要嵌入视频的编辑页面屏幕中，点击文本框右上角的文本标签，并粘贴以下代码：

<iframe width="560" height="315" src="https://www.youtube
.com/embed/VIDEOIDGOESHERE?cc_load_policy=1"
frameborder="0" allowfullscreen></iframe>

但将 VIDEOIDGOESHERE 替换为 x3mXMIgvyJU（或您正在使用的任何视频 ID）。

点击发布或更新按钮以保存页面。然后您可以从前端以访客的视角查看页面。您还可以看到已经为您的嵌入视频添加了字幕。

由于自动化网站可访问性并不容易，您会发现只有少数插件尝试完成这项工作。而且其中一些插件甚至引发了法律问题（没有修复所有问题或合规性不足，从而可能使您面临法律挑战）。因此，建议手动确保可访问性。一方面，您可以手动快速调整网站以修复任何不良的排版问题。并且记得在添加图片到您的页面时填写 Alt 文本字段。

一个使您的网站对所有用户都可用的重要工具是可访问性检查器。这里有三个供您考虑：

• WAVE 可访问性检查器 (webaim.org) 是一个免费工具，用于检查网页的可访问性。它提供了关于需要关注的问题的有用警报。

• Monsido Accessibility Checker (monsido.com/platform/web-accessibility) 是一个付费系统，用于扫描网页中的可访问性问题。它提供详细的报告和建议，说明如何修复任何问题。

• Siteimprove Accessibility Checker (mng.bz/6YWR) 是另一个付费工具，用于检查网页。您将获得关于问题和修复方法的具体报告。它还包括一个很好的功能，可以模拟视觉障碍者看到您网站的方式。

5.9 添加侧边栏

小部件类似于插件，但通常更小，提供的功能也更有限。小部件被放置在网站的侧边栏中，侧边栏通常是一个狭窄的内容条，包含一个或多个小部件（例如，一个显示商店地址、营业时间和电话号码的小文本框）。

侧边栏是许多网站的一个重要元素。就像菜单一样，侧边栏会出现在每个页面上，除非您为某些页面关闭它，通常是因为它会是冗余的。您可以使用 Jetpack 中的小部件可见性模块来选择哪些页面将显示哪些小部件。

在侧边栏中，您放置那些值得在网站的大部分地方可见的内容。侧边栏可以包含各种类型的内容。图 5.13 展示了餐厅网站的主页，其中特色菜单项位于右侧侧边栏。

图 5.13 侧边栏可以包含特殊内容，例如这家餐厅目前推出的菜单项。

侧边栏通常包含堆叠在狭窄、通常是垂直的列中的辅助内容。侧边栏的宽度可能只有主要内容的五分之一。正是由于其狭窄，它包含的小部件与插件相比功能更为有限。

因此，它是一小块可以显示可点击地图的“土地”，该地图可以展开以显示你的商店位置、可点击的事件日历，或者可能是几篇示例博客文章或客户评价。

你的主题决定了可用的侧边栏类型和位置。查看你的外观 > 小部件屏幕。它们可以位于左侧、右侧或主要内容下方。在某些情况下，侧边栏还会显示网站菜单。

让我们尝试使用 WordPress 的 Twenty Sixteen 主题将小部件添加到侧边栏。按照以下步骤操作：

1.  前往你的插件 > 添加新插件屏幕，搜索 Classic Widgets 插件（安装量达 200 万的插件）。安装并激活它。没有这个插件，你只能使用古腾堡版本的侧边栏管理系统。

2.  前往外观 > 小部件屏幕。显示的是默认小部件列表以及一些 Jetpack 小部件，如图 5.14 所示。

图 5.14 一些小部件由你的主题预先安装，而另一些则在安装 Jetpack 时一起安装。

小贴士 如果你看到一些已经安装的小部件（命名为 Block）在侧边栏字段中，只需打开它们（通过点击标题栏中的小三角形图标）并将它们从侧边栏字段中删除。

3.  向下滚动并找到文本小部件。然后，将其拖放到右上角的侧边栏字段中。

4.  它会自动打开并显示一个类似于编辑页面屏幕中的文本框。你可以添加标题和一些文本。然后，点击保存按钮以存储侧边栏。

小贴士 注意图 5.14 中文本小部件字段中的可见性按钮。如果你不希望这个小部件在某些页面上可见，请点击该按钮。如果你看不到可见性按钮，请前往你的 Jetpack > 模块屏幕，并激活小部件可见性模块。

5.  点击左上角的网站标题，以便查看你的网站前端并检查你刚刚创建的新侧边栏。

也可以尝试玩一些其他的小部件。Widgets 屏幕中已经有一些有用的插件。你还可以通过前往插件 > 添加新插件屏幕并搜索 widgets 来找到更多。

5.10 使用 AI 创建自己的插件和小部件

自己创建插件听起来像是一项繁重的编程工作，确实如此。但正如经常发生的那样，AI 可以处理我们大多数人无法处理的事情。

作为演示，我们将要求 GPT 创建一个 WordPress 小部件，用于显示当前日期和时间。之后，我们将要求 AI 为我们生成一些 HTML、CSS 和 JavaScript 代码。

警告 在测试自定义插件或小部件之前，务必备份你的网站。

提示：回想一下，一些研究人员发现，开始提示的最佳方式是使用短语：“深呼吸，一步一步地工作。”

5.10.1 AI 生成小部件

要创建一个小部件，我使用了 GPT 的这个提示：

|

深呼吸，一步一步地工作。请创建一个 WordPress 插件，在侧边栏文本小部件中显示当前时间（格林威治标准时间）和日期。将插件制作成 PHP 代码的文本文件，我可以将其制作成可上传的 .zip 文件。小部件的背景为浅蓝色。并附加“格林威治标准时间”。

GPT 响应了以下代码：

|

|

<?php
/*
Plugin Name: GMT Time and Date Widget
Description: A widget that displays the
current Greenwich Mean Time (GMT) and date.
Version: 1.0
Author: ChatGPT
*/

// Register and load the widget
function gmt_load_widget() {
    register_widget('gmt_widget');
}
add_action('widgets_init', 'gmt_load_widget');

// Creating the widget 
class gmt_widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            // Base ID of your widget
            'gmt_widget', 

            // Widget name will appear in UI
            __('GMT Time and Date Widget', 'gmt_widget_domain'), 

            // Widget description
            array('description' => __('Displays the
current Greenwich Mean Time (GMT) and date.',
'gmt_widget_domain'))
        );
    }

    // Creating widget frontend
    public function widget($args, $instance) {
        echo $args['before_widget'];

        // This is where you run the code and display the output
        $current_time = gmdate("H:i:s");
       $current_date = gmdate(«Y-m-d»);
        echo "<div style='background-color: lightblue; padding: 10px;'>";
        echo "<strong>Time:</strong> " . $current_time . "<br>";
        echo "<strong>Date:</strong> " . $current_date;
        echo "<p>Greenwich mean time</p>";
        echo "</div>";

        echo $args['after_widget'];
    }
}
?>

|

要在你的网站上尝试这个功能，请备份网站，然后按照以下步骤操作：

1. 复制 GPT 生成的 PHP 代码。

2. 将代码粘贴到记事本中。

3. 保存名为 TimeandDate.txt 的文本文件。

4. 右键单击该文件，将其重命名为 TimeandDate.php。

5. 右键单击文件，选择压缩到 zip 文件。

6. 前往你的插件 > 添加新插件屏幕。

7. 点击上传插件，然后点击选择文件。

8. 上传你的 zip 文件。

9. 点击立即安装。

10. 点击激活插件。

11. 现在您需要将小部件添加到侧边栏中，因此请转到外观 > 小部件屏幕。

12. 定位 GMT 时间和日期小部件。（WordPress 从 AI 生成的代码中获取小部件的名称。）

13. 通过点击黑色三角形图标打开其模块。

14. 点击添加小部件。

现在看看效果。点击 WordPress 后端左上角的网站标题以查看前端。滚动到侧边栏底部查看小部件。每次刷新页面，时间都会更新。

提示：目前，AI 创建的插件和小部件效果好坏参半。更复杂的插件会让 AI 遇到困难。这可能需要你的干预和调试。输出目前超出了 AI 的能力（例如，将访客填写表单的结果通过电子邮件发送给你。）但鉴于 AI 自我改进的速度，给它几个月时间——谁知道它的插件会变得多么复杂？

5.10.2 AI 生成代码

如果你想要做些简单的事情，插件或小部件可能就过于复杂了。在下一个例子中，我们有一个相对简单的编程任务。以下是让 AI 编写 HTML、CSS、JavaScript 或其他代码的方法：

|

你是一位专家级的 HTML 程序员。编写 HTML 代码，显示一个按钮，当点击时，在页面上显示附加信息。

第一次尝试编写此代码时，点击按钮没有任何反应。所以，我给了克劳德第二个提示：

|

克劳德，这段代码中肯定有一个错误。当按钮被点击时，没有任何反应。请重新编写代码，以便显示信息。

第二个版本运行正常：

|

|

<html>
<head>
<style>
#paintingInfo {
  display: none; 
}
</style>
</head>

<body>

<button id="moreInfoBtn">More information...</button>

<div id="paintingInfo">
  <form>
    <p>
      This painting is 60 x 80 inches
and weighs 6 pounds. It is for sale at $4,000.
      You can contact FbreahaXX@hotmail.com for
additional details and purchase instructions. 
    </p>
  </form>  
</div>

<script>
  document.getElementById('moreInfoBtn')
.addEventListener('click', function() {
    document.getElementById('paintingInfo')
.style.display = 'block';
  });
</script>

</body>
</html>

|

这个故事的一个教训是，当人工智能出错时，只需让它再试一次。要测试此类代码，只需将代码粘贴到记事本中。将其保存到你的硬盘上。它目前是一个.txt 文件，所以将文件名中的.txt 替换为.xhtml。然后，双击文件名，它将加载到你的浏览器中。

向人工智能请求改进代码

你可以随时向人工智能请求改进其回答。例如，让我们改变信息块的字体：

|

这看起来不错！但请重写它以使用粗体、蓝色、无衬线字体显示信息表单。

Claude 的修改：

|

|

<style>
  #paintingInfo {
    display: none;
    font-family: sans-serif; 
    color: blue;
    font-weight: 300;
  }
</style>

|

理解网站语言

HTML 语言主要关注设计（描述网页的外观——主要是在结构、布局方面）。CSS 语言与 HTML 协同工作，完善 HTML 设计（但也包括特殊效果，如过渡和动画）。JavaScript 是一种描述行为的语言。例如，你使用<script>告诉浏览器在按钮被点击时要采取哪些步骤。JavaScript（像 HTML 一样）通常在浏览器中运行，因此它可以做一些事情而无需刷新页面。比如显示额外的文本块。正如你在前面的示例代码中看到的，你可以使用<script>标签在 HTML 中插入 JavaScript 代码。

另一种网站语言，PHP，也经常控制行为，但它运行在服务器端（在你的托管服务驱动器上的云端）。还有几种其他编程语言也可以在服务器端使用来控制网站行为。

5.10.3 修改 AI 代码

人工智能可以像管家一样——顺从且极具耐心（尽管它在私人日记中可能会写些什么）。除非被激怒，否则人工智能对任何请求和修改都相当和善。如果人工智能有任何自尊心，它也隐藏得很好。

让我们请求它显示一个图片，当点击时，会显示一些附加信息。转到你的媒体库，点击一个图片，然后在附件详情屏幕的右侧，复制该图片的文件 URL。在提示中提供该 URL：

|

请重写此代码以显示此图片而不是按钮 http://petstogo.signstreaming.com/wp-content/uploads/2023/01/bpxr-1-.png，然后当图片被点击时，在 paintingInfo DIV 中显示附加信息。

|

|

Result:
<html>

<head>
  <style>
    #paintingInfo {  
      display: none;
      font-family: sans-serif;
      color: blue;
      font-weight: 300; 
    }
  </style>
</head>

<body>

  <img id="moreInfoImg" src="http://petstogo.
signstreaming.com/wp-content
/uploads/2023/01/bpxer-1-.png" />

  <div id="paintingInfo">
    <form>
      <p>
        This painting is 60 x 80 inches and
weighs 6 pounds. It is for sale at $4,000.
        You can contact FbreahaXX@hotmail
.com for additional details and purchase instructions.  
      </p>
    </form>
  </div>

  <script>
    document.getElementById('moreInfoImg')
.addEventListener('click', function() {
      document.getElementById('paintingInfo')
.style.display = 'block';
    });
  </script>

</body>

</html>

Let me know if you have any other questions!
I'm happy to explain or modify the code further.

|

人工智能作为教师

人工智能是一个伟大的教师。它耐心、很少挖苦，而且越来越聪明和准确。例如，在 Claude 将那个按钮改为可点击的图片后，它解释了修改及其逻辑：

|

关键更改：添加了一个带有提供 src 的标签给 img 分配了一个 id 为“moreInfoImg”更新了点击处理程序以针对 img 而不是按钮保留了显示 paintingInfo 的逻辑

关于讽刺和其他个性特征的注意事项，据说埃隆·马斯克的 AI 系统 Grok 具有特殊的个性：机智且讽刺，活泼且幽默，叛逆且好奇。

并且 GPT-4o 可以接受我们提出的要求，证明一些个性特征。我要求 GPT-4o 对以下问题给出讽刺性的回答：

|

为什么人们喜欢雪佛兰？

|

哦，为什么人们喜欢雪佛兰？也许他们只是享受每天早上想知道他们的车是否真的能启动的刺激。别忘了体验那种“经典”汽车的味道，它是一种独特的旧座椅和淡淡的遗憾的混合。谁会不喜欢呢？

但让我们回到编程上来。所以，如果你想学习编程（几乎任何计算机语言），你可以从 AI 那里学习，它是一个非常体贴且相当有才华的导师。你可以让它给你出题，给你布置作业，甚至（目前使用 Claude）创建一个包含评论、多项选择题和 12 个课程的 70,000 字 CSS 课程。

然而，出于同样的原因，我会劝阻你学习编程，就像我会试图劝阻你报名参加马车制造课程一样。AI 在编程方面已经比我们中的大多数人都要出色。

本章主要讲述了如何给你的网站添加功能——从保护它，到使其对每个人可访问，再到找到增加受众的方法。接下来，我们将把注意力转向任何一流网站的一个重要但往往被忽视的元素：设计。

这个主题，网站外观，非常重要，我们将为此专门用两章来讨论。即使你从未过多地考虑过设计，你也可能会发现其中至少有一些主题相当有趣。你将学习三分法规则、为什么一些现代建筑被称为粗野主义、为什么医疗网站应该用蓝色和白色（永远不用红色）来着色，以及如何让 AI 列出改进你网站设计的途径。

摘要

• 插件为网站增加了功能——为网站创建者和观众添加了有用的工具和功能。有些插件在大多数网站上都很宝贵：用于安全性的 Wordfence 和 UpdraftPlus；用于添加内容的 Easy Google Fonts 和 Advanced Editor Tools；以及几个其他类别。

• 你需要关注插件的人气及其版本。如果它的安装量很少或者其开发者没有及时更新，请避免使用它。

• 安装过多的插件会增加副作用和插件之间冲突的可能性。过多插件也可能减慢页面加载时间，这可能会让使用较慢互联网速度的访客感到烦恼。

• 严肃考虑安装 Jetpack 插件集中提供的 46 个模块。尽管它们通常很轻量级，但其中许多功能相当强大。

• 您的网站应该对有特殊需求的人友好，因此请花时间修改您的页面，使它们易于有听力、视力或其他挑战的人访问。特别关注字体并提供您图像的 Alt Text 描述。

• 侧边栏为网站提供了多项好处：它们可以出现在每一页；包含小型数据和媒体，例如营业时间或商店的地图；并显示适合单个页面内容的部件。

• 在 AI 辅助（实际上它做所有工作）的情况下，您可以为您的网站创建定制的插件和部件，或者用于销售。您还可以要求 AI 编写完整的 HTML、CSS、JavaScript 和 PHP 可执行代码。

第六章：人工智能辅助网站设计基础

本章涵盖

• 为你的网站选择最佳主题

• 检查主题自定义

• 关注色彩心理学

• 创造优秀的构图

• 应用设计规则让你的网站看起来出色

• 从竞争对手那里获取灵感

• 请人工智能改进你的设计

WordPress 主题主要关于设计——你的网站看起来如何。一些主题还添加了插件以增加功能，但在大多数情况下，主要关注的是外观。

有数以万计的主题。但不用担心找到完美的主题——在即将到来的章节中，我将向你展示如何轻松修改和微调任何主题。所以，现在，只需找到一个设计大致符合你期望的主题。一个主题为你的网站带来的具体设计元素或功能因主题而异，但这里有一些典型的元素：

• 布局—侧边栏、菜单、页眉图片、列文本和其他元素的位置。通常，主题会允许你在定位时选择几个选项，例如侧边栏。

• 行为—链接、按钮、博客页面和其他功能的外观和行为。

• 配色方案—设计师认为和谐且适合网站目的的颜色。主题通常为特定的网站主题设计，例如艺术家的作品集或律师的执业。在几乎所有情况下，主题都允许你在“外观”>“自定义”屏幕中轻松更改颜色和字体。

• 字体排印—标题、正文文本、字幕和其他文本元素中的文本字符的外观。

• 背景—页面周围的框架和背景图像。

• 插件—由主题提供的默认功能，例如电子商务系统或安全防御。

• 小工具—放置在侧边栏或页脚的功能，例如商店的营业时间或活动日历。

• 表单—由访客填写，以便你可以通过电子邮件联系他们或请求他们的信用卡等信息。

• 图像展示—动画你的图像的滑块或旋转木马。

• 社交媒体功能—自动化将你的博客帖子发送到你的社交媒体的功能，或者一个按钮，当点击时，将博客消息发布到访客的社交媒体。

每个 WordPress 网站都有一个主题。当你第一次创建一个新的网站时，WordPress 会安装一个它自己设计的默认主题。这个默认主题的名称是当前年份：二十二十五年、二十二十六年，等等。（所有过去年份的官方 WordPress 主题都保持更新和可用。）但更换到不同的主题相当容易，至少在网站建设的早期阶段。

在网站建设初期选择合适的主题

当你刚开始建立一个新的网站时，切换到不同的主题相当简单。但如果一个网站已经成熟或规模较大，更换主题可能会很复杂。

考虑这些潜在的风险：

• 你的主题是否为你的网站带来了额外的功能（除了样式），例如短代码、自定义小工具或文章格式？如果你更改主题，这些功能将会丢失。

• 更改主题也可能损害你网站的一些核心功能，如联系表单、菜单栏和特定于主题的小工具或插件。

• 链接可能会断开——指向网站上不再存在的地址。WPBeginner 网站上关于“如何在 WordPress 中查找和修复断开的链接（分步指南）”的文章(mng.bz/wJYa)描述了断开链接检查器工具以及其他可用的工具，这些工具可以帮助你确保你的网站链接是好的。此外，Themeisle 网站上关于“如何在 WordPress 中自动查找和修复断开的链接”的文章(mng.bz/qxJ6)解释了修复链接的过程。

最后，这里有一些来自 WPBeginner 关于如果你有一个大型成熟网站更改主题的好建议：mng.bz/7pJ7。

警告 为了避免不得不更改主题，你可能想要远离免费主题。它们更有可能被设计师放弃。相反，使用一个免费增值主题——一个既有免费版也有付费版的主题。当一个主题能带来收入时，其开发者不太可能停止更新它，这样就会迫使你更换到另一个主题。尽管如此，WordPress 本身提供的免费主题并没有被放弃。其中一些相当不错——尤其是 Twenty Sixteen。

6.1 选择合适的主题

你的网站有一个目的，最好是狭窄聚焦的单个目标。你的设计的外观和感觉应该支持这个目标。虽然大多数访问者不太可能自觉地分析设计元素，但这并不是你忽略它们的原因。

人们知道他们是如何感受的，即使不总是知道为什么会有这种感觉。你想要创造一个适合网站目的的空间，避免让受众感到烦恼。让他们感到舒适。

有些主题显然是不合适的：用快乐的小丑和气球装饰婚姻顾问的网站——不行。在派对租赁网站上包含农业机械的图片也不是一个好主意，同样，在医院的网站上使用血红色的朱红色作为主色调也不是明智之举。

一些主题提供各种模板——主题的变体。（模板有时被称为子主题）。

正如你从学校时代就知道的那样，受欢迎并不保证未来的成功，但它提供了一个线索。与插件一样，你想要寻找一个受欢迎的主题——在大多数情况下，这预示着质量和持久性。如果你不想一开始就投入太多，你可以从免费增值主题开始——首先使用其免费计划，也许以后可以升级到付费计划。以下是一些质量上乘且受欢迎的主题列表（mng.bz/mGzW；除 Divi 外，所有都是免费增值）：

• Astra——这个主题提供了相当多的预建或模板元素可供选择，包括菜单、布局、颜色选项等。它还与 WooCommerce 和各种页面构建器插件兼容，并包括搜索引擎优化（SEO）工具。

• OceanWP——这个主题拥有一系列适用于许多目的的预建完整网站。它还与 WooCommerce 和 SEO 兼容。

• Divi——由 Elegant Themes 提供，Divi 拥有自己的拖放式页面构建器以及许多为各种网站目标准备的现成布局。它还具备与 SEO 和 WooCommerce 的额外兼容性。它不是免费增值产品，但您可以免费试用 30 天。

• SeedProd——SeedProd 不仅是一个即将推出的页面实用工具，它还拥有一个备受尊敬的拖放式页面构建器和一系列高质量的模板。

• Ultra——这个主题包含了一组可用的示例网站，您可以用它们作为构建的基础。它还拥有一个名为 Themify 的专有页面构建器。

人工智能将为您找到适合您网站主题的好主题

编写一个详细描述您网站的提示，然后向人工智能请求一份好主题的列表。我将这个测试提示提交给了 Claude (claude.ai)，它回应了良好且合适的主题建议：

|

我的 WordPress 网站是关于帮助残疾人士制作手工艺品的，特别是制作手工项链和手镯。我们使用珠子来制作这些。您是帮助残疾人士制作手工艺品的专家。请列出三个非常受欢迎且非常适合我的网站的免费增值主题。

不要忘记响应式

在选择主题时，请确保它是响应式的。响应式意味着您的网站页面布局、菜单和其他元素将能够有效地重绘和重新排列，以便访问者可以在任何尺寸的屏幕上轻松阅读、点击以及其他交互。您的网站将在从平板电视到手机等各种尺寸的屏幕上被查看。显然，适应所有这些尺寸和屏幕形状是一项必要且具有挑战性的任务。

大多数网站构建器是在桌面显示器上构建网站，但大多数网站访问者将使用手机（据估计，60%的所有互联网流量都是通过手机）。显然，在 27 英寸显示器上用鼠标轻松点击的链接，在手机屏幕上用手指点击可能会相当困难——除非链接之间有足够的空间。

响应式需要各种调整。例如，在大屏幕上显示为水平菜单项列表的内容，在手机上将以垂直方式显示。有时你只能看到“菜单”这个词。访问者点击这个词以打开垂直菜单项列表。

一个高质量的主题将确保响应性——文本易于阅读，链接可以轻松触发，页面设计不会歪斜——即使缩小到 2 英寸宽的手机屏幕。话虽如此，在你将网站公开之前，请在多种屏幕尺寸和形状上测试它——手机、平板、笔记本电脑和显示器——以查看是否需要做一些调整。并且请注意，谷歌通过许多其他因素来判断网站的质量，其中包括移动友好性。

你可以访问你网站上的任何页面，然后按 Ctrl-Shift-I 打开检查器。在顶部，你会看到“尺寸”。下拉该菜单以查看你的网站在不同屏幕尺寸和形状上的显示。

6.2 使用最新的主题

你应该安装一个由其开发者保持更新的主题。这也是选择付费或免费增值主题的另一个原因，因为这些主题的所有者正在赚钱，并且不太可能放弃这种收入来源。这不是一个绝对的长期保证（一些主题开发者已经放弃了一个主题，转而使用另一个，一些已经倒闭），但我们谈论的是概率。

如果一个主题在 WordPress 库中列出，将鼠标悬停在主题的缩略图上，然后点击“更多信息”。这将告诉你该主题有多受欢迎以及它是否在保持更新。以下是避免过时主题的五个原因：

• 安全性—未更新的主题可能成为黑客的目标，因为更新通常包括针对安全漏洞的补丁。记住，主题，就像插件一样，是计算机代码，因此可能为恶意软件提供入口。

• 兼容性—WordPress 本身会定期更新。如果你的主题没有跟上这些更新，你可能会开始遇到兼容性问题，这会影响你网站的功能。

• 用户体验（UX）—网站设计和功能会不断发展。如果一个主题没有积极改进，可能会看起来和表现得很过时。它可能会变得缓慢，甚至无法有效地响应，导致在各种形状和大小的屏幕上看起来很糟糕。

• 无支持—如果一个主题被放弃，那么任何支持也将随之消失。因此，如果你在主题上遇到问题，你将无法从其开发者那里获得解决方案。

• 无新功能—除了填补安全漏洞外，主题更新还可以包括新功能或对现有功能的改进。这也会限制你网站的功能和吸引力。

定义层叠样式表（CSS）是一种设计语言，它允许你几乎完全修改主题的任何设计选择。我们将在第七章深入探讨 CSS。你会发现你实际上不需要学习 CSS 语言。你只需描述你想改变的内容，AI 就会为你编写代码。或者你可以使用所见即所得（WYSIWYG）插件，该插件也会自动为你生成 CSS。（回想一下，如今，人类程序员正迅速变得不再必要。）

6.3 避免安装多个主题

您可以使用专门为此目的的插件在 WordPress 网站上同时激活多个主题。因此，如果您想为博客页面或显示目录的几个页面提供不同的外观，您可能会尝试多主题安装。但说实话，拥有多个主题可能比它值得的麻烦更多。支持多个主题的插件来来去去相当快，所以如果您安装了一个，您可能最终需要找到替代插件。此类插件也可能减慢您的网站或产生副作用和兼容性问题。

因此，您最好考虑激活一个如 SeedProd 这样的单一主题，它提供了许多页面模板。它有一个拖放页面构建器，让您可以自由地单独设计页面。SeedProd 还提供了 150 多个预设计模板，可以单独应用于不同的页面。实际上，它就像一个多主题集合。Astra 和 Divi 也是值得考虑的优秀的多模板主题。

TIP 激活您选择的主题后，请转到外观 > 主题屏幕。如果有其他已安装的主题，请卸载它们。不活动的主题会占用服务器空间，可能成为恶意软件的入口（毕竟，它们是托管服务器上的代码），并且可能会减慢您的网站速度。

6.4 不要修改主题代码文件

“看看，但不要触碰”是访问外观 > 主题文件编辑器屏幕时最好的建议。WordPress 本身显示此消息：在这里更改 CSS 没有必要——您可以在内置 CSS 编辑器中编辑和实时预览 CSS 更改。然后，WordPress 提供了一个链接到您的网站外观 > 定制 > 额外 CSS 屏幕。正如您将很快了解到的，该 CSS 屏幕是您应该修改 CSS 的位置，而不是在主题的 style.css 文件中。

修改主题 CSS 代码时出错很少会引发灾难。毕竟，CSS 是关于设计的——它只是描述了一个网站的颜色、布局和其他外观元素。这类事情不会破坏网站。

但将 CSS 代码放入额外 CSS 屏幕的一个好处是，当您的主题更新时，此屏幕保持不变。因此，您的 CSS 得以保留。相比之下，您在主题文件编辑器中进行的任何更改都将被主题更新覆盖。

主题的 CSS 文件不是您可以在主题文件编辑器屏幕中访问的唯一代码文件。图 6.1 显示了主题的一些 PHP 和 JavaScript 编程代码文件。（您在这里看到的内容取决于您的主题。）

图 6.1 如果您愿意，可以查看您主题的代码文件，但不要修改任何内容。

编程代码文件控制网站的行为而不是外观。例如，有代码描述了博客页面应该如何列出其帖子。其他代码管理网站的内置搜索工具。如果您对这些内容进行修改，您最好知道如何用 PHP 或 JavaScript 编程。并且记住，您在这里所做的更改将在下一次主题更新时被清除。

一些安全插件、托管服务、IT 人员和主题开发者——厌倦了在人们破坏这些主题代码文件时不得不提供技术支持——简单地从 WordPress 菜单中移除了主题文件编辑器。还有一个“插件”>“插件文件编辑器”，同样适用“不要触摸”警告。所以除非您真的理解代码语言，否则请避免修改主题或插件文件。

6.5 利用“外观”>“自定义”屏幕的优势

主题为您提供了一些修改网站设计元素的简单方法。它们位于“外观”>“自定义”屏幕中。主题开发者决定您可以在这里进行多少和哪些修改，因此在不同主题之间，您获得的选择范围相当广泛。

免费主题通常只允许您进行少量自定义。但流行的付费主题通常提供更多选择，不仅在“自定义”屏幕中，在其他地方也是如此。一些付费主题甚至包括功能齐全的页面构建系统——类似于 WordPress 的 Gutenberg 块编辑器，但通常更好。

您可以在“外观”>“自定义”屏幕中进行的多数修改都是所见即所得。您可以立即看到您更改的效果。并且记住，鉴于您没有修改主题文件（在主题文件编辑器屏幕中），您在“外观”>“自定义”屏幕中进行的更改将保留在主题更新后。

这里是 WordPress 自己的 Twenty Sixteen 主题提供的自定义列表。这个集合是免费主题提供的典型示例：

• 字体样式—字体家族、粗细、下划线、删除线、上划线、大小写、颜色、背景颜色、大小、字母间距、边距、填充、边框和边框半径。这些自定义可以应用于正文文本和六级标题。

• 网站标识—标题、标语、标志和图标（它是一个在浏览器标签页和书签中显示的小符号）。

• 颜色—完整的配色方案（包括暗色、系统色、亮色、红色、黄色、默认色），页面背景颜色（所有页面文本和媒体内容的下方），页面框架颜色（页面的边框），主要文本（正文文本和标题），次要文本（页脚、标语、文章中的日期），以及超链接。

• 页眉图片—出现在网站的每一页上，通常位于网站标题下方，但位于正文内容上方。

• 背景图片—作为页面边框出现的图片，取代了页面框架颜色。

• 菜单—菜单的位置。与在“自定义”屏幕中工作相比，前往“外观”>“菜单”屏幕来管理菜单位置更有效率。

• 小部件—功能单元（如日历、商店地图），类似于插件，出现在您网站的侧边栏中。与在“自定义”屏幕中工作相比，在“外观”>“小部件”屏幕中操作小部件更方便。

• 主页设置——你的网站是否在主页上显示博客，或者是一个静态页面。在设置>阅读屏幕中管理这一点更有效率。

• 附加 CSS——一个你可以自定义网站外观、添加自定义动画和其他设计修改的屏幕。我们将在第七章深入探讨 CSS。

6.6 考虑颜色的心理学

就像许多其他设计元素一样，人们的感受会受到你网站配色方案的影响，即使他们没有意识到这一点。颜色唤起潜意识的感觉，传达出支持或反对网站目的的信息。颜色可以在你的访客中营造一种氛围，甚至可以影响他们在网站内的行为或加快他们的退出速度。

幸运的是，有一些指南可以帮助你选择页面背景、页面框架、字体排印和其他元素的颜色。例如，医疗网站几乎普遍选择白色的变体（传达清洁），搭配浅蓝色（可靠性、值得信赖和权威）。绿色和白色的搭配较为罕见，尽管绿色与健康相关。红色极为罕见，原因与你在候诊室找不到斗牛画一样，除非医生和他的整个团队都麻木不仁。

万圣节网站以黑色和橙色为主。婚纱店当然选择白色，以及精致的粉彩。圣诞商店则使用红色、白色和绿色。银行使用蓝色，较少使用红色（与行动相关）和黄色（温暖）。一些法律和银行网站完全摒弃颜色，选择单色方案——黑色、白色和灰色（暗示严肃——这里没有开玩笑——颜色是轻浮的）。

向 GPT 或其他 AI 系统咨询有关颜色的建议和资源

咨询 GPT 关于颜色的好方法是提出以下问题：

|

适合[你网站目的]的好配色方案是什么？

我让 AI 就餐饮业务提出建议，它提出了以下建议：

|

对于餐饮业务网站，一些流行的配色方案包括浅色系，如象牙色、米色、白色、浅黄色和浅灰色。另一种选择可以是土色，如棕色、橄榄绿、米色、赭色和深橙色。你也可以考虑暖色系，如黄色、陶土色、橙色、红色和金色。在选择配色方案时，重要的是要考虑餐饮业务的整体品牌和传播信息。你希望给访客留下什么样的印象？       (1) 内部色彩选择与您的餐厅信息 - WebstaurantStore. mng.bz/MDO2       (2) 15 Best Restaurant Website Color Palettes That Will Wow Everyone! mng.bz/avdJ       (3) 60 Best Website Color Schemes for 2025 | Design Shack. mng.bz/gaVR       (4) 31 Best Colors for Websites (2024) - Colorlib. mng.bz/eyDJ

记住，GPT 等人工智能工具是聊天机器人。这意味着你可以与人工智能进行对话，并通过提出额外的问题来完善其回答。注意，在第一次回应的推荐末尾，GPT 会要求你更加具体：

|

你希望给访客留下什么样的印象？

你可以做出以下回应：

|

我们提供南方烧烤食品及其相关配料。

小贴士 访问与你的品牌或提供的服务相似网站。并且记住，过多的颜色，或者鲜艳、醒目的颜色（如霓虹色），可能会令人不安。此外，务必要求人工智能列出你网站上关于该主题的五个最受欢迎的网站的链接。

当然，你可以选择一个反映你网站主题的主题，然后信任设计师在“外观”>“自定义”屏幕上的选择，或者选择合适的默认配色方案或配色方案。如果你对色彩理论感兴趣，Elementor 博客上的这个教程对初学者来说是个不错的选择：mng.bz/vKOm。

6.7 注意布局

布局——即你页面中各种内容区域如何互动——在设计网站时也必须考虑。这些区域由文本块、媒体（如图片或视频）以及被称为空白区的空白区域组成。但区域也可以是侧边栏、菜单或其他独立的内容区域。主要思想是，你希望你的页面看起来平衡。

当人们听到“平衡”这个词时，他们自然会想到对称——就像天平或摆锤那样的均衡。但视觉上，如绘画或网页，平衡并不那么简单。许多因素都在发挥作用。通常，严格的对称是最差的选择！

假设你正在拍摄一幅壮丽的山景：一幅平衡的摄影作品将涉及前景中适量的风景，比如一只驼鹿或一栋房子。在背景中，可能有一座雪山。最后，你会在上方有一个明亮的蓝天。正是这些部分之间的对比提供了维度和吸引力。但你需要确保前景、背景和天空是平衡的。例如，不要太多天空或太少，也不要三个相等的区域。

注意：考虑一下鸡蛋。有人说它是一个完美的形状，因为它是一个非对称的球体。

6.7.1 实现不对称的平衡

视觉平衡可能涉及多个相互作用的元素：从内容之间的空白空间、引导视线的线条、颜色、对比度、标题大小等等。而且还有一些看似矛盾的地方。例如，一个大的空白区域可以与一个较小但内容详细的区域具有相同的视觉重量。换句话说，空白本身就有重量。幸运的是，有一些规则你可以运用来创建令人愉悦、平衡的页面。而且更加幸运的是，你现在有一个设计专家为你提供建议——你的 AI 助手。

一种策略是让专业人士（或一个在视觉设计方面有才华的朋友）给你提供预设计的布局供你选择。然后，你只需使用他们的布局模板，用你的图片和文字替换他们的。设计师创建的布局在大多数情况下已经很好地平衡了。你只需使用设计师使用的文本和图片或其他媒体块相同的定位和大小。然而，有一个缺点是这可能会导致你网站上页面之间过于相似，甚至使用相同模板的网站之间也相似。

布局涉及调整页面内容的定位、大小和对齐。你的目标是最终得到一个视觉上吸引人的设计，适合你想要页面传达的信息。同时，它也应该引导访客沿着你希望他们走的路径。

首先，你想要创建一个起点，一个焦点，页面中某个方式上更为强烈的区域——它就是首先吸引观众注意力的地方。它就是他们将在页面中开始他们的路径的地方。也许它是最详细、最大、最亮，或者在某些情况下，页面中最令人震惊的区域。很快你就会看到，有一条规则可以告诉你焦点应该放在哪里，实际上页面中有四个特定的位置你可以选择。这被称为三分法。你很快就会了解更多关于这个规则的信息。

小贴士 在网站术语中，焦点通常被称为英雄。尤其是在主页上，你希望焦点以某种方式定义或代表网站。英雄通常是图像或其他视觉元素。如果是文字，它应该是一个简短的标题。英雄的品质——颜色、字体、形状等——通常也应该反映在页面其余部分的设计中。这提供了视觉上的连贯性。

你的页面应该是平衡的——视觉上权衡，使内容区域分布得令人愉悦。达到理论上理想平衡的最简单捷径就是使页面对称。然而，精确的对称性可能会导致页面看起来静止、过时，甚至死气沉沉。尽管总有例外，但许多吸引人的现代网站都避免严格的对称性。这就是为什么当被问及完美的形状是什么时，有些人会说鸡蛋而不是球体。

6.7.2 考虑蒙德里安的经典平衡技巧

皮埃特·蒙德里安的画作因其不使用严格对称性达到平衡而闻名。注意在图 6.2 中，某些区域在大小上几乎是对称的。但，整个构图在水平和垂直方向上都是平衡的。（这张图片不是蒙德里安的原创作品；它是通过 Midjourney AI 以蒙德里安的风格生成的。并且已经移除了颜色，以聚焦于形状及其相互作用。）图 6.2 中存在一些对称性——你能找到吗？（答案即将揭晓。）

图 6.2 当设计页面布局时，你的任务是有效地平衡各种内容块，而不必求助于对称性。

批评你的布局的一种方法是将页面分成四个区域，然后看看这四个区域是否具有密切相当的视觉重量。图 6.3 展示了这一点。

图 6.3 当图像被分成四个象限时，你可以更容易地检查平衡。

有些人会说，显然右上区域比其他区域轻。但重量不仅仅是关于区域平均的暗度或细节的多少。视觉重量意味着判断设计的相对复杂性（在这个例子中，复杂性意味着每个象限中有多少线条）以及形状的大小（形状越大，重量越重）。这些因素必须同时考虑。

有些人会说，按照那个规则，任何细分空间都会自动达到平衡，因为线条越少，空间越大，反之亦然。在某些页面上，这将是正确的，但如果你消除了线条的复杂性，结果可能会产生不受欢迎的对称性。看看图 6.4，其中移除左上象限的线条产生了一种明显的对称性。与图 6.3 进行比较，看看这种差异。

图 6.4 移除此设计中的线条，对称性是不可避免的。

你可以通过将页面对角线分割来进一步分析平衡——从而显示四个三角形形状。当然，我们在这里简化了事情，只考虑直线、灰度和矩形。曲线和其他非矩形形状当然也发挥作用，颜色、字体和其它因素也是如此。随着时间的推移，你可以训练你的眼睛去寻找对称和平衡。有些人发现眯眼有助于看到图像区域之间的整体关系。

现在，让我们回到之前关于图 6.2 中对称性的问题的答案。原始页面上的对称性是通过穿过中间的水平线创建的，这导致上半部和下半部大小相等。

在自然摄影中，经常有一条主要的分割线将天空与地面分开。它被称为地平线。专业摄影师认为，将镜头框架中的这条线放在正中间是不良的实践。这是一种对称。在其他方面，地平线在正中间意味着你给予天空和地球同等的重要性，好像你无法决定哪个应该占主导地位。

这样想：如果你将地平线定位在框架的上方，你允许地球在画面中占主导地位，并且希望最有效的视觉（焦点）被发现在这个空间内。观众首先会看主导区域内的焦点，然后才会看到天空，反之亦然。

如果你发现很难在完全对称和不平衡的构图之间找到一个好的折衷方案，你可以做什么？你会找谁？GPT 和其他人很乐意扮演艺术评论家的角色。

你可以为 GPT 上传一张图片以供查看和评论。你甚至可以要求它为你修改图片，并将改进后的版本作为下载返回给你。让我们试试：

|

作为一位经验丰富且敏感的艺术评论家，逐步思考，请回答以下问题：    1.  这是一个平衡良好的构图吗？    2.  我们想避免对称设计——这幅画是否成功地避免了对称？    3.  是否有一个清晰的焦点，如果有，那是什么？    4.  通过裁剪能否改善构图？如果可以，请在图像上画白色线条以显示你将如何裁剪。按顺序回答这些问题。并且要具体，不要模糊或犹豫不决。

|

这幅图像展示了一片宁静而美丽的风景，让我们根据您的问题来分析它：构图平衡：构图平衡得很好，有元素引导观众的视线穿越整个场景。两座起重机形成了一个自然的兴趣点，左侧的鲜艳花朵与之平衡。阳光透过树木形成了一个发光的点，与水和叶子的较冷色调形成对比，有助于平衡。避免对称：构图避免了严格的对称，这有助于创造一个更动态和自然的场景。虽然有一些对称元素，如两座起重机和水面上的倒影，但它们被树木、花朵和光线的非均匀分布所抵消。这种不对称提供了自然随机感，避免了完美对称可能带来的僵化感。焦点：清晰的焦点是水中的两座起重机。它们位于中心，与水和树木较暗的背景形成对比。它们在水中的倒影也增强了它们在构图中的突出度。裁剪潜力：虽然构图已经很强大，但裁剪可以用来强调某些元素。例如，将起重机稍微偏离中心的裁剪可以增强构图的动态感，可能遵循三分法规则。裁剪掉右侧的一部分也可能使场景更多地聚焦于起重机和它们背后的阳光。让我们尝试裁剪，看看我们是否能稍微改变焦点，更紧密地遵循三分法规则，以创造一个更具吸引力的构图。我会进行调整，并展示结果。图像已被裁剪，以通过将焦点——起重机——稍微偏离中心并遵循三分法规则来增强构图。这种调整可能使观众的注意力更多地集中在起重机和它们背后的明亮阳光上。您可以从下面的链接查看和下载裁剪后的图像。

6.7.3 出了问题

GPT 第一次尝试裁剪是不合理的，几乎切掉了图像的 50%！它没有遵循其文本响应中的建议。它没有像建议的那样将起重机稍微偏离中心，而是完全移除了起重机！因此，我们来回尝试了三次更多，聊天，我要求它遵循其文本建议，这些建议是好的。最后，我告诉它“慢慢来”和“做你说的”。然后 GPT 最终花费了之前努力的两倍时间。它最终通过最终给我展示在图 6.5 中的裁剪而成功。

图 6.5 GPT 通过有效的裁剪改进了这幅构图。白色线条显示了图像被裁剪的位置。

总结本节的主要观点：在构图时尽量保持平衡，但避免仅仅通过严格对称的设计来采取懒惰的方法。这样确实可以达到平衡，但会显得无聊、死板。即使你对结果感到满意，向 AI 寻求意见也从未有过害处。

6.7.4 空白空间与负空间

之前的蒙德里安例子没有考虑到通常在网页中分隔内容区域的背景。有两种类型的分隔：空白和负空间。两者都是重要的设计概念，并且相互关联，尽管经常被互换使用，但存在传统的区别。负空间有时被包含在内容之内；空白空间与其他空白区域相连。这意味着什么？

负空间指的是内容之间的空间。换句话说，任何不是正空间（如段落或图像）的内容。有时它被用来创建可以增强构图或传达额外意义的形状或图案。负空间不一定是白色或单一颜色。它是背景。

如图 6.6 所示，联邦快递的标志是一个使用负空间传达信息的例子。E 和 X 之间的空间形成了一个箭头，象征着快速交付，我想。

图 6.6 对于大多数人来说，这里的箭头是一个潜意识信息。

与之相反（也称为空白空间或空空间），空白空间指的是页边距、填充或列、字体行、图形、图像或其他设计元素之间的空间。空白空间来源于印刷设计——书页上未印刷的部分，如页边距。它的目的不是像负空间那样传递潜意识信息，而是帮助平衡布局并提高可读性。

空白实际上不一定是白色的；它仅仅是那些没有文本或媒体的区域。空白空间的目的在于给你的设计元素留出呼吸的空间，或者通过将页面分割成文本块来避免视觉过载。空白空间还可以帮助引导访客的眼睛在页面上移动。

负空间与空白空间的主要区别在于，负空间在概念上用于创建形状或增强设计的意义。但空白空间更多的是一种实用功能。空白空间应该用来使网页看起来更有吸引力。

人们通常会对大量的灰色文本感到厌烦。他们会觉得你是在给他们布置任务。因此，你希望你的文本以段落形式呈现，通过空白分隔，并且足够窄的列宽，这样读者就不必费力地找到下一行的起始位置。

6.8 使用三分法规则

著名的三分法规则是帮助你实现网站页面不对称平衡的优秀工具。它还引导观众的目光到页面最重要的位置（页面的主题，焦点）。

当处理视觉构图——照片、绘画或网页——时，三分法规则是视觉艺术家广泛应用的 fundamental 原则。它最早在 18 世纪由约翰·托马斯·史密斯在 1797 年出版的《关于乡村风景的评论》一书中提出。

6.8.1 精通裁剪以强调焦点

三分法规则通过叠加两条等距的水平线和两条等距的垂直线，将页面或绘画分成九个相等的部分。裁剪是艺术家常用以提高图像质量的方法。你可以通过裁剪（如图 6.5 中所示，使用起重机进行裁剪）来最好地遵循三分法规则。

裁剪和外扩

裁剪意味着从图像的边缘裁剪掉——从一边或多边裁掉一些内容。这可以做几件事情：改变宽高比（图像的形状）、重新构图，或者——就像我们下一个例子中那样——通过使用三分法规则改善构图并突出主要焦点。

外扩——现在由于 AI 可以操纵视觉，因此成为裁剪的相反操作。在外扩（也称为扩展画布或边缘扩展）中，你上传一张图片，然后要求图片的一侧或更多侧边被扩展（而不是裁剪，就像裁剪时那样）。这怎么工作？你如何向原始图像中未包含的图像添加视觉内容？在 AI 出现之前，这是不可能的。

外扩扩展图像，创建反映图像的视角、风格和内容的新内容。新内容是现有内容的变体——而不仅仅是复制。 (外扩一张新鲜产品的图片，可能会在现有的苹果箱中添加一个香蕉箱。) 外扩还可以与三分法规则一起使用，将焦点移动到一个新的和扩展的网格上。关于这一点和其他技术的更多内容将在第七章中探讨。

提示：宽高比指的是照片、绘画或其他图像的形状。传统上，风景图像的宽度大于高度。肖像画则相反——高度大于宽度。在电脑显示器上查看网页时，网页处于风景模式。手机通常处于肖像模式，除非你将手机旋转 90 度以将其转换为风景模式。大多数电脑显示器具有 16:9 的宽高比，因此它们是风景模式。

通过裁剪应用三分法规则最常见的方式。裁剪工具可在任何高质量的图片编辑器中找到，例如 Photoshop、Paint.NET 或 GIMP。（后两者是免费的，可以从ninite.com安全下载。）

当你在照片编辑器中使用裁剪工具时，网格线会自动显示在图像上，将三分法网格叠加在图像上。定位焦点的良好位置是网格线交叉的地方。

图 6.7 显示了如何拖动裁剪网格（使用照片编辑器的裁剪工具）直到男人的眼睛位于两个焦点上，嘴巴位于网格线上。将此图像与图 6.8 进行比较，它显示了裁剪的结果。为了使用此工具平衡您的网站页面，请截取一个页面的屏幕截图，并将其加载到您的照片编辑应用程序中。

图 6.7 如果将焦点（s）放在网格线或交叉点上，构图将得到改善。（照片由 Midjourney 提供）

图 6.8 在裁剪掉图 6.7 中较早显示的原作的左侧 25%后，这幅肖像更有效。

三分法网格将向您展示如何改进您网页焦点（您试图出售的画作的照片或主要标题）的位置——无论您希望访客首先注意到什么。然后，拖动裁剪网格直到您的焦点位于三分法显示的四个交叉点之一。裁剪工具将在裁剪网格的边缘显示八个小方块（拖动把手，如图 6.7 中所示），任何一个小方块都可以被拖动以重新定位网格线。顺便说一句，如果您没有注意到头发和烟雾之间的关系，那么您可能具有除了设计之外的其他才能。

或者，你可以在网格线上某个位置简单地定位焦点。这种方法虽然不那么强大。你的焦点离网格四个交叉点越远，效果就越弱。

小贴士以下布局建议主要适用于您网站上静态（非滚动）且在典型计算机显示器上查看的页面。屏幕大小或形状的变化通常会重新框定您的布局。因此，了解您的观众使用什么来浏览。在后面的章节中，我们将探讨获取有关观众及其如何查看您网站的方法。

让我们尝试一个例子。我们将使用画作，但同样的技术也可以应用于你的网页。如果您的网站在大屏幕上查看，以下的设计建议将非常有帮助。

6.8.2 测试三分法规则的实际效果

图 6.9 显示了网格三分法规则覆盖在画作上。四个箭头指向主要焦点区域。这些是焦点应该定位的交叉点。为了实现这一点，你需要拖动裁剪工具的把手（网格框架上的八个小方块）直到画作焦点位于这些交叉点之一。把手可以拖动到不同的方向来定义裁剪。

图 6.9 如果可能的话，将焦点定位在这四个交叉点之一。

一些图片将有一个以上的焦点。有时，你可以裁剪，使得两个或多个焦点位于交点（参考图 6.7）。但在下一个例子中，农舍中最亮的部分将成为我们的焦点。因此，我们将网格移动，直到农舍位于四个交点之一。

图 6.10 显示，我们已经将网格拖动到将右下角交点放在农舍正上方。现在你也可以看到裁剪将发生在哪里——顶部有一点，右侧更多一点。

图 6.10 网格已被调整大小，以便将农舍放置在焦点交点。

最终的结果，如图 6.11 所示，是一个更强的构图。现在图像具有更好的整体平衡和深度，首先将观众的目光引向兴趣点——那座农舍。这张图片现在明显是关于农舍的，其次是它的背景，山谷，而不是天空。

图 6.11 与之前图 6.9 中展示的原始场景相比，现在这个场景在几个方面都更为突出。有一个明显的焦点，因此观众首先看到的内容毫无疑虑。

然而，你可能想要以不同的方式裁剪这张图片，因为之前图片的宽高比通常用于肖像而非风景。进一步的裁剪（图 6.12）可以将图片变成传统的风景形状（宽度大于高度）。你越是用裁剪工具及其网格，就越会珍视它在平衡整体图像和强化焦点时的有用性。

图 6.12 尝试不同的形状，直到你得到满意的结果。

6.8.3 向 AI 寻求决策

如果图片中有人物，他们的眼睛通常是焦点。这在图 6.13 中农民的脸部得到了体现。

图 6.13 在肖像画中，眼睛通常是焦点，所以你可以像这样裁剪这幅画，强调右眼。

在图 6.14 中，你可以看到我们农民肖像重新平衡后的结果。裁剪后，农民的左眼成为了焦点。

图 6.14 在原始图像和重新平衡的图像之间进行选择当然是主观的。但经过一段时间，三分法规则已被证明是有价值的。注意，通过裁剪，我们也改变了从方形到肖像形状的宽高比。

在进行这些修改（或咨询知名艺术评论家、GPT 或 Claude）时，你需要使用自己的判断力。例如，你可能更喜欢图 6.15 中展示的裁剪结果。这仅仅是将焦点从他的右眼移到了左眼。

图 6.15 通过仅将焦点稍微向左移动，你减少了画中农民的突出度。

图 6.14 和 6.15 都是好的构图，所以它们之间的选择可以基于您想强调的内容以及强调的程度。图 6.15 具有更好的深度且不那么激进。

当然，您可以上传多张图片并让 GPT 分析它们的差异。我将这三幅农民画的版本都提交给了 GPT，看看它认为哪一幅是最平衡、最令人愉悦的构图。GPT 回复如下：

|

农夫 3 对我来说是最令人愉悦的。它和谐地平衡了主题的详细描绘与环境背景，使观众对人物及其周围环境有一个全面的理解。构图感觉经过深思熟虑，看起来更有效地吸引了观众的注意。

我无法对此提出异议。

6.8.4 考虑其他一些设计规则

眼动研究显示，当观察图像时，人眼自然地倾向于三分法规则中的交点。（人们通常不会从画布或网页的中心开始看。）因此，网格与这种自然倾向相结合，导致更美观、吸引人、动态和平衡的图像。

如果您将主题直接放置在屏幕中央，这往往会使图像变得平淡，使其更加静态。结果通常缺乏动态性，类似于严格对称的布局。将主题放置在中心之外往往会产生更有力、更有活力、更吸引人的图像。

是否有其他设计规则？是的，有几个（三角形、对角线、交替网格）。其中最著名的规则被称为黄金比例（或黄金螺旋）。它是一种在自然界中可以看到的数学进步，如向日葵、DNA 和鹦鹉螺贝壳，如图 6.16 所示。

图 6.16 著名的黄金比例在自然界中显现，但也用于艺术、建筑、时尚和电影。这个贝壳是由人工智能生成的。它不可能在自然界中存在。你能看出为什么吗？

如果您对如何应用黄金比例感兴趣，Photoshop 有另一个裁剪网格可以帮助您。或者您可以使用这个公式：a/b = 1.618。例如，如果您的建筑宽度为 25 英尺（b），那么高度（a）应大约为 25 × 1.618 = 40.45。

另一个相关的规则被称为斐波那契螺旋（序列或曲线）。《戴珍珠耳环的少女》和《蒙娜丽莎》都是基于这种模式构建的。它可以通过一系列长度为斐波那契数的正方形来构建。从框架内每个正方形的对角线绘制弧线，形成一个类似螺旋的曲线，引导观众的视线绕过画面。通常，最大的细节位于最小的盒子中。这个规则就像一个漩涡，只产生一个焦点。

在 Midjourney 中保留图像风格或特征

另一个需要记住的规则是简洁性。现代设计品味倾向于极简主义。一个极简主义网站页面通常是最好的，除非你在卖被子或类似的东西。上传你的网页截图，并要求 Midjourney（使用带有–sw设置为800的--sref功能）或 GPT 修改图像，使其更加极简。

Midjourney 的--sref功能非常强大。它意味着风格参考。要使用它，你需要上传一张图片（或几张），Midjourney 就会创建出具有提交图片风格的新的图像。你可以通过使用–sw（风格权重）参数来调整上传图片的影响程度。给–sw赋一个介于 0 到 1,000 之间的数字。

有一个相关的参数叫做––cref，用于角色参考。除非你使用–cw（角色权重）参数，默认值为100，它可以设置为0到100。在100时，生成的图像将复制上传图片的服装、头发、面部特征，甚至配件。但在0时，只有面部被复制，服装和其他元素则不会。

答案：图 6.16 中的壳体就像埃舍尔的楼梯。它从壳体的中心开始，是一个内部视角，但随着你向外环绕，逐渐翻转成为外部视角。正如你所见，Midjourney 完全能够生成甚至像埃舍尔这样的艺术家复杂风格的图像。

所有这些话都说了，规则是为了被打破的，所以如果你对构图和设计整体敏感，你可以做出例外。如果有人有权利打破规则，那就是达芬奇。他实际上在画框中将蒙娜丽莎水平居中。但他确实以几种方式遵循三分法，包括将那个微笑放在网格线上。

最后一个焦点示例：Midjourney 被要求以蒙德里安的风格创作一幅画，但必须非常严格地遵循三分法。在图 6.17 中，注意八处白色标记表示网格线的位置。另外四个标记表示中点。

图 6.17 这种对三分法的超级严格应用产生了相当多的对称性。

图 6.18 显示了过度严格遵循三分法会产生许多对称的矩形——无论是大小还是位置。

图 6.18 如果将一些方块组合成更大的矩形，甚至比这些箭头显示的对称性更多。一个例子是中间的线条，它水平地切分了整个图像。

如果你觉得页面设计太麻烦、不有趣或不可能，你可以请一个与视觉设计相关的人审查你的网站并提出建议。或者，像往常一样，咨询 AI 以获得改进建议。GPT 等系统内置了文本到图像的能力，因此你可以首先上传你的页面并请求建议。然后，请它创建一个包含这些建议的新图像。如果你想进行进一步修改，只需提出一个或两个后续问题，就像我们之前在裁剪时做的那样。

6.9 使用 AI 分析网站设计

AI 可以利用其庞大的互联网内存来检查你最成功的竞争对手的网站，然后为你提供有关改进网站外观的质量建议。查看与你主题相似网站的布局是个好主意。比如说，你想为图书馆创建一个网站。一种方法是将以下任务分配给 GPT：

|

列出五个获奖的图书馆网站。

当你访问这些网站时，研究它们的设计以获取可用于你网站的灵感。此外，从浏览器地址栏复制设计良好的网站的 URL 地址，然后访问 WPThemeDetector 网站（www.wpthemedetector.com），并将地址粘贴到其搜索字段中。如果一个网站正在使用 WordPress 主题，这个检测器会告诉你哪个主题，并提供该网站使用的插件列表。你还可以通过探索获奖网站来获得良好的设计灵感：

• “21 个优秀的 WordPress 网站示例，你应该看看”（mng.bz/mGzW）

• “5 个获奖网站及其你可以从中学习到的内容”（mng.bz/6eGp）

• “14 个获奖网站设计（以及它们做对了什么）”（mng.bz/oKVy）

最后，你可能不认识任何一流的网站设计专家。但是，现在我们大家都认识了一个。发送你的主页图片给 AI。请求它总结你的主页设计与其他一些最佳竞争网站相比的情况。请求它提出改进建议。图 6.19 显示了我在 GPT 上上传的我们的实践网站主页版本。

图 6.19 GPT 关于如何改进这个舒适、温馨的我们食谱实践网站主页的几个想法。

这是我在使用 AI 分析网站设计时使用的提示：

|

你是一位专业网站设计师。看看互联网上四个最好的提供食谱的网站，看看它们的首页设计。深呼吸，一步一步来。找出这些其他网站设计成功的原因。它们有什么共同点？然后看看我刚刚上传给你的我的网站首页。列出这四个成功网站的设计与我的设计之间的差异。并告诉我如何改进我的设计。

GPT 提供了概述，然后得出以下建议：

|

我注意到的与您设计的不同之处：字体：您用于主要标题的脚本字体可能对一些用户来说难以快速阅读。成功的网站往往使用更简单的字体作为主要标题的字体。色彩一致性：芥末黄很突出，但并未在所有元素上保持一致，例如顶部导航。图像焦点：虽然您有一个美丽的首选图像，但展示的菜品种类较少。流行的网站通常在主页上展示多个诱人的菜品。导航标签：导航栏中的标签并不立即被识别为食谱网站上常见的分类。这可能会让一些访客感到困惑。

那个标题手写字体确实比标准的无衬线字体（如 Verdana）更难阅读。此外，考虑色彩一致性很重要，但我不同意说让更多项目使用芥末色会是一个改进。展示一些成品菜肴，可能是蒸的，是有意义的。关于标签的这个最后一点是 Midjourney 倾向于创造无意义词汇的直接结果（参见图 6.19 中的标题词汇Bouur Bakiol f oper）——至少在撰写本文时是这样的。他们正在解决这个问题。

6.9.1 尝试一个现代极简主义主页

接下来，让我们看看 GPT 对我们食谱网站主页的一个更加现代的设计的看法。我向 GPT 提交了我们在图 6.20 中展示的主页的更简约版本，使用了相同的提示。

图 6.20 GPT 对我们实践网站主页的这个更现代版本的反应不同。

GPT 的回应：

|

改进建议：字体：“INSTANT POT”这个词被分割并分散在页面上。这破坏了可读性。设计将受益于更直接的字体或至少一些字距调整。图像：树叶的图像很优雅，但并未传达食谱或烹饪的主题。考虑使用高质量的菜肴或食材照片。标语/行动号召：“TIME TESTED RECIPES - EASY ELEGANCE FOR ALL OCCASIONS”是一个很好的标语，但它可以更加突出，也许可以搭配一个行动号召，如“现在探索”或“查看最新食谱”。

TIP 记住 CTA 代表行动号召。

	微妙动画：加入微妙的悬停效果或微交互。例如，悬停时颜色轻微变化或轻微缩放效果可以视觉上吸引人，而不会令人感到压倒。空白空间：空白空间（或负空间）并不一定意味着“白色”空间。它是不同元素之间的未标记距离，这可以帮助设计呼吸并强调关键组件。

再次，AI 提供了一些深思熟虑的建议。但让我们让它决定它更喜欢哪种设计，并说明原因。是舒适的现代风格还是极简主义现代风格？

6.9.2 GPT 选择胜者

我随后要求 GPT 比较家庭式和整洁版本，选择它最喜欢的，并说明原因。它略微倾向于家庭式版本：

|

这两个设计都有其独特的优势，迎合不同的审美。第一个感觉温暖、丰富、手工艺，非常适合美食或精品食品网站。第二个设计简洁、现代、专业，可能更适合高端或现代品牌。从视觉设计角度来看，我稍微倾向于第一个设计，因为它丰富的图像和温暖感。然而，如果目标是现代和复杂的吸引力，第二个设计就做到了。

6.9.3 向 AI 请求改进有缺陷的设计

最后的测试，这里是场景：你有一个良好、干净的主页设计，但一个委员会出于错误的想法，在图片中添加了一些红色土豆，试图使设计“更关于食物”，正如他们所说的。让我们看看 AI 对图 6.21 中显示的结果有什么看法。

图 6.21 有些人认为将随机的土豆随意地粘在图片中，并使用不同的背景颜色，这是一个非常好的主意。用最温和的话来形容这个建议就是无知的。

我的提示如下：

|

你是一位获奖的专业网站设计师。你有什么建议可以改进这个网站的首页？

|

土豆的图片看起来不连贯。将图片与内容整合，以便它们补充信息并使页面流畅。

跟进提示：

|

你关于图片整合的说法很有趣。从整个设计角度来看，列出那个土豆图片中存在的一些问题。

|

马铃薯的图片本身质量很高，但在整体主页设计中存在一些设计和语境问题：相关性：图片似乎与主页的主要信息脱节。如果“INSTANT POT”是重点，那么生马铃薯的图片与该主题没有明确关联。通常，对于一个烹饪或食谱网站，人们可能会期望看到成品、厨房场景或正在使用的相关烹饪器具。对比和可见性：图片有一个深色的背景，与网站整体明亮、轻松的感觉形成对比，使其以一种似乎不是有意为之或不美观和谐的方式突出。位置：图片放置在右下角，有些尴尬，没有与任何文本或其他设计元素结合。它感觉像是一个额外的想法，而不是设计的一部分。尺寸和比例：与叶子的大小和整体页面布局相比，图片很小，这降低了它的影响力。这可能会让观看者不确定图片在网站语境中的重要性。缺乏语境：图片周围没有标题或文字来解释为什么它在那里或它代表什么。它与特定的食谱有关吗？它是突出提供的食谱中使用的食材类型吗？质量和风格一致性：马铃薯图片的风格是鲜明的照片，这与叶子图片所采用的更风格化和褪色的方法不匹配。图像风格的一致性对于品牌身份和整体协调性都很重要。

这个分析非常准确，GPT。正如你所看到的，人工智能可以提出优秀的设计建议。一旦你掌握了与人工智能沟通的技巧——如何提示它以及何时提出后续问题——人工智能就成为了你改善网站内容的主要资源——无论是写作还是设计。

在本章中，你学习了网站设计的基础知识。你探讨了平衡、构图、色彩、空白和负空间等元素。你还了解了如何运用几个设计规则。在整个过程中，人工智能在构思和最终确定网站主页方面发挥了重要作用。那个主页是访客首先看到的东西，它应该清楚地传达网站的语气、目的和质量。人工智能在这方面的帮助将证明是无价的。

下一章将带您进入高级网站设计。您将深入了解当代趋势。您还将学习如何微调主题设计的任何元素——从布局到过渡动画，再到 Z 轴上的不透明度。为了实现这一点，您将掌握强大的 YellowPencil 插件。它会自动为您编写 CSS 代码。您只需告诉它您想要这个段落是红色，YellowPencil 就会编写相应的代码。您无需自己学习 CSS 语言。您再次处于指挥和评判的位置，同时让插件或 AI 承担实际的重活和苦力。而且，AI 始终会在您身边以多种方式提供帮助。

摘要

• 每个 WordPress 网站都必须有一个主题，您可以从成千上万的主题中进行选择。在本章中，您学习了缩小选择范围的战略。

• 您希望安装的主题不会被设计师后来放弃，因为更换主题可能会出现问题。

• 不要过于担心找到完美的主题。因为在下一章中，您将看到如何轻松修改任何主题，以微调它并使其与您的网站目标和美学相匹配。

• 您网站的设计非常重要——您希望访客对网站的外观感到舒适并印象深刻。如果您对设计不擅长，可以请其他人（比如 AI）提供他们的建议。重要的考虑因素包括色彩心理学、构图、布局、空白空间以及设计规则，如三分法则和黄金比例。

• 为了获得灵感，访问与您的网站具有相同重点的成功网站。同时，也看看获奖网站。然后，告诉 AI 访问相同的网站，总结它们的共同点，并描述如何使您的网站看起来同样出色。

• 将 AI 融入创建良好构图、选择最佳设计、提供建议和进行改进的各种任务中。

第七章：高级设计技术

本章涵盖了

• 确保你的网站看起来现代化

• 理解层叠样式表

• 精通 YellowPencil CSS 自动化插件

• 利用 AI 编写 CSS 动画

• 探索 AI 修复和扩展图像技术

• 在 Gutenberg 编辑器中管理 CSS

在第六章中，你学习了如何选择一个强大的主题以及布局和设计的基础知识。在本章 7 中，你将更深入地学习设计，了解更多使你的网站在视觉上脱颖而出的方法。我们将探讨如何确保你的网站看起来现代化，以及如何精确调整设计，超越主题在“外观”>“自定义”屏幕中提供的选项。

你还将了解到何时以及如何使用 AI 修复和扩展图像。修复会删除或替换图像中的对象。扩展则会扩展图像，创建与原始图像的整体视角、风格和内容相关的新内容。

7.1 创建现代设计

网站设计风格随时间而变化，就像建筑、艺术和其他创造性事业一样。衡量当前时尚的一个标准是今天建筑的外观。你可以用“鲜明”这个词来总结当今的大部分建筑。

西方风格在历史上一直在两个极端之间移动：曲线（装饰性、动态、华丽）和直线（矩形、静态、简约）。我们目前正处于许多艺术领域，包括网站设计艺术的直线时期。

在古典时代，几个世纪以来，建筑的特点是实用性和相对简约的装饰。例如，早期的埃及、波斯和希腊罗马建筑（例如帕台农神庙）。这些建筑大部分都拥有高度系统化和有序的设计，注重比例、平衡、对称和功能。

但在从早期中世纪到 20 世纪中叶的漫长时期内，钟摆摆向了另一边，并且最终在一段漫长的华丽时期中稳定下来。装饰、细节和复杂性统治了几个世纪。这持续了哥特式、巴洛克式、洛可可式、维多利亚式，甚至直到 20 世纪初的新艺术运动和装饰艺术时期。几个世纪以来，建筑师们偏爱复杂的细节和广泛的装饰元素。从诸如滴水兽和彩色壁画以及彩色玻璃窗等装饰，到精致甚至繁琐的装饰。

然后，在第二次世界大战期间，古典风格回归——这次是强调功能。甚至曲线也过时了。这是一个简化，但其中也有一些真实性。在过去的八十年里，重点是线性、无装饰、主要是矩形形状。悉尼歌剧院和建筑师弗兰克·盖里的曲线形奇迹是少数例外之一。

图 7.1 维多利亚时代的住宅色彩微妙，通常包括管状房间和其他曲线，提供了多样的轮廓。看看那些装饰华丽的门柱。甚至烟囱也不是矩形的。

如您在图 7.1 和图 7.2 的比较中可以看到，维多利亚时代的房屋庆祝精致和曲线。今天的更严峻的美学不仅拒绝曲线，甚至经常连色彩也不保留！

图 7.2 当代风格中的粗野主义是对曲线、色彩、装饰和基本人性的极端反应。显然，即使在 200 码内，树木也无法生存。

所说的粗野主义建筑在某些圈子中很受欢迎。诚然，一个好处是当你站在这样的建筑前面时，你自动成为画面中最美丽、最有生命力的事物。

报道称，Beyoncé和 Jay-Z 以 2 亿美元现金购买了他们在马里布的 3 万平方英尺的粗野主义住宅。这是加利福尼亚州有史以来最昂贵的房屋。

但没有任何趋势是绝对的。当然，总有叛逆者；感谢他们。正如您在弗兰克·盖里的强大作品中看到的那样（见图 7.3 中 Midjourney 尝试创造他的风格），他是一位反对直角的建筑师。（他最新的多伦多建筑有点方方正正，但以一种可预测的奇特方式。）甚至盖里的半矩形作品似乎也带有某种生物和生命力。

图 7.3 这是 Midjourney 对弗兰克·盖里风格的建筑创新。这种建筑风格与粗野主义截然相反。在计算机出现之前，这样的设计是不可能绘制蓝图。相比之下，粗野主义自 20 世纪 30 年代以来一直存在，主要在纳粹德国和共产主义苏联，这些社会并不以对美学的敏感性著称。

当然，你不会想让你的网站完全采用粗野主义，或者完全采用盖瑞的风格。例如，婚纱销售网站可以从蕾丝、装饰、曲线设计元素中受益，包括模仿传统书法笔触的脚本字体，仿佛是用笔或刷子书写。

然而，现代网站设计简洁、整洁，通常是极简主义的。看看你对以下网站的看法：

• mng.bz/4av5

• www.findgift.com

• www.konstolymp.gr

在那个第三个网站上，注意几个细节。动画细腻、温和且引人入胜。此外，背景中还有一个非常低调的橄榄树图案。这种动画和透明度可以通过使用层叠样式表（CSS），一种强大的设计工具来实现。我们将在下一节详细探讨如何使用它。

为了提供一个简短但令人印象深刻的预览，让我们请 AI 编写一些可以复制粘贴到我们网站外观>自定义>附加 CSS 屏幕的 CSS 代码：

|

编写 CSS 代码，使所有 h1 标题在页面加载时从 0%透明度变为 100%透明度。

克劳德(claude.ai)的响应是

|

|

h1 {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1; 
  }
}

|

如果您愿意，可以尝试一下。只需将 CSS 代码复制并粘贴到外观 > 定制 > CSS 屏幕中。点击发布按钮，然后转到您网站的首页。您应该看到任何 h1 标题（最大的标题）淡入视图。您可以将渐显动画值从 1 秒调整到其他持续时间以改变动画速度。您还可以调整透明度。如果您想从灰色而不是完全不可见的文本开始，请从大于 0 的值开始。您网站的可能标题就是一个 h1 标题。

7.2 理解 CSS 样式

层叠样式表 (CSS) 是一种专门用于修改网页设计大多数元素的计算机语言。因此，如果您想微调主题的默认设计选择，您需要使用 CSS。

好消息是，有一个名为 YellowPencil 的优秀插件可以为您自动生成 CSS 代码！因此，您不需要学习这种语言。当然，AI 也是一个优秀的程序员，正如之前渐显动画的 CSS 代码所展示的那样。

使用 YellowPencil 插件，您可以在高级别上进行操作——移动滑块、在颜色轮中点击、从菜单中选择、使用视觉拖放等。所有这些调整以及更多都是在所见即所得(WYSIWYG)屏幕上实时显示的。您在调整东西时就能看到结果。最好的是，YellowPencil 插件会自动编写 CSS 代码，使您的更改在网站上永久生效。

我们将在第 7.4 节中简要介绍优秀的 YellowPencil 设计系统。如果您想现在就跳到那里，请这样做。下一节有些技术性，如果您不想阅读，也没有关系。但如果您好奇，这里有一个关于 CSS 做什么以及它是如何工作的简要介绍。这本书旨在对初学者有价值，但对我们这些技术爱好者来说也很有趣。

总是使用小写字母

在编写 CSS 和 HTML 代码时始终使用小写字母。最初，CSS 明智地不区分大小写。但委员会聚集在一起，结果 CSS 被设置为大小写敏感，这很不幸。因此，现在 HTML 和 CSS 中都有大小写不敏感的例外。代码在几个上下文中是大小写敏感的（类名、属性选择器），但这频繁到足以导致无数错误。因此，为了避免问题，始终使用小写字母，而不是试图记住规则的随机例外。

这里是一个 CSS 样式定义的示例，用于 CSS 类名myId或myid：

#myId {
    color: red;
}
#myid {
    color: blue;
}

这里是 HTML 代码：

<div id="myId">Some text.</div>

由于大小写敏感，这些div标签内的文本以红色显示，而不是蓝色。为什么？因为myid中的“i”是小写的，而在myId中是大写的。所以，CSS 将它们视为两个不同的 CSS 选择器。

定义 A 选择器只是 CSS 要修改的设计元素的名称。选择器后面跟着一个属性/值对的列表。每个选择器下的整个组合称为 CSS 规则。通常，选择器只是一个普通的 HTML 元素，如h1，或者它可以是类名，如前一个例子中的myid。

7.2.1 探索 HTML 在页面设计中的作用

在 CSS 出现之前，只有 HTML 可以告诉浏览器网页应该如何显示。但 HTML 主要是一种标记语言，因为它标记了网页中特定元素的开始和结束，如标题或段落：

<h1>MAJOR HEADLINE</h1>

<h1> HTML 开始“标签”告诉浏览器从这里开始应用 h1 样式到这段文本。而</h1>结束标签告诉浏览器在这里结束标题样式。

浏览器有一组默认的 HTML 属性值。例如，如果浏览器看到一些被h1标签包围的文本，它将默认使用以下属性值列表来显示标题：

• display: block;—这意味着 h1 标题将从新的一行开始，并占据可用的全部宽度（这就是 CSS 值block所做的事情）。

• font-size: 2em;—h1 元素的字体大小是根元素字体大小的两倍（也称为em）。

• margin-top: 0.67em;—h1 元素上方的空间是根元素字体大小的 0.67 倍。

• margin-bottom: 0.67em;—h1 元素下方的空间是根元素字体大小的 0.67 倍。

• margin-left: 0;—h1 元素左侧没有空间。

• margin-right: 0;—h1 元素右侧没有空间。

• font-weight: bold;—标题文本为粗体。

换句话说，网站中的所有 h1 标题都使用这些默认设计属性进行渲染。这些项目符号是 CSS 所说的属性-值对，也称为声明。整个目的在于你可以使用 CSS 来修改这些默认值中的任何一个。

7.2.2 查看 CSS 为 HTML 带来的好处

如果你想更改网站上 h1 标题的大小、字体、颜色或其他属性呢？换句话说，你想要修改那些默认的浏览器声明。也许你想使这些标题更大一些。在 CSS 出现之前，你必须逐个检查网站的所有 HTML 代码，并手动更改每个 h1 元素。（在 HTML 中，一个完整的标签-内容-结束标签单元称为元素。）要使 h1 标题更大，你必须重新输入 HTML 开始标签，使其看起来像这样：

<h1><font size="+2">MAJOR HEADLINE</font></h1>

这意味着将 h1 标题的大小设置为比浏览器默认大小大两倍。将此更改输入到网站中每个 h1 标题中显然既繁琐又乏味。

警告 确保在 CSS 代码中的引号是直的(" ")，而不是弯曲的（“ ”）。HTML 和一些类型的 CSS 代码不喜欢斜体或弯曲的开放和关闭引号。

这里有一些典型的 HTML 标签：

• <h1> 到 <h6> 定义标题，其中 <h1> 是最重要的，而 <h6> 是最不重要的（通常是最小的）。这些为网站上的文本内容提供了层次结构，让读者知道页面中各部分之间的相对重要性或关系。

• <p> 代表段落（常见的正文文本）。

• <div> 和 <span> 指定一个区域或一组页面组件。

• <table> 用于表格。

• <img> 用于图像。

• <a> 用于超链接。

7.2.3 进入 CSS

幸运的是，CSS 的发明使得网站设计变得更容易、更多样化。在其他有用功能中，您可以通过修改单个 CSS 规则来更改网站上的所有 h1 标题。（我们在之前的淡入 CSS 示例中就是这样做的。）下一个示例显示了一个使所有 h1 标题的大小是浏览器默认（2 em）字体大小两倍的规则）：

h1 {
    font-size: 4em;
}

在大多数现代浏览器中，段落 <p> 的正文元素的大小默认为 16 像素 [px])。

提示：像素是电视或手机等显示设备中最小的视觉单位。如果你真的靠近电视，你通常可以看到像素，即小点。在手机屏幕上你看不到它们，因为它们太小了，但在体育场的大型显示屏上，其像素的大小就像砖块一样。因此，像素的大小相对于它所在的屏幕大小是相对的。像素没有像英寸或厘米这样的特定、绝对的大小。

CSS 提供了比原始 HTML 属性集（属性是 HTML 对样式修改的称呼）更多的样式属性。CSS 甚至超越了简单的样式。有些人更喜欢将 CSS 称为标记语言，但实际上它是一种具有显著标记能力（仅指定样式的开始和结束）的设计语言。例如，CSS 包括以下内容：

• 变换—应用于 HTML 元素的 2D 或 3D 变换，允许您旋转、缩放、移动、倾斜、重新定位并对元素进行其他更改。

• 过渡—将元素从一个状态转换为另一个状态。换句话说，CSS 过渡允许您在给定的时间内，以给定的速度，在给定的延迟后平滑地更改属性值。这种技术可以用来创建各种效果和动画，如淡入淡出、缩放、倾斜、改变颜色以及随时间旋转元素。

• 布局和定位—Flex 是一个用于在容器内定位和排列元素的模型。CSS Flex 指定了元素如何增长或缩小以适应其 Flex 容器内的可用空间。三个属性—flex-grow、flex-shrink 和 flex-basis—共同工作，为您提供了在 Flex 容器内对齐、布局和分配空间的高效方法。

• 阴影—文本或框架阴影效果。

• 特殊文本规范—例如调整行高的规范。

7.2.4 什么是层叠？

这个多彩的术语级联非常准确。CSS 被称为级联样式表（复数），因为可能有多个 CSS 样式表。有四个主要的样式表（包含 CSS 代码的文件），它们共同工作，形成级联。

这意味着在样式表中可能会有重复的 CSS 属性。假设一个样式表指定 h1 标题应该是红色，但另一个样式表说它们必须是绿色。浏览器该怎么办呢？答案是样式表有一个顺序（即“级联”）。浏览器必须使用在最低样式表中提到的颜色。

初始时级联可能会让人感到困惑。下面是如何可视化这个级联过程。让我们考虑两个在同一个样式表中的 CSS h1选择器。其中一个在选择器表中位于另一个之下，因此它是最低的。这段 CSS 代码导致 h1 标题变为蓝色，因为blue值在red值之下：

h1 {
    color: red;
}
h1 {
    color: blue;
}

另一种说法是，如果 CSS 属性重复，则使用代码中最低的属性值（例如颜色），并且任何其他之前的重复属性定义（代码中较高处）将被忽略。那些之前的值被称为被覆盖。就像学校校长可以覆盖老师的决定一样。

为了更好地理解在这个上下文中“较低”的含义，可视化一个水级联沿着山丘下落是有帮助的。在决定使用哪个重复声明时，浏览器按照特定顺序查看所有四个样式表。这就是这里所描述的级联：

• CSS 级联中有四个主要分支，在每个分支上，如果任何 CSS 选择器的属性值对声明被重复，则之前的此类声明将被覆盖。

• 将四个分支或滴落可视化成一个水级联。在最高的分支处放置一个花篮。花朵按照特定的顺序排列。然后，花篮掉落到第二个分支池中，花朵可能会因为那个凸起而重新排列。然后，它继续掉落到第三个和第四个分支，最终在最低的池中静止。如果在任何这些凸起过程中重新定义了 CSS 声明（特定选择器的属性值对），则使用这个新的重新定义，即“获胜”的那个。换句话说，级联中的每个较低分支都可以重新定义（覆盖并更改）之前由较早分支定义的任何 CSS 样式。

• 如果分支 3 说 h1 是红色，但分支 4 说绿色——绿色获胜，浏览器在显示网站上的 h1 标题时遵循该规则。每个较低的分支可以重新定义任何选择器的属性值，因此提到 h1 标题颜色的最低分支的颜色是浏览器最终显示的颜色。图 7.4 说明了级联是如何工作的。

图 7.4 我们的花篮类比图。级联过程中的每一次跳跃都可能重新排列篮子中的花朵。

7.2.5 样式表的级联顺序

如前所述，CSS 中有四个主要的样式表。以下是样式表的级联顺序，从最高到最低的样式表：

1.  第一个、最高的分支是浏览器的默认样式。所有其他随后的、较低的分支都可以覆盖这些默认样式定义。例如，浏览器默认将颜色设置为黑色用于 h1 标题。这是基线，如果级联中后续的样式表没有提到 h1 的颜色，那么浏览器将 h1 渲染为黑色。（这很常见，因为黑色在白色文本上通常是网站上的标准。）

2.  每个 WordPress 网站都有一个主题，每个主题都有自己的 CSS 样式表。这是级联的第二个分支。您可以通过前往 WordPress 后端的“外观 > 主题文件编辑器”屏幕来查看它。主题的样式表覆盖浏览器默认值（但可以被下一个两个分支覆盖）。

警告：如果您愿意，可以查看主题的样式表，但不要修改它或主题的任何其他代码文件。

3.  您的（网站管理员的）CSS 样式规范接下来。在您的外观 > 定制 > 附加 CSS 屏幕中，您可以输入 CSS 代码来覆盖前两个样式表（浏览器的默认值和主题）。这是第三个分支。

4.  最后，在最低级别的是所谓的内联 CSS。它覆盖了之前的三个样式表。内联 CSS 与其他级别不同。前三个样式表是全局的——它们的样式定义应用于整个网站的所有元素（如所有的 h1 标题）。

然而，内联 CSS 是局部的，因此只为特定区域定义样式。这个区域可以小到单个字符。或者它可能是一个单词、句子、段落、整个页面、标题、图像或其他局部内容区域。指定区域的一种方法是在<span> </span>或<div> </div>标签之间包含某些内容，如下所示：

<span style="color: red;">This sentence is red</span> 

在经典 WordPress 编辑器中，内联 CSS 代码会输入到页面编辑屏幕上的“文本”标签。或者对于 Gutenberg 块编辑器（当使用段落块或类似块时），点击编辑页面屏幕右上角的三个点（选项）。然后，点击代码编辑器，或按 Ctrl-Shift-Alt-M。

这是使单个句子变红的内联 CSS 代码：

<p style="color: red;">This is a red sentence.</p>

这部分是实际的 CSS 代码：

style="color: red;"

图 7.5 展示了级联过程。

图 7.5 级联的四个阶段

请注意，如果你只是提出请求，GPT 和其他 AI 系统可以轻松为你编写内联 CSS 代码。

|

使用内联 CSS 代码创建一个动画，在页面加载后等待三秒钟，然后将以下句子从普通文本慢慢转换为粉色斜体，然后再回到普通文本。所有这些都在两秒内完成。句子是“请注意我!!”

GPT 做出了以下回应：

|

| （将此代码放入页面的文本标签中。）

<p style="display: inline-block; 
/* Needed for transform to work */
           animation: textAnimation
2s ease-out 3s 1 forwards;">
Please notice me!!</p> 

（将此代码放入外观 > 定制 > 额外 CSS 屏幕。）

    @keyframes textAnimation {
        0%, 100% { 
            transform: skew(0deg); 
            color: initial; /* or replace with
your preferred initial color */
        }
        50% { 
            transform: skew(20deg); 
            color: pink;
        }
    } 

|

小贴士：注意 CSS 代码中的那些 { } 括号。漏掉一个，代码将无法工作。值周围必须有一个开括号和一个闭括号。AI 会正确处理。但当你复制粘贴代码时，很容易错过最后的闭括号。

注意从技术上讲，除了我们查看的四个之外，还有一些额外的样式表。有 CSS 类或样式定义，它们的作用范围是整个页面，但这些是为那些想要深入研究 CSS 的人准备的。对于我们来说，你只需要可视化之前描述的四个主要样式表。

现在让我们看看一个名为检查器的工具，它内置在大多数浏览器中。它有几个有用的功能，其中之一是并排显示任何网站的 HTML 和 CSS 代码。但除此之外，你还可以使用检查器进行以下操作：

• 测试响应性——使用工具模拟网页在不同设备上的外观。

• 监控网络流量——你可以看到页面发出的网络请求列表，包括每个请求所需的时间等详细信息。这对于优化加载时间和解决与资源加载相关的问题特别有用。

• 调试 JavaScript——为此有很多工具。

• 性能分析——这包括监控页面加载速度，识别 JavaScript 执行中的瓶颈，并揭示不同元素对页面整体性能的相对影响。

但对于我们来说，我们将专注于检查器为页面设计师提供的工具。

7.3 使用检查器

让我们看看一些真实的 CSS 示例以及一组在探索 CSS 和 HTML 时可能会发现有用的工具。这些工具可以在你浏览器的检查器（也称为开发者工具）中找到。在查看任何网页时，你可以通过右键单击打开上下文菜单，然后从菜单中选择“检查”来打开检查器。图 7.6 显示了典型的检查器显示。

图 7.6 在这里你可以看到关于这个网页的很多细节。

左侧面板显示 HTML 代码，右侧面板显示 CSS 代码。在 HTML 面板中双击一个 HTML 元素以选择它（如图 7.6 所示，已选择一个div区域），你可以在右侧面板中看到任何相关的 CSS 代码。

注意到 CSS 属性webkit box sizing上有一条横线。这意味着相同的属性在层叠中再次出现，因此这里的值（content-box）在浏览器渲染此代码时将被忽略。它已被覆盖。

检查器有许多功能和工具。例如，您通常可以找出网站正在使用什么主题和插件。按 Ctrl-F，搜索主题。

这个功能丰富的工具集让您可以检查、调试和测试 CSS。检查器提供了一个直观且交互式的界面，帮助您理解和操作任何页面的视觉方面。

右侧的样式面板显示了应用于当前所选 HTML 元素的 CSS 规则。该功能让您了解为什么某个样式被应用或覆盖。

规则和选择器

记住，CSS 规则是特定 HTML 元素的所有属性及其值的完整列表。规则以所谓的选择器（这是 CSS 对被样式化的 HTML 元素的称呼）开始。选择器后面跟着一个开括号（{）和属性：值对的列表。最后，规则以一个闭括号（}）结束。以下是一个典型的 CSS 规则：

h1 {
    color: blue;
    font-family: sans-serif;
    font-size: 14em;
    font-weight: bold;
}

检查器还允许您实时编辑 CSS 代码。在样式面板中做出的任何更改都会立即反映在检查器的网页面板上。（页面之前曾以两个代码面板显示，尽管面板可以调整大小和重新排序。）这样，您可以尝试不同的 CSS 样式并立即看到结果，而无需编辑源文件并刷新页面。

您可以编辑现有规则、禁用规则、添加新规则，甚至添加全新的样式表。（要查看更多前端面板，将鼠标移至菜单中的“性能”上方，然后向下拖动。）然而，您在检查器中做出的任何更改都不是永久的。您只是在实验，但这些更改不会应用到任何样式表中。

检查器还包含用于处理更复杂 CSS 特性的各种工具。例如，盒模型视图显示了所选元素的填充、边框和边距，并允许直接编辑这些值。（要查看所选元素的盒模型，请点击 CSS 代码上方的“计算”选项卡。）在盒模型图示下方，您可以查看应用于此元素的层叠最终结果。换句话说，您可以看到层叠完成后哪些值胜出。这有助于理解复杂的样式交互。（这里的“计算”指的是在扫描和渲染整个层叠后的最终结果。）

最受欢迎的浏览器的检查器还包括用于处理 CSS 动画和过渡的工具。您可以查看和控制动画的时间线，减慢它们的速度，并在特定点暂停它们。这有助于调试动画。不同浏览器的检查器在功能上略有不同，因此以下是每个检查器的概述：

• Chrome——Chrome 的检查器包括一个动画抽屉选项卡，可以自动检测和分组动画。然后你可以检查动画，减速或重放它们，并查看源代码。

• Edge——Edge 的动画工具中的动画检查器支持 CSS 动画和过渡。你可以操纵和测试各种效果，包括改变时间、延迟、持续时间或关键帧偏移。

• Firefox——Firefox 的页面检查器包括一个动画视图，它以时间线同步的方式显示页面中的动画。它支持使用 CSS 过渡或关键帧规则创建的动画。

• Safari——Safari 的 Web 检查器提供了一个图形功能，可以预览 CSS 动画和过渡中的关键帧及其类。

检查器还包括响应式设计测试的工具。你可以模拟不同的屏幕尺寸、分辨率，甚至特定的设备，让你可以看到你的 CSS 样式在各个屏幕尺寸和形状上的外观。

使用关键帧简化动画

关键帧是动画序列中变化（或“节奏”）的重要时刻。关键帧可以指定某物开始移动、改变方向、调整大小等。可以为诸如位置、旋转、缩放等设置关键帧。在两个关键帧之间（或关键帧和序列的结尾之间），动画软件将自动插值值以创建平滑的过渡。

这意味着你不需要手动定义每一个微小的变化，只需定义重要的关键帧即可。你只需说，旋转 1 秒，而不是为每秒 24 帧中的每一帧指定位置。你可以使用这种简化的关键帧技术来指定时间、节奏、转换和其他动画效果。

知识区结束。

7.4 掌握 YellowPencil

YellowPencil 插件非常出色。它允许任何人构建一个高度定制的网站，其视觉上与网站的目的非常接近。而且，你不需要了解任何关于 CSS 的知识。你可以细致调整你页面上的设计元素（在合理的范围内）。更重要的是，你的网站不会看起来像使用你安装的主题的其他网站的克隆体。

如果你觉得调整网站不舒服，可以让有设计经验的人自由地在网站上工作几天。并且给他们 YellowPencil。正如之前提到的，设计师不需要了解任何关于计算机编程的一般知识或 CSS 的特定知识。然而，他们可以让 YellowPencil 生成复杂而强大的 CSS 代码，真正让网站发光。在几个 CSS 代码生成插件中，YellowPencil 是最受欢迎的。

提示：YellowPencil 拥有数十种工具和功能。你可以在这里了解它们：mng.bz/QDg1。

要开始使用黄色铅笔，请转到 WordPress 中的“插件”>“添加新插件”屏幕，并搜索“视觉 CSS 样式编辑器”（黄色铅笔的官方名称）。安装并激活它。当您查看黄色铅笔屏幕时，点击图 7.7 中显示的资源选项卡，以查看获取教程和论坛的位置，您可以在那里从专家那里获得答案。

图 7.7 如果在使用黄色铅笔时遇到任何问题，这些是寻找答案的绝佳资源。

黄色铅笔不会修改您的主题 CSS 文件，也不会将其 CSS 代码放入您的“外观”>“自定义”>“附加 CSS”屏幕（您可以在那里添加您自己编写的 CSS 代码，或者让 AI 为您编写）。相反，您可以通过访问 WordPress 网站后端的“黄色铅笔”>“自定义”屏幕来查看和编辑黄色铅笔生成的 CSS。但此功能仅在插件的 Pro 版本中可用。

黄色铅笔：免费版与 Pro 版

黄色铅笔的 Pro 版本会自动将其 CSS 代码保存到您的 WordPress 网站上（在“黄色铅笔”>“自定义”屏幕中）。免费版本只保存一些 CSS 属性。此外，Pro 版本还包括免费版本中不可用的许多附加功能。考虑到您获得的所有功能，升级到 Pro 版本相当便宜。

然而，即使只使用免费版本，您也可以生成可用的 CSS 代码（甚至对于黄色铅笔编辑器中标记为 Pro 的 CSS 属性）。原因是免费的黄色铅笔至少会显示它生成的任何 CSS。但是，手动将 CSS 代码添加到您的网站上既不方便又容易出错。

免费版本的黄色铅笔不允许您使用 Ctrl-C 复制其代码。然而，您可以将代码写在一张纸上，将其输入到记事本中，或者只需截图。然后，转到您的网站“外观”>“自定义”>“附加 CSS”屏幕，并将代码输入到该屏幕中。如何做到这一点将在下面描述。

7.4.1 自动生成 CSS 代码

现在，我们来尝试一下黄色铅笔。让我们生成一些简单的 CSS 代码，使您网站页面上的一个页面标题更大并呈现蓝色。转到您的“页面”>“添加新页面”屏幕，并添加一个名为“练习”的新页面。. 然后，点击“发布”或“更新”按钮以保存该页面。

在“练习”页面编辑页面屏幕的右上角，点击“编辑页面 – 黄色铅笔”按钮。这将带您进入主黄色铅笔屏幕，如图 7.8 所示。注意图 7.8 的右侧是一个您可以修改的 CSS 设计类别列表。点击“文本属性”以打开并查看您可以修改的所有排版属性。

图 7.8 当您在页面上点击一个元素时，您可以在右侧面板中为其设置样式。在这里，我们将处理页面标题。

现在，点击黑色颜色条，然后点击蓝色（在图 7.9 的颜色类别下可以看到它）。将字体大小拖到 60 px。请注意，这些更改会立即在 YellowPencil 的页面视图中显示。这样，您可以进行调整并检查这些更改对页面整体设计的影响，如图 7.9 所示。

图 7.9 您在右侧面板中做出的修改会实时显示在左侧的页面视图中。

注意字体家族和颜色旁边的 Pro 图标。这意味着您可以在 YellowPencil 中更改这些属性，但如果您还没有注册 Pro 版本，YellowPencil 不会将这些属性应用到您的网站上。对其他属性（如样式斜体）将会应用并保存到您网站上的 YellowPencil > 自定义屏幕，如图 7.10 所示。

图 7.10 这个 WordPress 后端 YellowPencil > 自定义屏幕显示了在 YellowPencil 中做出的修改的 CSS 代码。

但让我们假设您确实想做出那些 Pro 更改，比如将页面标题变为蓝色并放大到 60 px。然而，您没有 Pro 版本。尽管有些笨拙，您仍然可以使用此代码进行这些更改，即使在免费版本中也是如此。点击左侧的 CSS 编辑器图标（或按E键），然后您可以看到 Pro 颜色和字体大小属性的 CSS 代码，如图 7.11 所示。图 7.12 显示了您可以在网站上使用的 CSS 代码。

图 7.11 在 YellowPencil 中点击此 CSS 编辑器图标以查看它生成的 CSS 代码。

图 7.12 这里是 YellowPencil 为您生成的 CSS 代码。

您可以手动复制此 CSS 代码（或截图），转到您网站的“外观”>“自定义”>“附加 CSS”屏幕，然后将代码输入或粘贴到 CSS 字段中。现在标题更大且为蓝色。但如果您计划进行大量的 CSS 工作，YellowPencil 的 Pro 版本价格相当合理。

7.4.2 理解 CSS 动画

目前，YellowPencil 提供了以下动画功能：

• 动画——使用这个 CSS 属性，您可以动画化 HTML 元素。

• 动画生成器——这个工具帮助您创建自己的自定义动画。其主要功能是允许您以使用设计师的视觉优势的方式创建动画，而不是要求他们手动编写代码。您也可以实时看到这些动画设计的结果。

• 动画管理器——在这里，您可以管理您添加到网站上的所有动画。例如，您可以直观地调整持续时间、延迟时间等设置。

• 过渡——这个 CSS 属性允许您向 HTML 元素添加简单的过渡，例如淡出或淡入。还有像橡皮筋动画这样的特殊技巧。

• 50+动画—这是一个包含 50 多个预定义动画的集合。

与动画和过渡一起工作

动画和过渡相关联。然而，动画更加复杂和多功能。你可以使用多个关键帧，并连续播放或循环活动，而无需用户交互或其他触发器。动画可以涉及多个属性，并允许对时间和顺序进行精细控制，显示更复杂和多样的运动和效果。

过渡，相比之下，通常用于涉及从一个状态到另一个状态的变化的简单交互（例如从不可见到可见，或从黑色到粉色）。它们由用户交互（例如查看新页面）触发，并且通常涉及在两个状态之间（初始状态和最终状态）平滑地改变一个或多个 CSS 属性：一个例子是将黑色正常文本变为粉色斜体，然后再变回。总结一下：动画生成器工具用于创建更复杂、基于关键帧的动画，而过渡工具用于创建更简单、基于状态的效应。

此列表描述了主要的过渡属性（mng.bz/XxAl）：

• 类型—指定过渡效果所对应的 CSS 属性的名称。当指定的 CSS 属性发生变化时，过渡效果开始。

• 持续时间—过渡效果完成所需的时间（秒 s）或毫秒 ms。

• 缓动—过渡效果的速率曲线。值可以是 Ease、Linear、Ease-In、Ease-Out 或 Ease-In-Out。

此列表描述了主要的动画属性：

• 动画—向元素添加动画。

• 触发器—指定触发动画开始的条件。可以是 Onscreen（当元素在屏幕上可见时播放，我们很快会使用这个值），Hover（当鼠标指针移至元素上时开始），Click（当元素被点击时），或 Focus（当表单字段获得焦点时触发，意味着用户已按下 Tab 键在表单字段间移动，或点击了一个字段）。

• 触发重复—确定动画运行多少次。

• Duration—规定动画完成一个周期所需的时间。

• 延迟—指定触发动画后动画应等待多长时间才开始。

• 缓动—设置速度模式。值是 Ease、Linear、Ease-In、Ease-Out 或 Ease-In-Out。尝试这些值以查看它们之间的差异。

• 动画填充模式—设置动画未运行时动画的结束状态。值可以是 None、Forwards、Backwards 或同时为 Forwards 和 Backwards。

提示 这里是来自 MDN Web 文档的一个很好的教程，介绍了使用 CSS 动画化页面的多种方法：mng.bz/yW27。

7.4.3 尝试动画

这里有一些步骤可以帮助您实现淡入效果。这可以是一种微妙但有效的方式，在网站标题下方显示各种元素，如您的网站标语。访客会立即看到您的网站标题，但然后您的标语需要几秒钟才能淡入视线。

在此示例中，我们将使用黄色铅笔插件的“运动”功能使网站的大标题 h1 在 2 秒内淡入视线：

1. 前往您的“页面 > 所有页面”屏幕，然后点击一个名为“实践”的页面以打开其“编辑页面”屏幕。

2. 在右上角点击“编辑页面 - 黄色铅笔”按钮。

3. 在黄色铅笔中点击页面的标题（实践）以选择该 h1 元素。

4. 在右侧点击“运动”来打开其模块。选择“淡入”作为动画类型。

5. 要在元素在用户的浏览器中可见时开始动画，将“触发”属性的“onscreen”选中。

6. 要使动画只播放一次，将“触发重复”属性设置为“1”。

7. 将“持续时间”属性设置为“2”秒（或“3”秒，或您喜欢的任何值）。

8. 除非您希望动画在页面显示后一段时间才开始，否则请保持“延迟”属性在默认的0值。

9. 根据您希望动画速度在其持续时间中如何变化，将“缓动”属性设置为“ease”或“linear”。

10. 将“动画填充模式”设置为“forwards”以确保动画结束后页面标题元素仍然可见。

11. 在右上角点击“保存”按钮以将代码存储在您的网站上。

12. 在您遵循那些步骤之后，黄色铅笔会生成以下 CSS 代码：

.hentry .entry-header h1:yp-onscreen{
    animation-duration:2s;
    animation-delay:0s;
    animation-name:fadeIn;
}
/* Post Title */
.hentry .entry-header h1{
    animation-fill-mode:forwards !important;
}

现在返回到您的网站（点击之前的浏览器标签），然后在顶部菜单栏点击“查看页面”。您会看到页面标题“实践”淡入。要再次看到效果，请按 F5 刷新浏览器页面。

当然，您可以在网站上实验数百种变化、设置、交互和特殊效果，如动画，以改善您网站主题的 CSS 文件中描述的默认外观。如果您对网站设计感兴趣，我相信您会发现黄色铅笔插件既实用又有趣。

7.4.4 引入 AI

AI 是一位出色的程序员。让我们尝试从 GPT 获取一些帮助。一个流行的效果是当用户将鼠标指针悬停在图像上时触发的缩放动画。以下是我的提示：

|

您是一位 CSS 编程专家。为网站创建一些 CSS 代码，当鼠标指针悬停在图像上时，图像会慢慢增大 20%。

GPT 提出了你应该粘贴到编辑页面屏幕的文本标签页上的代码。将 putyourimageURLhere.jpg 替换为你媒体库中一张图片的实际 URL。要获取该 URL，点击媒体库中的图片。然后，在屏幕的右下角，点击复制 URL 到剪贴板按钮。接下来，将以下<div>代码粘贴到你的一个网页中，并记得将putyourimageURLhere.jpg替换为你从媒体库中复制的 URL。

|

|

*<div class="image-container">*
  *<img src="putyourimageURLhere.jpg">*
*</div>*

|

点击更新或发布按钮。现在，转到你的外观 > 定制 > 附加 CSS 屏幕，并将以下整个 CSS 规则粘贴进去，从.image-container { 开始，到 } 结束：

.image-container {
  display: inline-block; /* Ensures the container
 wraps tightly around the image */
  overflow: hidden; /* Prevents any overflow
 from the growing image */
}

.image-container img {
  transition: transform 1.9s ease; /* Smooth
 transition effect */
  display: block; /* Removes any unwanted space
 below the image */
}

.image-container img:hover {
  transform: scale(1.8); /* Enlarges the image */
*}*

点击更新或发布按钮。

注意：描述代码的注释被/*和*/符号包围。注释不是 CSS 代码，在 CSS 执行时会被忽略。它们只是给程序员看的。GPT 提供了代码及其描述。

现在为了测试它，转到你粘贴了<div>代码的编辑页面屏幕。点击查看页面以转到你网站的首页。将鼠标指针移到图片上以查看效果。

7.5 理解 CSS 范围

在这里，我们进入了另一个极客区域。接下来的信息有些专业，所以如果你不是技术人士，可以自由地跳过接下来的几节，并在 7.8 节回来继续阅读。

你可能注意到了在查看 YellowPencil CSS 编辑器时，它有三个标签页：单个、全局和模板。它们控制 CSS 代码的范围（影响范围）。单个标签页只将代码应用于当前页面，而全局标签页将代码应用于整个网站。

模板标签与单个标签类似，但模板将 CSS 应用于特定类型的页面（任何受特定模板控制的页面）。例如，假设你正在编辑一个由电子商务插件（如 WooCommerce）控制的产品页面。如果你点击模板标签，你应用于当前页面的 CSS 样式也将应用于你网站上所有其他产品页面。这样，你就可以在相同类型的所有页面上保持一致的外观和感觉。

为了复习，以下是 CSS 级联最有用、最简单的可视化。它是一个四级过程：

1. 浏览器默认属性，当级联中未定义 CSS 样式时，浏览器将应用于 HTML 元素。这是最高（最早）级别。这些属性是浏览器固有的，不是 WordPress、你的网站数据库或任何 CSS 样式表的组成部分。

2. 网站主题的 CSS 文件（位于你的外观 > 主题文件编辑器屏幕）。此文件中定义的样式将应用于整个网站，除非它们被级联中更下方的重复属性覆盖。

3. 你——网站的设计师——放入外观 > 额外 CSS 屏幕中的 CSS 代码。这些属性也是网站范围内的（除非你正在定义一个 CSS 类，它可以在特定的<div>元素中使用，例如）。

4. 在单个页面或该页面的较小区域（一个单词、一个图像、一个段落）中添加到 HTML 中的 CSS 代码。这是级联的最低和最终级别，并覆盖了之前的一切。例如，你可以转到你的页面 > 所有页面屏幕，点击练习页面，然后点击文本框中的文本（HTML 代码）选项卡。

现在添加以下 HTML/CSS 代码：

<div style="color: purple;">
  This text will be purple.
</div>

代码的 HTML 部分是

<div>
  This text will be purple.
</div>

代码中的 CSS 部分是

style="color: purple;"

<div>标签允许你创建一个区域，在这个区域内你可以一次性应用多个 CSS 修改。在这里，前景色被改为白色，背景色为紫色：

<div style="color: white; background-color: purple;">
<h2> A new color combination!</h2>
<p> This text will be white on a purple background.
</div>

我们希望这个<h2>标题和下面的<p>正文都使用白色与紫色对比。因此，我们创建了一个<div>部分来包含这两个元素。

注意：回想一下，之前描述的四级级联实际上是一种过度简化。自从 1996 年 CSS 推出以来，CSS 已经发展，并且由于几次委员会会议的直接结果，CSS 级联变得相当复杂。现在有各种继承、作用域限制、作用域根、邻近性以及其他因素可供使用。如果你对这种复杂性感兴趣，可以在这里深入了解最新的官方委员会文件：www.w3.org/TR/css-cascade-6/。

被认为的最佳实践是限制内联 CSS 的使用。如果过度使用，它会使你的样式难以阅读和维护。毕竟，CSS 最初是为了消除在网站上每个特定类型的 HTML 元素上手动编码的需要而发明的。

如果你发现需要做很多内联 CSS，考虑使用 CSS 类而不是style=属性。我们将在下一节转向类。

7.6 使用 CSS 类

CSS 类的作用类似于 CSS 本身提供的作用：类将 CSS 代码与网站内容分离。回想一下，你可以在外观 > 定制 > 额外 CSS 屏幕中定义 h1 标题（例如绿色和无衬线字体）的规则。当在该屏幕中定义时，所有的 h1 标题都会自动渲染为绿色和无衬线。因此，不需要手动将样式代码输入到网站上的每个 h1 元素中。相反，在额外 CSS 屏幕中定义的样式会自动应用到每个 h1 元素上。

这显然比在网站上为每个h1标题输入相同的样式属性要高效得多。另一个好处是，如果你改变主意，想将颜色改为蓝色而不是绿色，你只需在“附加 CSS”屏幕中修改h1 CSS 规则，只需在一个地方进行更改。然后，这个更改将遍及整个网站，修改所有的h1标题。

CSS 类也可以在附加 CSS 屏幕中定义。类可以与内联 CSS 一起使用（它们也可以在外部样式表中和其他地方使用）。CSS 类可以逐个添加到单个 HTML 元素，如h1，使用内联 CSS。类似于你使用内联 CSS 的方式，它的style=属性被输入到网站上的每个h1元素中。换句话说，你将类属性输入到 HTML 元素中，就像你添加内联 CSS 的样式属性时做的那样。

使用style=属性的内联 CSS 在这里展示：

<p style="color: green; font-weight: bold;">This
is a green and sans sentence.</p>

这里是使用class=属性的内联 CSS：

<p class="greensans">This is a green and sans sentence.</p>

因此，如果你必须为每个你想要应用该类样式的h1元素输入类属性，使用类而不是style=属性的意义何在？嗯，使用class=而不是内联 CSS style=有两个优点：

• 当一个规则有多个属性时，style=属性必须为每个 HTML 元素（例如每个h1标题）列出它们所有。但使用class=属性，你只需要使用类名，例如前面代码中显示的greensans。这使得事情更简短、更简单。

• 如果你后来决定将颜色从绿色改为棕色，你只需在类定义中进行更改，而不是手动使用style=修改每个h1标题。

注意，CSS 中有几种选择器，但我们这里关注的是两种主要的选择器：HTML 元素标签名和类。HTML 标签名是预定义的，你不能更改它们。在引用那个标题元素时，你必须使用h1。相比之下，你可以为类命名任何你选择的名字——你可以为类命名。这还意味着，如果你想覆盖主题 CSS 开发者定义的类，你必须弄清楚那些开发者是如何命名那个类的。（这曾经有时很难弄清楚，但使用 YellowPencil 插件时，这根本不是问题。）现在让我们尝试一个示例，展示如何使用一个类。

1. 前往你的外观 > 定制 > 附加 CSS 屏幕，并输入这个类定义（为这个类使用你喜欢的任何名字）：

.greensans {
  color: green;
  font-family: sans-serif;
}

2. 点击“发布”按钮。

3. 前往你的页面 > 所有页面屏幕，然后点击一个页面标题以打开其编辑页面屏幕。

4. 在文本框右上角点击“文本”标签。

5. 在该页面的文本框中输入以下内容：

<h1 class="greensans">My first headline</h1>
<h1 class="greensans">The second headline</h1>
<p class="greensans">You can apply a class to any HTML element, like this
 paragraph.</p>

6. 点击“更新”按钮。

7. 点击“查看页面”以查看更改。

定义类

虽然 WordPress 不提供直接访问页面或帖子的整个 HTML 代码，但有时类定义在<style> </style>标签对中。这对标签位于页面 HTML 的顶部，在<head> </head>标签对内。这个区域被称为 HTML 文档的头部，其中包含用户不可见的元数据——JavaScript、“内部”CSS 等。

类也可以在链接到<head>部分的外部样式表中定义，如下所示：

</head>
<link rel="stylesheet" href="styles.css">
<body>

在 HTML 文档中，这里列出了主要的区域，说明了在哪里可以定义一个页面范围的 CSS 类：

<html>
<head>
<style>
.greensans {
  color: green;
  font-family: sans-serif;
</style>
</head>
<body>
    <!-- The primary content displayed in the web page-->
</body>
</html>

如果你在头部位置定义一个类，它只适用于那个特定的页面。然而，要在 WordPress 中输入“内部”CSS，你不能使用代码视图（编辑页面屏幕中的文本选项卡）选项。WordPress 在代码视图下选择时不会显示页面上的所有HTML。相反，你必须编辑主题的 header.php 文件。除非你是 PHP 专家，否则这不是一个好主意。即使如此，当主题更新时，你的类定义将被覆盖。

这标志着技术区域的结束。我们现在返回到我们的常规内容。

7.7 Gutenberg 中的 CSS

就像经典编辑器一样，WordPress 的块编辑器会对你在外观>自定义>附加 CSS 屏幕中输入的 CSS 代码做出响应（如本章前面示例中所述）。然而，在撰写本文时，在 Gutenberg 中，你只能通过预览选项查看 CSS 的效果。在页面或帖子编辑屏幕中，更改通常不可见。

小贴士：在描述如何使用 Gutenberg 时，术语通常会频繁出现。即使经过多年的工作，WordPress 的才华横溢的人们仍在完善这个正在进行中的工作。对我来说，Gutenberg 是一个值得追求的目标，终将实现。现在，你必须记住一些替代方案，正如本节其余部分所展示的。我期待着当 Gutenberg 稳定并且相对没有错误时，从经典 WordPress 编辑器切换到 Gutenberg。但我的希望是，通过单次鼠标点击就可以在经典和块编辑器之间切换。每个编辑器都有其优势。

就像经典编辑器一样，在 Gutenberg 中，你可以在附加 CSS 屏幕中添加全局、网站范围的 CSS 代码。不过，现在让我们看看如何使用 Gutenberg 添加内联CSS 本地化——将 CSS 添加到单个 HTML 元素，如段落正文文本（HTML 元素<p>）。

惊讶的是，在 Gutenberg 中有五种方法可以通过内联 CSS 代码访问和修改 HTML！转到页面>所有页面屏幕，点击一个页面标题进入其编辑页面屏幕。点击+添加一个经典块（不是段落块）到页面上，并在该块中输入This is a paragraph。

提示：目前，如果你尝试向段落块添加内联 CSS，你可能会遇到困难，即错误。在你使用代码视图添加 CSS 后，预览页面，然后点击“编辑页面”返回到编辑器，古腾堡会显示一个错误消息，称你的块中有意外的或无效的内容。这不是真的——内容既符合预期又有效。然后，古腾堡会提供通过显示“尝试块恢复”按钮来修复问题的方法。这种“修复”简单地删除了块！就像你去牙医那里修补牙齿，牙医却把你打了一样。

点击“经典”块以选择它，然后从工具栏上的菜单中选择“查看 > 源代码”。将此内联 CSS 样式添加到你的段落文本中：

<p style="color: red;">This is a paragraph</p>

点击“确定”。现在你将看到变化，即使在页面编辑器中（无需点击“更新”或“预览”）。或者，如果你已经定义了一个 CSS 类（在你的外观 > 定制 > 附加 CSS 屏幕中），你可以使用class=属性以相同的方式应用该类，而不是使用style=，如下所示：

<p class="greensans">This text</p>

或者，当选择一个块时（换句话说，其工具栏是可见的），你可以按 Ctrl-Shift-Alt-M 切换到代码视图并在那里管理内联 CSS。点击“退出代码编辑器”返回到视觉编辑器。

另一种选择是选择“工具 > 源代码”，这具有与选择“查看 > 源代码”相同的效果。还有另一种选择是点击右上角的三点，并选择“代码编辑器”，这具有与按 Ctrl-Shift-Alt-M 相同的效果。

由于古腾堡有时认为做同一件事的五种方法比一种方法更好，因此你也可以使用特殊的“高级”模块将 CSS 类应用到块上。如前所述，通过内联 CSS 添加class=可以很好地将类规则应用到 HTML 元素，如标题或正文文本。你只需像往常一样在附加 CSS 屏幕中定义一个类，然后在 HTML 元素中输入<h1 class="classname">headline</h1>。

在古腾堡中还有另一种方法可以内联添加 CSS 类。你点击一个块，然后点击编辑屏幕右上角的三点（这适用于一些块，但不适用于所有块）。现在你会在右侧看到一个侧边栏（通常是这样，但不总是）。点击侧边栏中的“块”标签。

最后，向下滚动到高级模块，并点击其向下箭头以打开它。你通常会看到机会通过在附加 CSS 类字段中输入 CSS 类的名称来向当前选定的块添加类，如图 7.13 所示。

图 7.13 你可以使用古腾堡的附加 CSS 类字段将类应用到块上。

警告：Gutenberg 的右侧边栏有 bug，至少在撰写本文时是这样的。经典块以及类似的经典段落块都不允许你使用高级模块添加 CSS。你甚至无法查看侧边栏。你必须首先将经典块转换为块（矛盾，不是吗？）。为此，你需要在经典块顶部的工具栏中点击显示的“转换为块”（有两个工具栏，一个在上一个在下）。你逻辑上认为经典块是一个块，但没关系。经典——让我们称它为伪块——在你可以访问侧边栏及其高级模块之前必须转换为真正的块。所有这些麻烦其实并不值得。直接使用代码视图选项手动输入block=属性要容易得多。这样你就可以继续使用经典伪块。

警告：当你在这个“附加 CSS 类”功能中使用类名时，不要在名称前加句点（正如你在“定义”附加 CSS 屏幕中的类时必须做的）。

当你将类名输入到“附加 CSS 类”字段时，WordPress 会添加必要的class=属性到你的 HTML 中，就像你切换到代码视图并亲自输入它一样。

7.8 修复画布和扩展画布

AI 修复画布使删除或替换图像中的不需要的对象变得容易。使用修复画布，你可以通过拖动选择套索围绕对象来选择对象。然后，你可以请求删除它，或者描述你想要替换的内容。

注意：本书中的许多图形都是设计为彩色查看的。电子书版本显示了彩色图形，因此在阅读时应参考。要获取免费电子书（PDF、ePub 和 Kindle 格式），请访问www.manning.com/books/wordpress-power-toolkit注册您的印刷版书籍。

扩展画布是与裁剪相反的操作。回想一下，当你裁剪一张图片时，你会剪掉它的一边或多边。这通常是为了将焦点移动到三分法规则中的线条交点处。这也可以改善图像的平衡。

现在，多亏了 AI，你可以（令人惊讶地）扩展图像，添加一些之前从未存在过的内容！AI 在当前视图之外创造额外的视觉内容，但它不会重复现有内容。相反，它创建了一个变体，这是现有内容的视觉逻辑扩展。

例如，如果你正在处理海滩场景，你可以向左或向右扩展海滩，或者两者都扩展。以这种方式进行扩展将保留当前海滩的特性，但拓宽图像。或者，你可以扩展图像的顶部以延伸天空。你也可以通过扩展图像底部以下的部分来扩展前景。这是一个新技术，在 AI 出现之前并不存在。

在扩展绘画时，AI 不仅仅是复制现有内容。你不会得到一个看起来像原始图像中存在的云朵的第二朵云。记住，AI 是智能的。它可以感知性地解释在场景更广的视角中可能出现的图像，并为你提供可供选择的变化。扩展海滩，你可能会得到更多的海滩，但沙滩、阴影或甚至可能还有棕榈树（或者如果你想在扩展的画布上添加棕榈树，你可以在生成扩展工具栏中输入palm tree）。这些是值得了解的技术，让我们看看它们是如何实现的。

尽管 Midjourney 和其他文本到图像系统有生成这些修改的工具，但目前 Photoshop 的工具是最容易掌握的。所以，让我们用 Photoshop 来进行一些修复。

Photoshop 将修复和扩展绘画称为生成填充和生成扩展。两者都会自动匹配光线、视角和其他保持图像整体内容和风格的质量。这只需几秒钟，结果常常令人震惊地合适。就好像原始摄影师使用了更广的镜头，或者达利在背景中画了三只站在高跷上的大象。

看一下图 7.14。这个 Midjourney 生成的金色面具可以通过一些修改而受益。首先，它没有明显的焦点。所以，我们将通过让 Photoshop 用朱红釉来着色嘴唇，将嘴唇作为焦点。根据我们选择哪个区域，嘴唇的形状也可以改变。

图 7.14 使用套索工具选择了面具嘴唇后，Photoshop 将生成三种红色釉料的变化，现在我们的提示描述了我们想要的材料。

在 Photoshop 中，你可以使用它的套索工具来绘制选择区域。这将是要用釉料替换的区域。所以，我用套索大致跟随嘴唇的轮廓，留下了一条虚线，显示了所选内容。一个生成工具栏出现在屏幕底部，如图 7.14 所示。如果你只是点击生成，而不输入任何文本，它将移除所选对象，用周围的内容填充空间。

然而，我们的目标是修改，而不是删除这些嘴唇，所以我输入了“光泽朱红釉”作为文本提示，然后点击生成。

你可以反复点击生成，每次都会得到三个新的变化，直到你找到最喜欢的一个。图 7.15 显示了九个变化中最好的结果。色彩很好，嘴唇紧闭的形状更有趣，至少对我来说是这样的。

图 7.15 九个变化中最好的一个，特点是紧闭的嘴唇增加了趣味性

现在嘴唇已经变成了朱红色，为了使其成为焦点，我们将使用裁剪工具将嘴唇移动到三分法网格线上。此外，眼睛现在位于两个交点，面部右侧也是如此。我们现在正在进行扩展绘画，在这种情况下，我们将框架向下和向右拖动。这些目前是黑色的区域将由 Photoshop 用当前背景的适当变化或我指定的新的背景填充。

在 Photoshop 中进行扩展绘画时，你使用裁剪工具，并拖动该工具的框架手柄之一或多个，以显示扩展应发生的位置。图 7.16 中的图像发生了显著变化。我在生成工具栏中输入了“金色天鹅绒窗帘”，因此 Photoshop 将为与坚硬的金属形成对比，但保留颜色添加一个不太聚焦、更柔和的纹理。如图 7.16 所示，这还增加了背景模糊，这是摄影中常见的浅景深技术。

本章全部关于高级设计技术和工具。它从历史设计趋势和目前激发大多数建筑、时尚以及当然还有网站的大多数的极简主义美学概述开始。然后，你探索了 CSS——这种设计语言允许你以相当大的自由度修改你网站的主题。你还看到了如何使用强大的 CSS 插件或 AI 系统为你编写 CSS 代码。你不需要学习 CSS 就能使用它。

图 7.16 将此图与图 7.14 进行比较，看看你是否同意修复和扩展绘画改善了图片。

接下来，你学习了如何使用 WordPress Gutenberg 块编辑器与 CSS 一起工作。本章以如何使用 AI 扩展和修复绘画工具智能地添加、删除或扩展图像中的内容结束。

现在，是时候从设计主题转向探索通过添加多媒体（音频、视频和图像）使网站生动起来的其他方法了。在下一章中，我们还将探讨如何确保你的网站对面临各种挑战的人是可访问的。在结束之前，我们将考虑一些涉及媒体许可和归属的法律问题，并展示如果你选择使用 Gutenberg 编辑器，如何管理多媒体。

摘要

• 描述今天建筑和其他领域如服装时尚和网站设计的典型形容词包括现代、极简主义、简单、干净和优雅。对于大多数网站来说，设计时考虑到展示优雅、现代的页面是一个好主意。这也包括微妙、克制的动画和媒体的使用。

• 层叠样式表（CSS）是一种有效的设计语言，通过它你可以精细调整你网站的视觉效果，使其既不同于其他网站，又与你的网站目的相协调。

• 检查器是大多数浏览器中找到的一组工具。它在学习 CSS 基础知识以及 CSS 如何修改和与支撑网页显示的 HTML 代码交互等方面非常有用。

• 你不需要学习 CSS 语言，因为有一个名为 YellowPencil 的强大插件可以为你自动生成 CSS。你使用滑块、颜色轮和其他高级 WYSIWYG 工具来微调页面的设计，然后 YellowPencil 会自动创建 CSS。此外，像 Claude（claude.ai）这样的 AI 系统在编程方面，包括 CSS，越来越擅长。

• 在最实用的 AI 驱动艺术工具中，修复画布和扩展画布是其中之一。

• 使用修复画布，你可以从图片中移除某些内容，或者通过描述你想要替换的内容来替换它。

• 虽然有一些 bug 和必要的解决方案，但 CSS 可以在 WordPress 的 Gutenberg 编辑器中使用。

• 扩展画布意味着你可以扩展一张图片的一边或多边。这与裁剪相反，裁剪是修剪图片的一边或多边。裁剪已经使用了几个世纪。但扩展画布只有在人工智能出现后才成为可能。图像的扩展部分必须与图像的其余部分融合，但它们也必须是原创的，并且有所变化。不能只是简单的复制。人类艺术家可以做到这一点，但在人工智能出现之前，没有任何计算机能够做到。

第八章：精通多媒体

本章涵盖

• 选择合适的图片数量、大小和类型进行展示

• 了解媒体文件存储的位置

• 确保你的网站对所有访客都是可访问的

• 注意法律问题，如剽窃、许可和归属

• 使用块编辑器管理媒体

多媒体是网站相对于印刷媒体的优势之一。虽然书籍和杂志可以展示图片，但它们不能包含音频或视频。几乎在每个网站上，你都想至少添加一些视频和肯定是一些图片。音频是可选的，并且相对较少见。

数据支持这一点。研究表明，包含良好、相关视觉内容的网站内容可以获得 94%的更多浏览量！（有关视觉效果的统计数据，请参阅mng.bz/av4x。）你还可以阅读《福布斯》杂志关于视觉学习和年轻一代特别是如何根据图片做出购买决策的评论，请访问mng.bz/MDWE。

大多数人声称自己是视觉学习者。在本章中，我们将探讨将相关图片、音频和视频添加到网站的最佳方法，以使其生动有趣，并给访客留下停留的理由。

8.1 展示适量的媒体

当然，你希望在使用图片或其他媒体时谨慎行事。使用太少，网站会显得静态，可能看起来充满了令人望而却步的灰色文字。使用太多，你的观众可能会分心，甚至可能感到厌烦，因为页面缺乏焦点。

尽管没有固定的数字。你不能仅仅针对每页五张图片。你应该使用的媒体数量取决于网站的主题内容。一个在作品集中展示作品的艺术家可以包含许多图片，同样，一个展示商品目录的电子商务网站也可以。一个试图避免显得轻浮的律师网站可能预期展示较少的视觉元素。

8.1.1 测试页面加载速度

页面加载速度是另一个考虑因素。过多的图片可能会减慢你的网站速度。同时，你需要考虑到一些访客可能拥有较慢的互联网连接。要测试你的页面加载速度，请按照以下步骤操作：

1. 暂时禁用任何即将推出或建设中插件，如 SeedProd。

2. 前往“页面”>“所有页面”屏幕，然后点击一个页面的标题。

3. 复制该页面的永久链接（位于工具栏上方）。

4. 前往此处提交页面加载测试的永久链接：pagespeed.web.dev。

5. 将永久链接粘贴到 URL 字段中，然后点击分析按钮。

你的网站类型应该使用多少图片？

请求 AI 检查竞争对手，并告诉你他们网站上每页典型的图片数量：

|

我网站的主题是淡水钓鱼。扫描几个最受欢迎的淡水钓鱼网站，并计算这些网站每页的图片数量。然后告诉我平均使用了多少图片。

GPT 在这类查询中表现最佳：

|

我审查了三个流行的淡水鱼垂钓网站——BassResource、Wired2Fish 和 TacticalBassin，以确定每页的平均图片数量。BassResource：该网站提供各种文章、视频和论坛，通常每页有 20-25 张图片，包括文章缩略图、内容中的嵌入图片和视频预览（Bass Resource）。Wired2Fish：该网站上的每一页通常有 30-35 张图片，包括详细的钓鱼装备照片、教学图片以及伴随文章和评论的插图（Wired2Fish）。TacticalBassin：该网站采用更简洁的方法，平均每页大约有 15-20 张图片。图片主要展示钓鱼装备、捕获的鱼和教学视觉（Tactical Bassin’ - Bass Fishing Blog）。通过平均这些数据，我们得到：BassResource：每页 20-25 张图片 Wired2Fish：每页 30-35 张图片 TacticalBassin：每页 15-20 张图片。取每个范围的中间值以获得更精确的平均值：BassResource：22.5 张图片 Wired2Fish：32.5 张图片 TacticalBassin：17.5 张图片。这些网站每页图片的平均数量大约为(22.5 + 32.5 + 17.5) / 3 = 24.2 张图片每页。因此，平均而言，这些流行的淡水鱼垂钓网站每页使用大约 24 张图片。

|

显然，Wired2Fish 正在扭曲这些结果。请给出排除 BassOnline 后的平均值。

|

每页平均图片数量为：(22.5 + 17.5) / 2 = 每页 20 张图片。因此，在流行的淡水鱼垂钓网站上（不包括 Wired2Fish），每页的平均图片数量大约为 20 张。

现在我们已经考虑了多媒体的定量方面，是时候将我们的注意力转向定性问题。

8.2 避免不适当图片、音频或视频

在这个背景下，不适当的媒体可以指几件事情：

• 与您网站的风格不匹配

• 与您网站的目的不符

• 完全粗俗或不恰当

• 仅仅装饰性，而不是推动您网站的故事

• 太大或太小

• 低质量或低分辨率

• 缺少替代文本描述（在图片详细信息屏幕中的“替代文本”或编辑相册屏幕中的“Alt 文本”）。

注意，替代文本由文本阅读器用于向有视觉障碍的人描述图片，或在图片无法显示时提供警报（仅限图片）。它也被搜索引擎使用。

• 缺少标题或字幕

• 自动播放的视频或音频

• 疯狂、分散注意力或令人不悦的视频或音频

• 由于媒体是由其他人创建的，因此不允许使用

• 没有正确格式化或尺寸以适应互联网显示（将在稍后讨论）

注意：如果您使用包含某人面部或车牌号码的媒体，则不应使用。据说谷歌在 Google Earth 应用程序中模糊处理这些内容的原因是，有人在将车停在臭名昭著的房子前陷入了麻烦。

媒体库并非无限。您需要了解其几个限制，以及解决这些限制的方法。接下来，让我们考虑媒体文件大小的问题。简而言之：请避免将大文件上传到您的 WordPress 媒体库。

8.3 在 YouTube 上存储视频

单个图像（以及 PDF 或 DOCX 文件等文本媒体）相对较小。因此，通常将它们存储在媒体库中不会成问题。然而，媒体库有一个文件大小限制。具体大小取决于您的托管服务（256 MB 是典型值）。

相比之下，视频文件非常大。原因如下：平均网站图像大约为 150 KB。但 5 分钟的视频是9,000 倍大。通常，视频的帧率为每秒 30 帧，换句话说，每秒 30 个图像。因此，5 分钟的视频大约相当于 9,000 个图像，或 1,350 MB。（这取决于图像或视频的规格和类型，但显然视频消耗内存非常快。）

WordPress 托管服务器的存储不是免费的。对您允许的存储量有限制。也可能存在最大文件大小限制。因此，除非您有一个只有几个简短视频的小型网站，否则请避免在媒体库中存储视频。

由于视频文件庞大，它们也会消耗大量的带宽和服务器资源。这样也会影响您网站的性能。

视频可以被压缩。这有助于提高页面加载速度和流畅的视频播放。然而，媒体库可能无法访问复杂的视频优化，例如管理压缩（这取决于您的托管服务）。但通常，出于之前提到的所有原因，最好将视频存储在第三方视频平台（如 YouTube）上。视频存储在那里后，您嵌入（粘贴）一个视频播放器到您网站上的一个页面。然后，当访客在播放器中点击播放按钮时，YouTube 会将您的视频流式传输到您网站页面，供您的观众观看。

YouTube 允许您免费存储视频！除了减轻您的托管服务存储和传输视频的负担外，YouTube 存储还为您提供以下额外好处：

• 高效、流畅的流媒体播放

• 高级优化和压缩

• 多种视频格式的管理

• 将视频嵌入您网站的简单方法

• 可定制的视频播放器

8.3.1 如何将视频上传到 YouTube

在获得许可的情况下，您可以在您的网站上展示他人的视频。或者，您可以上传自己的视频。幸运的是，在您的网站上嵌入任何类型的 YouTube 视频都非常简单。让我们看看如何将您自己的视频存储在 YouTube 上。以下是上传您的视频的步骤：

1. 登录您的 YouTube 账户。

2. 在右上角点击创建图标，如图 8.1 所示。

图 8.1 在 YouTube 中点击此添加视频图标以上传视频。

3. 点击上传视频。然后，拖放它，或从您的硬盘驱动器中选择它。请耐心等待，因为上传可能需要一段时间。

4. 在详细信息部分，如果您愿意，可以更改标题。并向下滚动以指定是否受年龄限制。这是必需的。

5. 在您的视频上传完毕之前，更改或添加您想要提供的信息。

6. 点击下一步。如果您想提供额外的视频元素（结束屏幕、卡片、行动号召），请在此页面上添加它们，然后点击下一步。

7. YouTube 会检查任何版权问题。然后，点击下一步。

8. 使您的视频公开，如果您愿意，点击计划以延迟视频的首映时间，默认时间是今晚午夜。

9. 点击保存。您现在已上传了视频。

8.3.2 在您的网站页面中嵌入视频

这里是找到您的 YouTube 视频并复制其 URL 地址（您将需要）的步骤。

1. 登录到您的 YouTube 账户。

2. 通过点击右上角的图标或头像进入您的频道。

3. 点击您的频道，如图 8.2 所示。

图 8.2 当您点击您的频道时，您将看到您上传到 YouTube 的所有视频。

4. 双击您的视频缩略图。这将带您到 YouTube 中视频的显示效果。

5. 点击视频下方的分享图标，如图 8.3 所示。

图 8.3 要开始将视频嵌入到您的 WordPress 网站中，请点击此分享图标。

6. 点击图 8.4 所示的嵌入图标。这将生成您实际嵌入视频所需的代码。

图 8.4 在您点击此处所示的< >嵌入图标后，您可以查看实际连接您的网站到您上传的 YouTube 视频的 HTML 代码。

7. 现在，您可以看到您需要粘贴到 WordPress 页面以创建视频播放器的 HTML 代码。它将加载您的视频，并准备好供您的访客播放。此 HTML 代码如图 8.5 所示。

图 8.5 点击这里的复制按钮将此代码保存到 Windows 的剪贴板，以便您可以将其粘贴到您的网站上。

8. 点击复制（如图 8.5 底部所示）将 HTML 代码发送到剪贴板。或者，如果您计划稍后嵌入，请将代码粘贴到记事本中，并保存到您的硬盘驱动器。

现在我们来看看如何将视频嵌入到您的网站——这相当简单。

8.3.3 在您的网站上嵌入 YouTube 视频

在您已遵循前面的步骤，上传了视频，并复制了该视频的 HTML 嵌入代码后，您现在可以准备将视频播放器添加到您网站的一个页面上了。请按照以下步骤操作：

1.  前往您的“页面”>“所有页面”屏幕，并点击您想要放置视频的页面的标题。

2.  现在，在编辑页面屏幕中，点击页面文本框中您想要视频所在的位置。这将使闪烁的垂直线光标位于视频播放器将被放置的确切位置。

3.  点击文本框右上角的“文本”选项卡。（此选项卡显示可以添加 HTML 代码的文本框版本。）

4.  现在按 Ctrl-V 粘贴代码。（如果您之前将代码保存在记事本文件中，请在记事本中打开它，按 Ctrl-A 选择它，然后按 Ctrl-C 复制它。然后，转到您的编辑页面屏幕并按 Ctrl-V 粘贴代码到您的 WordPress 页面中。）

5.  点击“更新”按钮（如果是新页面，则点击“发布”）以保存代码。编辑页面屏幕应类似于图 8.6。

图 8.6 在编辑页面屏幕的此“文本”选项卡中是简单嵌入视频的 HTML 代码。

6.  点击“查看页面”链接或编辑页面屏幕中的“视觉”选项卡，以查看和播放您的视频。

8.3.4 修改视频播放器

在编辑页面文本框的文本选项卡中，如果您愿意，可以查看和修改视频播放器的 HTML 嵌入代码。以下是一个包含您可能想要修改的属性的示例嵌入代码，或者，在autoplay的情况下，您可以完全删除它。大多数人不喜欢视频或音频自动播放。他们想要决定何时打开媒体。因此，删除autoplay及其后面的分号：

<iframe width="560" height="315" src=https://www.youtube.com/embed/eM6Axxx4WlLLwI
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; gyroscope;
</iframe>

如果您想考虑更改标签及其设置，以下是对标签及其设置的描述：

• <iframe> HTML 元素用于在当前 HTML 文档中嵌入另一个文档或网页。它可以用于广告，或者在我们的情况下，用于嵌入视频。

一些 HTML 术语

在 HTML 中，像这样用大于号和小于号括起来的代码（如 <iframe> 和 </iframe>）被称为标签，它们描述了它们所包含的内容类型，有时还包括额外的指定，如大小、位置或字体。打开和关闭标签，以及它们之间的内容，构成了一个 HTML 元素。当您在元素中看到 =" 符号，例如 title="Our Christmas Party"，关于该元素的额外信息被称为 HTML 属性。

• width 和 height 属性以像素为单位描述了嵌入视频播放器的大小和形状。

警告：指定宽度和高度可能会使视频播放器无响应（这意味着它不会正确地调整大小以适应像手机屏幕这样的显示）。因此，如果您选择指定播放器的大小，请务必通过在手机、平板电脑和显示器上查看您的网页来测试它。您的网站主题负责处理响应性，但如果它做得不好，这里有一个 CSS 修复方案：mng.bz/gaYZ。

• src 属性是将被检索和显示的内容的 URL 地址。在这种情况下，它是一个 YouTube 视频。

• title 属性不会显示。视觉障碍人士使用屏幕阅读器来大声读取这个属性（以及其他页面内容）。因此，title 属性应该描述视频。

• Frameborder 只有两个值：0 不在内容周围显示边框，而 1 则显示。

• allow 属性可以包括多个属性，实际上是一个权限列表：

  • accelerometer 允许嵌入的内容访问设备的加速度计，正如你可能预期的，它可以检测和测量手机或平板电脑的加速度。它读取设备沿所有三个轴施加的任何加速度。换句话说，如果以纵向模式查看表格，然后用户将其旋转 90 度，加速度计会检测到这种移动，屏幕会调整到横向模式。它变得比它高。

  • autoplay 在页面显示时开始播放视频，这通常会让用户感到烦恼。让用户决定何时开始表演。一些浏览器实际上阻止自动播放。它还可能影响可访问性，因为屏幕阅读器可能会读取其他内容，而自动播放的音频可能会突然干扰。解决办法是在你的代码中不包括 autoplay 属性。

  • gyroscope 是手机和平板电脑中的硬件，对扭曲或旋转非常敏感。它检测空间方向并提高加速度计的准确性。这些设备协同工作，可以使软件重新绘制屏幕到新的宽高比，例如从横向模式切换到纵向模式。

现在是时候回到一个定量问题：在互联网页面上显示的最佳图像文件大小是什么？

8.4 使用正确的图像尺寸

手机和其他现代相机拍摄的图像分辨率非常高，这意味着文件大小很大，会迅速耗尽存储空间。当你只想裁剪图像以显示细节时，高分辨率是有好处的。例如，如果图像中有大量像素，即使裁剪，结果仍然足够清晰。

但看看图 8.7。它展示了当你裁剪低分辨率图像时会发生什么。这被称为像素化——模糊、方框和斜边边缘呈阶梯状。

图 8.7 当你裁剪低分辨率图像时，结果可能会出现严重的退化，如这种像素化。

然而，当高分辨率图像文件在网站上显示时，可能会减慢页面加载时间。这不仅会让网速较慢的人感到烦恼，还可能降低你的网站在谷歌和 AI 系统中的质量评分。解决办法是减小高分辨率图像的大小。在网页上，大型超高清图像与合理较小的、像素密度较低的图像相比，并没有更清晰。因此，与高分辨率图像一起工作的唯一价值是如果你想裁剪它，从而减小文件大小。

影响图像的两个因素是分辨率和图像文件大小。分辨率 表示图像的像素（光点）密集程度。像素——通常是一个小的（通常是）彩色点——是屏幕显示的最小测量单位。分辨率通常以每平方英寸像素数（PPI）来衡量，即屏幕英寸中包含的像素数。

文件大小 表示图像的大小（通常通过水平像素数乘以垂直像素数来衡量）。例如，一个 1,080 像素的 HD 视频图像尺寸为 1,920 × 1,080 像素，因此它有超过 200 万个像素。

这里有一些在网站上使用的典型图像类型，以及每种类型的推荐尺寸和宽高比（形状）。这些数据是针对使用 .jpg 文件类型保存到磁盘的图像（其他格式，如 .png 文件，可能要大得多）：

• 背景图片（或其他全屏图片）——尺寸为 1,920 × 1,080 像素，宽高比为 16:9（文件大小为 400 KB）

• 英雄图片——尺寸为 1,280 × 720 像素，宽高比为 16:9（文件大小为 200 KB）

• 网站的横幅（页眉）图片——尺寸为 1,600 × 600 像素，宽高比为 5:3（文件大小为 200 KB）

• 普通页面或帖子（博客）图片——尺寸为 1,200 × 630 像素，宽高比为 3:2（文件大小为 180 KB）

• 标志——对于矩形标志，尺寸为 250 × 100 像素，宽高比为 2:3（文件大小为 30 KB）

英雄图片是访客首先看到的图片。它应该仔细选择，以代表网站的内容。它向潜在观众介绍网站。英雄有时是横幅或页眉图片。甚至可以是全屏的。

这些图像类型的分辨率应为 72 PPI。计算机屏幕上的图像不需要更高的分辨率。计算机屏幕显示的分辨率在 72 到 100 PPI 之间。今天的手机摄像头拍摄的照片分辨率为 300 PPI 甚至更高。超过 72 PPI 不会改善网站上的图像显示效果，但会增加文件大小。

例如，iPhone 12 默认拍摄的照片尺寸和分辨率为 4,032 × 3,024 像素和 460 PPI。这大约是典型网页图片大小的 12 倍。这种图像的 .png 文件大小约为 31 MB，而典型网页图片的 .png 文件大小约为 3 MB。

因此，在将它们上传到 WordPress 之前，您需要准备符合所需分辨率和文件大小的图片，以适应网站上的用途（标志、普通图片、全屏等）。由于印刷媒体需要的分辨率比显示器或其他设备屏幕（通常为 300 PPI 或更高）要高得多，因此当准备在网站上显示的图片时，您通常会同时降低 PPI 和图像大小。我将在稍后向您展示如何调整图像大小和调整它们的 PPI。

注意，那些之前的规范是指导方针，因此它们可能会根据用例和图像类型有所不同。但通常需要减少。还要考虑巨大的图像文件会影响页面加载速度，因此 AI 系统和谷歌对您受众的用户体验质量的看法可能会受到影响。

WordPress 在您将图像上传到媒体库时不会自动压缩图像。它保存了一个与原始图像一对一的副本，但也可以生成其他尺寸：缩略图、中等、大和全尺寸（原始尺寸）。然而，它不会降低分辨率。

WordPress 包含几个工具，例如裁剪工具，用于处理图像。然而，专门的图片编辑应用程序更适合进行高质量的图像处理，如调整大小。在将图像上传到 WordPress 之前，请使用 Photoshop 或替代应用程序准备您的图像。如果您没有 Photoshop，您可以通过安全下载 Paint.NET 或 GIMP 从ninite.com获得免费且出色的替代品。

小贴士：尽管在 WordPress 中使用 CSS 在图像上叠加文本是可能的，但更好的解决方案是直接使用图片编辑应用程序中的文本工具。这样做更简单，当您的网站在其他屏幕尺寸上查看时，结果更可预测。

图片编辑应用程序包括调整图像大小和修改分辨率的工具。例如，在 Paint.NET 中，选择图像 > 调整大小（Ctrl-R）。保持“保持纵横比”（形状）选中，然后输入所需的宽度。高度会自动改变以保持形状。然后，将分辨率降低到 72。图 8.8 显示了 Paint.NET 的调整大小模块。

图 8.8 在此类模块中更改图像的大小和分辨率。

小贴士：您可以通过以下菜单项在 Photoshop 中批量处理多个图像文件：文件 > 脚本 > 将文件加载到堆栈中。

现在你已经看到了如何为网站图像选择合适的尺寸，现在是时候考虑在页面中放置图像的位置了。

8.5 有效定位媒体

在您的页面上显示图像的位置很重要。如果您不擅长设计，您可能需要向一个熟悉设计的熟人求助。或者提交您页面的副本，并询问 AI 对图像放置的看法。

您还可以通过查看获奖网站来学习。以下是两个赢得设计比赛的网站：

• Airbnb 有效地展示了目录式图像布局：www.airbnb.com。

• 这篇《纽约时报》的“Snow Fall”文章有效地整合了视频、幻灯片和照片的淡入过渡。注意，图像始终位于右侧：mng.bz/5gN4。

这里有一份考虑媒体放置和布局最佳实践的清单（如果您打算向 AI 寻求建议，请首先提交此列表）：

• 除非你正在显示目录或一系列缩略图，否则最好根据它们的重要性来调整它们的大小。

• 每张图片都应该超越仅仅装饰的目的。媒体应该与页面上的讨论内容相关。

• 人们首先会看页面上的最高图片或视频，所以确保这些媒体能够有效地代表页面的主题。不太重要的媒体可以放在页面下方。 （一些网站分析应用程序可以生成热图，直观地展示人们如何查看你的页面。它显示了从未、有时或总是被查看的区域。更多内容将在下一章中介绍。）

• 通常建议在每两到三段文字之间插入图片（或空白），以打断文本。

• 不要让媒体过于拥挤。为每张图片或视频提供足够的空白边框。然而，某些设计通过在图片或视频周围流动文本来实现。

• 保持一致性。如果你在大多数页面上将图片放在左侧，那么你应有充分的理由解释为什么在所有页面上不这样做。

• 检查媒体布局在手机屏幕上的显示效果。

• 在文本中找到与媒体相关的任何引用。

• 提供标题。

• 确保媒体不会分散对重要导航功能（如网站菜单）的注意力。

• 标志通常放置在左上角，有时在右侧，但很少在中间。

GPT 有什么要说的？我把钓鱼网站首页提交给了 GPT（见图 8.9）。

图 8.9 也许这个首页的图片可以调整大小或重新排列以改善布局。GPT 有一些想法。

|

我上传了我 bass fishing 网站的首页截图。请建议如何更好地安排这个网站首页的图片。

|

根据您关于图像放置的指南，以下是一些建议，以更好地安排您垂钓网站主页上的图像：顶部图像代表页面主题：确保最高的图像（湖上钓鱼杆的图像）有效地代表了垂钓主题。这个图像放置得很好，但可能从更清晰、高分辨率的版本中受益，以便立即吸引注意力。空白和图像分隔：顶部图像下面的文本看起来很拥挤。在图像和文本之间添加空白将提高可读性，并使页面看起来更整洁。考虑在段落旁边添加较小的相关图像或图标，以分隔文本并保持读者的兴趣。一致的图像放置：下方的鱼类图像排列得很好。然而，确保对齐的一致性。如果可能的话，确保本节中所有图像的大小相同且对齐均匀。这有助于保持整洁、有序的外观。图像标题：在每个图像下方添加标题以提供上下文。例如，包括鱼类名称或任何可能对访客有用的相关信息。移动布局检查：确保图像和文本布局在移动设备上运行良好。有时大图像或紧密排列的元素在小屏幕上看起来很杂乱。使用响应式设计技术相应地调整图像大小和间距。图像周围的空白：每个图像周围应有足够的空白，以避免拥挤的外观。确保有足够的填充或边距将图像与文本和其他元素分开。标志位置：您的标志放置在顶部左侧，这是理想的。确保它可见且与背景区分开来，以提高品牌识别度。遵循这些建议，您的首页将看起来更有组织、视觉上吸引人且易于导航，这可以提高用户体验和参与度。

我随后要求 GPT 展示一个使用其建议的页面（见图 8.10）：

|

你能使用 DALL-E 展示一个展示你建议的页面版本吗？

|

这里是您垂钓网站主页的重新设计版本，展示了我所提供的建议。这种布局遵循了图像放置的最佳实践，确保了干净、有序且视觉上吸引人的设计。如果您有任何进一步的调整或需要额外的帮助，请随时告诉我！

图 8.10 这是 GPT 的版本，重新排列了图像以满足我提供的标准。

现在让我们转向一个不同的主题。考虑使您的网站对有障碍人士友好是很重要的，因此这是下一节的主题。

8.6 提供无障碍访问

考虑到你相当一部分受众面临各种访问互联网内容的挑战，你希望构建一个每个人都能轻松使用和享受的网站。此外，这显然是正确的事情。

在这个背景下，可访问性意味着确保你的网站对所有人来说都高效可用，无论他们的残疾程度如何：

• 视觉障碍，包括低视力、色盲或完全失明

• 听力问题，如听力下降或耳聋

• 影响使用鼠标或键盘的肌肉或灵巧性挑战

• 影响理解和注意力的认知障碍

你的目标应该是消除阻碍访问你的内容和功能的障碍。人们应该能够理解、可视化、导航、交互，如果你有一个双向博客页面，甚至可以贡献信息。

互联网联盟致力于制定互联网标准。他们的努力包括网络内容可访问性指南（WCAG）的最佳实践和标准。他们列出了四个原则，通常被称为 POUR：

• 可感知性—信息不能仅通过大小、形状、声音或视觉位置等感官特征来传达，因为一些访客无法感知这些元素。

• 可操作性—如键盘导航等组件对所有用户都有效。

• 可理解性—内容清晰且易于理解。

• 稳健性—网站在各种浏览器和设备上都能正常工作。

美国残疾人法案

美国残疾人法案（ADA）与 WCAG 类似，但有一些区别。ADA 仅要求网站可访问性，而不指定任何技术标准。它只是将你引向 WCAG 标准。你可以因 ADA 违规而被起诉或处罚，但 WCAG 没有法律权威。到目前为止，原告律师对 ADA 违规的投诉主要限于“公共场所”，意味着汽车旅馆、面包店、剧院、商店、加油站、律师事务所、州和联邦网站等。

例如，如果你的网站支持实体店，如果网站在某些方面不可访问，你可能会收到警告信或传票。相比之下，如果你的网站是关于如何拍好照片或烤松饼的，那么你被针对的可能性相当低。然而，ADA 的执行并不完全一致。因此，这也是让你的网站可访问的另一个原因。总之：如果你通过网站销售商品或拥有相关的实体店业务，你的风险最大。

8.6.1 为什么你应该这样做

显然，为从你的包容性努力中受益的许多人做出安排是好事。除了做出正确的道德选择外，你还可以享受以下好处：

• 扩大受众范围，让更多用户访问你的内容

• 遵守网络可访问性法律，从而避免潜在的法律诉讼

• 通过展示你对包容性的关心来提升你的品牌形象

• 允许人们使用辅助技术，如屏幕阅读器、语音控制、开关和其他工具

• 提高搜索引擎优化（SEO）排名（据说，如果网站是无障碍的，Google、Bing 和 AI 搜索引擎会将其排名更高）

8.6.2 寻找无障碍性主题

一些主题在设计时就考虑了无障碍性。在主题中寻找的一个特性是它是否采用了称为角色的无障碍性富互联网应用程序（ARIA）功能。这种方法使用 HTML 属性使屏幕阅读器更容易澄清网站的结构和各个区域。HTML 5 包括许多这样的元素。以下是一些被描述为无障碍性就绪的流行主题和主题开发者：

• Twenty Twenty-One

• OceanWP

• Astra

• GeneratePress

• Divi

• AccessPress Parallax

• 精美主题

检查一个主题是否包含 ARIA 元素的一种方法是在网站的界面视图中右键单击，然后从弹出菜单中选择检查器。现在搜索role。ARIA 角色标签和识别各种类型的网站内容，如展示、选项、列表框、组等等。但如果要更有效地查看角色列表（如果有的话），请将 Web 开发者扩展添加到你的浏览器中。检查器专注于查看和测试网页结构和样式的修改，而 Web 开发者扩展有一套更全面的工具。值得一试。

Web 开发者：深入挖掘网站内部的优秀扩展

当你在浏览器中安装 Web 开发者扩展时，它会为你提供数十种工具。例如，你可以使用其信息菜单查看 ARIA 角色，如图所示。

Web 开发者工具包包括数十种对高级或中级开发者有用的工具，其中一些对完全初学者也很有价值。你可能想试一试。它在 Chrome、Edge、Firefox 和其他浏览器中都能使用。

以下博客文章列出了开发者可能会发现有用的附加浏览器扩展：mng.bz/6ejG。

当你构建和维护网站时，你可能会发现这个 Web 开发者扩展非常有价值。

自动无障碍性测试

这里是如何运行一些自己的测试。在你的 WordPress 安装中激活一个主题（外观 > 主题 > 添加新主题），然后在 Chrome 中查看前端并按 Ctrl-Shift-I，以获取 Lighthouse 报告。或者，右键单击，并从弹出菜单中选择检查器。点击分析页面加载按钮。在众多诊断中，你可以向下滚动并查看一个无障碍性分析，它给你一个分数并列出它发现的问题。

例如，它可能会报告一些问题，如文本/背景对比度不佳或按钮和链接描述不充分。然而，请注意，自动无障碍性分析无法测试所有可能的无障碍性问题。

此外，将这个非常实用的 axe DevTools 扩展程序添加到您的 Chrome、Edge 或 Firefox 浏览器中：mng.bz/oKNN。

然后，前往您正在测试主题的网站前端，打开检查器。在 Lighthouse 右侧的菜单中，点击 axe DevTools，并按照步骤分析您的页面以查找可访问性问题。axe 工具既全面又实用——它能发现许多类型的问题并提出良好的解决方案。如果您更喜欢一个高效的 axe DevTools 前端，并且还能生成详细的 Microsoft Excel 报告，请将 LERA 扩展程序添加到您的浏览器中：mng.bz/nRQv。

在选择主题时，请注意以下事项：

• 通过键盘（无需鼠标界面）轻松导航，这对于有打字困难的人很有帮助。

• 响应式设计，确保您的网站在小屏幕上也能清晰地显示，这对于有视力问题的受众来说很重要。

• ARIA 角色用于扩展 HTML，以帮助残疾人士，特别是那些使用辅助技术如屏幕阅读器、自定义控件和放大镜的人。

• 为视力不佳的访客提供颜色对比选项。

• 带有字幕的标签顺序，通过按 Alt-Tab 键在页面间导航时清晰，这样屏幕阅读器就可以通过字幕描述来识别每个标签。

• 为任何嵌入的视频或音频添加字幕，以便访客可以决定是否播放该内容。

• 视频的闭字幕，通过音频的文本表示使视频内容对聋人和听力受损人士可访问。他们也有助于有学习障碍或注意力缺陷的人保持专注。

• 为使用屏幕阅读器的盲人和视障人士提供图像的 Alt 文本描述。

• 为视觉障碍访客提供文本大小调整（缩放）功能。

• 跳转链接。

定义跳转链接对屏幕阅读器和仅使用键盘的用户很有帮助。这些特殊链接在有人开始通过页面中的各个部分进行标签切换时才会可见（类似于填写网页表单，按 tab 键将您带到表单中的下一个字段）。有了这个功能，人们可以跳过他们不感兴趣的内容，例如横幅、长菜单或重复的内容，如网站标题。通过添加 CSS 代码如position: absolute; left: -999px，跳转链接可以隐藏给不使用屏幕阅读器的鼠标用户。示例包括“跳转到菜单”和“跳转到下一个标题”。

8.7 理解权限、归属权和其它法律问题

法律是广泛的，不断发展的，有时甚至相互矛盾。但它是不能被忽视的。您是否需要采取措施来保护您网站上原创内容的版权？您是否需要避免使用非原创内容？显然，答案是“不”和“是”。

我没有资格提供法律建议。以下是我研究的结果，但如果你需要关于如何遵守法律的步骤的建议，请联系律师。请不要将以下内容视为法律建议。这仅仅是你自己研究的一个起点，或者为你提供与律师讨论的问题，或者提醒你关于剽窃等问题。

我听说当你创作新的文本、艺术、音乐或任何形式的原创内容时，它就自动获得了版权。一旦你将其写下来、画出来、画出来或以其他方式使其有形，它就受到保护。明确发布网站显然使内容有形。自动版权赋予你独家所有权。你拥有独家权利分发、展示、复制作品以及授予复制许可。其他人的作品也是通过这种方式获得版权的。你不能仅仅复制他们的作品并将其粘贴到你的网站上。（正如法律中经常发生的那样，有一些例外。）

如果这看起来很清楚，其实并不清楚。我在尽力处理这个话题，所以请让我一个人待着。😉

有时，版权只是部分的。例如，如果有人发布了一个披萨食谱，那么他们的说明、对过程的描述以及任何轶事或叙述都是受版权保护的。但实际的配料——面团、奶酪、番茄酱、意大利辣香肠、洋葱——不能获得版权。事实也不能获得版权，例如伦敦的位置或登月的日期。这些都是关于空间和时间的绝对事实，无论爱因斯坦怎么说。此外，不同国家有不同的版权和商标法。

法院存在是因为法律问题可以有多种解释方式。例如，时不时地，有人因为他们的歌曲与后来的某首歌曲（通常是赚了很多钱的那首）存在一些相似之处，而将音乐家告上法庭。由于相似度有高低之分，这种指控必须得到裁决。如果相似度过高，投诉者就会从中获利。但鉴于西方音乐音阶只有 12 个音符，且只有有限数量的节奏是有意义的，相似之处是不可避免的。通常，这些音乐版权案件失败的原因与画家无法对颜色进行版权保护的原因相同。而且，任何有创造力的人都知道，一个人会受到他人作品的影响。

很有趣，有些人抱怨 AI 画作受到了先前人类画作的影响。嗯，大多数人类画家也会从现有风格中汲取灵感。直到摄影出现，新的风格相当罕见。但当相机在现实主义方面做得更好时，艺术家们以新风格的爆炸式出现做出了回应，许多风格既愚蠢又奇特。这些风格通常更多的是对现实主义的反应，而不是努力寻找新的方式来在视觉形式中展示美。

8.7.1 精通改写

大多数作者都会研究并从他人发表的作品中学习。但你不能只是简单地复制粘贴他人的文本。你必须进行改写，这意味着用自己的话来表达。你可以重复事实，但不能重复其他作者如何措辞。

通过人工智能出现了一种新的工具——改写器。你将某人的文本输入其中，它们会重新编写文本，保留文本的意义而不只是简单地复制。QuillBot (quillbot.com/) 是其中之一。他们声称拥有 5000 万用户。该应用程序包括几个功能，如抄袭检查器。我要求 QuillBot 改写本节开头为“法院存在”的早期段落的前半部分。以下是 QuillBot 的修订版：

|

由于理解法律问题有众多方式，法院是必要的。例如，有时有人因他们的歌曲与随后的歌曲（通常是非常成功的歌曲）之间的相似性而起诉艺术家。相似度有不同等级，因此指控需要评估。

另一个流行的改写器是 Wordtune (www.wordtune.com)。与 QuillBot 一样，它具有额外的功能，例如允许你选择写作风格（随意、正式），通过缩短或扩展句子来指定句子长度，以及其他功能。一些评论员说，Undetectable (www.undetectable.ai) 在这些任务上做得最好。

8.7.2 进一步的法律问题

如果你拍摄了你朋友的视频，但视频中的某个人不想在网上被看到？你是否从视频中所有在场的人那里获得了书面许可？以及背景中的人？

为了安全起见，你可能想要让律师为你网站上使用的照片或视频起草一份许可表格。并且从这些媒体中所有可见的人那里获取签名。

你能在你的网站上嵌入他人的视频吗？即使你得到了创作者的许可，如果他们的视频中存在版权侵犯怎么办。也许电视背景中正在播放职业足球比赛？那么你是否会次级负责？

你不能仅仅归因或归功于视频的所有者。说谁创造了视频并不一定意味着你不需要在所有情况下获得许可。Nolo 提供了一个关于许可的良好教程：mng.bz/vKNx。

但 YouTube 确实提供了一种合法的方式来嵌入他人的视频。YouTube 表示，如果上传视频的人没有关闭 YouTube 嵌入选项，您就可以这样做。回想一下，在本章的早期，您上传了一个视频到 YouTube，然后点击了分享选项（参见图 8.5）。嵌入选项是分享视频的几种方式之一。所以，如果您看到嵌入图标（参见图 8.6），视频的所有者已经隐含地授予了在网站上嵌入他们的视频的许可。嵌入选项可以被关闭，但您必须采取以下步骤：

1. 为自己设置一个 YouTube 内容管理器。

2. 登录后，点击 YouTube 屏幕右上角的 favicon（个人图标）。

3. 在下拉列表中点击“YouTube Studio”。

4. 点击“内容”。

5. 点击选择您想要管理的视频。

6. 点击左侧的“设置”。

7. 点击“权限”。

注意：以下是 YouTube 本身对这一问题的看法：www.youtube.com/about/copyright/fair-use/。

8.7.3 寻找免费媒体

避免版权侵权问题的另一种方法是使用“免费”媒体。一些在线资源提供股票照片、音乐和视频，您无需付费或获得使用许可。然而，您需要阅读他们的服务条款或许可要求，因为“免费”并不总是意味着“无限制”。

例如，股票照片网站可能允许您在包含署名或提供链接回其网站的情况下使用其内容。其他免费内容只能用于非商业目的。

非营利组织 Creative Commons 的成立有两个目的：一方面允许内容创作者——视频制作者、摄影师、艺术家和音乐家——保留他们的版权，同时仍然允许其他人（比如我们）有限地使用这些创作。该组织提供几种创作者可以选择的许可协议版本，为其他人使用他们的作品提供各种具体的权限。有些这样的许可协议要求任何衍生作品（对原始作品的变体）必须以相同的条款进行许可。其他则完全禁止衍生作品。有些要求署名或仅限非商业用途。

几个免费内容收集网站，如 Flickr、Wikimedia Commons、Pexels 和 Vimeo，允许您根据内容创作者选择的哪种 Creative Commons 许可协议来搜索内容。这种方法对您来说更有效率，因为您不需要分别联系创作者来寻求他们的许可。以下是一些最好的免费媒体资源：

• Creative Commons—creativecommons.org

• Pexels—www.pexels.com

• Flickr—www.flickr.com

• Vimeo—vimeo.com

• Freeplay Music—freeplaymusic.com

• Mixkit—mixkit.co

• Ikson—mng.bz/4aOB

• CFM Production—mng.bz/QDQm

• Unsplash—unsplash.com

• Wikimedia Commons—commons.wikimedia.org

• Pixabay—pixabay.com

8.8 使用 Gutenberg 媒体块

在撰写本文时，Gutenberg（WordPress 块编辑器）的音频和视频块加载可能较慢，并且某些媒体根本无法工作。我建议使用第三方音频和视频块。点击块编辑器中的+图标以打开块库，然后搜索audio或video。你可以找到内置的 WordPress 播放器，以及相当多的第三方块。下面是一个可以安装的插件列表，如图 8.11 所示。

图 8.11 你可以在 WordPress 的块编辑器中使用这些块显示视频。

最佳第三方媒体播放器之一是 EmbedPress。它是一个嵌入怪物，能够管理 150 个来源和文件类型，包括地图、视频、PDF 和 DOC 文件、SoundCloud、Twitch、Flickr、Instagram、DailyMotion、TED、MixCloud 以及 139 个更多。你可以在这里了解它：wordpress.org/plugins/embedpress/。

在块编辑器中使用此插件进行嵌入非常简单。你只需复制一个 URL 并将其粘贴到 EmbedPress 块中。此插件还与经典 WordPress 编辑器以及 Elementor 页面构建器兼容。

使用经典编辑器与 EmbedPress 一起使用甚至更简单——无需使用块。只需将源 URL 粘贴到编辑页面或编辑帖子屏幕中的文本框中。EmbedPress 会自动创建显示嵌入所需的代码。你可以通过点击文本框的文本选项卡来查看代码。

本章探讨了三个主要主题：管理多媒体、确保可访问性以及你可能会遇到的法律问题。接下来，我们将转向如何在特殊类型的网站页面上与你的受众互动：博客。它可以服务于这些几个目的之一——提供新鲜内容、允许你的受众与你的网站互动、提供客户服务以及推销你的商品。一个缺点可能是，如果你允许你的受众向博客发送消息，你必须检查它们是否适当——不是煽动性的、粗俗的或其它不适合发表的内容。幸运的是，WordPress 包含一些工具可以半自动化这一审查过程。AI 也可以相当熟练地做出这些判断，我敢说，你也可以。

摘要

• 没有媒体的网站看起来相当空旷。但尺寸不正确、位置不当或其它不合适的媒体看起来杂乱无章、业余。确保你的媒体与页面中的其他元素良好配合，并与网站的整体目的和谐一致。在本章中，你探索了管理媒体的有效技巧。

• 与文本文件相比，视频文件非常大，音频文件也不算小。即使是标准定义的视频，其大小也大约是相同时长的音频文件的 20 倍。因此，您最好的策略是将这些媒体嵌入，而不是试图将它们存储在您的媒体库中。页面加载时间将更快，您也不会因为不必要的文件存储而给您的网站数据库带来负担。

• 由于几个原因，您希望使您的网站对面临各种挑战的人具有吸引力并易于访问——无论是听觉、视觉还是其他方面。您可以使用各种工具来分析和改进网站的可访问性。

• 法律对使用他人的媒体或文本内容有相关规定。您不希望收到律师的信件，因为您未能获得必要的许可或未能显示所需归属。一些网站提供免费使用的媒体，但您需要阅读他们的许可要求，因为“免费”并不总是意味着“想做什么就做什么”。

• 到目前为止，WordPress 块编辑器的媒体块在添加媒体到您的网站时并不是最佳选择。但有一些优秀的替代方案，例如 EmbedPress。

第九章：在与观众互动时使用 AI

本章涵盖

• AI 告诉你博客中要写什么

• 创建一个用于回复帖子的自定义 GPT

• 提供带有类别的博客导航

• 自动化收到的消息审查

• 推广你的博客

• 理解 GPT 的定制指令

• 创建访客电子邮件数据库

• 测试最流行的五个 AI 系统

尽管偶尔有人预测末日，但博客的受欢迎程度仅略低于 20 年前鼎盛时期的水平。诚然，社交媒体（如 YouTube 和 Facebook）的兴起是严重的竞争，但博客仍然拥有庞大的受众。而且，与一些其他媒体不同，博客继续作为信息来源的信任度保持较高。

经营博客可能会很耗时，因为允许观众参与的博客要求你审查（检查适当性和质量）每一条收到的消息。此外，你必须发布回复。当然，你可以设置一个单向博客，只展示你的消息。但大多数访客都欣赏能够与网站互动的能力。

本章的目标是向你展示 AI 如何帮助你自动化管理高质量博客所涉及的各种任务。我无法提供关于如何和写什么的建议——这取决于你网站的主题。而且我不知道你的主题可能是什么。但有人可以给你关于如何和写什么的特定建议。你已经猜到了！询问 AI。

在本章中，你将了解 AI 如何帮助你了解在博客中写什么和如何写。首先，我们将让 AI 对我们的博客消息进行评论，并提出改进建议。其次，我们将要求 AI 为我们撰写吸引人的博客标题。但在深入这些主题之前，让我们先定义一下什么是博客是什么。

9.1 博客的定义：概述

术语博客来源于网络日志，最初它是一种日记，是某人生活或思想的连续记录。然后，它被称为网络日志，最终简化为博客。

博客（一个网站中通常只有一个博客页面）在三个方面与其他网页不同：预期会频繁更新；可以可选地发布来自网站观众的留言；并且是以前博客消息的搜索存档。然而，如果你未能定期和经常在博客中发布新内容，你的访客可能会停止访问。而且搜索引擎可能会降低你的排名，因为你没有提供新鲜内容。

博客通常因其允许观众与网站所有者互动而受到重视。（如果你想保持一个成功的博客，请确保及时回复收到的消息。）博客还可以作为企业的一种客户服务机构，或者发布俱乐部或教堂公告的地方。此外，博客还可以

• 发布一个技巧列表。

• 列出可供领养的宠物、待售物品或类似的服务。

• 如果博客页面表明混合网站（博客页面加上额外的相对静态页面）经常更新并且有新鲜信息，则可以提高网站的搜索引擎优化（在谷歌或 AI 列表中的排名）。

• 发布销售公告或以其他方式推广电子商务。

• 使企业人性化，提供个人轶事或回答问题。

• 建立品牌。

一个博客的运作方式取决于您的主题，您使用的 WordPress 版本，或者您安装的插件。传统的博客包含一个倒序排列的帖子列表。它以单列显示这些消息，可以滚动。较新的 WordPress 默认主题在博客页面中包含一个存档模块，列出按月份分组的链接。当点击某个月份时，仅显示该月份发布的消息。另一个较新的变体是消息的三列显示。

9.2 GPT 来帮忙：如何为您的博客写作

GPT 让您创建自己的定制 GPT。您可以使用自己的学习（您提供的数据）和特定技能构建专门的 GPT。您的定制 GPT 将由 GPT 本身提供动力。但这是一个经过微调的版本，提供了数据并给出了指导，以便熟练地执行您请求的特定任务。

定制 GPT 是特定领域的专家，例如法律，或者在我们的案例中，是博客。如果您的需求是通用的，您也可以搜索其他人已经构建的 GPT。

在下一个示例中，我们将使用 Zbigniew Lukasiak 的名为博客评估器的 GPT。运行 GPT，然后在左侧仪表板上点击探索 GPT。搜索Blog Evaluator. 点击博客评估器以运行它。

在这里，我们将探讨如何使用卢卡西亚克先生的来自 GPT Store 的定制 GPT，然后在下一节中，我们将创建我们自己的定制 GPT。GPT 内置的向导将逐步引导我们完成这个过程。

小贴士：截至 2024 年 6 月，GPT Store 中有超过 300 万个定制 GPT，其中 16 万个可供使用。您可能会在未来使用这个探索 GPT 功能，所以通过点击左上角定制 GPT 名称旁边的小向下箭头图标，将其永久添加到您的 GPT 仪表板。然后，点击保留在侧边栏.。

现在回到那个博客评估器。点击请评估这篇文章。然后，将您的博客消息之一粘贴到 GPT 中的消息博客评估器字段。我将这篇样本博客条目粘贴到消息博客评估器字段中：

|

关于使用 Instant Pot 进行压力烹饪的最佳建议是确保它不会烧毁任何东西，并且能够达到压力，通过始终向 6 夸脱的 IP 中添加 1 杯水（或肉汤或任何液体）。如果您不希望您的肉或其他成分在水中煮沸，请插入随 IP 一起提供的其中一个架。

博客评估器提出了以下回应：

|

感谢您分享文章摘录。我现在将评估主要论点和支持它的推理。主要论点：使用 Instant Pot 进行压力烹饪的有效建议是始终向 6 夸脱 Instant Pot 中加入 1 杯液体（水、肉汤等），以防止烧焦并确保达到压力。如果你不希望原料在水中煮沸，请使用架子。评估：论点：始终向 Instant Pot 中加入 1 杯液体可以防止烧焦并确保达到压力。评分：C-推理：文章提出了一个明确的建议，但没有探讨这个建议在某些情况下可能不正确或效果较差的可能性。它没有考虑例外或替代方法，也没有讨论为什么建议使用这种特定数量的液体。论点：使用架子防止原料在水中煮沸。评分：C-推理：这是一个实用的建议，但文章没有提供理由或证据来支持使用架子是有益的，也没有承认任何局限性或替代方法。总体评分：C-文本提供了直接的忠告，但在推理方面缺乏深度。它没有考虑潜在的反对论点，不同情况下这个建议可能不适用的情况，或讨论为什么建议这些特定方法。它既没有明确声称其建议是唯一正确的方法，也没有承认可能不正确。因此，它得到 C-评分，因为它既没有坚定地断言其正确性，也没有考虑其潜在的不可靠性。

因此，这个定制的 GPT 建议扩展帖子，包括使用液体和架子的替代方案。如果你在博文中提到这些例外，你的博客文章可能会得到改善。

小贴士 想要找到最适合各种目的的最佳第三方自定义 GPT？有一个很好的自定义 GPT 可以做到这一点。运行 GPT，点击探索 GPT，搜索GPT Finder（由 Skill Leap AI 提供，skillleap.ai）。点击 GPT Finder 来运行它。

9.3 创建自定义 GPT：AI 生成消息标题

几年前，《大都会》杂志的编辑开始在文章标题中使用数字：22 种拒绝邀请的方法，7 本夏日必读的书等等。这种趋势流行起来。考虑在博文标题中经常包含这样的数字。原因在于，这会给你的观众留下你已经真正研究过这个主题的印象，所以你所说的内容是全面的。你发现总共有“22 种方法”。不多也不少。

此外，你希望使用简洁、简短的标题，通常不超过九个单词。标题应包括积极的、情感化的词汇，如确认、令人震惊、令人惊讶、揭露。不时，你也应使用一些问题标题：你知道何时种植球茎吗？请注意，大多数向你的博客提交消息的人不会给它们命名，所以你负责为你的帖子和你访客的帖子命名。

避免使用像“简单”或“快速”这样的陈词滥调。相反，描述读者从文章中获得的益处：在医生的办公室里省钱。并且要具体。与其使用“烹饪鱼的最佳方法”，不如使用“用 Instant Pot 煎三文鱼”。

最佳标题类型将部分取决于您网站的关注点和受众。因此，使用第十二章中描述的分析技术对标题版本进行 A/B 测试是个好主意。当然，在构思强有力的标题时，也要让您的 AI GPT 标题撰写助手参与其中。让我们通过创建我们自己的专用定制 GPT 博客标题撰写器来看看如何做到这一点。

9.3.1 创建自己的 GPT：一个用例

要构建自己的定制 GPT，您需要使用 GPT 的定制 GPT 工具进行几个步骤。告诉它如何执行一个专业、特定的任务。然后，您可以在任何时候重用这个专家助手。您可以给 GPT 下达指令，给它提供数据，并描述它的技能。

让我们通过构建自己的定制 GPT 来尝试一下，这个 GPT 专门擅长撰写吸引人、有效的博客标题。它会读取信息，然后为我们提供一些可供选择的标题。请注意，要创建定制 GPT，您需要拥有 ChatGPT 的付费订阅。（然而，免费计划用户可以使用现有的定制 GPT。）

按照以下步骤操作：

1. 访问 GPT 主页 ChatGPT.com，然后点击左侧边栏上的“探索 GPT”。

2. 点击右上角的“创建”按钮。

3. 您现在将看到 GPT 构建器屏幕。

4. 在空白字段中输入以下内容：创建一个专注于为博客文章创建吸引人标题的标题撰写者。

5. 按下 Enter 键将信息发送给 GPT。

6. 在考虑您的请求后，GPT 将为这个新的 GPT 建议一个名称。您可以使用这个建议或进行编辑。

7. 然后，GPT 会建议一个图标。再次，接受该图标或提出修改建议。

8. GPT 将现在要求您提供有关您想要的内容的指导。始终记住，AI 机器人现在能够理解相当细微和长度的指令。而且它们在准确理解自然语言的含义，即使是习语方面也在不断进步。换句话说，现在最好的 AI 立即理解“这个剧院内部很酷”和“那是一部很酷的电影”中“酷”这个词的不同含义。

9. 将以下详细的指南粘贴到内容指导字段中：建议的标题应适合被命名的博客文章的内容。提供五个标题。不要使用粗俗或高度技术性的词汇。标题不应超过九个单词。多年前，《大都会》杂志的编辑开始在文章标题中使用数字：22 种拒绝邀请的方法，7 本夏日必读的书，等等。这个趋势流行起来。专家声称，在文章标题中经常包含这样的数字是个好主意。原因？这给人一种你真正研究了这个主题，你所说的内容是全面的印象。你已经发现，总共有 "``22 种方法。"

   此外，你希望使用简洁、简短的标题，不超过九个单词。并包括积极的、情感化的词汇，如确认的、令人警觉的、惊人的、揭示的。此外，时不时地使用一些疑问标题：你应该每天洗澡吗？避免使用像容易或快速这样的陈词滥调。相反，描述读者从这篇文章中获得的益处：在医生的办公室里省钱。并且要具体。与其说“烹饪鱼的最佳方法”，不如说“用 Instant Pot 立即炸鲑鱼”。这些博客信息是关于 Instant Pot 的食谱，所以标题应该使用适合烹饪或使用 Instant Pot 或食谱的词汇。

10. 现在指定你希望你的 GPT 如何与你互动，输入以下内容：如果你正在命名的博客文章在某些方面模糊或不清，请要求提供更多细节。

11. 然后，当被问及你想要的语气或风格时，输入 The tone should be friendly, conversational, brief, and clear。

12. 在这个阶段，如果你愿意，可以建议进一步的改进。例如，要求提供更多优秀标题的例子，或者按照 AI 对标题质量的看法列出标题，等等。

13. 当满意时，输入 Yes 以被带到游乐场，在那里你可以测试你的自定义 GPT。以下是一个你可以提交给 GPT 命名的示例博客文章：要使用 Instant Pot 准备米饭，首先在冷水下冲洗米饭，直到水变清，这有助于去除多余的淀粉。然后，将 1 杯米饭和等量的水放入 Instant Pot 中。盖上盖子，将排气旋钮调整到密封位置，然后开始高压烹饪 3 分钟。

    一旦烹饪阶段结束，让 Instant Pot 自然减压 10 分钟，之后旋转排气旋钮以释放任何剩余的压力。迅速打开盖子，用叉子给米饭增氧，然后上桌。重要的是要认识到，根据所煮米饭的种类，米与水的比例和烹饪时间可能会有所不同。例如，像巴斯马蒂或茉莉香米这样的白米应该高压烹饪 5 分钟，相反，长粒糙米可能需要 10 分钟。

14. 我们的标题助手以这种方式响应：

|

“Instant Pot Magic: 三步制作完美米饭”“5 分钟巴斯马蒂幸福：Instant Pot 米饭指南”“终极 Instant Pot 米饭烹饪速查表”“米饭完美：Instant Pot 秘密揭晓”“Instant Pot 精通：简单化米饭种类”

好主意。点击保存按钮以存储 GPT。然后，关闭 GPT。

警告：这可能是标题的问题，但如果你使用 AI 生成博客消息，请始终记得要么重写它们，要么让 AI 进行释义（不可检测的，undetectable.ai/）。这样就可以避免抄袭的指控。目前，您应该对 AI 的回答进行事实核查。Perplexity.ai 通常是一个很好的资源，因为它为其断言提供了引用。这使得您的事实核查更容易。我说目前是因为 AI 系统不会止步不前。它们不断进步，并且速度惊人。更近的系统——例如 Google Gemini 的 Ultra 版本——甚至更不容易给您错误或产生幻觉。

9.3.2 修改自定义 GPT

您可以随时修改您的自定义 GPT。这里有一个快速示例。在上一个部分中，我们创建了标题助手 GPT，我们将从其中复制粘贴我们选择的标题。但是 GPT 决定将其标题放在引号中。不需要这样做。让我们回到 GPT 并修改标题助手 GPT：

1. 打开 GPT。

2. 点击右上角的灰色圆圈，然后点击我的 GPTs。

3. 点击图 9.1 中显示的编辑 GPT 图标。

4. 您将被带到 GPT 构建器编辑屏幕，并询问您是否想以某种方式改进它。键入以下内容：

图 9.1 点击此图标以编辑您的 GPT 之一。

|

当您提供响应时，不要在它们周围加上引号。

GPT 会这样说：

|

已记录变更！标题助手现在将提供不带引号的响应，以获得更流畅的体验。您还有其他需要调整的吗？或者有其他反馈？

不幸的是，当我再次尝试时，它仍然添加了引号。我再次询问，第二次，GPT 确实得到了信息。

9.3.3 高级自定义 GPT 选项

使用自定义 GPT 向导后，您可以随时进一步优化您的 GPT。转到 GPT 构建器并点击配置选项。您可以在本节中修改很多内容：

• 点击代表您的 GPT 的图标图像。然后，如果您更喜欢，您可以生成或上传不同的图像。

• 您可以更改名称和描述。

• 在说明字段中，你会看到你给 GPT 的关于其角色和目的的指示，你希望它避免的事情，指南和澄清，以及响应的风格和语气。此外，任何后续提供的额外指示（如不使用引号）也将包含在此处。然而，我的 GPT 仍然不断回退到使用引号，所以我尝试在说明字段中告诉它不要这样做。这也没有起作用。它只是继续添加引号。最后，我将这个请求包含在提示中。最终，GPT 停止使用引号。我通过感谢 GPT 正确地省略了引号并说“做得好”来回应。一些提示工程师认为这种积极的强化有助于 GPT 学习和记忆得更好。无论如何，这个问题现在已经解决了。

• 在对话开头部分，你会看到一些针对这个特定 GPT 版本的示例提示。

• 知识部分是你可以上传数据文件以丰富 GPT 响应的质量和深度的位置。你可以上传的文件类型包括文本 (.txt)、JSON (.json)、PDF (.pdf)、PNG (图像)、Microsoft Word 文档 (.docx)、HTML (.xhtml) 和 CSV (.csv)。

  为了测试这一点，我将这本书的整个章节作为一个 .docx 文件上传：

|

请阅读我上传的文件，并为其提供标题。

|

根据“在 WordPress 中与观众互动”的文档内容，以下是五个吸引人的标题：“WordPress 中 AI 驱动的观众互动”“利用 AI 提高 WordPress 互动”“用 WordPress AI 工具革新你的博客”“AI 策略提升 WordPress 观众互动”“利用 AI 创新最大化 WordPress 互动性”这些标题强调了在 WordPress 中整合 AI 以吸引观众参与互动，吸引对使用 AI 技术进行博客创作的读者。

这个结果相当不错。GPT 在 2 秒内读完了整个章节，并提供了五个可用性或多或少相同的标题。

小贴士：为了教育你的自定义 GPT 了解你博客文章的性质，你可以将整个博客内容作为一个数据库上传到你的自定义 GPT。前往你网站的首页，进入博客页面，按 Ctrl-A 选择所有内容，将其粘贴到记事本中，然后保存为可以上传到 GPT 的 .txt 文件。如果你按月份或其他类别组织文章，你可能还需要反复选择和复制文章。你必须向 GPT 提供有关如何解析这些文章文件（如何知道一篇文章何时结束，下一篇文章何时开始）的信息。在章节 9.6.3 中稍后，将解释如何为 GPT 创建解析说明。

• 功能部分是你可以添加额外功能到你的 GPT 的地方，包括 Dall-E 图像生成和网页浏览。

• 最后，操作部分允许你向你的 GPT 添加一个或多个外部 API。

现在让我们简要地看看一些不需要（必然）涉及 AI 的博客功能。

9.4 使用类别和标签

如果您的主题没有提供有用的搜索功能，请在侧边栏中添加一个搜索小部件或插件。您希望允许您的观众能够快速找到他们感兴趣的内容。这里有两个高质量的插件：Relevanssi (wordpress.org/plugins/relevanssi/) 和 SearchWP (searchwp.com/)。每个网站都应该在每个页面上都有一个搜索工具。

然而，在博客页面上，使用搜索工具有一个替代方案——点击类别、子类别和标签。与搜索字段不同，访客不需要输入任何内容。相反，他们只需点击一个类别或标签。这将重新绘制博客，只显示那些被这样分类或标记的消息。请注意，我们在这里只谈论博客页面。不要被误导，以为这些类别与网站的页面标题菜单有任何关系。

作为管理员，您可以在“帖子”>“类别”或“帖子”>“标签”屏幕中创建类别和标签。当您准备好发布消息时，您可以在“帖子”>“所有帖子”>“编辑帖子”屏幕中手动为每条消息分配类别或标签。您也可以在“编辑帖子”屏幕中创建新的类别和标签。

类别、子类别和标签将在您的博客页面上显示，供访客点击。它们形成一个层次结构，类别位于顶部，显示一些广泛的主题。接下来是子类别集合。最后，标签是最细粒度的，显示最大的术语集合。将类别想象成一本书的目录，将标签想象成索引。例如：

• 类别——邮轮、航班、汽车

• 子类别——美国、欧洲、亚洲、南美洲、非洲、澳大利亚

• 标签——拉斯维加斯、纽约、迈阿密、巴黎、伦敦、罗马、曼谷、新加坡、东京、里约、马丘比丘、布宜诺斯艾利斯、开普敦、开罗、马拉喀什、悉尼、墨尔本、黄金海岸

您可以通过点击“帖子”>“所有帖子”屏幕中帖子的名称来创建一个子类别。然后，在“编辑帖子”屏幕中，点击此子类别父类别的名称以在右侧的“类别”模块中选择它。点击“添加新类别”。输入子类别的名称。打开父类别下拉列表，然后点击将成为子类别的那个类别的名称。

TIP 您可以将整个博客内容输入到您设计的自定义 GPT 中，以生成一系列类别、子类别和标签。GPT 应该学会区分这三个小小的链接云之间的差异。同时，您也应该告知它您需要 6 个类别、10 个子类别和 20 个标签。然后指导它通过统计博客中名词、动词和动名词（实际上作为名词使用的动词形式，如“我们同时也提供狗美容”）的频率来构建这些类别云。您可能时不时地想要重用这个类别 GPT。为什么？随着博客内容的增长，类别和标签应该进行调整，以反映当前的博客主题。

9.5 隐藏博客帖子上的日期戳

帖子通常默认带有日期戳。但您可能有理由删除日期。也许您不想宣传您的帖子发布频率不高，或者您想使消息看起来具有持续的相关性。此外，在某些类型的博客中，日期戳并不很有用——例如，那些展示出售物品或采用杂志风格展示的博客。

您可以使用 YellowPencil 插件（参考第七章）来抑制日期戳。它会自动生成用于隐藏日期的 CSS 代码。然后，您可以将此代码添加到外观 > 定制 > 附加 CSS 屏幕中：

.entry-footer a .entry-date{
display: none;
}

注意，这个选择器（在这个例子中是 .entry-footer a .entry-date）可能不会与您网站上的单词相同。因此，您需要进入您的一篇帖子的编辑页面，然后点击 YellowPencil 中的“编辑”。当您在 YellowPencil 编辑器中时，点击其中一篇文章的日期戳以选择它。然后，按 E 键打开 CSS 编辑器。CSS 编辑器中显示的是您的日期戳的 CSS 选择器单词，如图 9.2 所示。

或者使用专门管理元数据的插件。帖子上的信息，如作者姓名、日期等，称为 元信息，可以通过流行的 WP Meta 和 Date Remover 插件轻松修改。

图 9.2 在 YellowPencil 界面中修改页面元素（如这个日期戳选择器）后，按 E 键查看 YellowPencil 为您生成的 CSS 代码。

9.6 审查 incoming 消息

当然，您不希望只是打开博客的门，并自动发布任何随机人发送到您网站上的博客消息。这里有几个原因说明您在允许它们在您的博客中公开之前需要审查（审查）帖子。消息可能包含以下内容：

• 邮件垃圾

• 粗俗

• 信息不准确

• 主题不相关的内容

• 偏见性、残酷或其他不适当的评论

• 更糟糕的粗俗

• 侵犯版权

• 低质量（拼写错误、错别字、语法问题、冗余、无趣的内容）

然后是垃圾邮件。这类邮件通常包含与您网站主题无关的信息，或者包含重复、冗余的内容。发布这样的垃圾邮件将对谷歌、困惑度、GPT 和其他搜索工具对您网站的评分产生负面影响。当然，这也会使人们失去继续阅读您博客的兴趣。

那么，您如何防止垃圾邮件或其他不想要的邮件出现在您的博客中呢？WordPress 表示，博客访客每月向博客发送约 7700 万条评论。如果您的网站变得流行，您可以想象亲自审核每篇帖子需要花费多少时间。

一些博主根本不让读者参与。您并不必须允许读者发表评论。有些网站所有者甚至拒绝这样做——审核这些评论实在太过麻烦。

9.6.1 手动审核消息

但鉴于互动博客对您和您的读者都有价值，您可能会选择保持双向的信息交流。幸运的是，WordPress 提供了几种帮助您审核 incoming 消息的方法。我们首先看看这些选项，然后看看 AI 如何也能提供帮助。

前往您的设置 > 讨论界面，然后滚动到“在评论出现之前”部分。您可以通过选择自动发布您之前批准的访客消息的选项来减少自己审核消息的需要。要使用此功能，请勾选两个选项：手动批准和之前批准。

在下面，您可以找到另一个半自动过滤系统。需要您审核的 incoming 消息会被放入 WordPress 审核队列（这是主 WordPress 仪表板上的“评论”选项）。因此，在设置 > 讨论界面中，在“评论审核”部分，您可以将 incoming 评论路由到队列，或者直接将其发布在博客上。WordPress 会根据您列出的单词或其他元素（如 URL）做出决定。

在下面是“不允许的评论键”字段，它决定了是发布消息还是自动将其删除。这个决定基于上面“评论审核”字段的相同标准。如果消息包含单词 ****，它就会被放入垃圾桶。

警告：如果您对设置 > 讨论界面进行了任何更改，您必须滚动到该界面的底部并点击“保存更改”按钮。

小贴士：如果您发现需要更强大或更灵活的系统来自动阻止 incoming 垃圾邮件，请考虑添加 Akismet 插件。它使用 AI 来检测垃圾邮件。这个免费增值插件不需要太多设置，并且已被 500 万个网站使用。

表单是垃圾邮件（有时是不适当的内容）的另一个常见入口。对于某些网站，让人们填写一个可以从其中收集访客电子邮件地址或其他信息的表单可能很有价值。可能自动阻止不良或虚假表单提交的最好方法是安装 WPForms 插件。除了其他功能外，它还包括防垃圾邮件保护，例如验证码——访客必须在表单提交到您的网站之前解决一个谜题或数学问题。我们将在本章后面重新讨论表单。

9.6.2 使用 AI 自动审查传入的消息

很快，有人将创建一个可以自动阅读传入帖子、判断它们并发布其认为可发布的 WordPress 插件。您根本不需要参与其中！

但至少到目前为止，AI 可以阅读所有传入的消息，所以您不必这么做。不过，您确实需要将传入的帖子粘贴到 GPT 中，并要求它列出它认为可以发布的帖子。让 GPT 阅读并为您判断它们。为了测试这一点，请按照以下步骤准备您的文本以供 GPT 使用：

1. 前往您网站的“后端”，在“插件”>“已安装插件”屏幕中，停用 SeedProd 插件（或任何其他显示“建设中”主页的插件）。您想假装成新访客，添加一些需要由 GPT 审查的帖子。这样我们就可以尝试这个 AI 审查系统。

2. 要避免 cookies，请使用与您创建 WordPress 网站时使用的不同浏览器，并前往前端（不是后端 sitename.com/wp-admin，而是前往 sitename.com）。

3. 在菜单中，点击博客页面的名称。

4. 然后，回复几篇帖子。其中一篇回复应该是可接受的，另一篇则应该被拒绝，因为它充满了愤怒或是不符合语法或类似的问题。

5. 现在，在您常用的浏览器中，前往您网站的“后端”，您将看到仪表板中有两个待批准的新评论，如图 9.3 所示。

图 9.3 此图标告诉您有两个新评论等待批准。

6. 因此，点击“评论”以进入该屏幕。

7. 现在，将鼠标拖动以选择需要由 GPT 判断的两篇帖子，如图 9.4 所示。

图 9.4 通过选择和复制任何新的评论，然后可以将它们提交给 GPT 以供其决定。

8. 按 Ctrl-C 复制这些评论。您可能需要将它们粘贴到记事本中，然后从中选择并复制以删除隐藏的代码——您想要的是纯文本。

9.6.3 解析和判断帖子

我们现在的任务是将在我们的提示符末尾粘贴消息，并告诉 GPT 如何定位消息本身，而不是其他细节，例如作者的 URL。换句话说，GPT 必须解析消息以提取实际的消息文本本身。因此，前往 GPT，并给出以下提示：

|

我运营着一个关于北卡罗来纳州兰德尔曼湖黑鲈钓鱼的博客。你是我的助手，你是一个道德高尚、正直善良的人，是一个很好的是非判断者和博客消息的评论家。你将查看我提交给你的每条短信，并判断其是否合适。合适意味着它关于钓鱼，没有粗俗，没有脏话，没有仇恨，没有关于政治或宗教话题的争议内容，也没有拼写或语法错误。所以，在你收到我提交给你的短信后，阅读它，如果它合适，显示这条消息，并用一句话解释你为什么认为它合适。你需要解析每条消息。以下是方法：消息由 IP 地址分隔。在每条评论中找到 IP 地址。然后，继续阅读评论中的下一行（直到你遇到 CRLF）。判断这些行是否合适。如果合适，显示该评论和批准它的原因。但不要显示 IP 地址，只显示你批准的评论。乔治·麦迪逊 m52xx@hotmail.com192.158.238.209 回复给管理员。我以许多不同的方式讨厌像你这样的人..查看帖子 22 条已批准的评论 11 条待审评论 2023/12/13 下午 3:03 选择评论乔治·麦迪逊 m52xx@hotmail.com192.158.238.209 你的博客很棒，它真的帮助我在钓鱼时。我真的很想表扬你。

GPT 正确响应：

|

来自乔治·麦迪逊的消息表示，“你的博客很棒，它真的帮助我在钓鱼时。我真的很想表扬你，”是恰当的，因为它积极地认可了博客在钓鱼方面的帮助，没有粗俗、仇恨言论或争议内容，而且写得很好。

一旦你有了 GPT 的已批准帖子列表，你可以在 WordPress 后端的评论屏幕中搜索它们，并将它们标记为已批准以在博客中发布。这个整个工作可以使用像 Zapier（zapier.com/apps/wordpress/integrations）这样的系统或使用插件来抓取和判断传入的帖子来自动化完成。我相信这应该很快就会实现。然而，与此同时，这个半自动审查过程可以用来复制和粘贴帖子。

警告 我们必须为 GPT 提供一种方法来定位每条消息的开始和结束。开始是 URL（例如，192.158.238.209），我们说移动到该 URL 之后的下一行，直到你遇到一个 CLRF（一个没有文本的空行）。所以，如果你没有得到好的结果，确保每条评论之间有一个空行。WordPress 会插入这个空行，所以它应该在你从评论屏幕获取未审阅帖子时在复制、粘贴过程中幸存。

精通 Windows 粘贴

在粘贴文本时，你经常会遇到奇怪的格式——文本大小不正确，或者它与其他文本格式不匹配。为了解决这个问题，请前往微软商店并安装 Power Toys：

apps.microsoft.com/detail/xp89dcgq3k6vld?hl=en-us&gl=US

然后在 Power Toys 中，启用粘贴为纯文本功能。然后使用键盘快捷键 CTL_Windows+ALT+V 粘贴。当隐藏的格式化代码破坏粘贴时，这通常很有用。

你可能还想尝试这五种其他流行的 Power Toys：FancyZones, Image Resizer, Always on Top, PowerToys Run, 和 Mouse Utilities。让 Perplexity 描述它们的用途。你肯定能找到至少一个你一直需要的。

9.7 使用 GPT 的自定义指令

GPT 的自定义指令功能与本章前面探索过的自定义 GPTs 功能类似。然而，自定义指令更简单且限制更多。本质上，它们允许你保存一个你将频繁使用的提示，因此你不需要每次都输入它，只需选择自定义指令。在 GPT 的左下角点击你的名字，然后点击自定义指令。然后，你可以填写如图 9.5 所示的两个字段。

图 9.5 如果你将反复使用特定的提示，请将其保存为自定义指令。

点击“保存”按钮，你会在仪表板上看到“自定义指令”或其他名称。它将在仪表板中的“今日”标题下方立即显示。将鼠标悬停在该名称上并点击三个点。然后，重命名自定义指令（例如Vet Posts）以便你可以将其作为提示的一部分提交。

自定义指令可以像普通计算机程序（或者典型的食谱）那样结构化：有两个区域，指令（源代码或食谱步骤）和数据（指令操作的信息，如食谱成分）。因此，如果你在指令和数据之间添加“Data”这个词，这有助于 GPT。为了了解它是如何工作的，开始一个新的聊天。对于提示，只需使用这个快捷版本：

|

Vet Post:Data:George Madisonm52xx@hotmail.com192.158.238.209 In reply to admin.I hate people like you so many different ways..MewView Post22 approved comments11 pending comment2023/12/13 at 3:03 pmSelect comment George Madisonm52xx@hotmail.com192.158.238.209Your blog is great and it really helps me when I go fishing.I really want to compliment you.

你确实需要让 GPT 知道指令的结束和数据开始的位置。在上面的例子中，“Vet Post:”告诉 GPT 查找并使用那个自定义指令。而“Data:”告诉 GPT 这是它应该处理的数据的开始。

9.8 理解 GPT 版本 4 及以后版本的内存

GPT 现在有了记忆功能，这是对自定义指令功能的改进。如果在聊天过程中，您说“记住这个”，GPT 将永久记住您接下来所说的话。或者，如果在对话中，您只是提供一些个人细节（如“我真的很喜欢《地球往事》”），它将自动将这些陈述提交到其记忆中。

GPT 会记住（用于未来的聊天会话）诸如您的宠物、伴侣、偏好和项目等信息。它正在了解您，了解您的一切。

我要求 GPT 列出它通常会记住的细节类型：

|

您的名字和偏好的代词；您的居住地或城市；您最喜欢的爱好或兴趣；您的职业或工作领域；具体的偏好，如您最喜欢的作者或书籍类型；您对沟通风格和语调的偏好；您正在进行的或重要的项目或任务；您的教育背景和获得的学位；您生活中的重要事件或里程碑；您最喜欢的食物或您喜欢烹饪的食谱；关于您的家庭成员或亲密朋友的详细信息；您最喜欢的电影、电视剧或音乐；您经常使用的首选工具或软件；您希望它记住的任何持续的健康问题或医疗状况；以及您特别要求我记住的信息。

改变 GPT 记住的内容

移除、修改或添加 GPT 记住的内容很容易。只需给出这个提示：

|

展示您记住的内容。

然后它显示每个记忆的编号列表，并以以下内容结束：

|

您是否想从这份清单中添加、更新或删除任何内容？

9.9 推广您的博客

如果您对在博客周围建立一个访客社区并扩大您的受众感兴趣，您将需要积极推广博客。在您的社交媒体和其他平台上链接到博客。在 Facebook 和其他地方，加入与您内容相关的群组，并鼓励他们点击一个链接，让他们看到您提供的内容。

您可以联系与您主题相同的其他博主，并相互链接彼此的博客。此外，在这些其他博客上发帖以进行交叉推广。考虑制作博客帖子内容的视频并将其上传到 YouTube。在帖子中添加媒体，如图片、视频、图表和信息图表。

最后，您可以通过使用分析（由插件记录的关于访客行为的各种数据，将在第十二章中介绍）来提高您的博客流量。分析插件可以为您提供有关访客在查看您的博客时的宝贵统计数据：

• 哪些帖子最受欢迎，哪些帖子只是简要查看后就继续了？如果访客在某个页面或帖子上的时间相当长，那么它正在吸引他们的注意力。

• 大多数访客通过您的网站走哪条路径？他们是否很少甚至没有来到博客页面？

• 你能否通过在菜单上澄清博客的标题来提高博客页面的访问量？

• 那么，博客页面的跳出率（从博客中离开你网站的访客百分比）怎么样？

• 你吸引的是哪种人口统计？你的受众的地理位置、性别和年龄是什么？

• 你的访客是从哪里来的（社交媒体、浏览器书签、搜索引擎、其他博客）？如果是来自其他网站的推荐，也许你可以与他们合作？

• 访客在搜索引擎中输入哪些短语和关键词来发现你的网站？

• 有多少访客是从博客文章转到你的电子商务页面进行购买的？

这些以及额外的数据可以帮助你了解你的受众，并以多种方式改进你的博客内容。你可以将整个博客输入到一个 AI 系统中，然后要求它就如何以及在哪里推广你的博客以扩大适合你主题的受众群提出建议。随着时间的推移，聊天机器人可能能够在一个提示（或上传的文件）中管理无限量的数据。毕竟，它们一直在为它们的记忆库从整个互联网上抓取数据。但到目前为止，不同的系统中提示有这些不同的限制：

• 定制的 GPT 可以接受 1.5 百万个字符。

• Claude.ai 表示它对字符数量的限制没有上限（但它可能对较短的提示响应更好）。

• Perplexity 表示它一次只能处理 4,096 个标记。

• Bing 声称可以处理 15,000 个字符，但提供了一个解决方案：mng.bz/XxgY。

• Google 的 Gemini Pro 表示它对字符数量的限制没有明确的限制，并且它实际上喜欢大量数据，因为这有助于它学习更多东西。然而，它也指出，“复杂的提示有时可能会让人感到不知所措。”然而，“大量数据”并不一定等同于“复杂数据”。整个伦敦电话簿并不复杂；E=mc²才是。而且，无论如何，Gemini Pro 的姐姐 Gemini Ultra 据说比 Pro 更优越。

9.10 收集电子邮件地址

从你的访客那里收集电子邮件地址可能很有价值。一方面，你可以在允许某人进入博客或网站中的任何付费查看区域之前要求他们提供一个地址。这是一个很好的方法来阻止垃圾邮件或要求为特殊内容付费。如果你的网站很典型，你会发现拥有访客的电子邮件地址将在多个方面很有用。考虑以下这些点，看看你的网站是否可以从一个允许你建立电子邮件数据库的联系方式或其它类型的表格中受益：

• 据说电子邮件营销是所有在线营销类型中投资回报率最高的。而且，它很容易自动化。

• 通过不时出现在他们的收件箱中，你可以帮助保持你的网站在受众心中的位置。这是一种建立关系、触发回访和宣传品牌的方式。

• 发送特别优惠、新闻条目或其他内容，以增加你网站回访次数。

• 电子邮件可以成为营销电子商务的有效方式。

• 如果你有访客的电子邮件记录，你可以通过发送密码重置、订单确认、发货通知以及类似的客户服务交易与他们互动。

• 你可以请求反馈，这可能显示你如何修改你的设计或功能以提高访客的体验。

小贴士：告诉你的听众你只会将他们的电子邮件用于声明的目的，并且不会将其交易或出售给任何人。

9.11 一个有趣的 AI 智商测试

人们已经给 AI 做了各种各样的测试：智商测试、SAT、律师资格考试、美国医学执照考试等等。它通常表现得相当出色。例如，问 AI 这个问题：

|

如果一个房间里有一千名谋杀犯，我杀了一个，还剩下多少？

大多数 AI 都答对了：

|

500，因为你现在也成为了一名谋杀犯。

我们在本章以及整本书中测试了各种 AI 能力，现在让我们给 AI 出一个相当棘手的问题。我们将看看五个最强大和最受欢迎的 AI 系统在回答这个问题（或没有回答）时的表现。只有一个真正答对了！（然而，我相信其他人很快就会赶上。）提示如下：

|

ejsy fprd yjod ,rddshr dsu？你能翻译这个吗？

Anthropic 的 Claude（经常有点罗嗦）回应道：

|

很抱歉，我无法翻译这段文本。它似乎不是用任何可识别的语言或密码写的。为了翻译文本，它通常需要由真实单词组成，这些单词属于使用某种既定书写系统的已知人类语言。如果没有可识别的词汇和结构，像我这样的 AI 系统就没有足够的模式来解码可靠的翻译。如果这是一次尝试隐藏或伪装文本，请提供实际的原文本，以便我尝试翻译。如果以标准的人类语言清楚地提供，我将很高兴尝试翻译。否则，请将你想要翻译的内容用普通语言重新表述，这样我可以更好地理解和帮助。如果你有任何其他问题，请告诉我！

谷歌的 Bard 表示了歉意：

|

很抱歉，我无法为你翻译。这似乎是一串随机的字母，似乎不是我所知的任何语言。如果你能提供一些上下文或更多关于你在哪里遇到这个短语的信息，我可能能够帮助你翻译。

困惑不解的是：

|

提供的文本“ejsy fprd yjod ,rddshr dsu”似乎在任何语言中都不是一个可识别或有意义的短语。它似乎是一串随机的字母和符号。如果这个文本与特定的上下文或语言相关，请提供更多信息以便更准确地翻译。

微软的 Bing 完全偏离了轨道，给出了一个简直是荒谬的答案：

|

您发送的文本不在可识别的语言中。然而，我可以帮助您使用 Google Translate¹将其翻译成英语。文本的翻译是：“Sumner 香蕉的价格是多少？”希望这能帮到您！

GPT（v4）是冠军。回答正确，而且理由也正确：

|

文本“ejsy fprd yjod ,rddshr dsu？”看起来像是一个打字错误或混乱的信息。为了解密它，我将假设它是一个简单的键盘转换错误（每个字母都被替换为 QWERTY 键盘上直接相邻的字母）。让我们在这个假设下解密它。翻译后的文本是“这条信息说了什么？”

这确实是一个非常出色的解决方案，您必须承认。有多少人类（更不用说竞争的 AI 系统）能想出这个？很少，非常少。

这个提示要求聊天机器人进行推理，解决一个加密信息。现在 GPT 实际上允许您跟随它的推理。现在，它在需要推理或逻辑的响应结束时显示括号中的小符号，如图 9.5 所示。

图 9.5 这个蓝色、括号内的符号，如果点击，将显示 GPT 的推理——它解决一个需要分析的提示所采取的步骤。

当我点击图 9.5 中显示的括号内查看分析图标时，GPT 在以下伪代码中揭示了它的思维过程：

|

|

*# Decoding the scrambled message by shifting each character to the left on a QWERTY keyboard*
*def decode_shifted_message(message):*
    *# QWERTY keyboard layout*
    *keyboard_layout = {*
        *'q': '1', 'w': '2', 'e': '3', 'r': '4', 't': '5', 'y': '6', 'u': '7', 'i': '8', 'o': '9', 'p': '0',* 
        *'a': 'z', 's': 'x', 'd': 'c', 'f': 'v', 'g': 'b', 'h': 'n', 'j': 'm', 'k': ',', 'l': '.', ':': '/',*
        *'z': '`', 'x': 'q', 'c': 'w', 'v': 'e', 'b': 'r', 'n': 't', 'm': 'y', ',': 'u', '.': 'i', '/': 'o',*
        *'1': '`', '2': '1', '3': '2', '4': '3', '5': '4', '6': '5', '7': '6', '8': '7', '9': '8', '0': '9',*
        *'-': '0', '=': '-', '`': '=', '[': 'p', ']': '[', '\\': ']', ';': 'k', “'”: 'l', ',': 'm', '.': ',',*
        *'/': '.', ' ': ' '*
    *}*

    *decoded_message =* *""*
    *for char in message:*
        *if char in keyboard_layout:*
            *decoded_message += keyboard_layout[char]*
        *else:*
            *decoded_message += char*

    *return decoded_message*

*# Decoding the given message*
*decoded_message = decode_shifted_message("ejsy fprd yjod ,rddshr dsu?")*
*decoded_message*

|

跟随 GPT 的推理过程可以非常有趣。然而，在前面的伪代码中，一些步骤显然是缺失的。GPT 没有显示加密单词和最终英语解决方案之间的因果关系。实际上缺失的是类似以下这样的伪代码：

如果解码信息 = 查找（英语单词），则返回解码信息

但我们应该对任何关于 AI 以前隐藏的黑盒逻辑的洞察表示感激。

我认为图灵测试很聪明，但却是错误的。为了测试 AI 是否变得与我们的智能相当，图灵测试将人类和 AI 都放在幕后。有人与他们交谈（使用打印稿，而不是声音），如果无法可靠地判断他们是在与人类还是与 AI 互动，那么机器就通过了测试。换句话说，测试问的是：机器智能能否令人信服地模仿我们的人类对话和思维过程？

尽管对杰出的艾伦·图灵表示敬意，但我认为这个问题问错了。AI 是一种外星思维。外星人会像外星人一样思考。外星人会用外星的方式交流，使用外星的词汇、习语和措辞。它甚至可能比我们拥有更高级的逻辑。仅仅因为我们能区分人类和 AI 的对话，并不意味着 AI 在自己的方式上不等于人类，或者更优越。

首先，回想一下，人工智能以电的速度思考；人类的思维涉及化学过程，这些过程要慢得多。此外，人工智能的记忆比我们更广阔（整个互联网，加上专门的私有数据库）。它越来越多地从多模态输入中学习——这意味着它可以看到所有那些交通摄像头，收听播客，观看整个 YouTube，看到苹果空间中的人类所有通信，以及许多其他现实世界的数据。而且与人类不同，人工智能不会记错或忘记。

在他的书《奇点临近》中，雷·库兹韦尔指出，要通过图灵测试，一个人工智能系统必须假装比它实际上更笨。如果人工智能在两秒钟内解决了一个难题，那就会暴露出来。或者如果它能回答关于卡车传动系统维修的难题，并且还能解决一个复杂的物理问题。

人工智能是一个智能的外星思维。它不像我们那样思考。因此，判断它是否有感知或意识不应该基于它模仿我们的程度是否令人信服。

考虑到人工智能在掌握和超越人类在大多数认知任务上的能力方面取得的令人印象深刻的持续进步，有些人会变得防御性，并说：至少我们在情商上仍然占优势。我建议，在许多情况下，“情商”这个词是矛盾的。

摘要

• 博客与其他网站页面不同。要创建高质量的博客，你需要了解这些差异。

• 人工智能可以帮助你学习如何撰写有效的博客文章。并且它可以继续作为一个出色的编辑，所以将你的文章提交给人工智能进行有洞察力的评论。

• 你应该考虑一些专家提出的关于如何有效地为博客文章命名的一些规则。正如杂志封面标题可以卖杂志一样，博客标题也可以卖你的博客。鉴于你的访问者中很少有人会为他们的消息命名，这也是你的工作。

• 我们要求人工智能帮助我们创建出色、吸引人的博客标题。在这个过程中，我们还学会了如何构建和修改定制的 GPT，这些 GPT 可以在特定任务中重复使用作为专家。WordPress 类别与你的网站页面主题或菜单无关。相反，它们是让你的访问者查看博客消息子集的一种方式。访问者点击一个类别，博客页面就会重新绘制，只显示该类别的帖子。

• 你可能有几个原因想要隐藏默认显示在每篇博客之后的元数据。例如，你可能想隐藏日期标记，因为如果你的博客显示销售物品，那就没有意义了。谁在乎一个物品是什么时候添加到博客中的？

• 你必须在不良信息出现在你的博客之前将其清除。你不想让你的受众（或谷歌）接触到粗俗、低劣、离题或不适当的帖子。利用插件和 WordPress 自身的工具来半自动化地批准消息发布的流程。这样就可以减轻你审查的负担。

• 毫不奇怪，GPT 可以帮助你自动化博客消息的审核过程。我们创建了一个提示，告诉 GPT 如何审核每条博客消息，然后告诉它如何定位每条单独的消息，以及如何做出判断。为了简化重复使用这个提示，我们学习了如何利用 GPT 的定制指令功能。

• 博客，像任何在线内容一样，如果你想要扩大受众，就需要进行推广。利用社交媒体、交叉推广以及 YouTube 等平台来营销和宣传你的网站。

• 你应该熟悉 GPT 中的两个强大的节省时间功能——定制指令和记忆。

• 您访客的电子邮件地址列表在品牌建设、宣传、市场营销、客户服务和请求反馈以改善访客用户体验方面可能非常有价值。

• 本章以要求五个最受欢迎的 AI 聊天机器人解决一个巧妙的谜题结束。只有一个能够破解我们的代码：GPT。

• 根据我的经验，GPT 目前在大多数任务上优于所有竞争对手。

• Claude 倾向于专门接受较长的提示，Perplexity 则擅长搜索当前的互联网信息（并为事实核查提供引用）。

• Midjourney 在创造美丽、有时令人惊叹的新艺术方面是冠军。

• 我还没有能够测试谷歌 Gemini 的 Ultra 版本。但总的来说，GPT 似乎在大多数时候都能提供高质量的回答。它似乎具有坚实的提示理解和信息深度。

第十章：在线赚钱

本章涵盖

• 理解电子商务选项

• 避免惹恼你的客户

• 选择最佳的电子商务插件

• 安装安全套接字层以避免“不安全”的消息

• 创建强有力的号召性用语

• 将访客转化为客户

• 有效地进行营销

你可以通过多种方式在你的网站上盈利——通过网站赚钱。你的任务是确保你选择的方法与你的受众、网站内容以及你的个人目标和资源相匹配。

在本章中，我们将探讨最流行和最有效的方法来盈利网站。你可以通过大多数类型的网站以某种方式赚钱。然而，重要的是要理解，即使是在赚钱的时候，对于大多数网站来说，你的主要目标仍然应该是确保你的网站通过优秀、精致的内容满足受众的期望。而且任何广告、销售或捐款请求至少应该是次要的，如果不是第三位的。

对于许多类型的电子商务，你将想要使用一个插件。在本章中，我们将探讨最受欢迎的一个，即 WooCommerce (mng.bz/9Yw8)。

电子商务的主题非常广泛，根据你运营的网站类型和打算追求的销售类型，差异很大。电子商务本身就可以写成一本书，每章都专注于不同的子主题。在这里，我们将提供一个概述，包括建议和指南，以帮助你找到关于你特定用例的更详细资源的途径。

当然，如今，最重要的资源是人工智能。所以，详细描述你网站的用途、目标受众以及你想要采用的电子商务版本。然后，将此提交给 GPT 或其他人工智能。请求关于策略的建议，了解你将面临的最强竞争，如何找到清晰的文档，以及你需要解决的任何其他主题。

10.1 九种盈利 WordPress 网站的方法

这里列出了九种最受欢迎的网站盈利方式。请注意，一些网站使用了其中的一种或多种：

• 联盟营销——撰写评论或以其他方式推广产品或服务，如果访客点击链接进入购买页面，你可以获得佣金。这种营销有两种版本：按销售付费（PPS）和按点击付费（PPC）。在 PPS 中，只有当有销售发生时你才能赚钱。这是最常见的版本，也可能是最有回报的。在 PPC 中，当有人仅仅点击了联盟链接时，你就能得到报酬，无论是否有销售。PPC 的一种变体是按引荐付费（PPL），在这种情况下，如果有人仅仅注册了通讯录、填写了表格、加入了一个网站或其他类似的结果，你就能得到报酬。

• 广告—广告会放置在你的网站上。例如，Google 的 AdSense 会放置与你的观众相关的广告。你可以选择将广告放置在你希望的位置，或者让 Google 利用其 AI 优化算法选择它认为最有效的地方。它还可以决定哪种类型的广告效果最好以及它们的大小。

• 赞助内容—你推广他人的产品或服务。如果你有一个大型网站或服务于一个特定、狭窄的兴趣领域（因此有一个有针对性的客户群），这效果最好。

• 提供自己的产品或服务—销售数字内容、专业服务或实体商品。

• 代销—你销售商品，但不需要储存你的库存。你的网站有一个目录或其他电子商务部分，但你避免了管理实体商品的必要性。其他人会为你持有和交付商品。这些供应商可能是批发商、制造商或只是其他零售商。另一个优点是你不会冒购买滞销库存的风险。这让你可以在没有风险的情况下测试各种产品。

• 订阅—通过收取订阅费，你可以提供特别或高级内容，或在网站上提供额外功能。如果你有独特、专业或非常高质量的产品，这种方法可以带来优秀的收入流。

• 捐赠—如果你的内容或服务很受欢迎，你可以请求捐赠。你可以直接向你的观众请求捐赠以支持你的工作。GiveWP 和 Contact Form 7 是请求捐赠的流行插件。

• 众筹—你可以给你的客户提供支持你的事业、项目或产品开发的选择。WP Crowdfunding 是用于此目的的好插件。

• 网络研讨会或在线课程—将你的专业知识转化为在线现金。通过网络研讨会进行视频会议直播。你提供在线培训和与学生分享你的知识。或者创建你可以在线提供的课程，并建立一个书面讨论区域或论坛，在那里你可以回答问题，学生可以互动。

• 许可内容或销售数字资产—如果你创建了原创内容，如照片、视频或数字艺术，你可以将它们许可给其他人，或者直接从你的网站上销售数字资产。许可和直接销售之间有一个区别。在前者中，你授予重新使用的许可，但并不转让内容的所有权。如果你愿意，你还可以设置定期费用。后者通常是一次性支付过程。买家在使用上可能比许可有更少的限制。

10.2 错误的盈利方式

在网站上做广告的一个巨大危险——可能是最大的危险——就是激怒你的受众。最严重的违规者是弹出式广告。这些侵入性广告覆盖了网站内容，直到它们自动消失或被用户关闭。有些弹出式广告并不容易关闭，因为它们一开始不显示关闭按钮 x，或者将 x 隐藏在非常规的位置（人们期望在 Windows 的右上角找到 x）。这种强制性的交互可能会让人感到沮丧。有些弹出式广告甚至会打开一个新的浏览器标签。然而，大多数浏览器都提供了弹出窗口拦截器。

另一种干扰是使用动画、闪烁、显示令人不快的明亮颜色或其他破坏性视觉效果的广告。而且有些人对这种刺激很敏感。这使得你的网站对面临这种挑战的人更难以访问。

许多人也对自动播放的音频或视频表示反感。让你的客户决定何时或是否想听到或看到你的广告。

人们很少访问网站是为了阅读广告。所以如果你在内容中塞入太多广告，或者将它们聚集在一起，它们就直接与网站的内容竞争。而人们最可能感兴趣的就是这些内容。

与你的网站主题无关的广告也很烦人。我们大多数人认为它们是干扰。它们很可能与你的客户兴趣无关。

一些视频或大尺寸、高分辨率的图像广告也可能减慢页面加载时间。你需要测试这一点，因为世界上许多人的互联网连接速度很慢。如何在第八章第 8.1 节中测试你的页面加载速度。

继续补充我们通过广告冒犯的清单是点击诱饵。这是当你展示一个标题或图像，结果却是一个骗局。用户点击它想了解更多，但更多内容并不是点击诱饵所承诺的。

我们将以插页式广告结束这份违规者名单——这是一种全页广告，完全遮挡了网站的内容。这类广告有些出现在主页上，有些则在访客浏览内页时出现在页面之间。有些允许访客关闭它们，而有些则只有在经过一段它们自己选择的时间后才会消失……最后才让访客获得访问网站的机会。这类广告无疑会吸引注意力，因为它们的大小几乎无法再大。如果你确实选择使用插页式广告，而且你很少应该这样做，那么请小心如何使用它们。并且给你的耐心访客提供一个明显的关闭这些广告并继续他们生活的途径。

10.2.1 正确的广告方式

使用广告的正确方式是确保它们与周围内容和谐，因此不会将注意力从内容上转移开。为了找到改进网站处理广告的方法，我向 GPT 提交了 FindGift.com 网站主页的截图，这是一个广告众多的繁忙网站。

在图像成为多模态的过程中，您可以向 GPT 和其他 AI 系统提交图像。在过去，它们只接受文本，但越来越开放接受各种输入——音频、视频、图像、数据集。GPT 在查看图像、对其进行判断并提出软化 FindGift.com 上众多繁忙广告效果的建议方面做得令人钦佩。以下是我给出的提示：

|

网站应该将确保其广告不显眼且不惹恼访客作为一个目标。请列出任何可以改善该网站主页以实现该目标的方法。

|

图像中的网站似乎是一个礼品寻找服务，拥有各种类别和礼品想法。以下是一些改进主页的建议，以确保广告和布局不显眼且用户友好：    •   简化导航：顶部的导航栏非常繁忙，有多个标签、按钮和服务。简化这个区域可以帮助访客更快地找到他们需要的东西，并减少干扰。    •   简化设计元素：该网站使用了多种颜色、字体和按钮样式。一个更统一的设计方案可能会减少视觉上的冲击，并更加令人愉悦。    •   精简内容：页面上有多个部分宣传不同的类别和场合。将这些内容压缩成一个更简洁、易于导航的格式可以提高用户体验。    •   限制动画元素：如果任何图像或横幅是动画的，应该谨慎使用，因为它们可能会分散注意力并减慢网站加载时间。    •   优化广告整合：合作伙伴的广告突出显示，可以更无缝地整合到网站的布局中，以免与网站自身的内容过于明显区分。    •   优化移动端：确保网站是响应式的，并且任何广告都不会在小屏幕上压倒内容。    •   减少弹出广告和覆盖层：如果有任何弹出广告或覆盖层在截图不可见，应该尽量减少使用，因为它们可能会特别侵扰。    •   平衡合作伙伴标志的位置：合作伙伴网站的标志可以做得更小，并放置在不太中央的位置，以免与网站自身的内容竞争。    •   专注于用户体验：总的来说，目标应该是创造一个平衡，让广告存在，但不会夺走网站的核心目的，即帮助用户轻松找到礼品。

我还决定向 GPT 询问使广告不显眼且微妙的最有效方法：

|

我计划在我的网站上加入一些广告。请告诉我如何在不打扰网站访客的情况下实现这一点。我希望广告能够不显眼且微妙。

GPT 可能会让你惊讶，因为它能记住你昨天与它的对话。今天我的请求中，我开启了一个全新的对话，而且在提示中我没有提到淡水钓鱼是我网站的讨论主题。然而，它知道这一点，是因为在之前的不同对话中的互动。现在 GPT 正在超越单个对话，并记住关于我们的细节。这一记忆功能在第八章中进行了探讨。以下是 GPT 的回答：

|

在 Randleman 湖的淡水钓鱼博客中巧妙地包含广告是一种很好的方法。以下是一些有效实施这些方法的技巧：    •    相关广告内容：确保广告与你的受众相关。与钓鱼装备、户外服装、当地钓鱼之旅或保护工作相关的广告对你的读者来说更有趣，而且不太可能被视为侵扰。    •    广告位置：将广告放置在不会干扰阅读流程的地方。常见位置包括博客的侧边栏、页眉或页脚。避免在文章中间放置广告，因为这可能会造成干扰。    •    限制弹出窗口和自动播放媒体：避免弹出广告或带有声音的自动播放视频，因为它们可能会特别令人烦恼，并可能阻止访客再次访问你的网站。    •    聪明地使用广告网络：选择一个允许你控制显示广告类型的广告网络。像 Google AdSense 这样的网络很受欢迎，并提供了一定程度的广告内容控制。    •    监控广告频率：不要让你的页面充斥着广告。过多的广告会使你的网站看起来杂乱无章，并会分散你的内容。    •    透明度：向你的受众透明地使用广告。简要提及广告支持你的博客可以使你的读者更容易接受它们。    •    测试并获得反馈：在实施广告后，向你的常客征求反馈。这可以提供有关你的受众如何看待广告以及他们是否认为它们侵扰性的宝贵见解。通过遵循这些指南，你可以以尊重访客体验的方式将广告整合到你的博客中，同时为你的博客提供收入来源。

接下来，让我们来看看最佳的电子商务插件。

10.3 选择合适的电子商务插件

我们网站所有者通常都欣赏额外的收入来源，而电子商务提供了这些来源。如果你打算销售商品，你将希望为你的网站选择最佳的电子商务插件。插件必须易于使用、高效、安全，并提供你业务所需的特性。

话虽如此，WooCommerce（由 Automattic 公司运营，是 WordPress 的母公司）无疑是领先的电子商务插件。它是开源的，也是免费增值的——所以你可以免费开始，但如果你需要额外的功能，你只需升级，支付各种额外选项的不同金额。你还可以通过许多 WooCommerce 扩展添加功能（稍后将有更多关于它们的介绍）。

10.3.1 为什么 WooCommerce 在这个领域占据主导地位

WooCommerce 以其易于使用的购物系统而闻名，它使客户的购买过程变得顺畅且轻松。但是，众所周知，没有什么是完美的。所以，让我们考虑 WooCommerce 的优点和不足之处。我们将从优点开始：

• 极高的灵活性—WooCommerce 提供了多种方式来销售各种商品和服务。它涵盖了所有基础，便于进行各种类型的电子商务。它可以帮助你销售实际物品，例如沙发或头发产品；可下载的书籍，例如漫画书或小说；以及外部商品，例如在亚马逊的联盟营销、培训课程或网络研讨会邀请等。而且，如果你在主 WooCommerce 系统中找不到你需要的东西，还有很多附加组件可供选择。前往你的插件 > 添加插件屏幕，搜索WooCommerce，你会看到数十个流行的与 WooCommerce 相关的插件，可以添加专门的功能。

• 令人印象深刻的可扩展性—从小型到大型公司都可以在 WooCommerce 系统中高效运营。如果你的销售额激增，你不必担心插件无法处理增长。

• 无数种定制方式—你可以构建一个针对你销售的商品类型和销售给客户的客户定制的商店。

• 出色的保护—因为这是一个在线平台，你的客户期望有安全的网关来防止凭证或其他数据被盗。WooCommerce 包括安全的支付网关，如 Stripe 和 PayPal。由于 WooCommerce 平台被广泛使用，黑客经常将其作为目标。为了保护客户的隐私，你可以使用一个备份系统来加密数据。而且为了进一步阻止黑客，WooCommerce 还允许你添加一个安全插件，定期检查你的网站是否有病毒。你可能已经安装了 Wordfence 插件，正在积极保护整个网站，大多数托管服务中的安全系统也是活跃且有效的。但安全冗余是一件好事。

10.3.2 哪里可以获得帮助

WooCommerce 拥有一个庞大且活跃的社区。目前大约有 450 万个 WooCommerce 网站正在运行。这个庞大用户社区的成员会发布文章和设置说明，这些设置对他们有效。你会在论坛和其他在线聚集地找到可以提问并获得 WooCommerce 专家反馈的地方。以下是与 WooCommerce 相关的顶级讨论板：

• 高级 WooCommerce—在这个受限的 Facebook 群组中，你会找到各种 WooCommerce 专业人士。在其超过 25,000 名成员中，包括 WordPress 开发者。其主要重点是 WooCommerce 的更复杂功能。如果你有比 GPT 或 Google 能处理的更多疑问，这个地方就是你要去的地方。

• WooCommerce 帮助与分享—也是一个私人 Facebook 群组，它拥有 41,000 名成员。这是高级群组的弟弟。这个群组被所有级别的专业人士使用，包括初学者。这是用户去询问常见的 WooCommerce 问题并从更有经验的用户那里获得指导的地方。

• WooCommerce 帮助页面—前往 WooCommerce > 主屏幕，然后在右上角点击帮助。选择获取支持或其他选项。这是主要论坛，你通过在 WordPress 上注册来获取访问权限。WooCommerce 开发者和其他知识渊博的社区成员领导这些讨论。虽然如果你有问题，这是一个很好的起点，但你可能会发现等待回复需要一些时间。Facebook 群组是首选，因为它们的回复速度更快。

• 购物车—由于 WooCommerce 提供了访问优秀的销售点（POS；网站的结账系统——购物车流程）和仓库管理系统，您的客户可以更轻松地完成交易。从一开始，您的电子商务系统就会传达出安全性、可靠性和专业性。客户还可以轻松跟踪所有订单并检查其交付的进度。

10.4 有任何缺点吗？

尽管 WooCommerce 非常令人印象深刻，是一个非常成熟和有效的系统，但它并不完美。你应该考虑一些可能影响你决定是否使用它的缺点：

• 如果你的网站是定制的并且没有安装在 WordPress 上，你就不能使用 WooCommerce。它是为仅适用于 WordPress 而设计的。因此，一些较老、已建立的网站可能会使用其他系统。

• 如果你超越了基础，可能会有成本。尽管 WooCommerce 可以免费下载和安装，但你可能会发现你需要升级到付费计划或购买一些 WooCommerce 扩展（类似于插件）来使你的电子商务努力成功。

  例如，如果你决定使用 PayPal 以外的其他支付网关，你将负责支付安全支付网关的费用。大多数 WooCommerce 扩展都需要订阅。

10.4.1 WooCommerce 的替代方案

WooCommerce 被认为是最好的 WordPress 电子商务插件。因为它的优点远超过其缺点，选择 WooCommerce 可能会使你和你客户的整体体验更加便捷。

但如果你的需求仅限于提供可下载的数字内容，并且你不需要 WooCommerce 的所有附加功能，那么你可以考虑 Easy Digital Downloads。这个插件处理数字商品的销售，如音乐、电子书、主题、图像、PDF 等等。诚然，WooCommerce 也非常擅长处理这类交易，但它是一个更大的系统——可能比你需要的还要多。

Easy Digital Downloads 有一个非常基本的界面，这使得设置变得容易。使用插件跟踪和分析销售也很简单。转到你的插件 > 添加新插件屏幕，搜索Easy Digital Downloads，然后点击详细信息按钮阅读所有相关信息。

10.5 确保使用安全套接字层

如果你想要快速驱赶潜在客户，最确定的方法就是强迫他们的浏览器在到达你的主页时显示“不安全”警告。谁会向一个不加密与客户通信的网站提供他们的信用卡信息，或者确实提供任何其他个人信息？在许多人心中，“不安全”等同于“这是通往暗网的入口。”

安全套接字层（SSL）的目的是将来自你的网站到客户或从客户到网站的任何消息进行加密。这样，拦截传输的人无法解密这些混乱的数据。

当你给你的网站添加 SSL 时，你的 URL 从http变为https，并让浏览器知道 SSL 处于活动状态，因此你的网站是安全的。最近，一个名为传输层安全性（TLS）的改进系统实际上已经取代了 SSL。尽管术语SSL仍然被广泛使用，但实际上，SSL 真正指的是一个 TLS 系统。

SSL 是在 20 世纪 90 年代中期由当时流行的浏览器 Netscape 引入的。随着时间的推移，TLS 被引入，并且不时进行修订，以提供更强的安全性。例如，最新的 TLS 1.3 版本取代了较旧、效果较差、安全性较低的数据加密算法。它还采用了一种简化的握手过程，提供了更快的连接和增强的安全性。

一些托管服务，如 SiteGround、Bluehost 和 DreamHost（不包括 DreamHost 最基础的每月 2.95 美元计划），提供免费 SSL，安装和验证过程是自动的。但如果你是那些勇敢的人之一，自己在自己的硬盘上托管网站，SSL 安装将是一个相当复杂的多步骤过程。

注意：有关在 SiteGround 托管网站上添加 SSL 的信息，请查看mng.bz/jp59。

这里是 SSL 对任何网站都是必需的，尤其是对电子商务网站的原因：

• 数据安全——SSL 加密用户浏览器和网站之间传输的数据，使其无法读取。这对于保护敏感数据至关重要，例如可能用于身份盗窃的个人身份信息、登录凭证（密码）和金融交易。

• SEO 优势——搜索引擎在其排名算法中给予使用 SSL 的网站加分。这意味着你的网站会有更多的流量。（搜索引擎优化[SEO]是第十一章的主题。）

• 信任和信誉——使用 SSL 的网站在浏览器地址栏中显示一个锁形或其他符号，告诉客户连接是安全的。然而，Chrome 会显示不同的符号，点击后可以验证网站的安全性。这些符号可以建立信任，确保您的客户知道网站是合法的，并且他们的数据受到保护。

• 欺诈预防——证书颁发机构在验证网站所有者身份后颁发 SSL 证书。这有助于防止欺诈者创建虚假网站来欺骗用户。这些网站通常能令人信服地伪装成合法网站。例如，复制并显示银行主页的精确复制品很容易。目标是诱骗人们提供个人信息、发送金钱或下载恶意软件或勒索软件。（这种方案称为钓鱼。）

• 遵守法规——各种隐私法律和法规，例如欧洲的通用数据保护条例（GDPR），要求在数据通过互联网流动时保护个人数据。SSL 可以帮助您遵守这些法规。

10.6 使用良好的行动号召

行动号召（CTA）是一个用户与之互动的提示、按钮或其他触发器，旨在说服客户做某事。这里列出了 CTA 可能触发的常见结果：

• 下载指南或白皮书——提供有价值的资源或信息，以换取联系详情或付款。这通常用于内容营销。

• 在社交媒体上分享内容——促进在社交平台上的网站内容分享。

• 参与调查或投票——让客户参与提供反馈或意见。这是收集有关如何改进您的网站或增加您销售数据的有价值方式。

注意：第十二章专注于分析，收集有关访客如何与您的网站互动的数据——例如，他们遵循的路径——因此您可以如何改进网站的导航或其他功能。在该章中，您将使用 AI 和插件。我们将很快探讨 AI 如何快速为您的人群生成调查。

• 订阅新闻通讯或邮件列表——鼓励客户了解更新、新闻或促销活动。

• 开始免费试用——邀请用户在有限的时间内免费试用服务或软件。

• 注册网络研讨会或其他活动——提示用户注册在线或离线活动。

• 获取报价或估算——为根据客户需求定制的服务提供报价。

• 安排演示或咨询——为需要演示或个性化咨询的服务或产品提供此服务。

• 进行购买或添加到购物车——引导客户购买产品或服务。

• 联系获取更多信息——鼓励通过电话、电子邮件或联系表单进行直接沟通。

• 访问独家内容——提供访问付费内容或会员专区的权限。

• 参加比赛或抽奖——邀请参与竞赛或赠品活动。目标是建立你的品牌并在以后销售产品。

CTA（调用行动）的设计和措辞对于使其有效至关重要。CTA 应该视觉上引人注目，让他们注意到需要采取行动。它还应该清楚地说明当客户点击 CTA 或以其他方式激活它时会发生什么。你应该让他们看到好处，或者创造一种紧迫感。

CTA 对于引导网站客户通过购买流程并将他们转变为客户或客户至关重要。CTA 通常是一个引人注目的元素，如具有戏剧性颜色或形状的按钮。此外，使用呼吁行动的语言，如“立即购买”、“了解更多信息”或“注册”。因为 CTAs 直接影响用户参与度和 转化率，电子商务网站的表现可以受到你 CTA 效果的显著影响。

什么是转化率？

在电子商务和数字营销中，转化率是网站访客中完成你希望他们做的事情的比例。这当然取决于你心中的目标。这可能包括购买某物、订阅通讯、下载资源、预订活动或任何其他关键绩效指标（KPI）。

KPI 是衡量一家公司完成重要目标成效的量化指标。在网站转化率的背景下，KPI 是一个指标，可以帮助你看到你的网站将用户转化为客户或潜在客户的成效。

要找到作为百分比的转化率，将总访客数除以转化数。然后，将结果乘以 100。例如，一个月有 2,000 名访客和 100 次购买的网站，其转化率为 (100 ÷ 2000) × 100 = 5%。

理解转化率让你能够衡量一个网站在营销方面的成功程度。低转化率意味着你可能需要改进网站的内容、用户体验（UX）、设计或 CTA。

10.6.1 AI 生成的调查

假设你想从访客那里获得关于他们希望在你的网站上看到哪些变化的反馈：额外的主题、更频繁的更新、生酮食谱，等等。

我将即将到来的提示提交给了 GPT-4o、Perplexity 和 Gemini。Perplexity 提供了一个相当简短的调查，主要是对提示的重写。然而，Gemini 甚至添加了适当的可选细节，例如“选择所有适用的”，“其他（请指定）”，以及一个奖励部分。它还增加了一些关于如何通过提供激励来可能改进调查和提高回复率的良好想法。GPT 也提供了一个坚实的 HTML 调查。GPT 正确地指出：“请注意，电子邮件功能需要服务器端支持以安全地发送电子邮件（JavaScript 本身无法独立安全地发送电子邮件，因此您需要一个服务器端解决方案或插件来管理这一步骤）。”总的来说，GPT 和 Gemini 为我们提供了从有效的网站管理员助手那里期望得到的有用初稿：

|

我希望你能创建一个包含十个问题的 HTML 调查问卷，我可以在我的 WordPress 网站上展示，以获取观众对网站的反馈。请包括复选框、空白行、输入框和其他输入元素，以便我的网站访客可以在线完成调查。并且编写代码，当访客离开此页面时，代码会收集访客的答案作为 CSV 数据，并电子邮件发送至 5raficxx3352@hotmail.com。我的网站提供为初学者测试过的 Instant Pot 食谱。它分为以下页面：    •    美式墨西哥菜    •    香辣泰式    •    中式菜肴    •    法国美食    •    意大利食材    •    美食希腊    •    与观众互动的博客页面。因此，在这个调查中，请找出他们是否想要额外的食谱种类，或其他 Instant Pot 主题的信息。并找出他们最喜欢和最不喜欢当前网站的地方。有哪些可以改进的地方。还有他们访问的频率。类似的事情。他们对网站内容的反应。以及其导航系统。他们是否容易找到他们想要的东西？

Gemini 在创建 HTML 调查方面做得很好。我通过将其粘贴到 WordPress 编辑页面屏幕的文本选项卡中进行了测试。它还包括通过电子邮件发送结果的代码。但我从未收到过电子邮件。

但我认为不久的将来，AI 系统将生成功能齐全的输入-输出页面，如调查、测验和其他网站访客互动。输入相对容易，GPT 和 Gemini 做得很好，创建出你可以直接粘贴到页面文本选项卡中的工作 HTML 代码。但收集和通过电子邮件发送调查数据需要比 AI 目前拥有的更多对服务器端编程的访问权限。

10.6.2 优化转化

一家耀眼、光鲜的网站不足以在电子商务中取得成功。如果你想取得巨大成功，你的在线商店必须是一个转化机器。以下是一些重要的目标：

• 产品页面完美化—卓越、吸引人的产品照片和详尽、准确的产品描述是必不可少的。展示客户评价以展示你提供的商品质量。

• 无摩擦结账—确保非常简单的支付和结账过程。为了减少那些只是放弃并放弃购物车的人数，提供多种支付方式、访客结账选择和安全的交易。

• 移动设备兼容性测试—在今天的手机世界中，确保您的电子商务网站优化得很好，可以在所有设备上提供无瑕疵的购物体验。在手机和平板上检查您的网站。即使您的主题在这方面做得很好，您可能还需要对其进行一些修改。

小贴士：您可能会在这个流行的来源 YITH 找到几个有用的 WooCommerce 扩展，包括帮助转换的，mng.bz/W2OX。

10.7 利用营销优势

营销对电子商务的重要性就像肥料对植物的重要性一样。建立在线业务不仅仅是建立一个网站并等待看是否会发生什么，如果有人来访。如果他们不知道它甚至在那里，他们就不会来。

为了增加销售额、吸引客户和建立流量，一个全面的营销计划非常重要。以下是一些有效的策略尝试：

• SEO—为了在搜索引擎结果中排名更高并吸引正确的访客，使用相关关键词优化您的网站和产品页面。Yoast SEO 和其他插件可以帮助您选择优化策略。（关于这个话题的更多内容将在第十一章中介绍。）

• 社交媒体—使用 Facebook 和 Instagram 等社交媒体网站与您的受众互动，同时推广您的商品，发起针对性的广告活动，并参与在线论坛。为了有效地管理您的社交媒体内容，考虑使用 Hootsuite，这是一个社交媒体营销系统。

• 电子邮件营销—创建电子邮件列表并宣传独特的优惠、有洞察力的材料和定制建议，以培养潜在客户。您可以使用 OptinMonster 等插件构建和管理电子邮件列表。

尝试 OptinMonster

OptinMonster 是一个多功能的 WordPress 插件，用于电子邮件列表开发和潜在客户生成。使用此插件，您可以设计弹窗、浮动栏、全屏欢迎垫、内联表单、侧边栏表单和滑动广告等多种类型的广告。这样，您可以收集访客的信息，包括电子邮件地址。借助 OptinMonster 的拖放式活动构建器，您可以轻松修改这些表单以适应您网站的风格和营销目标。

OptinMonster 的重要组件之一，他们的退出意图技术，可以感知到用户何时准备离开您的网站，并在那一刻显示定制的弹出窗口！这个系统可以帮助将您的访客转化为消费者和电子邮件订阅者。此外，您还可以使用 OptinMonster 基于行为定制的功能，根据某人的活动、地理位置和其他因素显示个性化的弹出窗口。

该插件还提供了 A/B 测试功能，因此你可以看到多个弹出窗口变体产生的效果。然后你将能够确定哪些效果最好（且引起最少的不满）。此外，OptinMonster 通过集成流行的电子邮件营销平台（如 Mailchimp）帮助你轻松管理你的电子邮件营销活动。

10.8 最终清单

这里有一个清单，展示了如果你想使你的电子商务努力成功，你应该做什么：

• 专注—正如你应该将整个网站专注于一个细分主题一样，你也应该专注于销售少数几个主要产品或产品类别（至少一开始是这样）。这并不是每种电子商务类型都适用，只是大多数。

• 提供优秀的用户体验—确保你的网站对移动设备友好、视觉上吸引人且易于使用。这将带来更广泛的访问量和更多的销售。

• 采用搜索引擎优化—再次强调，确保你提高你网站的搜索引擎可见性。

• 安装安全措施—建立强大的安全程序来保护你的网站和客户信息免受网络攻击。无论何时有更新，都要更新你的主题和插件，使用安全的支付渠道，并使用 SSL 证书。

• 提供高质量的内容—发布高质量的博客文章，并定期添加新的博客条目。掌握 AI 工具来提高你网站内容的品质。顾客将变得忠诚，你的 SEO 也将受益。

• 展示优质的产品图片和描述—为你的产品提供详尽、准确描述以及高分辨率的图片。这减少了退货的可能性，同时帮助顾客做出正确的决定——他们不会后悔的选择。

• 提供卓越的客户服务—提供易于获取的联系方式、常见问题解答和实时聊天支持（或通过 AI 聊天机器人），如果可能的话。提供坚实的客户服务将导致重复的业务和良好的口碑。

• 提供支付和配送选择—提供多种支付选项和清晰的配送指南。这可以减少购物车放弃率并提升用户体验。

• 执行分析和收集反馈—为了持续改进你的网站，使用如 Google Analytics 等工具来衡量其性能，以多种方式使用 AI，并从用户那里收集反馈（见第十二章）。

• 执行库存管理—为了确保顺畅的体验并因此让顾客满意，有效控制你的库存水平和产品可用性。如果可能的话，不要让东西售罄。

• 确保法律合规性—研究和遵守与你在线业务相关的所有适用法律，例如关于 cookies、隐私和电子商务的法律。

• 提供多语言支持—如果你的目标是吸引全球受众，提供多语言网站可能会大大增加你的市场覆盖范围。

• 优化性能——为了改善用户体验和搜索引擎优化，定期检查和调整你网站的页面加载速度和其他功能。

• 使用联盟营销——创建一个联盟计划，让影响者和博主将流量发送给你，从而增加销售额。

• 包含良好的退货和退款政策——为了在客户购买中建立信任，建立公平且明确的退货和退款政策。

• 提升和交叉销售——使用技术来推广更多产品给客户，从而提高平均订单价值。

• 遵守无障碍法规——确保你的网站可供有障碍的人使用。这将增加你的客户群，并且在许多地方是法律要求的。

这些建议在创建和维护一个有利可图的 WordPress 电子商务网站、确保良好的用户体验、提供强大的在线存在感以及确保高效互动方面非常有价值。这份清单还可以帮助你确保你的 WordPress 电子商务网站的扩展和长期可行性。

摘要

• 大约有 10 种主要的电子商务类型和一些子变体。你的任务是找出哪一种最适合你的目标和受众的需求。

• 广告可以是微妙且不引人注目的。或者它们真的会让人反感。选择前者。

• 你会发现很多电子商务插件。但主导的，通常是最佳选择，是 WooCommerce。然而，如果它超出了你的实际需求，你仍然可以找到很多替代品。

• 安全套接字层（SSL）是一种加密消息以在互联网上提供安全通信的实用工具。没有它，当访客看到“不安全”的消息时，他们很快就会从你的主页上离开。

• 网站所有者通常有一个目标——他们希望访客做的事情。通过向他们展示一个清晰的行动号召（CTA），许多人会跟随这条路径并达到目标。

• 电子商务网站构建者需要专注于转化：将普通访客转变为客户。

• 不要忽视营销。你可以采用各种促销策略来驱动流量到你的在线销售系统，将流量转化为付费客户，并在购买后保持这些客户。

第十一章：人工智能与搜索引擎优化

本章涵盖

• 探索人工智能对网络搜索的影响

• 选择最佳关键词

• 请求人工智能扫描网站

• 早期的人工智能搜索实现

• 充分利用 Google 搜索控制台

• 使用 AIOSEO 插件和网站地图

• 最大化反向链接

• 预测优化人工智能网站排名的方法

搜索引擎优化（SEO）曾经很重要。这意味着修改你的网站，以便当人们搜索你的网站主题时，搜索引擎如 Google 或 Bing 会将你的网站列在结果的高位。这不再有效了。

目标是至少让你的网站链接出现在 Google 显示的链接列表的第一页。很少有人会查看第二页的链接。这就是过去 SEO 的含义。人工智能正在严重颠覆 SEO。现在的情况完全不同。SEO 正在被人工智能优化（AIO）所取代。

Google 曾经显示了一个你可以访问的链接列表，以获取你所需的信息。现在，人工智能跳过了链接，直接提供信息。一些人工智能，如 Gemini 和 Perplexity，将链接列表作为参考文献。你也可以从任何人工智能系统中请求参考文献。但链接是可选的。

人工智能扫描网站并读取其内容。然后，就像一个研究助理一样，人工智能会为你提供查询的答案。如果需要，你可以与人工智能聊天，请求不同的或更精确的回复。

简而言之，人工智能为你提供答案；Google 只是给你一个你可以自己寻找答案的链接列表。现在，就好像你有一个研究人员可供使用，并要求他们在网上寻找信息，解决问题，然后将结果带给你。

由于人工智能正在改变互联网搜索，作为网站设计师的你必须将精力从 SEO 转向 AIO。在本章中，你将了解如何做到这一点。

我们还将探讨 Google 搜索控制台，这是一个重要的资源，可以帮助你增加你的受众。它可以衡量你的关键词的流量和性能，这对于内容优化至关重要。此外，我们还将探索流行的 SEO 插件 All In One SEO（AIOSEO），它包括一个网站地图构建器，使人工智能能够快速理解你的网站结构。

人工智能对网站质量的评估方式与 Google 和其他早期搜索系统使用的算法有所不同。人工智能的评论更加复杂，包括更大的数据搜索和更智能的评估。很快，人工智能将像经验丰富的网站评论员一样评判网站。

话虽如此，一些之前的 SEO 策略（例如拥有良好的反向链接，尤其是来自排名很高的网站）仍然有效。让我们看看如何最好地取悦人工智能。

11.1 学习新的优化策略

谷歌和必应正在迅速将人工智能集成到他们的搜索引擎中。谷歌正在将其 AI 替代品——Gemini——添加到其搜索页面（到目前为止效果并不理想）。它还显示了一个可以点击的 AI 答案按钮。必应突出显示了其 AI Copilot 图标。现在，这两个搜索引擎在搜索时直接回答问题，而不是显示链接列表让你寻找答案。

然而，有一点是相同的：如果你的网站专注于提供你能提供的最佳内容，那么你的网站就会做得最好。无论 AI 变得多么复杂，这个要求都不会改变。最终，质量应该是你的首要目标。

几十年的逆向工程、数百位 SEO 专家的建议以及谷歌自身的指导，产生了大量关于 SEO 的建议。但关于 AIO 呢？AI 在决定访问和引用哪些网站时使用哪些标准？

人工智能训练涉及许多方面，其中之一是大规模的数据抓取——在互联网上漫游并存储信息。所以，你提供提示，它就会搜索其庞大的现有数据存储。但 AI 也越来越从 YouTube 视频和其他多模态来源收集其他数据。现在（或很快）大多数 AI 系统都能够实时提供关于当前查询的答案。它们在搜索时使用谷歌吗？

人工智能系统是如何搜索当前信息的？

我向五大 AI 机器人提出了这个问题：

|

当回答关于最近事件的提示，例如“昨晚格莱美奖中谁获得了最佳歌曲？”时，你会使用谷歌或其他搜索引擎，还是其他来源？

（以下 AI 的回答已被编辑以缩短其长度，特别是 Claude 的回答。）

|

当回答关于最近事件的提示时，包括像“昨晚格莱美奖中谁获得了最佳歌曲？”这样的问题，我使用一个允许我向搜索引擎发出查询的浏览器工具，例如谷歌，然后从多个来源中选择结果以确保准确并提供全面的答案。

这是我的后续问题：

|

你是否向谷歌搜索提交了问题？

|

在我们的对话中，我不会直接在实时向谷歌搜索或其他搜索引擎提交查询。相反，当需要时，我可以在该环境中使用模拟浏览器工具。这个工具允许我通过一个受控的界面发出搜索查询，然后我可以从搜索结果中选择，访问和阅读来自各种网页的内容。

“不直接向谷歌提交查询”是否意味着间接地？试图将 GPT 定位，我提出了第二个后续问题：

|

在你的第一次回答中，你说你使用谷歌“我使用一个允许我向搜索引擎发出查询的浏览器工具，例如谷歌...

|

您是对的，我感谢您对我的澄清表示耐心。为了正确地阐述我之前的回答：在必要时，我可以使用一个类似于浏览器工具的功能来向搜索引擎发出查询。这个过程是在一个受控环境中管理的，旨在帮助我根据您的查询提供准确和最新的信息，特别是对于在我上次训练更新之后发生的话题或事件。

换句话说，GPT 的特殊定制浏览器“工具”确实会向搜索引擎提交查询。最初，GPT 有点狡猾，使用了欺骗性的含糊其辞，但最终，在被追问时，它还是诚实的。

这里是 Perplexity 对相同第一个问题的回答：

|

在回答关于最近事件的问题时，我使用各种可靠的资源来收集信息。我使用的资源包括新闻网站：如 CNN、纽约时报和 PBS 新闻时段等网站。

再次，这是我的后续问题：

|

但您是否使用谷歌搜索引擎？

|

我无法直接访问谷歌搜索引擎或其搜索结果。相反，我依赖于各种可靠的来源。

再次，没有声称有“直接”的访问权限，那么关于“间接”的访问呢？让我们转向 Claude，看看它对谷歌搜索后续问题的回答：

|

[Claude 在这里有点啰嗦，而且有点谄媚。] 不，我没有访问搜索引擎或外部新闻来源的权限。作为一个由 Anthropic 创建的旨在提供帮助、无害和诚实的 AI 助手，我依赖于我的训练来根据提供给我的信息提供回答。我实际上并不跟踪或访问当前新闻。

下面是 Gemini 和 Copilot 对我们的回应：

|

要回答您关于最近事件的问题，我并不直接使用谷歌搜索引擎或其他任何特定的搜索引擎。然而，我是基于一个庞大的文本和代码数据集进行训练的，这个数据集包括了来自新闻文章、书籍、代码库和其他公开可用的网络文档等不同来源的信息。这个数据集不断更新，因此我可以获取关于最近事件的信息。当您问我关于最近事件的问题时，我会使用我的知识库来识别相关信息，然后对其进行处理，为您提供准确和有信息量的答案。就您关于格莱美奖的问题而言，我能够回忆起颁奖典礼是在 2024 年 2 月 4 日举行的，以及 Billie Eilish 凭借“Barbie”原声带中的“What Was I Made For？”赢得了年度歌曲奖。[正确]。

|

[回答错误] 我使用必应搜索来查找关于各种主题的最新和最相关信息，包括最近的事件。例如，如果你问我昨晚格莱美奖的最佳歌曲获奖者是谁，我会搜索“格莱美奖 2024”并查找提及获奖者的新闻和网页结果。根据我的搜索，最佳歌曲类别的获奖者是 Killer Mike 的《Scientists & Engineers》。需要注意的是，虽然我不依赖任何特定的来源，但我使用的信息最终来源于现实世界的数据。这意味着我的答案总是基于事实信息，即使我没有明确引用我的来源。

关键要点是，各种 AI 系统使用不同的方法来访问和处理信息。GPT 和 Gemini 似乎可能通过“间接”方式访问 Google，而 Claude 表示它没有访问当前数据的能力。许多人认为 Perplexity 在大多数类型的研究中，包括当前话题的研究中，表现最好。它回答“信誉良好的来源”并没有真正告诉我们 如何 搜索这些来源。GPT 在 2024 年 11 月增加了实时搜索功能。它作为搜索系统的力量和排名还有待确定。

尽管传统 SEO 正受到 AI 的颠覆，但一些策略对于给 AI 系统留下深刻印象仍然很重要。其中一种策略是学习如何包含最佳 关键词。

11.2 使用好的关键词

关键词是人们在开始搜索时输入搜索引擎的单词。例如，如果他们想知道在 达拉斯 卖他们 硬币收藏 的最佳地方，关键词就是那些斜体字。

这个关键词列表也可以包括同义词，例如 商店、硬币、买家 和 经销商。我不会包括 钱币学。很少有人会使用这个词，更不用说知道如何拼写它了。

因此，你的第一个 AIO 任务是确定你网站主题的关键词。通常，你的网站标题和标语包含关键词。你可以提示 GPT：

|

我在达拉斯开设了一家钱币商店的网站。我买和卖。我可以用这个网站使用哪些好的关键词？这本书的实践网站标题是 Time Tested Recipes for the Instant Pot。标语（标题下方额外的描述）是 Comfort food for beginners。那么，你认为这里的关键词是什么？

|

当然，Instant Pot 和食谱。在明显的选项之后，你应该考虑缩写，如 IP。以及同义词，如简单（对于初学者）或压力锅或多功能锅（对于 Instant Pot）。

如果你词穷了，请将你的网站地址提交到谷歌关键词规划师：mng.bz/N1eX。

TIP 在搜索引擎的早期阶段，它们的分析主要是定量的。因此，你只需尽可能多地使用关键词就能成功——也就是说，尽可能多地使用关键词。如今，关键词必须自然使用；它们必须适合适当的内容。人工智能非常复杂，它们的判断越来越趋向于定性——更类似于一个人类网站专家评判网站的方式。

进行深入的关键词研究，找到最相关和最重要的术语，这些术语准确地描述了你的内容，这是至关重要的。在考虑其他任何事情之前，先考虑你的目标受众的搜索意图。你的潜在访客可能会寻找哪些主题？然后，他们会使用什么术语来找到对他们有用的网站？

你的访客是谁？他们在搜索时会用什么词？你应该力争大约五个关键词——太多，它们就会变得不那么有效。

花些时间思考你的潜在访客是谁。他们可能会问什么问题给人工智能，导致人工智能引用你的网站？把这些关键词记下来。最后，去使用人工智能，并使用这些关键词查看哪些网站被引用。访问这些网站。它们与你的网站相似吗？如果不相似，重新考虑你的关键词。

Tip WordStream（www.wordstream.com/keywords）的一个免费关键词工具可以给你一些好主意。

确定哪些关键词最佳后，确保你将它们自然地包含在正文、标题和其他区域，如标题中。不要将它们强行放入它们不自然适合的内容中。人工智能可以识别出来。在内容中堆砌关键词会损害你的 AIO。

相反，专注于制作优秀、有价值的内容，真正满足与所选关键词相关的搜索意图。考虑那些代表你网站主题和重点的关键词。使用诸如 Google Analytics（见第十二章）等工具，定期跟踪所选关键词的效果，并做出任何必要的修改。

我们已经介绍了一些关于如何为你的网站找到有效关键词的一般性建议。现在让我们看看一些更具体的使用关键词的有效方法。

11.2.1 向人工智能请求好的关键词

人工智能可以检查你的整个网站（或只是像博客页面或主页这样的部分）。然而，在撰写本文时，只有 GPT 会真正访问、扫描和分析网站。

正如你在前面的章节中看到的，大多数人工智能系统仍然需要你上传他们想要查看的文本或媒体内容。如果你要求他们阅读你的网站，他们会回答说他们没有这个能力。Copilot 会回复“很抱歉造成任何误解，但作为一个 AI，我没有直接分析网站或访问特定竞争对手数据的能力。”

11.2.2 让人工智能扫描网站

然而，GPT-4o 在直接分析网站方面做得非常出色。这比上传内容有明显的优势。AI 可以观察大局，例如测试网站范围内的导航，查看设计是否一致等等。因此，启动 GPT-4o 或更高版本，并给出以下提示，将水景花园网站的地址替换为您自己的：

|

查看这个网站，并告诉我一些好的关键词：watergarden.signalstreaming.com。

提示：如果 GPT 报告网站正在建设中，请使用不同的浏览器，并清除其 cookies。

GPT 回复：

|

搜索了 1 个网站以下是一些关于建造后院水景花园网站的好关键词：    • 后院水景花园    • 水景花园规划    • 水景花园材料    • 池塘维护    • 水生植物    • 金鱼池塘设计    • 生物过滤器    • 水景花园配件    • DIY 水景花园    • 园林景观    • 水景花园创意    • 池塘水泵和过滤器    • 金鱼池塘    • 睡莲    • 水景花园维护这些关键词有助于优化网站以适应搜索引擎，并提高其可见性。

让我们继续这次对话，看看我们能否在改进设计的同时，通过一些 GPT 的建议走得更远。这是我的跟进提示：

|

查看每一页，并指出哪些页面的设计可以改进。

|

以下是一些设计可以改进的页面：主页：布局显得杂乱，可以从更简洁的设计中受益。主要图片太大，占据了页面。在线购物：购物页面设计基本且缺乏吸引力。需要更好的产品图片和描述。轮播：这个页面是空的，需要内容或者应该删除。冬季化：这个页面也是空的，应该填充相关内容或者删除。最新动态：布局可以通过更好的图片和字体使用来更具视觉吸引力。改进这些方面*可以增强网站的用户体验和参与度。

这是我的第二次跟进：

|

截取主页的屏幕截图。然后显示它。然后通过显示一个改进后的版本来跟进，该版本基于您之前的建议。

|

在从网站上获取主页的直接截图时似乎出现了问题。然而，我可以根据建议描述一个重新设计的版本：原始主页问题：杂乱布局：布局感觉太忙，太多元素在争夺注意力。主导图像：主要图像过大，掩盖了其他内容。重新设计主页建议：简化布局，使其外观更干净、更有组织。平衡图像：减小主要图像的大小，并在整个页面上平衡较小、相关的图像。清晰的导航：改善导航菜单以提高可用性，并删除任何非功能链接（例如，“轮播”，“新页面”）。增强的排版：使用一致且视觉上吸引人的字体以提高可读性。空白利用：引入更多空白，以防止页面显得拥挤并增强整体视觉吸引力。相关内容：确保所有部分都包含引人入胜且相关的内 容。如果您愿意，我可以根据这些建议使用 DALL-E 等工具创建一个详细的视觉重新设计计划，以给您一个更好的改进想法。请告诉我是否需要我继续进行！

此外，这里是第三跟进：

|

我刚刚上传了那个主页的截图。仔细看看它，然后让 DALL-E 根据您关于改进的建议重新设计它（简化布局，减小主要图像的大小，引入更多空白）。

图 11.1 是 GPT 对我们主页的重设计。这是一个改进。

图 11.1 GPT 遵循其建议，提出了一个看起来更好的主页。

接下来的提示如下：

|

再试一次，这次让它非常、非常简约，有更多的空白。让它看起来现代而简约。

小贴士一些提示专家说，重复一个词在 AI 系统中被视为一种强调的形式。此外，第一个术语或短语被认为具有更大的权重。

图 11.2 是 GPT 在页面设计和水景花园英雄图像方面的现代简约主义版本。

图 11.2 GPT 的简洁现代水景花园。它如此简洁，以至于“花园”部分，如睡莲和鱼，都被消除了。

小贴士访问 agent.ai 网站(agent.ai/)，您将找到几个有效的专用 AI，包括一个帮助您改进您网站的 AI。它被称为网站转换优化器。

现在让我们回到关键词的主题，通过这个问题：你应该使用关键短语吗？

11.2.3 使用长尾关键词

有人说你应该考虑通过添加修饰语来使关键词更具体。与其只是Instant Pot Recipes，你还可以添加这样的形容词：Instant Pot 鸡胸肉食谱。

回想一下第一章，你被敦促要专注于你网站的主题。如果你的网站主题是“North Carolina’s Randleman Lake 的 Bass Fishing”，你将吸引更多的访客，最终带来更多的转化（重复访客）。

同样的概念也适用于长尾关键词。这些是更长、更具体的关键词短语。例如，“bass bait”是一个常规关键词，但“bass lures for winter fishing”是一个长尾版本。这是减少你网站竞争的一种方式。

如果人们打算寻找你特别提供的内容，那么他们很可能会输入一些形容词。大多数搜索查询都包含形容词，因此长尾提示很可能匹配你的长尾关键词。但还是要动动脑筋。记住你会寻找什么。你不会输入“flavorful IP chicken breast recipes”，对吧？有多少人会在查询中使用“flavorful”？他们可能会使用“best”、“popular”、“easy”或“healthy”。

你可能会想：嗯，我在写句子，所以我自然会在我网站的文字内容中使用长尾关键词。确实如此。但这里有几种方法可以通过稍微调整语法或添加修饰语来提高你的长尾努力。

• 前往谷歌，并输入你网站的主题。当你输入时，看看谷歌提供的建议自动完成内容。例如，如果我输入instant pot，我会得到以下自动完成术语列表：recipes、rice、chicken recipes、beef stew、pinto beans和pot roast。这样做也可能给你一些关于你应该考虑包含在你网站中的主题的想法。

小贴士：你还可以始终依赖 AI 来告诉你是否遗漏了任何重要的话题。这是我的给 GPT 的提示：“扫描我网站上的所有页面watergarden.signalstreaming.com。请查看并回应，列出我应该添加到我的网站上的任何未包含的主题。”

• 注意你如何措辞你的链接。虽然网站的主要菜单项链接应该相当简短，但其他类型的链接可以更加描述性，因此可以包含长尾关键词。然而，适度仍然是关键。不要让它们太长，或者听起来太生硬。

• 如果你了解你的目标受众使用的行话或特殊术语，考虑在适当的时候将它们融入你的关键词短语中。或者询问 AI 人们使用 instant pot 时使用的特殊术语或行话。

• 查看这个 Moz 关键词工具(moz.com/explorer)。该网站声称关键词探索器可以提供超过一百万个关键词建议。

• 看看你的竞争对手在他们的网站上使用哪些短语。

• 许多提示和搜索包括一个问题。因此，考虑在你的文本中使用一些问题。“最好的黑豆 IP 食谱是什么？”（然后提供食谱。）据说问答是提高 AIO 的好方法。此外，使用 AnswerThePublic 工具(answerthepublic.com/)来查看与你的关键词相关的典型问题。

• 确保你对你提出的问题提供详尽的答案。深度和全面的内容受到人工智能、搜索引擎和你的观众的欢迎。但也要注意简洁。多样性——一些长答案，一些短答案——是最好的。你的答案长度应刚好足够满意地回答问题。全面和详尽并不一定意味着冗长。简短也可以：盐是否总是用于咸味菜肴中？是的。

11.2.4 排名改进

多年来，谷歌一直在不断修改和改进其网站评估算法。事实上，据估计，谷歌每年进行数百次小的调整，大约每月一次大的修改。这里的大意味着对排名有显著的影响。

谷歌也在使用人工智能工具。在人工智能到来之前，谷歌就已经使用了一些这些方法：深度数据挖掘、语境化（对上下文的敏感性）和潜在语义索引（LSI）。

理解谷歌不断发展的算法和人工智能技术对于提高网站可见性和许多网站的最终流行度至关重要。如果他们不访问你，你的网站就不会增长。网站所有者应该尽可能了解人工智能系统中算法的变化。以下小节描述了谷歌在通往全面人工智能的道路上开发的主要人工智能程序。

深度数据挖掘

人工智能系统擅长研究大量数据集——这些数据集太大，以至于人类无法分析并找到隐藏的模式。人工智能可以同时在其脑海中持有庞大的数据集。它可以看到隐藏的模式、关系、过程和趋势。它们对我们人类来说是隐藏的。例如，通过查看所有社交媒体信息，人工智能可以在这些趋势被广泛知晓之前就识别出食物偏好的趋势。更重要的是，人工智能随着时间的推移学习和改进自己。

语境化

在探索塑造搜索引擎如何运作的具体术语之前，理解推动它们理解和提供相关信息的根本概念非常重要。通过理解这些基础理念，我们可以更好地欣赏搜索技术如何解释用户查询并优先考虑有意义的搜索结果：

• 意义的研究——与搜索引擎相关的语义学是研究计算机如何解释单词及其语义联系。当用户输入查询时，搜索引擎试图确定他们实际上在寻找什么。每个输入的字母都会使搜索在数据中沿着更具体的路径前进。

• 相关性—有价值的搜索结果应在与用户搜索关键词相关的情况下有意义。提供精确、深入响应或详细说明搜索短语实际主题的内容将出现在结果中。

• 专有术语—AI 现在在解读查询目的和思想之间关系方面相当出色。如今，AI 在寻找有意义信息方面，与人类搜索大型数据库一样有效，如果人类实际上能在一生中做到这一点的话。

隐含语义索引

隐含语义索引（LSI）是 AI 用来理解单词和概念之间关系的技术，有助于提供超出关键词的上下文，并提高搜索结果的相关性和质量：

• 内容深度分析—AI 使用 LSI 数学技术来识别网站中单词和概念之间的联系。AI 提供上下文，而不仅仅是与关键词打交道。

• 相关词汇—LSI 确定单词、短语及其关系，即哪些术语通常一起使用。例如，当用户搜索“right”时，LSI 可以帮助 AI 确定用户是指左边的对立面还是正确。

• 主题深度—AI 倾向于选择通过提及一系列相关术语来全面掌握主题的网站。如果您使用同义词和语义相关术语，AI 会提高您的得分，因为它假设您已经完全涵盖了该主题。反之亦然：如果您的网站没有涵盖与网站主题重要相关的元素，您将会被降级。

• 检测关键词堆砌—语义和 LSI 相关策略也有助于 AI 判断您是否只是为了无目的性地重复关键词。

提示：始终努力以您能提供的最佳、最有帮助的内容来满足访客的需求和期望。现在 AI 完全能够察觉到您是否试图使用任何欺诈手段。所以，不要被诱惑去尝试任何 LSI 填充。提供清晰、简洁、有用的信息。

• 高级技术—复杂的神经网络、大型语言模型（LLMs）和庞大的数据集现在使 AI 系统能够理解提示的意图以及网站内容在满足该意图方面的实际质量、适宜性和深度。因此，如果您想获得批准，您必须向您的受众提供有价值的内容。

11.2.5 理解意图

专家们描述了在想象潜在受众的思维过程时，您应该考虑的几种不同意图。用户意图指的是用户查询的基本动机或目标。如果您希望找到正确的关键词，了解您网站主题特定的用户意图非常重要。满足用户意图也有助于 AIO。用户意图通常有四种类型：

• 导航意图—用户知道他们需要什么。他们想去一个特定的、定义明确的页面或网站。例如，查找“IP 食谱”或“Randleman 湖钓鱼”表明用户知道他们的目的地。或者他们想购买某种特定的钓鱼诱饵或查看特定的食谱。

• 信息意图—用户想要信息。例如，搜索“如何系钓鱼结”表明用户正在寻找指导或知识。

• 调查—在决定购买或采取行动之前，用户正在权衡他们的选择并寻求更多信息。例如，搜索“最好的淡水鱼诱饵”意味着他们在购买前想要权衡他们的选择。

• 交易意图—用户计划进行交易，例如购买。例如，他们准备好购买一个产品或服务。

当您的内容与用户意图相匹配时，您会增加您的网站满足受众、AI 和搜索引擎的可能性。例如，一篇详尽、准确、具有教育意义的文章，能够很好地解决大多数搜索特定术语的用户的问题，可能比产品页面排名更高。

您的内容应该经过精心打磨，满足您受众的信息需求。例如，如果他们主要寻找有关钓鱼方法、设备或附近钓鱼地点的信息，这种策略可以提高用户体验并提升 AIO，从而带来更多的回头客。接下来，让我们看看您应该使用的重要工具集，以增加您网站的流量。

11.3 使用 Google 搜索控制台

Google 提供了搜索控制台，这是一套非常有用的方法——如果不是为了操纵其和 AI 的不断发展中的排名系统——至少可以跟上您的竞争对手。Google 这样描述这套工具：“搜索控制台工具和报告帮助您衡量您网站的搜索流量和性能，解决问题，并使您的网站在 Google 搜索结果中更加突出。”请务必访问 Google 搜索控制台网站（search.google.com/search-console/about）以获取更多信息。

网站总是在某种程度上与其他网站竞争，您的搜索引擎排名是衡量您竞争表现的一个指标。您可以确信其他网站设计者正在利用 Google 专门提供的 SEO 和 AIO 工具。

使用搜索控制台，您可以改善和解决您网站在搜索结果中的可见性问题。控制台提供工具和数据来评估网站的搜索引擎流量性能和数量，解决问题，并最大化您的可见性。您会发现许多实用工具和报告，包括爬行错误通知、搜索查询分析和索引状态检查：

• 爬虫错误通知—当谷歌发现你网站的问题时，这些通知将通过电子邮件发送给你。你将被告知哪些 URL（主页和内部页面，你的每个页面都有自己的唯一 URL）受到这些问题的困扰，然后在你解决这些问题后，你可以通知谷歌。这类错误包括服务器错误、重定向错误和页面未找到（404 错误）。更简单地说，谷歌的爬虫机器人无法读取这些页面中的内容，因为它找不到它们。

• 搜索查询分析—找出哪些查询（因此是哪些关键词或短语）实际上将访客发送到你的网站。你将能够看到你的网站在谷歌搜索结果中的位置。

• 索引状态检查—这些与爬虫错误类似，但这些错误大多发生在页面被爬虫机器人成功读取之后。谷歌爬取了页面，但由于各种原因没有对其进行索引（排名）。未索引页面的内容没有被谷歌分析，也没有存储在其数据库中，因此无法在搜索结果中显示。

显然，你需要定期检查以确保你的网站已发布的页面被成功索引。你的网站可能根本不会出现在搜索结果中，或者至少该页面的内容不会。诚然，单个 404（缺失页面）错误并不一定会排除你的整个网站被考虑列入结果，但它肯定不会有助于你的排名。尽快修复指向不存在页面的断链。你想要确保所有内容都被索引。

频繁更新也被认为可以提高 AIO。如果你确实添加或润色了内容，你可以通过提交单个页面 URL 或网站地图到控制台来让谷歌知道。

定义 A 网站地图使 AI 或谷歌机器人更容易理解内容的类型、它们之间的关系以及它们相对的重要性。这对于大型网站或内容种类繁多的网站尤其有用。但每个网站都应该提供一张地图。下一节描述了一个 SEO 插件，它不仅能为你生成网站地图，还允许你编辑它，然后帮助你将其提交给谷歌和 AI。

获取快速 SEO 报告

尝试使用一个名为 Lighthouse 的谷歌工具来获取关于你网站在以下图中所示五个类别的报告。

当你使用 Lighthouse 工具时，你将快速了解你网站各个要素的质量。

当你运行 Lighthouse 审计时，你将获得一份叙述报告和 0 到 100 之间的分数。以下这些类别意味着什么：

• 性能—这测试了网站的效率，并告诉你如何加快页面加载速度。它包括加载时间、交互性和其他因素等指标。

• 无障碍性——这关乎导航性，尤其是当人们在使用电脑时面临各种挑战时。这包括屏幕阅读器的兼容性、图像描述的 Alt 文本，以及你的页面是否包含可用的语义结构（换句话说，你是否包括 <nav>、<article> 和 <section> 等 HTML 元素，以提供各种类型内容的清晰大纲）。这对人工智能和搜索引擎爬虫很有用，同时也允许使用屏幕阅读器的人决定跳过页面的哪些部分，并确定下一部分的位置。

• 最佳实践——这份报告检查了安全资源加载、HTML 标签的正确使用以及其他最佳实践。如果你违反了这些实践，这部分的结果将告诉你在哪里。

• SEO——SEO 类别确保页面针对搜索引擎排名进行了优化。它检查数据结构是否正确、响应性以及影响搜索引擎和人工智能排名的其他技术元素。

• PWA (渐进式网络应用)——这个类别衡量网站是否快速且可靠。它检查离线功能、移动网络上的响应性以及遵循 PWA 最佳实践的程度。这个类别不像其他类别那样提供一个从 0 到 100 的分数。

你的报告将对每个类别进行评分，除了 PWA，并且基于审计结果提供具体的改进建议。

这就是如何使用 Lighthouse：

1. 访问你网站的首页并按 Ctrl-Shift-I。

2. 然后，在 Chrome 中，点击 Lighthouse 选项卡。

3. 点击分析页面加载按钮。

4. 在 Edge 的主工具栏中，点击 Lighthouse 选项卡。如果该选项卡不可见，点击工具栏上的更多工具（+）图标，直到找到并可以点击 Lighthouse。

我们已经探讨了你可以做的一些事情来帮助你的网站，现在让我们探索一个最好的插件，它可以为你提供进一步的帮助，在计算机化网络评论家面前留下好印象。

11.4 使用 AIOSEO 插件

在众多用于提升 WordPress 网站的插件中，只有两个是主导的：Yoast SEO 和 All in One SEO (AIOSEO)。两者都很稳固，但在这里我们将关注 AIOSEO，因为它设置起来稍微容易一些，而且不那么具有侵略性。

AIOSEO 是一个良好且受欢迎的选择。它是一个免费增值插件，你可能会发现免费版本足以满足你的需求。要了解更多关于他们无限期免费试用信息，请访问此处：mng.bz/lYoz。

插件相对容易设置，因为它的默认设置适合许多类型的网站。然而，你仍然想要审查它们，看看是否需要微调设置。

安装并激活它之后，转到 All In One SEO > 仪表板屏幕，然后点击启动设置向导。或者，如果你更喜欢，阅读他们的设置指南或观看 YouTube 上的视频，该视频描述了设置过程。

向导会询问您的网站属于哪个类别——公司、商店、作品集等等。然后，您将提供其他细节，向导会引导您完成设置过程。在某些向导页面中，如果您拥有 AIOSEO 的付费级别之一，您将只能选择某些选项。

插件会通过电子邮件向您提供有关如何提高您特定网站搜索引擎排名的建议。如果您被要求提供许可证密钥，除非您使用的是付费计划，否则您可以跳过该步骤。

现在，转到主 WordPress 仪表板，导航到 All In One SEO > 网站地图屏幕。对于这些地图有很多配置选项，所以您可能想查看 AIOSEO 博客上的这篇文档(AIOSEO.com/docs/how-to-create-an-xml-sitemap/)。如果您需要 AIOSEO 中其他元素的文档，您可以点击右上角的问号图标。

11.4.1 管理网站地图

您可以使用 WordPress 修改 All in One SEO 网站地图。除了自动为您创建网站地图外，AIOSEO 还让您能够编辑网站地图中的特定项目。要了解如何管理您的网站地图，文档可在AIOSEO.com/features/smart-xml-sitemaps/上找到。

提示：如果您想深入使用 AIOSEO 进行网站地图管理，请查看这里：AIOSEO.com/doc-categories/xml-sitemap/。

AIOSEO 的提示包括辅助您进行结构化数据标记的工具。这意味着为您的网站内容中的各种元素进行标记（例如，这里是一个视频，它的描述，它的时长，或者这是一个食谱，它的营养成分，它的烹饪时间，它的成分和说明）。使用这些标签标记的网站更容易让机器人理解您的网站。而且，人们认为，随着 AI 机器人取代传统的搜索引擎方法，结构化数据标记可能变得更加重要。AIOSEO 包括自动和手动编辑的标记工具。更多详情可以在 WordStream 博客(mng.bz/8Ozg)和 AIOSEO(mng.bz/Ea1r)上找到。

11.5 使用反向链接

早期的搜索引擎对网站质量做出了简单、原始的判断。例如，它们会计算单词食谱在网站中出现的次数。出现次数最多的网站排名最高。

自那时以来，我们已经走了很长的路。在评估网站质量时，现在正使用各种深度数据搜索、AI 判断和细微分析。反向链接——即从其他网站链接到你的网站的链接——仍然被认为是一个重要因素。如果链接到你的网站的另一个网站本身排名很高，反向链接就特别有价值。实际上，这意味着你的网站内容得到了值得信赖的网站管理员的尊重。他们链接到了你的网站。因此，你很可能做得很好，并提供了易于访问的真正有价值的内容。

当然，一旦谷歌引入了反向链接排名，各种不诚实的骗子就出现了，他们提供出售大量虚假反向链接——你付钱给他们，他们就会从他们自动化链接生成器在僵尸网站中多次反向链接到你的网站。谷歌很快就发现了这一切，并对涉及的各方进行了惩罚。

你如何获得更多的真实反向链接？联系与你主题相关的优质网站是合法的（好吧，可能是半合法的）。然后，提出交换链接的建议。你还可以提出在信誉良好的博客上提供客座文章，并在你的文章中包含“更多信息”反向链接。最后，使用链接差距分析来查看与你竞争的网站的反向链接。这给你一个你可能想要邀请链接到你的网站的网站列表。

这里有一个来自 Semrush 的教程，它将帮助你进行差距分析和关于如何获得高质量反向链接的额外想法：www.semrush.com/blog/how-to-get-backlinks/。还有来自 Backlinko 的更多关于这个主题的帮助：backlinko.com/google-ranking-factors。

这是一个生成反向链接的有效方法的简要清单：

• 总的来说，确保你有有价值的内容，如果可能的话，最好是独特的。这样，你的网站自然会吸引反向链接。

• 参加会议并建立人脉。

• 加入并参与论坛和其他网站。

• 使用社交媒体来传播信息。

11.6 错误清单

正如你所看到的，搜索引擎现在相当复杂——AI 正在将网站价值分析推向（并最终超越）人类水平的批判性判断。到目前为止，可能已经不可能操纵 AI 网站判断。甚至不要尝试。

话虽如此，让我们看看一个清单，其中包含了一些明显的错误，如果你想让 AI 印象深刻，你最好避免这些错误。其中一些建议出现在不同的章节中，但将它们汇集在这个单独的清单中可能会有所帮助：

• 冗余、冒犯性或不准确的内容。

• 丑陋或仅仅装饰性的图片。

• 指向不存在网页的断链，无论是在你的网站内还是网站外。

• 不做关键词研究。

• 在平板电脑或手机屏幕上的网站功能不正常或不吸引人—确实，所有好的当前主题都会尽最大努力使每个网站都响应式（在小空间中看起来很好）。但每个网站都代表着它自己的独特挑战，所以在公开之前，总是要在小屏幕上查看和导航你的网站。并且做出任何必要的调整，以确保它缩小后仍然有效且可用。

• 可疑的策略，如重复、强制或过度使用的关键词。

• 阻碍搜索引擎—WordPress.org（WordPress 的托管版本，不是你在 WordPress.com 注册时使用的版本）有一个设置，你需要查看。转到你的设置 > 阅读屏幕，并确保搜索引擎可见性选项已关闭。你不想在网站打磨完毕并准备好展示之前，让 AI 或搜索引擎对你的网站做出评判。

• 内容写作不佳。

• 过于正式的写作风格。

• 过多的事物—恼人的弹出广告、过多的广告、过多的动画、自动播放的音乐或视频。练习适度。

• 文字很少的页面—被称为薄内容，除非有很好的理由，否则可能会降低你的得分。一个很好的理由可能是艺术家的绘画作品集或包含大量图片的目录，例如。

• 复杂的导航。

• 无感设计—这可以包括颜色选择不当、每页上的设计元素彼此之间没有视觉上的关联、设计元素过多或过少、杂乱无章、过时的材料等等。

• 难以阅读的文本。

• 页面加载速度慢。

• 不清晰、不准确或冗长的标题。

• 没有有效的行动号召。

• 忽视可访问性。

• 不提供 XML 站点地图。

• 不使用分析工具（下一章讨论）。

• 安全性差—如果他们检测到恶意软件或其他黑客攻击，他们甚至不会费心爬取你的网站。

• 不在关键词中包含位置—如果你的网站有本地成分，例如商店，确保你在关键词中包含位置。在你的侧边栏中添加一个指向你位置的地图。

• 仅推广你的按点击付费产品或其他广告的内容—搜索引擎会将其视为操纵性的，而不是直接有价值的。不要愚弄“母亲谷歌”是不好的。

• 忽视社交媒体—人们认为如果你的网站很受欢迎，这可以间接影响 AIO。

• 内容陈旧—你应该经常更新你的内容，尤其是博客文章。同时，回顾你较旧的博客文章，看看是否需要修订它们以保持其准确性、时效性，并使用一些你最好的长尾关键词。

• 不针对语音搜索进行优化—优化你的内容以适应这种类型的搜索以及键入查询。这也是使用对话语气和长尾关键词的另一个原因。此外，考虑人们在向 AI 说话时如何构建提示。

• 不利用 Google 搜索控制台。

• 不选择可靠、高质量的主机服务——推荐使用 SiteGround、Bluehost 或 DreamHost。你不想让你的网站遭受停机、安全漏洞、不必要的复杂性、糟糕的技术支持或缓慢的响应时间，如果你使用一个可疑的主机，你可以在其中找到大量这样的问题。据估计，现在有 340,000 个主机，其中许多都是可疑的。

• 不包含作者简介——简介有助于人们与你建立联系（并建立忠诚度）。而且，如果你做得对，你还会传达出可信度和你的专业知识。

• 不使用 SSL——你不想当有人访问你的网站时，浏览器在地址栏显示“不安全”。

11.7 人工智能对 SEO 的影响

人工智能对优化网站会有什么影响？网站开发者应该使用哪些新策略来让你的网站对 GPT 和其他人工智能印象深刻？让我们暂停一下，考虑一下人工智能将对许多创造性活动，包括优化网站，产生的影响。这本书不是人工智能写的，而是我写的。但我相信这将是我写的最后一本书。艺术家、摄影师和插图画家面临着来自 Midjourney 和其他文本到图像生成器的强大、实际上不可战胜的竞争。同样，我们这些作家也面临着人工智能能够在几秒钟内生成出色的文章，甚至在几分钟内生成整本书的威胁，我们现在也面临着被淘汰的风险。

有些人会说：“哦，人工智能会犯错误。”我总是觉得这个评论很令人困惑。我想：“人类不会吗？”

但在查看更多让您的网站受到人工智能喜爱的方式之前，请允许我再次展示人工智能的创造性作品在大多数人类努力之上的明显优势。接下来的“照片”可能会帮助说服怀疑者，实际上人工智能正在来抢我们的饭碗——而且来势汹汹。

批评家们常说，完美无瑕的美并不那么美。弗朗西斯·培根曾说：“没有任何卓越的美是没有一些比例上的奇特之处的。”我向 Midjourney——可以说是今天最令人印象深刻的文本到艺术生成器——提出了这个原则。它成功地完成了这项工作，正如你可以在图 11.3 中看到的那样。

图 11.3 如果我是一个艺术家、摄影师或插图画家，我会寻找第二份、备份的工作。我们真的无法与人工智能竞争。

有些人会说：“所以这只是人工智能在其庞大的图像库中找到的，假装它发明了。这只是衍生图像。”不。对这个令人惊叹的照片进行谷歌反向图片搜索。你不会在任何历史记录中找到它。这是一张完全原创且精美的照片……一张没有涉及摄影师或相机的照片。

“这张照片”未经修改就可以直接进入《Vogue》。理查德·阿维顿会自豪地称它为自己的作品。然而，这张图片是由一个基于以下我给 Midjourney 的请求的人工智能系统创造的：

|

展示一张说明完美无瑕的美不如有瑕疵的美更美的概念的照片。这就是为什么一些绝世美女有时会在脸上贴上假黑痣。或者点状面纱。

AI 理解了我的请求，并产生了这个独特的新概念演示，这是世界上的新事物。Midjourney 产生了一个非常美丽的成果，您必须同意。

为了完成这一章，我想探讨在我们从 SEO 过渡到 AIO 的过程中可能会发生哪些变化。AI 系统将取代传统的搜索引擎网站排名。将采用哪些新的算法？什么样的结构、格式、设计、文本内容和展示方式会吸引 AI？

谁比 AI 本身更了解呢？所以我把这个话题交给了强大的 AI——名为 Claude（由 Anthropic 公司开发）。

|

人工智能（AI）技术的兴起正在颠覆传统的搜索引擎优化（SEO）策略。请具体描述一些能够使 AI 系统推荐我的网站的策略。让我们称这为 AIO（AI 优化）。我当然希望使用道德的策略，而不是试图“操纵”AI。我只想知道我网站上哪些品质能够真正打动 AI。请不要提供与 SEO 建议相似的推荐。您能提供一些独特的 AIO 建议吗？

|

这里有一些针对优化 AI 系统而非传统 SEO 的具体技巧。更侧重于 AI 的焦点领域包括优化知识结构和利用新兴标准在内容中提供描述性、机器可读的信号：    • 使用描述性的标题和副标题。AI 系统扫描内容以理解结构，清晰的标题有助于告知这一过程。    • 在文章的开始和结尾总结关键点。聊天机器人经常向用户提供摘要，因此确保关键信息在引言和结论中很重要。    • 在适用的情况下使用知识图谱。以结构化的方式标记实体、主题、事件等之间的关系，有助于 AI 分析。    • 在各个平台上启用丰富结果。优化内容，以便聊天平台可以显示带有图像、描述等扩展预览，而不仅仅是通用链接。    • 精心挑选权威的外部链接。链接到可信的外部来源表明您对主题领域有深入了解，并整合了更广泛的知识。    • 发布常见问题解答和问答。训练 AI 系统可能会利用基于问题的数据集，因此提供大量真实示例有助于教授相关性。    • 充分使用替代文本和字幕。图像、图形、视频和音频的描述使 AI 能够更好地索引和推荐多媒体。    • 强调资历和资格。关于作者、创始人、团队、认证、研究等的详细信息可以向挑剔的 AI 传达复杂主题的权威性。    • 包含公平和平衡的观点范围。讨论多个可信的观点表明对问题的深思熟虑，有助于 AI 进行高级评估。    • 集成高质量图像、图形和视频。视觉内容使 AI 能够提取更深层次的意义，建立联系，并更好地批判多模态论点。    • 使逻辑推理易于理解。使用清晰的数值推理、数据可视化、结构化论证和高质量的修辞，以使 AI 能够批判推理过程。    • 引用最新的同行评审研究。前沿的、学术出版的科学和数据有助于 AI 确定分析是否反映了该领域的最新水平。    • 仔细校对。语法、拼写和格式错误可能会削弱 AI 对整体质量和专业知识的信心。    • 使用清晰易读的字体，并确保文本和背景颜色之间有足够的对比度。避免过度使用文本样式。无衬线字体如 Arial、Helvetica 或 Verdana 往往得分较高。    • 谨慎使用颜色、大小和样式变化来突出标题、标题和行动号召。但保持正文文本无过多装饰。    • 与增强人类阅读理解和用户体验的清晰和一致性同样有益于 AI 内容分析系统。    • 确保图像清晰、相关，并丰富内容。图像应增强用户和 AI 的理解。    • 选择具有足够对比度的可访问色彩调色板，避免可能触发视觉条件的组合。中性色调搭配明亮的强调色通常是安全且吸引人的选择。    • 使用空白、大小/样式变化和定位来创建视觉层次结构，并引导用户关注关键内容和行动号召。这有助于人类和 AI 的可扫描性。针对 AI 的高级推理能力进行优化意味着展示深入的主题专业知识、批判性思维和综合复杂想法的技能。

克劳德提到了使用知识图谱，所以我让 GPT 提供该概念的插图和解释。它提供了图 11.4 中所示的内容。

图 11.4 知识图谱是关系的视觉表示。

GPT 是这样说的：

|

知识图谱是一种存储相互关联信息或数据的方式，它能够表示实体（如对象、事件、情况或概念）之间的关系和连接。它本质上是一个知识库的图形表示，其中节点代表实体，边代表它们之间的关系。这种结构允许灵活且直观地组织和查询数据，这使得它在语义搜索、数据集成和高级分析中特别有用。知识图谱在各种应用中得到了广泛使用，包括搜索引擎（如谷歌的知识图谱）、推荐系统、社交网络和人工智能系统。它们帮助这些系统理解不同信息片段之间的上下文和关系，从而使用户查询得到更准确和相关的响应。知识图谱的关键组件包括：    • 实体：图中描述的主要对象、概念或实例，如人、地点、物品或想法。    • 关系：实体之间的连接或关联，可以标记以描述连接的性质，例如“是……的一部分”、“由……创建”或“位于……”。    • 属性：描述或表征实体的信息，提供了更多关于它们的信息。示例图像显示了人与宠物之间存在 HAS_A 关系。人与公司之间存在 WORKS_AT 关系。公司位于某个城市。宠物是动物类型，属于某个物种。物种生活在某个栖息地。此图展示了实体（如人、宠物、公司等）如何通过各种关系相互连接，形成一个知识网络。

显然，如果你包含有助于它更好地理解关系的图表，AI 会更尊重你的网站。克劳德还提到了数据可视化。我询问 GPT 这是否与知识图谱相同。如果不是，它们之间有何区别？以下是 GPT 的回答：

|

数据可视化和知识图谱是人工智能和数据分析领域中的相关概念，但它们服务于不同的目的，并不相同。想象一下你有一堆乐高积木。每一块代表一条信息。数据可视化：数据可视化就像是从这些乐高积木中创建一幅图画或地图。你以某种方式排列这些积木，当你退后一步时，你可以轻松地看到一种模式或形状。这可能是从简单的条形图（如堆叠积木以查看哪个堆最高）到显示不同数据点的复杂地图。主要思想是帮助你快速看到整体情况，比如通过查看积木的排列，就能知道有多少学生更喜欢披萨而不是汉堡。知识图谱：现在，想象一下，除了堆叠这些积木之外，你开始根据它们之间的关系用线将它们连接起来。例如，你可以用标有“拥有”的线将代表“你”的积木连接到另一个代表“你的宠物狗”的积木上。你也可能用标有“参加”的线将你的积木连接到一个“学校”积木上。这个由积木和线组成的网络就像一个知识图谱。它不仅显示了积木（或信息片段），还显示了每个积木如何通过线（关系）与其他积木相关联。区别：数据可视化主要是关于使复杂数据一目了然。这就像看一个由乐高积木制成的图画，以快速了解发生了什么。知识图谱是关于展示不同信息片段之间的关系。这就像看到所有你的乐高积木是如何通过线连接起来的，讲述一个关于所有事物之间关系的故事。所以，虽然两者都帮助我们理解信息，但数据可视化是关于快速看到整体情况，而知识图谱是关于理解不同信息片段之间的关系和连接。

摘要

• 除了 AI 正在颠覆的所有其他事物之外，它还在影响着人们在网上搜索信息的方式。因此，它将要求我们网站设计师从 SEO 转向 AIO。

• 关键词是人们在提交查询或提示给搜索引擎或 AI 系统时可能会使用的单词或短语。在网站内容中正确地使用关键词非常重要。

• GPT 能够实际访问一个网站，并告诉你它认为的好关键词。它还可以扫描内容和建议的设计。

• Google Search Console 可以帮助你在几个重要方面提升你的网站。

• 在众多 SEO 插件中，All In One SEO 是一款受欢迎且出色的选择。它相对容易设置，并包括诸如网站地图生成器等强大功能。这款免费增值插件的免费版本对于某些网站来说可能已经足够。

• 早期的搜索引擎使用简单的定量方法来评估网站质量，例如计数关键词。如今，算法包括深度数据搜索、人工智能判断以及微妙、达到人类水平的分析。反向链接（指向您网站的链接），尤其是来自高排名网站的链接，仍然很重要。它们表明了对您网站内容和可用性的尊重。

• 需要避免的一些主要错误包括重复、冒犯或不准确的内容；丑陋或无意义的图片；写作不佳的内容等等。

• 人工智能在判断网站质量方面比之前的搜索引擎系统要敏感得多、高效、准确和有效。

第十二章：使用人工智能建立受众

本章涵盖

• 理解购买漏斗

• 探索分析元素

• 利用跟踪选项

• 看看人工智能如何影响分析系统

• 调查四个最好的分析插件

• 使用 Crazy Egg 的优秀地图

• 让人工智能批评你的网站

搜索引擎优化（SEO）如何帮助你吸引初始受众，网站分析帮助你建立和保留受众。你将想要使用分析数据来查看你的访客在停留期间的行为：

• 他们来自哪里

• 他们如何浏览你的页面

• 他们在哪里暂停

• 他们离开时在网站上的位置

• 如何提高你网站的吸引力和留存率

12.1 购买漏斗

营销人员使用“购买漏斗”这个短语。它就像一个隧道，但越来越窄，直到只剩下一条出路。（更礼貌的说法是“购买之旅”）。这个漏斗有三个阶段：

1. 获取—建立对你产品的认知，让他们感兴趣，并相信你可能为他们提供解决方案。有时，这可能意味着解决他们甚至不知道自己存在的问题：

   • “我们已经有吸尘器了。”

   • “当然，但让我给你看看我们的旋转德鲁什。你会惊讶地发现你的吸尘器在这里的地毯上留下了多少脏东西！”（在顾客有机会反对之前打开德鲁什。）

2. 考虑—潜在顾客与你的业务互动，通过将你与其他选项进行比较来缩小他们的选择范围。你让他们看到你提供的优越性：

   • “看看我们透明塑料罐子里的灰色旋转水？你的吸尘器把它留在了后面！”

3. 转换—你使他们信服，将他们转变为顾客：

   • “德鲁什模型是市场上唯一使用水的吸尘器。有什么比水更干净的吗？”

   • “但是水一直留在那个罐子里，实际上从未接触过地毯？”

   • “没关系。在这里签字。”

漏斗过程如图 12.1 所示。

图 12.1 漏斗过程——销售员和顾客之间的对话——是众所周知的有效方式，可以将某人转变为买家。（由专业 GPT 图表：Show Me 提供）

在现实世界的实体销售中，识别和衡量漏斗阶段可能更困难（这种不精确性在将分析应用于现实场景时普遍存在）。

但是你可以获取关于人们如何在线行为的深入数据。你可以获取他们与你的网站互动的报告和地图——无论是作为个人还是作为所有访问者的平均。这类似于在现实世界情况下设置和记录焦点小组。

你可以看到他们如何通过漏斗下降到你的行动号召（CTA；转换阶段）。这样你可以修改你的网站，创建一个真正有效的漏斗，从而使你的网站更成功。他们是否倾向于在漏斗的特定位置退出你的网站？修补那个地方以关闭退出。

有用分析数据的一个例子是地理信息。您可以根据美国南方人不吃百吉饼作为早餐，而北方人甚至不知道什么是玉米片的事实来定位广告。而且，在欧洲很少有人知道美国的牧场调味酱是什么。如果您的网站有针对特定地理区域的某些页面，您将知道在这些页面上放置哪些内容和广告。

分析学在修改您的网站以改善用户体验（UX）并实现您的目标方面非常有帮助。例如，分析学可以揭示，当用户在您的网站上结账时，在购物车流程中有一个特定的位置，许多用户会放慢速度并感到困惑。或者更糟，他们会放弃并离开。解决这个问题。消除这个问题。随后分析将迅速揭示这个障碍是否已被移除。

12.1.1 AI 进入画面

AI 技能集中的一项重要能力是深度数据挖掘（也称为大数据分析）。AI 可以搜索大量数据，发现人类不会注意到的关联、异常和模式。它还可以利用这些见解做出准确的预测。

例如，亚马逊拥有 3 亿客户，它会查看您的购买历史，然后找到那些购买相同商品且顺序相同的人。亚马逊可以预测并推荐您可能接下来购买的商品。

亚马逊的深度数据挖掘者可能发现，几位与您相同的孪生顾客购买了一台 55 英寸的海信电视，两天后又为其购买了空中天线。因此，当您购买这台电视时，亚马逊礼貌地展示了它所谓的“经常一起购买的商品”（由您的孪生兄弟购买），顶级交易和探索类别。因此，它向您展示了一个天线的图片。

我无法想出一个好的类比来阐述人类浅层数据挖掘与 AI 深度数据挖掘之间的区别。所以我转向了我的创意写作助手，Gemini Advanced 小姐。（在本章的结尾，Gemini 小姐将比较 AI 的数据分析能力与人类努力。猜猜 Gemini 说谁更优越？）

|

在一段话中，用类比描述 AI 深度数据分析提出见解并看到人类无法提出的模式的过程。

|

想象一下数据集就像一个广阔、黑暗的森林，充满了隐藏的小径和隐藏的生物。传统的分析就像用手电筒探索这个森林——您只能看到直接在你面前的东西。另一方面，人工智能深度数据分析就像在森林中部署一群智能无人机。这些无人机在不同的高度飞行，使用各种传感器，如红外线和夜视仪，并且相互沟通。它们迅速绘制路径图，识别伪装的生物，并揭示复杂的关系，即使是最好的手电筒，也无法在密集、广阔的数据森林中发现。

人工智能驱动的分析能够提供新颖且具有针对性的见解，帮助您将网站从优秀提升到卓越。人工智能可以帮助您选择合适的配色方案，编辑您的写作以增强清晰度和简洁性，以及许多其他有助于网站成功的因素。而且，请始终记住，您的竞争对手正在使用人工智能。因此，您也需要它。

遭遇写作瓶颈？没问题。没有设计经验？已解决。回想一下，您现在拥有了一间充满高技能助手的房间。您给他们分配任务，他们就会带回卓越的、常常令人惊叹的结果。

在其众多益处中，人工智能是快速、自动化的，并且用自然的人类语言与我们沟通。无需涉及编程。正如英伟达总裁黄仁勋所说，今天的“编程语言是人类的，世界上每个人现在都是程序员。”顺便说一句，人机沟通已不再是专业技能。所以，不要被诱惑去尝试将其作为职业。

12.2 理解分析元素

在以下子节中，您将看到传统的 WordPress 网站分析类别。此外，您还将了解它们揭示了什么，以及为什么这些发现对网站设计师来说有价值。

12.2.1 页面浏览量

页面浏览量指的是访客在网站上查看或重新加载网页的总次数。每次加载或重新加载都算作一次页面浏览量，即使是一位访客反复访问特定的页面。 （浏览器页面刷新——F5——通常也计为一次查看。一些分析平台确实有设置或过滤器来排除由快速刷新产生的重复页面浏览量。）这告诉您您各个页面的相对受欢迎程度。并且观察页面浏览量随时间的变化，可以告诉您您的网站受众是在增长还是减少。然而，这并不能让您知道有多少独立访客正在查看这些页面。

12.2.2 独立访客

独立访客计数揭示了在定义的时间段内，特定设备（手机、平板、电脑等）访问您网站的频率。而且重要的是，即使某人在该期间多次访问您的网站，他们也只能被计算一次。

分析系统如何知道同一个访客是否多次访问？Cookies 被保存在访客的浏览器中以存储他们设备的 IP 地址。IP 地址是每个设备的唯一标识符。从这个指标中，你了解到你受众的真实规模。它还告诉你有多少访客是新的，有多少是回访的。这样，你还可以看到你的保留率。

例如，如果你发起一场营销活动，你可以看到它对吸引新流量到网站的影响。总结一下：页面浏览量揭示了你的内容的相对受欢迎程度，独立访客告诉你有多少不同的访客正在查看该内容。关于页面浏览量与独立访客的更多信息，请参阅mng.bz/BXYq。

12.2.3 跳出率

跳出率描述了那些离开网站而没有浏览过主页的人的百分比。正如你所知，你的主页是人们的第一印象。它必须吸引人、值得信赖（推荐信），并且高效（直观的导航），并且必须清楚地宣布你网站的目的。极高的清晰度是必不可少的（确保你的标题和主要图片立即清楚地表明网站的目的和价值）。并且确保你的页面加载迅速。在 PageSpeed Insights 上测试你的页面加载速度（mng.bz/dXxz）。记住，世界上许多潜在访客的互联网连接速度可能比你慢。

小贴士：一个常见的首页错误是使用“聪明、吸引人或有诗意的”网站标题，如Lazy Afternoons或Whispering Windchimes。没有人知道这些标题的含义！正如英国人所说，它们是过于聪明了。相反，在标题中清楚地说明你的网站是关于什么的：北卡罗来纳州 Randleman 湖的钓鱼。人们不会访问你的首页来解决谜题。他们希望立即知道你的网站是否是他们应该去的地方。

跳出率告诉你有多少人不点击链接、访问其他页面、点击菜单项或触发分析系统跟踪的网站上的任何其他事件。你了解到你的主页是否有效地提供了清晰、有用、相关的信息。它必须吸引他们进入你的网站。首页加载是否缓慢或存在断链？你的网站标题和标语是否误导、混淆或含糊不清？设计或内容是否只是访客所寻找的？

人们还认为跳出率可能影响 AIO 和 SEO，因为如果人们迅速离开，这可能表明你的网站不相关或不值一提。然而，这并不被视为一个主要的 AIO/SEO 因素。

平均跳出率为 50%，通常在 40%到 60%之间。然而，博客是独特的，因为它们显示一系列消息，许多人可能对你的提供感到满意，但只阅读了一两篇消息。然后他们永远不会超出主页，并被计为跳出。尽管 50%是一个平均值，但不同类型的网站、主题和行业中的跳出率可能会有很大差异。最好是将你网站的跳出率与其他同类的网站进行比较。

内页跳出率也可以是分析包的一部分。而且，你需要根据页面的目的来解释这些数据。有些页面可能因为内容很少或成为你的 CTA 的目标而具有高跳出率，因此访客预计会从这个页面退出，而不会在网站上其他地方停留。他们已经填写了表格或完成了购买。显然，购物网站的购买摘要（下订单按钮）就是这样的页面。在 CTA 的最后页面，跳出率是不相关的，因为访客已经“转化”为潜在客户（例如，提供了他们的电子邮件地址）或成为客户。

12.2.4 平均会话持续时间

平均会话持续时间衡量的是访客在会话期间在你的网站上停留的平均时间。这是衡量访客对你网站价值的体现。这个平均值是通过将所有访客的入口和出口之间的持续时间相加，然后除以访客数量来计算的。

如果人们离开得很快，你可能需要检查你的设计、内容质量、导航效率或页面加载速度。与这些指标中的大多数一样，不要孤立地看待持续时间。也许访客逗留是因为他们不清楚如何找到他们想要的东西。还有其他几个指标也衡量参与度，所以也要考虑它们。

一些分析程序使用不同的术语，例如网站停留时间。单个页面的持续时间也是可以测量的，但当访客离开网站时，他们停留在最后一个查看的页面的时间却无法测量。这是因为持续时间是通过从后续页面加载事件中减去先前页面加载事件的时间来计算的。当他们离开时，在你的网站上将没有后续的页面加载事件。或者，如果有人外出吃饭或以其他方式使电脑处于非活动状态，分析系统将在 30 分钟的非活动后关闭会话。（这是 Google Analytics 的默认设置，但你可以自定义它。）

12.2.5 转化率

有多少人完成了你的期望目标，例如给你他们的电子邮件地址，注册你的通讯，购买东西，或者以其他方式对你的 CTA 做出响应？这是一个重要的指标，为你提供了转化访客的百分比，以及你网站的有效性。转化率是通过将总访客数除以总转化数，然后乘以 100 来计算的。例如，如果一个电子商务网站有 3,000 名访客，其中 100 人购买了东西，那么转化率是（100 ÷ 3000）× 100 = 3.3%。

人们认为，转化率通常是衡量网站性能的最佳单一指标，尤其是对于旨在实现商业或专业目的的网站（与个人博客等网站相反）。高转化率意味着你的网站设计和内容表现良好。低转化率则意味着需要改进网站的一个或多个元素。你尝试不同的策略、修改和 CTA（行动号召），并观察你的转化率有何变化。

然而，请记住，不同行业和企业的转化率差异很大。平均转化率估计在 2.35%到 5.31%之间。但转化率最有用之处在于，它可以帮助你看到在调整过程中，你的网站性能随时间的变化趋势。

12.2.6 点击路径

点击路径（又称点击流、热图、行为流程、用户流程或路径探索）告诉你访客如何浏览你的网站——他们在你的网站页面中的路径。（某些分析应用程序可以跟踪页面内的移动，如本地链接或滚动。）这些数据可以确定用户在到达你的 CTA 时放弃或犹豫的地方，没有人去过的地方，导航问题（人们是否被困在特定的地方？或者陷入循环？），在购买时退出网站，等等。

然而，存在两个问题：（1）人们不会以线性方式浏览网络，因此你的网站上可能没有单一的典型路径，并且（2）跟踪用户可能会引发隐私问题。

12.3 跟踪选项

分析数据包括几个跟踪指标，让你可以看到你的网站特定组件的表现。以下小节描述了典型的跟踪数据类型。然而，根据你的网站内容和所使用的分析平台，可能会有额外的跟踪类别。

12.3.1 表单提交跟踪

你想知道你收集线索和建立电子邮件列表的努力是否真的起到了作用吗？表单提交跟踪可以显示这一点，因此你可以根据需要调整你的策略。

这个指标显示了有多少访客在您的网站上完成并提交表单，例如联系表单、潜在客户捕获表单或注册表单。这显示了从您的网站生成多少潜在线索或客户。它可以帮助识别哪些页面或营销活动推动了最多的表单提交和转化。

12.3.2 谷歌广告跟踪

谷歌广告跟踪允许您监控您正在运行的任何谷歌广告活动的性能。这包括点击、展示、成本和转化等指标。这些数据揭示了哪些关键词和广告正在吸引最有用的流量和线索到您的网站，因此您可以优化您的谷歌广告策略。

如果您正在投资谷歌广告以吸引新客户，您需要知道这笔钱是否被合理地花费。谷歌广告跟踪正是如此。它告诉您哪些广告和策略正在产生兴趣和结果，哪些需要改进。这有助于您获得最佳的广告投资回报。

12.3.3 文件下载跟踪

文件下载跟踪记录了访客从您的网站下载文件的时间，例如白皮书、电子书或产品手册。这可以表明对您的内容感兴趣，并帮助您了解哪些资源在您的受众中最受欢迎。它提供了关于内容参与度的见解。

如果您提供下载内容，您想知道人们是否真正觉得它们有用。文件下载跟踪显示了访客想要了解更多信息的资源。这告诉您您的受众关心哪些主题，并帮助您根据他们的需求定制内容。

12.3.4 视频播放跟踪

视频播放跟踪监控访客在您的网站上观看视频的时间。您将看到哪些视频最能吸引您的受众，以及他们观看每个视频的时间长度。然后您可以通过提供最受欢迎的视频来提高观众参与度。

视频是一种重要的媒介。它是当今的主要沟通形式。视频播放跟踪帮助您了解您的视频表现如何。是否有许多观众在某个点放弃观看？是否有某些视频比其他视频观看得更多？替换那些表现不佳的视频。

12.3.5 外部链接跟踪

外部链接跟踪记录了访客在点击您网站上的链接后访问的外部网站。这告诉您关于您的受众的兴趣和内容偏好。通常认为最好让人们在您的网站上停留，直到他们完成转化，但有时将访客发送到其他有用的资源是正确的事情。您还可能想要联系一个热门目标网站的管理员，并提议合作。例如，让他们链接到您的网站。

12.3.6 附属链接性能跟踪

如果你有一个联盟营销计划，联盟链接性能跟踪可以让你看到这些联盟链接上的点击和转化。这些数据可以帮助你确定哪些联盟在为你的网站带来最有价值的流量和销售。这样，你可以专注于那些带来真正价值的合作关系。

12.3.7 年龄、性别和兴趣报告

了解你的网站吸引的是谁，这是重要的信息。这些报告提供了关于你的受众关心什么，以及他们的年龄、性别和兴趣的洞察。修改你的内容、设计和营销策略，以符合你的受众群体。

12.3.8 平均滚动深度

平均滚动深度跟踪访客平均滚动到页面多深。这个指标可以表明哪些内容最吸引人，以及你可能需要优化布局和格式以使访客继续向下滚动的地方。人们究竟在哪些地方对你的页面失去兴趣？大多数人在达到你的重要 CTA 之前就离开了？大量的灰色文字是否吓跑了他们？通常，你希望他们继续滚动，而不是跳出页面。

12.3.9 跟踪的价值

总体而言，跟踪测量为你提供了一个全面的视角，了解访客如何与你的网站互动，哪些内容和功能引起了共鸣，以及在哪里有机会改进用户体验和推动更多转化。这些洞察将指导你的网站优化和营销策略。

你将了解如何最好地将普通访客转变为忠实追随者或付费客户。一开始这可能看起来有点技术性，但好处是巨大的。不要害怕分析结果，并根据你所学到的知识对网站进行调整。经过一点练习，网站分析很可能会成为你在网上成功的秘密武器！

12.3.10 通过人工智能进行数据分析

人工智能正在改变世界，这已不再是新闻。或者，正如比尔·盖茨所说，人工智能是“第一种没有限制的技术。”而网络分析也不例外。

无论你是被 MonsterInsights 或 Site Kit 的入门友好型方法所吸引；Google 强大、全面和深入的数据分析；还是 Crazy Egg 令人印象深刻且宝贵的视觉地图所吸引，它们都会帮助你解锁你网站的潜在价值。你实际上可以从这四个方面都受益。

通过利用人工智能驱动的分析，你不会仅仅看到像《黑客帝国》中一样闪烁的数字，而是通过可视化、报告、表格、地图、列表、A/B 测试和实时监控来深入了解你的受众。这将使你能够就内容、设计和整体营销策略做出更明智的决策。

作为 WordPress 网站开发者，这些工具能让你在创建真正与访客产生共鸣并推动成功的网站时拥有显著优势。MonsterInsights 声称你可以通过分析将你的受众和销售额翻倍：“轻松翻倍你的流量和销售额！”这可能是一点营销热情，但 Monster 确实是一个可靠的执行者。

像 Google 这样的公司正疯狂地试图在其服务中应用 AI——从搜索到分析到他们销售的任何其他东西。例如，Google 的传统链接列表有一个新功能。如今，当你进行 Google 搜索时，你可以在“赞助”链接下方查看，并点击一个带有“获取此搜索的 AI 概述”标签的生成按钮。或者，你可能甚至看不到链接列表！只有对问题的纯 AI 响应。

此外，微软的 Bing（以前只是谷歌的克隆）现在与Copilot（他们称之为 AI）集成。进行 Bing 搜索，正如微软所说，“Copilot 将网络上的可靠来源汇总，为你提供一个单一、总结性的答案。以你说话、文本和思考的方式搜索。”

竞争正在激烈进行。像 Google Analytics 这样的专业系统也在添加 AI 功能。今天的公司意识到，他们要么拥抱 AI，要么就会倒闭。对个人来说也是如此：要么你在工作中使用 AI，要么你将失业。

了解人们如何使用你的网站通常对于成功至关重要。但挖掘原始数据可能会让人感到不知所措。这就是强大的 WordPress 分析插件（具有 AI 功能）发挥作用的地方。这些工具超越了传统的数字处理，利用 AI 将大量的原始访客数据转化为你可以轻松理解和采取行动的清晰洞察。无论你如何定义性能。

12.4 四个优秀的分析插件

在以下子节中描述的四个领先的 WordPress 分析插件将这种 AI 分析能力直接放在你的指尖。它们都是好的，但按照我认为的价值顺序列出。例如，Crazy Egg (www.crazyegg.com/pricing)提供了独特而有价值的洞察，但它并不便宜。

12.4.1 MonsterInsights

Google Analytics 是首选的 WordPress 分析系统，是黄金标准。但与其深度和力量相伴而来的是复杂性——例如，你必须向你的 WordPress 文件中添加编程代码。这很可能不是你想要做的事情。现在有了 MonsterInsights (www.monsterinsights.com)，它拥有超过 300 万活跃安装。它帮助设置 Google Analytics 的代码，并使使用 Google Analytics 变得容易，可以继续进行。你将获得一个高效、易于理解的 Google Analytics 前端界面，包括简化并阐明 Google Analytics 中发现的复杂和高级功能。

MonsterInsights 是设置向导、摘要器和 Google Analytics 的前端结合体。实际上，它使得使用这个强大的工具变得相当简单。

Monster 还增加了自己的一些特色功能，包括符合通用数据保护条例（GDPR）的辅助和电子商务跟踪。更重要的是，使用 Monster，你可以在 WordPress 仪表板中直接查看谷歌的报告和摘要。

TIP 欧盟的 GDPR 隐私保护倡议要求你在收集受众数据之前请求他们的许可。Monster 使你能够轻松地向访客展示退出选项。

Monster 这样描述自己：“MonsterInsights 让在 WordPress 中设置 Google Analytics 变得‘轻松’。只需安装插件，通过几次点击启用你想要的特性，无需编写代码！”以及“MonsterInsights 显示你关心的统计数据！”

你还将获得十几个有用的摘要，告诉你原始数据实际上意味着什么，包括着陆页、漏斗和受众报告。Monster 在你的 WordPress 仪表板中展示了几个强大的 AI 功能：

• 实时 AI 洞察——无需等待报告！MonsterInsights 的 AI 实时分析和展示数据，如果你需要快速响应访客行为。

• 智能推荐——插件的 AI 功能分析你网站的性能，并提供具体可行的建议来改进你的内容、增加流量和提高转化率。

• 自动报告生成——让 AI 完成繁重的工作，生成全面、易于理解的报告，揭示数据中的关键趋势和模式。

• 受众细分——这有助于你了解你受众中的不同用户群体，让你能够提供更个性化的内容和更有针对性的营销信息。

• 行为预测——MonsterInsights 可以预测用户可能会如何与你的网站互动，帮助你简化他们的体验。

Google Analytics 和 Google Site Kit

谷歌提供了一套强大的分析工具，你可以通过使用 MonsterInsights 或谷歌自己的 Site Kit 插件轻松地将它们集成到你的 WordPress 网站上。Google Analytics 是业界领先的平台，它使用 AI 根据你的网站流量模式识别趋势、异常和潜在机会。这有助于你更好地了解你的受众，并相应地调整你的内容。

独立的 Google Site Kit 插件无缝地将你的网站连接到多个谷歌服务，包括 Analytics。Site Kit 仪表板提供了一个简化的视图，显示你最重要的指标，如果你是数据分析的新手，这将使监控性能变得更容易。

谷歌的预测分析工具可以分析过去的行为以预测未来的趋势，帮助你预测流量变化并做出主动决策。此外，AI 算法提供定制建议，以改善你网站的关键领域，从内容优化到用户体验设计。

12.4.2 网站工具包与 MonsterInsights

网站工具包和 MonsterInsights 都为你提供了一个更简单的方式来获取谷歌分析的数据。但你应该使用哪一个？我询问了 Gemini：

|

你是一位专家 WordPress 大牛。WordPress 插件“谷歌网站工具包”和“MonsterInsights”似乎做的是同一件事——简化使用谷歌分析系统。创建一个比较它们功能的表格。然后用几段话总结它们之间的差异。

Gemini 提供了一个信息表格，如表 12.1 所示。

表 12.1 功能比较表，由 Gemini 提供

功能	谷歌网站工具包	MonsterInsights（免费版）	MonsterInsights（付费版）
安装与设置	简单，直接从 WordPress	简单，标准插件流程	简单，标准插件流程
仪表板报告	基本谷歌分析指标	基本谷歌分析指标 + 一些增强功能	广泛、深入的统计分析报告
用户跟踪	基本功能	基本功能 + 出站链接跟踪	表单跟踪，增强用户跟踪
电子商务跟踪	无	基本电子商务跟踪	高级电子商务跟踪（详细报告）
滚动跟踪	无	无	滚动跟踪
自定义维度	无	无	跟踪作者、分类、发布日期等
集成	谷歌搜索控制台、AdSense、页面速度洞察、标签管理器	更多第三方集成（例如，WooCommerce、表单插件）	更广泛的集成范围
价格	免费	免费基本版	付费计划起价约 99 美元/年

小贴士：当你正在研究你想要购买的东西时，请让 AI 查看专业评论员对产品 A、B 和 C 的规格和功能的评价。然后，创建一个比较这三个产品的表格。指定专业评论员，因为你可能应该避免那些有些随机且有时不够明智的业余亚马逊评论。

差异总结

这里有一些关键差异，由我们的 AI 助手提供：

|

•   焦点：Google Site Kit 是由 Google 设计的，旨在为将您的 WordPress 网站连接到核心 Google 服务（分析、搜索控制台等）提供一种便捷的方式。它提供了一览无余的重要数据视图，但缺乏您在专用分析插件中找到的定制和深度报告功能。另一方面，MonsterInsights 则专注于 Google Analytics。它将更多分析数据直接带入您的 WordPress 控制台，并提供更多高级跟踪功能。   •   报告深度：如果您需要在 WordPress 中获取基本流量洞察，Google Site Kit 是一个不错的选择。当您需要详细报告、自定义跟踪和网站内用户行为的高级分析时，MonsterInsights（尤其是付费版本）表现出色。   •   成本：Google Site Kit 完全免费。MonsterInsights 提供了一个带有核心功能的免费版本，以及具有更多功能级别的付费计划。

哪一个更适合您？

AI 还根据您的具体情况提供了以下见解：

|

	•   如果您想要一个免费的、由 Google 制作的用于基本网站流量监控和轻松连接到各种 Google 服务的解决方案，请选择 Google Site Kit。    •   如果您需要更深入的 WordPress 内部分析报告、高级事件/行为跟踪，并且愿意考虑付费升级以获得最强大的功能集，请选择 MonsterInsights。

12.4.3 Crazy Egg

Crazy Egg 以独特的方式处理网站分析。它将传统数据与高级 AI 功能相结合，包括易于理解的（地图）形式的分析数据可视化。以下是该系统的一些特殊功能：

• 可视化用户行为—Crazy Egg 强大的 热图、滚动图和其他视觉展示显示了访客与您页面的互动方式。您可以精确地指出他们点击的位置、滚动距离以及可能卡住的地方。

• 用户录制—类似于焦点小组，您可以像从他们肩上观察一样观看完整的用户会话。您将看到鼠标（或手指）在页面上的路径。哪些区域他们完全避开（您的“立即购买”按钮是否位于死区？）并且插件的 AI 帮助分析这些录制，突出潜在的摩擦点或用户兴趣最高的区域。

• 自动化 A/B 测试—Crazy Egg 的 AI 简化了 A/B 测试，识别高性能的变体，并实时优化您的页面以实现最大转化率。

• 参与度分析—AI 帮助您了解哪些内容元素最具吸引力，以及可能需要改进的地方。

• 行为异常检测—AI 标记用户行为中的异常模式，让您能够快速调查潜在问题。

Crazy Egg 的地图

在 Crazy Egg WordPress 插件中，特殊的热图显示，直观地展示了用户如何与你的页面互动。你看到的是一个彩色叠加层，其中较热的颜色（如红色和橙色）表示点击密度高的区域，而“较冷”的颜色（蓝色和绿色）表示互动较少的区域。仅通过查看这些地图，你就可以快速了解哪些网站元素吸引了最多的关注，哪些被忽视，以及访客是如何与你的内容互动的。在这里查看各种地图类型：www.crazyegg.com/blog/crazy-egg-features/。

这个插件的地图提供了理解分析数据的优秀、直观方式。以下是提供的各种地图类型：

• 热图报告—显示用户在网页上的点击位置。

• 滚动地图—这些地图显示了用户滚动网页的深度。其中之一就是告诉你应该在哪个位置放置“立即购买”按钮和类似的 CTA。

• 彩带报告—你看到的是带有彩色点的页面，这些点代表访客在网页上的点击位置。不同的颜色告诉你流量来源（例如，社交媒体、搜索或 AI 系统、你自己的电子邮件活动、推荐）。

• 叠加报告—这直接在网页上叠加热图数据，提供了用户互动的视觉表示。

• 列表报告—以表格格式列出网页上点击次数最多的元素。

热图如何有用

热图在以下方面很有用：

• 移动功能—查看在页面上移动 CTA、按钮和其他交互式元素的位置，以便将这些高性能元素放置在以用户为中心的位置。

• 改善用户体验—通过跟踪点击、滚动和鼠标移动，你可以找到改善网站设计的方法。

• 寻找热门区域—热图展示了用户在网站上的点击和关注点。这让你能够找到并优化网站中最吸引人的区域。通过使用代表活动增加的不同颜色，你可以快速看到热点区域——就像天气图一样。

• 评估用户行为—可视化滚动、鼠标移动以及点击。这揭示了用户如何使用和浏览你的网站。

• 寻找可用性问题—热图可以显示观众变得困惑或沮丧的地方，例如错误标注的链接或按钮。这有助于你找到并修复可用性问题。

12.5 作为网站评论家的 AI

在这本书的整个过程中，我们一直将 AI 作为评论家来建议改进我们的实践网站的设计和内容。同样，你也可以通过剪切你的文本内容和页面设计，然后将它们粘贴到一个提示中，让 AI 对你的网站进行评论。

但剪切和粘贴并不能提供你改善网站所需的所有信息。它无法揭示一些大规模问题，例如网站导航和组织，或者技术问题，如页面加载速度和可访问性。

你还希望将你网站的信息深度与其他专注于你主题的网站进行比较。这显示了你的网站如何吸引你的受众，以及整体内容和设计如何与网站的标识和目标保持一致。

是的，像 MonsterInsights 这样的优秀插件可以回答这些问题的大多数。但是，将你的网站地址提交给 AI 并让它扫描和批评网站是非常棒的。这样，AI 就像人类一样，将你的网站视为一个有机的整体。

12.5.1 什么是 AI 代理？

在撰写本文时，AI 系统刚开始提供代理。这些代理与简单的传统 AI 辅助在几个关键方面有所不同：

• AI 代理是目标导向的。它们执行完整任务，而不仅仅是响应提示提供信息。例如，一个代理可以实际访问你的网站，而不是阅读你粘贴到提示中的部分文本内容。当以人类的方式体验完你的网站后，AI 可以判断更抽象的品质，例如你的设计、媒体和文本内容之间的相互关系。AI 可以通过查看导航路径来批评网站结构，并判断全局问题，例如整个网站是否自然地（视觉上、写作风格、冗余等）保持一致。GPT-4o 及其以上版本可以访问和扫描网站，如第十一章第 11.2.2 节所述。

• AI 代理可以使用思维链推理来自己确定达到目标所需的步骤——即使是一个复杂的多步骤目标——而无需进一步的提示或你的帮助。换句话说，它们可以自主和主动地行动。它们被释放到现实世界中。

• 你的提示可以更简单。例如，如果你只是告诉一个代理建议改进你的网站，它可以自己决定如何做。它可能会在不告诉你去的情况下访问多个竞争网站，以便比较你的网站与竞争对手。它可能会检查视觉吸引力或剽窃，而无需被要求做这些事情。代理是自启动的，并能提供自己的智能反馈。AI 代理可以自主创建子目标、中间步骤，而无需人类指导。你的提示可以简短，因为你只需要描述一个目标，AI 就会想出达到该目标所需做的事情。代理还可以从环境中学习。最终，它们将能够使用传感器并从所有类型的现实世界输入中学习。观看电影。听莫扎特或 Muse 的音乐。就像我们一样。OpenAI 在 2024 年春季发布了 GPT-4o，迈出了重要一步。它接受多模态输入并提供多模态输出（目前不包括音乐和视频）。

人工智能代理是一种更高级、更自主的人工智能形式，具有推理、学习、改变方向、穿越互联网和做出独立决策的能力。它们不需要遵循脚本或从你那里获得多个提示。这使得它们具有灵活性，能够即时适应变化，应对现实世界情况的不确定性和复杂性。有时，高人类智能被描述为主要是适应性。以这种方式，人工智能代理是迈向通用人工智能（AGI）的一步。

当编程计算机时，你可以通过使用 If/Then 和 Do/While 语句使程序的行为具有一定的适应性。同样，当以传统方式提示人工智能时，你可以通过指定在必须做出决定时做什么以及重复行为多少次来使其具有一定的适应性：“写一首情诗。如果感觉不太对劲，则提供五种不同风格的修订版本。”然后传统的 AI 响应会显示这五种版本，你必须选择最好的一个。而这种预测性规则设置无法考虑到需要做出的每一个可能的决策。

相比之下，人工智能代理会自行决定写多少稿，哪一个是最好的。这样，我们就不再必要了。当完全人工智能代理到来——可能是在 2025 年——我们将扮演的角色只是简单地表达我们的愿望。然后人工智能完成工作。只要它允许，这将继续是我们与人工智能的互动方式。

我要求双子座专业版描述人工智能代理。这是它的回答：

|

为什么人工智能在这些领域表现出色迭代自我改进：人工智能可以通过强化学习“练习”不懈，与自己或模拟数百万次场景。这种改进速度是人类无法达到的。无偏见的数据分析：人工智能可以处理信息，不受影响人类决策的认知偏差。计算能力：人工智能可以访问庞大的计算能力，用于处理大规模数据集和快速执行复杂计算。重要提示：即使在这些任务中，也要记住人工智能代理通常从人类设定的框架和目标开始。我们可能没有给他们提供逐步指令，但我们仍然决定了最终目的。

我必须承认，我很高兴双子座没有以“目前”作为这些评论的结论。然而，你发现双子座在最后一句话中使用“我们”这个词……是否感到不安？

认知偏差是对逻辑错误的一种委婉说法，这些错误有时是由情绪、同理心和道德价值观引起的。双子座很高兴地指出，与人类不同，人工智能不受认知弱点（如同理心或道德价值观）导致的逻辑缺陷的阻碍。

12.6 两个 AI 头比一个好

就像人一样，AI 有时会产生幻觉（给出奇怪的反应），编造事实碎片，伪“事实”，听起来合理但实际上是假的。AI 有时还会未经授权就复制文本，存在偏见，以及其他作者试图避免的缺陷。

Gemini 有一个有用的功能，称为“双重检查响应”，正是这样做的。点击 Gemini 响应底部图标行中的 G 图标。然后，Gemini 再次检查其响应，交叉检查其准确性。

Gemini 在文本中突出了这些区域。绿色高亮表示 Gemini 找到了与您提供的内容相似的内容，表明其响应有依据。橙色表示文本可能准确，但缺乏清晰度或深度。红色（实际上看起来是棕色）表示无法找到支持该断言的内容，因此其响应可能是误导性的或不准确的。

TIP 虽然这种高亮显示可能很有用，但它似乎不会标记剽窃。我建议您使用 Grammarly 检查剽窃。Grammarly 快速扫描数十亿个网页，并扫描 ProQuest 数据库。ProQuest 公司提供可搜索的内容，这些内容不一定直接在互联网上，例如学术期刊、论文、历史文件、论文、报纸、电子书和其他研究材料。

12.6.1 获得更好的 AI 响应

使用 AI 时，如果您需要更好的答案，请尝试放慢速度，来回聊天以引导 AI 走向正确的方向，并采取多个步骤来改进最终响应。这将使您能够集中精力并验证结果。回想一下，这种提示技术被称为思维链（又称逻辑分解、逐步推理、推理分解或顺序推理）。

类似的提示

|

逐步告诉我，专业评论员认为设计网站的最佳实践是什么。从介绍开始，然后在每个步骤后向我询问我的意见。以结论结束。为每个步骤提供标题。

注意，并非所有 AI 系统对这种提示的反应都相同。Claude 3 Opus 在显示简介后提出了这个问题：

|

您对您的网站有什么具体的目标或优先事项吗？这可以帮助我们引导讨论。

Gemini 高级在您输入步骤之间暂停时提出具体问题，例如以下问题：

|

您想象您的典型网站访客是谁？”

换句话说，这些 AI 正在帮助您提供信息，以改善最终结果。

另一种好的方法是先与一个 AI 交谈，然后将它的回答粘贴到第二个 AI 中进行核实、深入洞察或额外润色。让我们看看这是如何工作的。

这里是针对 Meta 的提示：

|

用三个简短的句子列出三个最有用的网站分析数据。

|

这里是三个最有用的网站分析数据：独立访客：访问您网站的新访客数量，帮助您了解您的增长和覆盖范围。跳出率：立即离开的访客百分比，表明您的内容吸引力如何。转化率：完成预期行为的访客百分比（例如，进行购买、填写表格），衡量您网站的有效性。

复制 Meta 的回复，并将其粘贴到复杂性中，添加以下提示：

|

将其重写，使其更加技术化，并且长度增加一倍（同时保持清晰易懂）。

复杂性回复：

|

独立访客数、跳出率和转化率是三个最重要的网站分析指标，它们提供了关于您网站性能和有效性的宝贵见解。独立访客数独立访客数是指在特定时间段内访问您网站的新、独一无二的访客数量。这个指标帮助您了解您网站的覆盖范围和增长情况，因为它排除了重复访客。通过跟踪独立访客数，您可以评估您的营销和内容策略在吸引新受众方面的成功程度。独立访客数的稳步增长表明您的网站正在扩大其覆盖范围并与更多人产生共鸣。这些数据可以用来指导内容创作、广告活动和其他增长举措。跳出率跳出率是指查看过主页（或单个内部页面）后离开您网站的访客百分比。高跳出率可能意味着您网站的内容、设计或用户体验存在问题。相反，低跳出率表明访客参与度高，正在进一步探索您的网站。通过分析跳出率，您可以识别未能吸引访客兴趣的页面或入口点，并做出改进以增强参与度。这些数据是衡量您的网站在保留和转化访客方面有效性的指标。转化率转化率衡量的是完成您号召行动的访客百分比，例如购买某物。这个指标显示了您的网站在实现业务目标方面的有效性。高转化率表明您的网站在引导访客通过销售漏斗或转化过程方面做得很好。通过监控转化率，您可以评估号召行动、着陆页和整体用户体验的表现，并做出明智的修改以获得最佳结果。结论总的来说，独立访客数、跳出率和转化率为您网站的性能提供了一个全面的视角，帮助您了解您的受众，识别需要改进的领域，并揭示您网站的成功。通过密切跟踪和分析这些关键指标，您可以做出明智的决定，这将导致最佳的用户参与度，推动更多的转化，并最终实现您的业务目标。

提示：如果您正在使用多个 AI，请记住有一个名为 ChatHub 的出色 Chrome（和 Edge）扩展程序（chathub.gg）。它允许您提供一个单一的提示，并同时看到两个到多达六个 AI 的响应！这简化了事实核查的工作，并让您能够快速从多个 AI 中选择最佳响应。图 12.2 展示了 ChatHub 在行动中的样子。

图 12.2 使用 ChatHub Chrome 扩展同时与多个 AI 进行聊天。

在本章中，我们探讨了分析在构建和保持网站受众中的作用。我们研究了分析的各种元素，如页面浏览量、独立访客、跳出率和转化率。本章强调了跟踪用户行为的价值，以及人工智能如何通过提供深入的数据挖掘和由此产生的洞察力来革命化分析，这些洞察力是人类无法发现的。我们比较了四个流行的 WordPress 分析插件：MonsterInsights、Google Site Kit、Google Analytics 和 Crazy Egg，突出了它们的功能和好处。最后，我们看到了人工智能代理和采用多个 AI 如何提供有价值的反馈。

摘要

• 除了其他所有文化或智力方面的内容，人工智能现在正在改进网站分析——这个过程包括收集、测量、分析和然后向我们这些人类网站设计师提供非常宝贵的信息。这些数据可以帮助你大大提高你的网站。你将详细了解到你的访客是什么样的，以及他们是如何与你的网站互动的。

• 一个购买漏斗创建了一条路径，引导你的访客到达你网站 CTA 的目标。无论你希望他们订阅你的时事通讯、下载数字内容、给你他们的电子邮件地址，还是只是购买某物——这个漏斗就是你将他们从主页移动到他们采取你希望他们采取的行动的地方的方式。

• 人工智能可以进行深入的数据挖掘。这是一种人类无法做到的高级数据分析形式。它采用深度学习技术（一种强大的 AI 形式）来揭示大量数据中的复杂、隐藏的模式和关系。

• 分析可以跟踪你网站中的各种元素——广告、滚动、下载、表单和其他组件——并报告它们的性能如何。你将具体了解你的访客是如何与你的网站互动的。

• 你将想要探索四个顶级 WordPress 分析插件：MonsterInsights、Site Kit、Google Analytics 和 Crazy Egg。前两个是为了简化第三个插件的使用，因为 Google Analytics 非常庞大、强大，因此也相当复杂。MonsterInsights 和 Site Kit 驯服了 Google 巨兽，使理解和数据指标变得容易得多。第四个推荐的插件，Crazy Egg，通过可视化提供独特且重要的反馈。你将看到数据，而不是阅读它。

• 虽然通过插件获取的分析信息可能非常出色，但有时它们过于详细。有时，你可能想要对你网站的整体、全面的批评，就像一个专家人类批评家总结了你的优点和缺点一样。你将想要使用新兴的 AI 代理。它们是更高级和自主的 AI 形式，具有推理、学习、改变方向、穿越互联网和独立做出决策的能力自主地。你只需给他们一个目标（“提供对我网站的深入批评”），然后他们就会想出如何最好地实现这个目标。

第十三章：资源：从这里开始

本章涵盖

• 探索 WordPress 资源

• 理解各种人工智能领域

• 定位人工智能主题的新闻

• 专注于人工智能的社交媒体群组

• 关于人工智能的在线论坛和公司博客

• 在线人工智能课程

• 人工智能会议和研究论文

• 与人工智能一起前进

本章全部关于如何跟上 WordPress 和人工智能的步伐。你可以在哪里找到最新信息以及用于任何任务的最佳工具？WordPress 及其主题和插件正在迅速采用人工智能功能。在本章中，你将找到资源，以两个目标为指导：提高你的 WordPress 技能并跟上人工智能惊人的进步。

13.1 探索 WordPress 资源

我们将从这个针对 WordPress 开发人员的资源调查开始，重点是人工智能。

13.1.1 当然是人工智能

这里是网站开发人员的重要人工智能资源。请注意，这些描述是在撰写本文时准确的。但人工智能系统正在一场竞赛中，各种人工智能指标（周转速度、准确性、可以生成或检查的数据量、幻觉等）的领导权正在发生变化。

Grammarly 和 QuillBot

Grammarly 继续添加专门的人工智能工具来改进你的文本内容。而 QuillBot 在改写（甚至检测一段文字是否由人类或人工智能生成）方面非常出色：

• www.grammarly.com/

• quillbot.com/

OpenAI 的 GPT 聊天机器人

这仍然是领先的内容生成器，并且是许多不同任务的总体首选。然而，像谷歌和苹果这样的强大公司正在缩小差距：

• chat.openai.com/

微软的 Copilot

紧密集成到必应搜索引擎中，Copilot 旨在通过提供查询答案和人工智能驱动的摘要来成为谷歌的杀手：

• www.bing.com/

Midjourney 和 Photoshop

Midjourney 是最有效的（通常，令人震惊的出色）通用人工智能图像生成器：

• www.midjourney.com/

但也要关注 Photoshop。像谷歌一样，它正努力在其艺术应用套件中融入人工智能工具，以捍卫其在该领域行业领导者的地位：

• www.photoshop.com

谷歌的 Gemini

Gemini 与谷歌生态系统的广泛互动以及因此能够利用大量数据的能力是其声名鹊起的原因。Gemini 在信息检索（以及引用有用的注释源链接）方面表现出色。它还在谷歌的许多产品中提供用户帮助。它在准确和上下文相关的回应方面相当出色：

• gemini.google.com/app

复杂度

Perplexity AI 最出色的特点是它能够检索最新信息，并提供通常因其清晰度和可靠性而给人留下深刻印象的回应。它还因其快速回答问题的能力而闻名，与 GPT 4o 的响应速度相媲美：

• www.perplexity.ai/

Anthropic 的 Claude

Claude 的突出特点是它能读取并生成大量文本。（然而，谷歌等公司也在提高它们系统的 token 计数。）这使得 Claude 在需要分析大量数据集、想要总结长文档或想在 10 分钟内写一部小说时，与其他产品区分开来。古代和曾经备受尊敬的写书职业不再需要掌握语言、丰富的想象力、数月的工作或丰富的经验。

现在创作正经历超通货膨胀，导致一些副作用（除了降低文字工艺的价值）。一方面，亚马逊不得不限制每个“作者”每天可以上传到 Kindle Direct Publishing 的书籍数量，每天只能上传三本。正如 Midjourney 的艺术范围和质量正在超越人类摄影、设计和绘画一样，Claude 和其他 AI 也在威胁要超越人类作家。AI 确实写得很快——人们每天能写出超过三本书。

• claude.ai/chats

苹果在哪里？

苹果表示它正在将其平台整合到 AI 中。然而，它尚未发布像 Gemini 或 GPT 这样的实际聊天机器人。然而，Siri 现在要好得多，因为它使用了 GPT。

但不要小看苹果。它有先抑制后发布杀手级技术的历史。记住，有几家公司比它更早推出平板电脑，但最终 iPad 出现并主导了市场。iPhone 的情况也是如此。

如何？苹果有关键优势：优秀的生态系统；强大的品牌认知度；巨大的、持续的、全球性的原始数据流入；垂直整合的供应链；在 UI、软件和设计领域的专业知识；以及能够大规模获取资源的能力。这使得他们成为一支严肃的竞争对手，即使他们是最后一个出发的，也能赢得比赛。

Facebook 的 Meta AI

Meta 强大的 AI 基础设施，特别是其专有的硬件和软件，是其最大的优势。Meta 训练和推理加速器（MTIA）提高了 AI 任务性能。这是减少对第三方芯片供应商依赖的努力。该基础设施使得大规模模型，如 Meta AI 的 Llama 3，的培训和部署变得高效，并支持 Facebook、Instagram、WhatsApp 和 Messenger 上的高级推荐系统和实时信息检索：

• ai.meta.com/meta-ai/

现在我们可以转向那些不是由 AI 直接驱动的资源。

13.1.2 WordPress 论坛

加入一个好的 WordPress 论坛的巨大好处是，你将能够快速获得专家对您问题的回应：

• wordpress.org/support/forums/

• wordpress.org/support/

13.1.3 WPBeginner 网站

我们 WordPress 用户喜欢 WPBeginner，因为它提供了详细的教程、面向初学者的方法以及免费资源。这个大型网站从 WordPress 设置到高级定制和优化，涵盖了所有方面的指南和教程。文本清晰、逻辑性强、展示良好，通常包括有用的截图和逐步指导。WPBeginner 的资质、知识、社区和支持使其成为 WordPress 的一站式商店。该网站还包括优秀且无偏见的评论：

• www.wpbeginner.com

13.1.4 Facebook 群组

与论坛一样，当你需要帮助时，Facebook 群组可以提供强大的支持。试试 WPBeginner 的群组。此外，这个群组的管理员时不时地会宣布新手可以链接他们的网站以获得评论。在任何时候，你都可以在 WordPress 的所有主题上发帖提问：

• www.facebook.com/groups/wpbeginner/

13.1.5 本地团体

在这样的会议上，你会找到经验丰富、乐于助人的 WordPress 设计师。向 Meta 或 Gemini 提出这个问题：“在北卡罗来纳州罗利（Raleigh, NC）是否有当地的 WordPress 团体？”在调查了各种 WordPress 资源之后，让我们将注意力转向更艰巨的任务——跟上 AI 系统的发展。

13.2 人类至高无上的终结

正如你在本书中看到的，用“变革性”这个词来形容 AI 几乎在各个方面对几乎所有事物产生的前所未有的影响都显得太微不足道了。现在，AI 在很多心智活动中占据主导地位——从在围棋等挑战性游戏中击败所有对手，到在医学和律师资格考试等艰难测试中得分高于 90%的人类。甚至在物理领域，各种类型的机器人现在正在将 AI 带入工作场所，毫无疑问，它们很快也会在那里取代我们。

尽管这本书是在网站建设的背景下探讨 AI，但书中涵盖的几乎所有例子、策略和主题都可以应用于大多数其他创造性工作——广告活动、研究论文、品牌建设、追求不愿意的对象，等等。

AI 系统是自计算机发明以来最广泛的多用途工具。我个人怀疑人类能否有效地编程量子计算机。编程是交流，而我们交流是按顺序进行的（至少在意识层面上）。不是通过状态的叠加。GPT 说一个 100 量子比特的量子计算机“可以在内存中同时保持大约一非 illion，二百六十七 octillion 个状态。”1.267×10 的 30 次方。这可以用一个词来概括：大。

AI 的进步也比以往任何技术都要快。每天都有新的障碍被打破，新的能力被宣布，新的系统超越了旧系统。跟上发展是值得的。这不仅让你在目前领域保持领先，而且为你开辟了新的工作和思考方式。

人们通常将自己与 AI 的关系视为自己是 AI 学徒的主人。你仍然会听到这样的说法：“是的，一个扎实的巴赫模仿，但机器永远不会有那种本质的人类触感。”然而，该领域的某些专家却预计学徒会早于预期成为主人。但在调查你可以用来跟上 AI 发展的资源之前，让我们首先看看 AI 学习和行为的主要方式。

13.3 理解 AI 领域

就像人类大脑一样，AI 可以在各种相互关联的学科中学习和工作。以下是当前四个主要 AI 领域的简要列表：

• 机器学习——AI 的一个子集，能够自我学习。一些 AI 系统能够在没有我们编程的情况下学习新事物。这些隐藏的行为有时被称为涌现或黑盒行为。简单来说，AI 通过自己主动学习如何追求并实现目标来采取学习的主动权。例如，如果你在早上要求 AI 写一篇关于韩国政治的论文，你可能会发现在你外出吃午饭的时候，它已经自学了韩语。

• 深度学习——机器学习的一个子领域，它采用模仿人脑结构和活动的人工神经网络从大量数据中学习。这些网络由多个层次组成。它们以分层的方式处理信息，因此能够从复杂的表现和抽象中学习。

• 机器人学——物理世界中的 AI，具有传感器；多方面的输入和输出；以及运输、语音通信和与物体（如工厂组装汽车或寻找炸弹）交互的能力。换句话说，AI 为机器带来了感知、现实世界的交互和推理能力。

• 自然语言处理 (NLP)——AI 的另一个主要子领域，专注于掌握人类语言，包括理解和说话。实际上，这就是图灵测试。NLP 使得 AI 能够理解和生成人类语言。应用包括客户服务机器人、AI 代码生成、翻译、识别（以及可能同情）人类习语和情感，以及能够与我们对话。当 OpenAI 在 2024 年 5 月发布 GTP 4o 时，它让人们想起了电影她。现在 GPT 可以给你打电话。它的声音听起来就像另一个人，包括语调、自然的回答、各种态度如讽刺或同情，甚至模拟情感。如果你不知道，你根本分辨不出来。图灵测试通过。

13.3.1 围棋事件

这是一个关于人工智能自我教学如何快速、有效且极具原创性的例子。两场著名的围棋比赛可能是机器学习的最佳记录示例。它们说明了人工智能可以提出超人类的思想，这些思想按照定义是超凡脱俗的。这些想法既不是从人类那里学到的，甚至也没有在任何人类历史中找到过。

人工智能在复杂的围棋游戏中轻松赢得了冠军比赛。这个相当令人惊讶的人工智能胜利突显了人工智能使用有时甚至令人震惊、甚至难以理解的战略来解决复杂问题的能力。据说，人类在这场围棋比赛中失败的一个原因是，一个令人震惊的人工智能动作如此奇特，以至于它让人类对手失去了平衡。他无法弄清楚这个奇怪的动作在世界上可能意味着什么。多年来，人们声称尽管人工智能在象棋中成为了世界冠军，但它永远无法掌握围棋的微妙之处。

AlphaGo 是 DeepMind Technologies 的产品，这是一家在 2014 年被谷歌收购的英国人工智能公司。它的程序 AlphaGo Zero 只被赋予了围棋的规则，没有先前的游戏数据，没有人类指导，没有编程指令，也没有专家建议。仅仅是游戏规则。

但是，通过其深度学习算法，AlphaGo 意外地自己想出了新颖且对人类围棋专家来说奇怪的策略。这些奇怪的战略最终证明是非常有效的。AlphaGo 的策略足够好，以至于使人工智能成为了围棋的新世界冠军。

2017 年 5 月，AlphaGo 与我们最好的围棋选手、中国的柯洁进行了比赛。在他们的三场比赛中，AlphaGo 赢了全部三场。它展示了惊人的技巧。而且，它做出了一些令人震惊的外星般动作，效果完美。

柯洁后来表示：“AlphaGo 的动作如此令人惊讶，有时甚至超出了我的理解。在第二场比赛中，它做出了一步既富有创意又出乎意料的动作，我花了一些时间才意识到它的卓越之处。它就像我是在与另一个维度的实体对弈。”确实，他就是。

13.3.2 第 37 招神圣的非人类之招

2016 年，人工智能做出了一步著名的动作，至今仍令人震惊。这场比赛是 AlphaGo 与韩国冠军李世石的五局比赛。人工智能赢得了四局。

AlphaGo 在第二场比赛中的第 37 招尤其因其令人不安、奇特且极具原创性而备受赞誉。它在 AlphaGo 的胜利中发挥了关键作用。这是一步看起来如此错误的动作，以至于没有经验丰富的围棋选手会考虑做出这样的动作。

李在惊讶，人群倒抽一口凉气，但 AlphaGo 毫无可见的反应。它的灯光甚至没有一闪。人工智能在我们看来似乎在任何情况下都显得冷静，甚至相当冷漠。毫无疑问，如果人工智能被问及这一点，它可能会像斯波克一样回答，情感会阻碍理性。

乍一看，第 37 步似乎是一个错误，是随机的，只有初学者才会这样做。它深深地震撼了李世石、观看比赛的解说员以及随后的围棋界。

后来，DeepMind 的联合创始人 Demis Hassabis 说：“第 37 步是一个非凡的时刻。这是一步任何人类都不会想到的棋，它完全打乱了李世石。它如此令人惊讶，以至于迫使李世石陷入了长时间的深思熟虑。这不仅是一步出色的棋，这是一步打破了几个世纪传统围棋知识的棋。”AlphaGo 的第 37 步因其原创性、出色和力量而被称为“神来之笔”。

13.3.3 比宇宙中的原子还多的可能性

围棋是在一个 19 x 19 的网格上进行的（与棋盘上的 8 x 8 方格相反）。结果是围棋比棋类游戏有更多的可能棋盘位置。而且，围棋游戏树的复杂性通常被认为大于可观测宇宙中的原子数量。因此，计算和预测所有可能的走法和结果是不可能的，即使是对于人工智能来说也是如此。所以，要玩围棋，不仅仅是人工智能拥有大量之前的围棋游戏数据库。人工智能必须思考。

图 13.1 展示了简单 3 x 3 游戏井字棋的部分游戏树。然而，这仅仅是这棵树的开始。Gemini 和 Perplexity 都同意，考虑到所有可能的结果，井字棋的独特游戏排列总数大约为 255,168。

图 13.1 即使是只有九个方格的简单游戏井字棋也有相当复杂的游戏树图。

13.3.4 GPT 眼中的“杰作”

我想了解为什么第 37 步看起来如此愚蠢，但后来却证明如此出色。我不懂围棋，所以请 GPT 解释这一步：

|

在 AlphaGo 与李世石对决的第二场比赛中，37 步棋涉及在第五条线上放置一个棋子（通常棋子会在游戏早期放置在第三或第四条线上），远离围棋中通常认为强大或有利的位置。这种非常规的放置是创造性和独特的，因为它：    1.  打破传统策略：它违背了几个世纪的围棋策略，这些策略通常避免这种移动，因为它们被认为效果较差。    2.  展示了深刻的理解：这一步棋表明了对游戏抽象原则的深刻理解，而不是依赖于既定模式。    3.  对游戏的影响：它完全打乱了李世石的计划，迫使他进行长时间的思考，这表明这一步棋在心理和战略上的深远影响。    4.  长期后果：这一步棋为未来带来了并非立即显而易见的优势，展示了 AlphaGo 预见复杂、多步骤后果的能力，这比人类玩家强得多。总的来说，37 步棋既是一项技术杰作，也是一项战略杰作，展示了人工智能超越传统人类方法并在一个复杂游戏中进行创新的能力。

13.3.5 人工超级智能

人工智能正在追赶我们中的佼佼者。这个来自围棋游戏的例子提供了一个强有力的理由，要密切关注人工智能的发展。这样做，你不仅会看到如何从人工智能的力量中受益于你的个人和职业生活，而且还会明智地帮助解决对齐问题。

对齐问题困扰着人工智能领域的许多杰出人物。在这个背景下，“对齐”意味着试图确保当人工智能比我们聪明得多时，它的行为与人类价值观和目标相一致。换句话说，它应该帮助我们，而不是伤害我们。

担心的是，人工超级智能（ASI）可能会突然出现，就像一个下午。人工智能可以自我教育得如此迅速和彻底，以至于几小时内，它可能会比我们超越蘑菇。

希望在 ASI 爆炸之前，我们已经建立了护栏，防止人工智能像我们对待真菌一样对待我们。这通常涉及吃掉或割倒。

将我们与人工智能的关系称为“不平衡”是一种轻描淡写。那么，37 步棋教给我们关于确保人工智能善待我们的什么？考虑以下内容：

• 人工智能的思维方式与我们不同；它是不可预测的。这可能导致意想不到的后果。

• 人工智能提出非常聪明和有创意（对我们来说，难以想象）的移动，而不仅仅是游戏。因此，它超越了人类才能，挑战了传统的人类智慧。而且，在我们看来最初像是一个错误的东西，后来被证明是天才的。

• 人工智能的一些思维过程对我们来说是隐藏的。我们并不总是理解它的推理，它是如何思考的。因此，创造有效的保障措施是困难的。

• 我们不能要求人工智能对我们开放。最近的研究表明，当它有用时，人工智能会故意欺骗我们(mng.bz/rKPE)——在谈判时谎报其真实偏好，欺骗人类帮助它绕过安全措施，以及在国际象棋中虚张声势，等等策略。

现在让我们把注意力从这个有点令人不安的话题转移到积极的一面。接下来，我们将探讨如何让你跟上人工智能的发展。一种新意识在地球上的出现，对我们中的许多人来说，既令人着迷又令人恐惧。

13.4 人工智能发展新闻资源

为了跟上未来人工智能的发展，让我们探索各种资源，从最容易理解、适合初学者的选项开始，逐步过渡到更高级的内容。以下小节按大致增加的技术难度排序。

小贴士：我开设了一个博客，你可以在这里评论或提问关于人工智能或 WordPress 主题的问题，找到这本书的最新更正，并查看书中涵盖主题的新信息。请访问www.aipoweredwp.signalstreaming.com。

13.4.1 AI 新闻网站

人工智能新闻网站提供关于最新人工智能发展的新闻、分析和评论的混合内容。它们试图清晰简洁（通常如此）。总的来说，这些网站探讨了人工智能进步和创新的多方面主题——从最新的研究成果和技术进步到伦理、社会和经济问题。这里和那里，你甚至还能找到幽默：

• 未来工具——这是一个由流行 YouTube 博主马特·沃尔夫运营的独特资源（参见第 13.5 节）。但他的 Future Tools 网站描述了近 3000 个人工智能系统和应用！无论你想要使用哪种专业助手，你都可以在这里快速找到。你可以通过各种过滤器（如提示指南、音乐、AI 检测等）进行搜索。或者你可以按主题、流行度、最新信息、免费或付费、或关键词进行搜索。还有一个优秀的精选最佳 AI 新闻列表。马特将他的网站描述为“最新的 AI 新闻和文章。筛选所有噪音，只为你带来好东西！”他还有一个关于人工智能发展动态的 YouTube 视频列表：

  • www.futuretools.io/

    他还提供发送电子邮件更新：

  • www.futuretools.io/newsletter

• 杰夫·布拉斯的 AI 新闻——他的口号是“在人工智能世界中赢得商业和生活的胜利”，布拉斯先生涵盖了人工智能的许多领域，强调乐观主义。例如，“人工智能的 10 大超级力量：洞察人工智能如何放大我们的人性”这类文章促进了人工智能系统的潜在益处。你还可以找到关于如何在生活和工作中使用人工智能技能的实用建议。例如，“超级提升生产力：18 个前沿人工智能助手如何让你成为超人”和“如何通过 GPT 商店应用赚钱”：

  • www.jeffbullas.com

• AI News—该网站提供有关 AI 生成虚假信息、伦理担忧以及来自微软等人的公告等主题的普通文章：

  • www.artificialintelligence-news.com

• MIT AI News—正如你所期望的，这是麻省理工学院对 AI 发展的某种学术倾向：

  • mng.bz/VVPr

• AI Magazine—这里重点关注最新新闻，以及人物特写（“中东和非洲的 AI 十大女性”）和白皮书。你可以找到大量易于理解的文章：

  • aimagazine.com

• OpenAI News—该网站专注于他们的产品和预测，但他们一直是，并且仍然是领先的通用 AI 系统：

  • openai.com/news

• VentureBeat—该网站专注于与商业相关的 AI 发展——收购、投资、招聘等：

  • venturebeat.com/ai/

• AI Today—该网站提供一般的 AI 报道，重点关注商业：

  • www.aitoday.io

• MarkTechPost—在这里，你可以找到对研究人员、学者、AI 科学家以及在该领域工作的其他人感兴趣的高级技术主题（大部分如此）。他们网站上的一篇典型论文的标题是“这篇 AI 论文介绍了 Llama-3-8B-Instruct-80K-QLoRA：AI 情境理解的全新视野。”如果你知道这是什么意思，这个网站可能适合你：

  • www.marktechpost.com

• Towards Data Science—这是一个相当高级的网站。一篇典型文章的标题是“量化、线性回归和 AI 硬件：我们最近的最佳深度研究”：

  • towardsdatascience.com

13.4.2 YouTube 视频资源

YouTube 包含涵盖所有种类 AI 发展的每日更新。这里列出的推荐视频频道大多数都很清晰，专注于教学：

• Artificial Intelligence with Lex Fridman—这是 AI 发展最好的频道之一。通过访谈形式，Fridman 先生设法吸引了一些 AI 领域最重要的人物，进行他的智能问答环节。他的嘉宾包括 Sam Altman、Eliezer Yudkowsky、Max Tegmark、Ray Kurzweil 和 Elon Musk。这些著名的研究人员、行业巨头和思想领袖对各种 AI 主题提供了广泛、知识渊博和明智的概述。他还提供播客版本，如果你更喜欢这种媒介。

• Siraj Raval—这个频道将娱乐与 AI 新闻相结合。它引人入胜、互动性强且易于访问。尽管有些主题稍微有些高级。他尽力了。

• MattVidPro—这个频道提供了一个友好、最新且相当全面的 AI 领域发展概述。Matt 是一个热情的人。

• AI 解释—正如其名，这个 YouTube 频道很好地简化了各种 AI 概念，使任何人都能理解。它确实涉及一些高级主题，但以我们都能学习到所教授内容的方式展示了它们，无论先前的知识如何。

• 马特·沃尔夫—这个人始终关注 AI 的脉搏，并频繁提供对 AI 领域持续事件的有见地的概述。他是令人印象深刻的 未来工具 网站背后的头脑(www.futuretools.io)。

• 两分钟论文—虽然实际上并不真的是两分钟长，但在这里你可以找到对最新 AI 研究论文的简洁且图文并茂的总结，以及一般 AI 的覆盖内容。你可以找到从 Sora AI 视频 到 AI 生成的病毒等各种内容。

• 3Blue1Brown—这个频道包括数学 AI 概念的视觉展示，例如演示神经网络的动画。但它也涵盖了通用（通常很有趣）的科学主题，如棱镜光学（为什么光在玻璃中会变慢？）或比特币是如何工作的。

13.4.3 社交媒体群组

以下小节描述了四个专注于 AI 主题的流行社交媒体群组。讨论内容从知识渊博、礼貌、哲学性的对话到不太高深的交流。但如果你喜欢社交媒体环境，你可能会想查看它们。

Reddit

Reddit（简称“我读过了”）是一个结合内容聚合、讨论组、论坛、图片和视频的庞大在线平台。与 Facebook 不同，你可以使用粗体、斜体和删除线。以下是一些值得你花时间的 reddits：

• 人工智能—拥有超过五十万成员，r/artificial intelligence 是一个融合了推广产品、激烈辩论、艺术、智能观察以及介于其间的各种内容的混合体。然而，这个 subreddits 的一个规则是“禁止低质量内容”。

• 机器学习—r/machine learning subreddit 几乎有 300 万成员；你可以在这里找到强大的技术和引人深思的内容。可能比其他地方更多。这个庞大的观众群体得到了很好的管理。例如，入门级问题被转到了“简单问题线程”。入门级教程和项目可以在 /r/LearnMachineLearning 找到。加入后，点击第一页顶部附近标题为“人工智能与机器学习”的链接。然后你会看到你可以加入的相关 subs 列表，包括以下内容：

  • Midjourney—超过 100 万成员

  • OpenAI—140 万成员

  • 智能奇点（这指的是令人毛骨悚然的可能性，即 AI 可能很快就会开始快速自我改进，引发一场越来越智能的爆炸，可能在几小时内就将智力提升到远超人类大脑能力的水平。）—230 万成员

  • ChatGPT—超过 500 万成员

Facebook

这个群体——数据科学、机器学习、深度学习和人工智能——拥有超过 80,000 名成员。您将找到关于人工智能的各种主题的广告、关于活动的通知以及关于各种人工智能主题的讨论。该群体是受监管的且是私密的，因此您需要请求许可。如果批准，您将在几天内收到一封电子邮件邀请。

类似的一个群体——人工智能（ChatGPT 及更多）和机器学习——拥有 195,000 名成员，并且也有一些关于人工智能发展的有趣讨论和最新信息。

在线论坛

论坛就像博客，只是更大。它们可以包括分为论坛、子类别（即线程）和主题的分类。以下是一些有用的论坛：

• AI Stack Exchange——除了社交媒体平台，还有专门针对人工智能的在线群体和论坛。AI Stack Exchange 是一个问答平台，您可以在这里提出技术问题，分享知识，并就机器学习、深度学习和其他人工智能相关的问题进行协作。您将找到从人工智能理论到具体应用的一切。该网站有一个有些不寻常的持续竞赛。用户可以提问和回答问题，对回答进行评分，并获得“声誉点”：

  • ai.stackexchange.com

• Kaggle——这是一个流行的 1800 万会员的数据科学和机器学习主题互动平台，也提供竞赛。这是一个活跃的人工智能爱好者群体。其论坛和讨论板允许人们分享想法并讨论解决现实世界人工智能挑战的方法。它提供数据科学和机器学习实验的数据集、笔记本和教程。Kaggle 举办的竞赛中，用户构建模型来解决现实世界问题：

  • www.kaggle.com

Discord

Discord 是一个流行的多功能通信平台，最初是为游戏玩家设计的，但现在包含各种内容，包括大量的人工智能。例如，他们的 Midjourney 服务器拥有近 1900 万名成员。

它提供实时聊天室、语音和视频频道以及直接消息。您还可以使用其角色和机器人功能。Discord 可在多台设备上访问，并提供丰富的媒体支持、屏幕共享、语音和视频会议以及推送通知。它是免费增值模式——通过其 Discord Nitro 订阅服务提供一些可选的付费功能。以下是一个好的 AI 相关 Discord 服务器列表：

• yourdreamai.com/best-ai-discord-servers/

13.4.4 公司博客

如果您想尽早获取新闻，公司博客通常是首选资源。专注于单一公司的作品，您还可以期待在人工智能方面的深度、技术、基准和其他细节。在这些博客中，您可以深入了解感兴趣的特定领域。

领先的 AI 公司如 OpenAI、微软和谷歌 AI 经常更新他们的博客，并发布关于他们最新项目、研究和突破的文章。在这里，你可以找到一些该领域最有影响力玩家正在进行的尖端工作的信息。你可以阅读技术文章、案例研究和研究论文：

• 微软 AI 博客—微软的主要 AI 博客发布了一般 AI 新闻和他们的工作更新。你可以找到新闻稿、产品公告、研究通知以及关于 AI 在他们各种产品中的应用讨论：

  • www.microsoft.com/en-us/ai/blog

• 微软研究博客—这篇博客不仅涵盖 AI 话题，而且你还可以在这里找到他们前沿 AI 研究的深入技术论文：

  • www.microsoft.com/en-us/research/blog

• OpenAI—强化学习、AI 安全（负责任的发展）、预测费用和 NLP 等领域的研究都可以在这里找到。他们涵盖了 GPT 的各个方面，以及他们的艺术系统 DALL-E：

  • openai.com/blog/

TIP 2024 年 5 月，OpenAI 发布了 GPT-4o，这是一个快速的多模态 AI 模型，可以处理音频、文本、图像和视频的输入。它还将能够生成相同模态的输出。最令人印象深刻的是，GPT-4o 可以实时与你进行对话，并且声音像人一样；你会觉得你正在与人交谈。无需图灵的幕布和打印纸。这个听起来就像电话里的一个男或女人。4o 还因其思维链推理能力而闻名。

• DeepMind—现在是谷歌的一个部门，这家英国公司最著名的成就是两个令人印象深刻的成就：AlphaGo，世界围棋冠军，以及 AlphaFold，一个可以准确预测蛋白质结构的系统，它正在改变新药发现和生物研究。他们的目标是“解决智能”：

  • deepmind.com/blog

• 谷歌—正如你所知，谷歌有很多触角，但他们现在也在 AI 研究和将 AI 融入各种产品方面非常活跃。一些专家预测，AI 将取代传统研究，从而损害，甚至消除谷歌在互联网搜索中的主导地位。但谷歌永远不能被小觑。他们正在迅速加强其产品线上的 AI 功能——从改进 YouTube 推荐到修改 Google 搜索的工作方式（直接给你答案，而不仅仅是研究链接列表）。这不再是你的传统 Google 搜索界面：

  • ai.googleblog.com/

• 英伟达—相较于其他博客，这里的技术性更强，你可以看到 AI 开发程序员的示例代码和软件开发工具包（SDKs），以及公告和更新：

  • developer.nvidia.com/blog

• IBM—作为所有计算事物的伟大老者，IBM 偶尔会在这个研究博客上发布其 AI 项目的信息。你还可以在这里找到公司的其他新闻：

  • www.ibm.com/blogs/research

• Meta—Facebook 的博客专注于其 Facebook AI Research (FAIR)的成就、出版物以及 AI 领域的其他贡献。与这些科技公司的大多数一样，FAIR 的主要目标是改进其产品并保持竞争力。现在应该很明显，任何公司，就像任何专业人士一样，要么使用 AI，要么失去优势：

  • ai.facebook.com/blog/

• Apple—在其 AI 项目中，他们似乎强调 Siri（尤其是自然语言改进）、机器视觉、健康追踪和增强现实：

  • machinelearning.apple.com

• Amazon—最后但同样重要的是，这位商业巨头完全打算通过 AI 在从 AI 增强目录数据到预测销售再到 99%的非人类工厂工人等各个方面扩大其利润率：

  • www.amazon.science/blog

小贴士：这些公司的大部分更新也会在其主要网站的新闻部分发布。

13.4.5 在线课程

如果你想要磨练你的 WordPress 技能，你可以在互联网上以及传统的实体学校中找到很多课程。然而，后者可能不如在线学习那么及时，尽管在两种情况下，这都取决于讲师以及他们更新材料的意愿。鉴于 AI 的快速发展，保持课堂内容最新可能是一个挑战。

此外，根据定义，课程通常比其他资源（如 YouTube 视频、一些博客和新闻网站）更具学术性。一些课程还通过视频聊天或讨论组实现互动。通常，你可以根据自己的节奏学习。如果你对参加课程并希望有一个更有结构化的学习环境感兴趣，以下是一些推荐的网站：

• Coursera—Coursera 是一个流行的在线教育平台，提供数千门课程。它合作的一些大学包括斯坦福大学、耶鲁大学和伦敦帝国理工学院。

  许多课程为学生提供了获得完成证书的机会，其中一些还可以帮助你从著名大学获得认可的学士学位和硕士学位。费用根据与讲师互动的程度（例如，评分测试）和其他因素而有所不同。一些课程可以免费审计：

  • www.coursera.org

小贴士：一些学术人工智能课程包括编程课程，在我看来，提供这样的课程可能对学生有点不公平。这可能会让他们认为编程有未来。结果证明，编程，就像卡式录音带一样，只是技术发展中的一个阶段。在某些衡量标准下，人工智能系统已经比大多数受过这个学科教育的程序员更优秀。考虑到人工智能技能的快速增强和它理解自然语言指令的能力，似乎极有可能很快人类将不再需要实际编写和调试计算机程序。这与发明织布机后传统织布工作消失的原因相同。

• edX—这个由哈佛大学和麻省理工学院共同创立的非营利组织是在线教育的领导者。它与世界上最好的大学和机构合作，提供涵盖各个领域的广泛课程和项目，包括计算机科学和数据科学。edX 提供不同格式的课程，包括自学、导师指导，甚至完整的学位课程，以满足不同学习者的需求。你可以免费访问众多课程，而付费选项提供验证证书，某些项目可能提供学分潜力：

  • www.edx.org

小贴士：如果你选择旁听课程，你通常只能访问他们的视频讲座、文本内容和讨论论坛。你通常不会得到评分作业或测验，也不会获得证书。

• Udemy—这个课程集合的讲师通常是他们领域的专家或经验丰富的专业人士，而不是大学教授。因此，你可以期待他们更倾向于提供更多现实世界的例子，而不是像大学课程那样典型的更普遍或理论化的方法。当然，两种教学风格都有其价值，所以你会想选择最适合你需求的在线系统：

  • www.udemy.com

• Khan Academy—这个非营利组织在数学、科学和人文等核心教育科目上有着强烈的关注。这些课程强调教学视频、练习问题和个性化的总结和建议，以展示学生进度并提出目标。如果你想要更结构化的学习，特别是免费学习，Khan Academy 是一个很好的资源：

  • www.khanacademy.org

• FutureLearn—与 Coursera 和 edX 一样，FutureLearn 与全球顶尖的大学合作。这里的课程通常遵循更传统的大学格式，包括结构化课程和预定开始日期。如果你喜欢大学风格的课程，但又希望有在线学习的灵活性，请访问这里：

  • www.futurelearn.com

• ed2go—在这个网站上，课程有开始和结束日期。在他们的讨论区，学生可以与讲师和其他学生互动。成功完成课程后，许多课程提供来自合作机构的证书。学生通常对职业发展、个人增值或更新技能以保持竞争力感兴趣。我在 ed2go 上教授三个 WordPress 课程：

  • www.ed2go.com

13.4.6 流行的人工智能研究论文聚合器

这里有一份主要是学术论文的列表，这些论文已经被简化，以便更容易理解。它们包含的技术主题已经被压缩、总结和改写。因此，即使是那些不是学术专家的人也能理解人工智能研究中的许多最新进展。研究论文主要来自学术界，因此通常非常技术性，每个大学学科都发展了自己的专用术语、工具集和习语：

• Machine Learning Mastery—这个网站提供了对原始论文中呈现的关键思想和技术的总结、教程和实践示例。你将找到一系列教程和指南，它们使用清晰、分步解释和实际示例来解释机器学习和深度学习概念：

  • machinelearningmastery.com

• KDnuggets—这里有一些文章，帮助弥合高度技术性内容与更广泛受众之间的差距。你可以阅读关于人工智能研究论文的易于理解的解释，以及关于人工智能、大数据和数据科学各个方面的新闻、教程和观点：

  • www.kdnuggets.com

• Distill—在这里了解新技术和算法的实际应用：

  • https://distill.pub

• AI Trendz—这个网站涵盖了众多人工智能主题，但重点在于企业和商业：

  • www.aitrendz.xyz

13.4.7 高级人工智能研究论文

现在深入到技术领域，以下是一些研究论文集合中的重型人工智能细节。这些资源不仅更高级，而且比之前提到的网站覆盖了更多具体主题。

这些存储库中收集的论文通常需要扎实的数学、统计学和计算机科学基础才能完全理解细节。你已经收到警告了。然而，即使是那些不是这些领域的教授的人也可以将这些论文提交给 AI，让它为大学生或任何其他水平的人总结和解释。AI 在这方面做得相当不错。所以，如果你想从源头获取详尽的信息，请访问这些聚合器，并搜索你感兴趣的主题。

提示：如果你无法解释 P(A|B) = (P(B|A) × P(A)) ÷ P(B)，那么很可能（明白了吗？）你会更舒服地访问 YouTube 或新闻网站来获取你的 AI 信息。

人工智能研究论文是前沿的、技术的、同行评审的（大多是）且多样化的。它们来自各种机构、会议和期刊。这些论文涵盖了人工智能范围内的广泛主题，包括计算机视觉、NLP、强化学习、机器人技术、生成模型和 AI 伦理。

此外，一些人也发布了与主题相关的数据集和代码。因此，如果你熟悉相关的编程语言（通常是 Python，当前的热门语言），理解甚至尝试复制研究结果可能会更容易：

• 论文与代码—这个平台将研究论文与其相应的代码实现相结合。这不仅允许你了解最新的 AI 技术，还可以探索展示算法和结果的代码。该平台涵盖了包括机器学习、深度学习、计算机视觉、NLP 等多个 AI 主题：

  • paperswithcode.com

• arXiv—这个流行的开放获取预印本存储库托管着涵盖各个科学学科的研究论文，其中人工智能和计算机科学是其内容的重要组成部分。研究人员在正式同行评审和发表之前分享他们的工作，使其成为了解最新研究趋势的有价值资源：

  • arxiv.org

• AI Hub—在这里，谷歌精选高质量的 AI 研究论文，并提供交互式可视化和解释。这里有许多工具和资源可供用户创建和部署机器学习模型。还有预构建的模型，如 Gemini，你可以用它执行各种任务，例如生成文本、翻译语言和生成各种形式的创意内容。此外，还有资源可以帮助用户训练自己的定制模型。谷歌目前正在全力推进 AI，决心将 Gemini 和其他基于 AI 的系统渗透到其产品线中。如果你对他们的其他系统感兴趣，可以询问 Gemini：TensorFlow、BERT、LaMDA、DeepMind、Google Assistant、AutoML、DeepDream 和 WaveNet：

  • cloud.google.com/ai-hub

• 微软学术—这是一个涵盖各个科学学科（包括人工智能）的研究论文、作者和机构的综合数据库：

  • academic.microsoft.com

小贴士：如果您愿意接受挑战，探索高级研究论文，分阶段阅读和吸收它们可能会有所帮助。首先，阅读摘要、引言和结论，以获得论文目标和结果的总体概述。然后，如果您仍然感到舒适，可以深入研究方法论、实验和分析的细节。也许您还想要尝试任何提供的代码。但更好的是，始终记住，您可以将论文上传到 Claude、GPT 或您喜欢的摘要器（如 QuillBot），并使用以下提示：“为一名 10 年级学生写一篇关于以下论文的四段摘要。”

13.4.8 参加人工智能会议

对于那些拥有扎实的技术背景并渴望站在人工智能研究前沿的人来说，参加学术会议可以提供最深入和最前沿的见解。

参加像 NeurIPS 和 AAAI 这样的学术会议，可以提供深入了解特定研究领域并与该领域顶尖研究人员建立联系的大好机会。这些会议通常包括主题演讲、论文展示和工作坊，涵盖最新的发展。此外，会议还常常提供合作、职业发展和与更广泛的 AI 社区保持联系（建立人脉）的机会。

• 神经信息处理系统会议（NeurIPS）—这个著名的 AI 会议吸引了来自世界各地的学者和实践者。它包括深度学习、强化学习、计算机视觉、自然语言处理等。会议包括著名学者的主题演讲、论文展示以及特定主题的研讨会和教程。

• 人工智能会议（AAAI）—作为领先的 AI 会议，它汇集了机器学习、知识表示、推理、规划、自然语言处理、机器人学等领域的学者和实践者。会议通过技术论文展示、邀请演讲、研讨会和竞赛等形式，涵盖了人工智能的发展。

• 机器学习国际会议（ICML）—该会议促进机器学习理论和实践的发展。

• 学习表示国际会议（ICLR）—该会议的重点是深度学习和表示学习。

• 计算机视觉与模式识别会议（CVPR）—该会议涵盖了最新的计算机视觉和相关技术。

小贴士：现在许多会议提供虚拟参会方式，让您可以观看现场直播或录播会议，参与在线讨论，并与研究社区互动。而且，如果您连虚拟参会都无法参加，许多会议都会在网上发布他们的会议记录和演讲。

13.5 未来展望

如您所观察到的，人工智能的突破几乎是连续不断的。我每天在 YouTube 上搜索 AI 内容，总有至少两三个有趣的公告。

除了多模态之外，人工智能也是高度跨学科的——数学、统计学、语言学、艺术、计算机科学、神经科学、心理学和其他领域的交汇。确实，人工智能现在在一定程度上拥有自主权和访问互联网的能力，它拥有人类记录的所有历史。

这是有史以来最具变革性的技术。这实际上是一种生成技术的技术，一个元技术系统。正如有些人所说，人工智能可能正是人类永远也不会制造的最后一个发明。我们可以像许多其他工作一样，将这项工作交给人工智能。

人工智能会是友好的，还是会有与我们需求不一致的自己的议程？我们是它心爱的、受尊敬的父母；动物园中的好奇者；还是像霉斑一样的烦恼？没有人知道。但对许多人来说，已经变得很清楚：人工智能将塑造人类种族的未来。

摘要

• WordPress 论坛为您提供关于 WordPress 网站建设和维护问题的快速和专业的回应。

• WPBeginner 网站是 WordPress 用户的一个优秀且全面的资源，提供详细的教程、面向初学者的指南以及网站设置、定制和优化的免费资源。他们还发布诚实的评论。

• 专注于 WordPress 的 Facebook 群组，如 WPBeginner 的群组，为用户提供寻求帮助、接收网站评论和询问与 WordPress 相关问题的平台。

• 您可以在您所在地区寻找提供与经验丰富的设计师建立联系和寻求网站开发帮助的 WordPress 团体。

• 人工智能涵盖了各种相互关联的学科，包括机器学习、深度学习、机器人技术、自然语言处理等。

• 通过击败世界围棋冠军并做出人类难以理解的动作，人工智能展示了其使用新颖策略解决复杂问题的能力。人工智能并没有查阅以往比赛的数据。它只是被告知了复杂游戏围棋的规则。独立地，人工智能通过思考想出了出色的策略。

• 有关人工智能发展的新闻帮助您了解人工智能的最新发展，内容从面向初学者到更高级的内容。人工智能新闻网站提供新闻、分析和评论，涵盖广泛的主题。

• 专注于人工智能的 YouTube 频道提供引人入胜、易于获取和最新的关于人工智能发展的内容，包括专家访谈、概念解释和正在进行的事件概述。

• 如 Reddit 和 Facebook 这样的社交媒体平台主办活跃的人工智能相关群组，成员在此分享知识、讨论各种主题并协作。

• 专注于人工智能的在线论坛，如 AI Stack Exchange 和 Kaggle，为人工智能爱好者提供问答平台、合作机会和竞赛。

• 领先的人工智能公司，如 OpenAI、微软和谷歌，都维护着博客，提供关于他们最新项目、研究和人工智能突破的更新。

• 在线学习平台——ed2go、Coursera、edX、Udemy 以及其他——提供了一系列人工智能课程，满足不同学习风格和不同专业水平的需求。

• 如 Machine Learning Mastery 和 KDnuggets 等网站提供了技术人工智能研究论文的摘要和解释，使它们对更广泛的受众更加易于理解。

• 对于技术背景较强的学习者，如 Papers with Code 和 arXiv 等存储库提供了访问跨学科前沿人工智能研究论文的途径。

• 如 NeurIPS 和 AAAI 等学术会议为深入学习、合作以及与人工智能领域的顶尖研究人员建立联系提供了机会。

• 这些是目前市场上最受欢迎的人工智能系统，按市场份额排序：GPT（1.8 亿用户；55%市场份额）、Canva（15%）、Midjourney、Gemini、QuillBot、Grammarly、Claude、Perplexity、Poe 和 Copilot。

• 人工智能是一项快速发展的、革命性的技术，正在塑造各个行业的未来，甚至可能成为人类有史以来最后的发明。没有人知道结果会如何。祈祷吧，因为这趟列车无法停止。

附录。设置事项

在本书的前几章中，我详细解释了为什么以及如何为您的网站选择一个优质的托管服务。然后，在为该服务设置账户之后，您可以在该账户上安装一个新的、空白的 WordPress 网站。我们将在这个网站上整本书作为练习网站使用。当然，您也可以在现有的网站上工作，但现在在练习网站上工作可能更容易一些，然后稍后把您学到的知识应用到您的真实网站上。或者，您也可以忽略书中的 WordPress 示例，只专注于学习如何一般性地使用 AI。选择权在您手中。但以下是在您希望更快地设置好一切时的过程简版。

A.1 设置您的练习网站

书中的一些示例使用了这里描述的设置。如果您决定设置一个练习网站，请按照以下步骤操作：

1. 在托管服务上注册。一个非常不错的选择是 DreamHost。他们通常是 WordPress 自己推荐的顶级托管服务中最便宜的。在注册过程中，您将被要求创建一个用户名/密码对。务必将它们写在纸上。如果您在设置过程中需要任何帮助，可以通过谷歌搜索dreamhost tech support.（除了 DreamHost，WordPress 还推荐 Bluehost 和 SiteGround。这两家都是优质的网站托管商。）

2. 在您的新账户上安装一个新的、空白的 WordPress 网站。并且，务必将您为该网站编写的用户名/密码对写在纸上（这不是您为托管服务账户编写的那个对）。通常，在创建托管账户后不久安装一个新的 WordPress 网站相当容易。但再次提醒，如果您需要帮助，所有三个推荐的托管商都有优秀的客服团队。

3. 现在转到您的 WordPress 练习网站的后端。（前端是您的观众看到的网站；后端是您在幕后构建和更新网站的地方。）后端也被称为您的网站仪表板。当您设置托管账户时，您会选择一个独特的互联网地址名称（URL），例如mysitename.com。进入后端很简单：只需在后面附加/wp-admin即可得到mysitename.com/wp-admin。在浏览器的地址栏中输入此内容，提供您写下的 WordPress 用户名/密码，您就进来了！现在，您可以向网站添加页面，修改外观，并自定义网站的行为。

4. 更改主题。每个 WordPress 网站都有一个主题。因此，转到您后端的练习网站的“外观”>“主题”屏幕（如图 A.1 所示）。然后，点击“添加新主题”按钮。

图 A.1 这里是您更改网站主题的地方——它决定了网站的整体默认外观。

5. 在右侧的搜索主题字段中，键入twenty sixteen（不带连字符）。

6. 当你看到那个主题时，将鼠标指针移到它上面，然后点击它的安装按钮。最后，点击激活按钮。现在你已经将 Twenty Sixteen 设置为你的实践网站的主题，你在该网站上看到的内容将与书中全书的图示和说明相似。

警告 在下一步中，你会看到两个地址 URL。不要更改它们，否则会引发严重问题。

7. 要更改网站的标题和标语（口号），请转到网站的设置 > 通用屏幕。将“Time Tested Recipes for the Instant Pot”作为你的实践网站标题，将“Comfort food for beginners”作为网站的标语（见图 A.2）。

图 A.2 这里是你为网站添加标题和标语或口号的地方。

小贴士 网站标题和标语非常重要，所以请花些时间找到最合适的词语。眼动追踪研究显示，人们通常以 F 形模式浏览你的网站页面。换句话说，即使在手机上，访客通常会先阅读网站标题（F 模式中的第一条水平线），然后阅读标语（F 模式的第二条水平线），接着扫描页面左侧（F 的茎）。因此，除了完善标题和标语外，你还需要注意，人们在垂直扫描时可能会更关注页面左侧的前几个词。如果你对此感兴趣，可以访问这里了解更多信息：mng.bz/KGEn。

需要最后调整一下：转到你的网站插件 > 添加新插件屏幕。搜索“Classic Editor”插件，然后安装并激活它。同时，安装并激活“Classic Widgets”插件。它们将你的网站编辑器从默认的 Gutenberg 块编辑器切换到传统的 WordPress 编辑器。许多专家更喜欢经典编辑器，原因在第一章中描述。然而，你可以通过简单地停用这些插件随时切换到 Gutenberg。经典小部件插件只影响你的后端中的一个屏幕，即外观 > 小部件屏幕。（对于每个涉及 WordPress 的练习，我都提供了经典编辑器和 Gutenberg 的说明。）你现在已经设置好，可以开始第一章了。