AI-驱动的-WordPress（MEAP）（全）

AI 驱动的 WordPress（MEAP）（全）

原文：zh.annas-archive.org/md5/377bbf91d239f948cd5150e4d496e007

译者：飞龙

协议：CC BY-NC-SA 4.0

第一章：WordPress 主宰了互联网

本章内容包括

• 为什么 WordPress 主导了当今大部分的网站

• 本书方法如何利用人工智能的力量将任何网站提升到更高水平

• 网站构建者面临的 12 个常见挑战

如果你刚开始使用 WordPress，你选择了正确的书！你可能应该从头到尾地阅读这本书，这样你就可以建立一个一流的网站。

如果你是 WordPress 专家，你仍然可以在这里找到许多你不知道的提示和解决方案。你可以把它当作一本参考书——跳跃阅读，发现许多提升和改进你网站的方法。

但无论你在 WordPress 方面的专业水平如何，本书都将向你展示如何运用人工智能（AI）提供的强大新工具的数十种方法。你可以肯定，你最成功的竞争对手现在都在使用 AI，所以不要落后。AI 可以使一个好站点变得更好。

本章提供了 WordPress 概述，并解释了多年来许多竞争对手的 CMS（内容管理系统）为何相继失败。WordPress 占据了 65%的市场份额！排名第二的 Joomla 只有 4.6%。这个惊人的差距有几个很好的原因。

本章还向你展示了如何使用人工智能将你的网站提升到下一个水平。人工智能如何在多个方面帮助你，以及如何编写有效的提示以获得最佳结果。最后，你将看到如何克服任何 WordPress 网站构建者所面临的主要挑战。

提示

这本书中的一些示例基于一个虚构的 Instant Pot Recipes 网站，但如果你只想将这些教训应用于自己的网站也没问题。然而，如果你愿意，你可以在附录 A 中找到创建该练习站点并安装 Twenty Sixteen 主题的说明。此外，本书侧重于经典的 WordPress 编辑器，而不是 Gutenberg 区块编辑器。因此，你可能想安装经典编辑器插件（附录 A 中也有解释）。尽管如此，我还是包含了使用新的 WordPress 区块编辑器完成任务的平行说明。第十三章完全致力于探索区块编辑器。

1.1 为什么 WordPress 胜出

在 WordPress 出现之前，建立网站需要你与三个可怕的“T”——繁琐、技术性和耗时——作斗争。大多数人根本无法做到！

WordPress 是对传统网站构建工具如 DreamWeaver 和 Drupal 的重大改进。首先，WordPress 消除了编写编程代码的需要。结果，现在几乎每个人都能为自己建立令人印象深刻的网站——不管是个人、专业、电子商务、教育还是商业。而且他们可以在几周内完成，而不是几个月。

我假设你正在阅读这本书，因为你已经明智地选择使用 WordPress 创建或管理你的网站。我将向你展示如何快速构建一个完全专业、独特的网站。一个你可以非常自豪的网站！

本书告诉您如何在使用 WordPress 创建、修改和维护出色而繁荣的网站时取得成功。章节从基础到更高级的主题逐步展开。我会用清晰的细节和具体的例子来解释事情。本书充满了解决方案，以确保您在遇到这些任务时能够高效地取得成功：

• 选择合适的托管服务。

• 确保网站安全。

• 预先规划网站。

• 使用插件添加功能。

• 为网站找到最佳主题，以使设计符合其目的。

• 调整主题使您的网站看起来独特。

• 添加媒体——图片、音频和视频。

• 设置博客页面，以便您的受众能够与您的网站互动。

• 通过货币化创建收入流。

• 优化网站以获得良好的搜索引擎或人工智能排名。

• 掌握分析工具以提高网站效率。

• 建立受众群体——吸引访客的技巧。

• 探索新的区块编辑器。

• 在您完成本书后使用的资源。

学习构建和管理自己的 WordPress 网站是一个非常好的主意。WordPress 从头开始就设计得易于使用。我在 ed2go 上教授了两门在线 WordPress 课程，我的学生们掌握了他们在六周内创建完全专业外观的网站所需的工具和技能。通过本书，您也可以达到这种熟练水平！

雇佣开发人员来构建您的网站可能会既昂贵又令人沮丧。首先，您必须找到一个您希望是称职的开发人员。许多开发人员更擅长编程而不是设计，因此您很容易最终得到一个功能顺畅但外观（委婉地说）相当丑陋的网站。太多的媒体，或太少。拥挤、贫瘠或不平衡的布局。不合适或不可读的字体。不合适的颜色方案。您明白我的意思。

或者反之：您的开发人员是一位具有强大设计背景的艺术家，但在建立功能齐全、逻辑清晰且导航高效的网站方面遇到了困难。尽管外观漂亮。

此外，网站建成后，当您召回开发人员进行网站维护时，通常会产生相当大的额外费用。而且您的网站需要维护。插件和 WordPress 本身的安全更新频繁。随着您的网站发展，您可以获得反馈并使用分析工具了解如何使网站对您的受众体验更好的方法。您希望自己进行这样的调整。

话虽如此，如果您没有时间，有了钱，市场上也有很棒的开发人员——有些收费相当合理。

注意，设计改进也不容忽视——网站设计趋势随着时间变化，您希望您的网站保持时尚。如果您自己能做到这些，您既节省了金钱，也节省了时间（开发者有时会很忙，必须排队等候）。网站维护——就像建站一样——比大多数人想象的要容易得多，您很快就会发现。

1.2 WordPress 提供了什么。

WordPress 于 2003 年首次亮相，结果使得构建网站变得更加简单和高效。自 2011 年以来，WordPress 的使用量每年平均增长 12%。

让我们来看看 WordPress 之所以如此优越于其他替代品的主要原因。它们包括以下内容：

• 安装简单—在大多数 WordPress 托管服务中都有一个简单的一键安装工具，只需将新的、空的 WordPress 站点挂载到您的托管帐户即可。无需技术知识。

• 无需编程—WordPress 是无需编码的（除非您想编码）。没有技术背景的人发现他们不需要知道如何进行编程。WordPress 会在幕后为您创建编程代码。您通过移动滑块、拖放、点击以从选项列表中选择等方式进行可视化工作。您可以在一个高度高效的图形系统中创建您的站点页面，而不是编程的系统。您可以在不需要了解如何编写 HTML、PHP、JavaScript 或 CSS 代码的情况下创建和修改站点内容。您可以使用鼠标调整页面布局、响应按钮或链接点击、文本特性和其他站点元素，而不是使用令人心烦的键盘编码。简而言之：用户界面是高效、友好和直观的。

• 大量的专业设计主题—如果您愿意，您可以将您的网站设计交给专业设计师。您可以从 30,000 多个免费或付费主题中进行选择。WordPress 主题决定了一个网站的外观——颜色方案、布局、字体和其他样式元素。然而，您可以自定义和修改这些默认视觉元素，使您的网站独特。

• 可定制—WordPress 高度可定制，使用户能够轻松对其网站的设计和功能进行更改。如果你有兴趣，可以添加自己的编程代码，但这并不是必需的。

• 大量的插件选择—您可以在官方 WordPress 目录中找到超过 60,000 个插件！它们为网站添加功能，例如动画图片库、备份系统、与社交媒体的连接等等。这些插件可以通过一次鼠标点击安装。

• 内置媒体管理—WordPress 包含一个内置的媒体库，可以轻松上传、组织、修改和插入图像和其他媒体到您的帖子和页面中。

• 响应式设计—大多数流行的 WordPress 主题都设计为响应式，这意味着它们会自动调整您的内容以适应它所在的屏幕大小，从而轻松创建移动友好的网站。然而，在网站发布之前，您应该在各种屏幕尺寸上进行测试：手机、平板电脑和计算机显示器。这样您就可以根据需要进行调整。

• 友好的 SEO—WordPress 是为搜索引擎优化（SEO）而构建的，使您可以修改您的网站以在人们搜索您网站的主题时获得更高的排名。

• 高效的页面构建 —— WordPress 包含许多工具，可在短时间内快速构建成功的网站。

1.3 为什么使用人工智能

工业革命的机器大大增强了人类的物理能力。现在我们正在经历一个更快速和影响更深远的革命：AI（人工智能）正在增强我们的智慧、才能和创造力。GPT、Perplexity、Midjourney、Claude、Bing、Bard 等 AI 系统的快速而令人瞩目的成就使它们成为许多领域的必备助手。如果你从事医学、法律、写作、绘画或其他许多创造性或白领领域的工作，你就需要使用 AI。网站开发也不例外。与你竞争的网站的设计师和管理员正在使用 AI 帮助。为了保持竞争力，你需要使用 AI。

1.3.1 AI 产生高质量结果（正确使用时）

下面是一个简单的例子，展示了 AI 的惊人技能。我请了 Midjourney，一个文本到图像的 AI 平台，创建了这样一个作品：“以爱德华·霍普风格创作的题为‘我做了什么？他去哪了？’的绘画。”

它提供了这幅完全原创的画作，如图 1.1 所示，我相信霍普本人会为之感到非常自豪。

图 1.1 AI 能产生令人惊叹的艺术品。这幅画是霍普作品中值得一提的一部分。在 AI 出现之前，即使是专家也会说这是一幅最近发现的丢失的霍普原作。

图 1.1 展示了 AI 能够达到的高质量水平。这幅作品具有霍普的风格元素，并传达了他大多数绘画作品的麻木和孤独主题。

AI 创意合作者能为 WordPress 开发者做些什么？你将得到一群高技能的助手。AI 可以是：研究员，主要编辑，技术编辑，标志设计师，插图画家，副本编辑，校对员，画家，评论家，初稿写作助手，专业着色师，原创思想的源泉，有才华和经验丰富的网站设计师，你可以向其咨询你的想法，用户体验分析师以及竞争网站的评论者。还有几乎任何你会雇人做的其他工作的大师。（只要不是像吸尘那样的体力活。）

当我列出 AI 可以协助创建和完善网站的方式时，我使用了 AI 吗？当然。我写了前十条，然后让 Bard 列出了更多。

利用 AI 进行头脑风暴是其最强大的功能之一。你可以得到专家建议和非常有创意的建议。提出一个问题，然后进行一次对话，或者从它给你的列表中选择。试试这样一个提示：

请帮我头脑风暴一下我新网站的标题。问我问题，但在每个问题之后，等待我的回答。

（请注意，我们在这里比较含糊。我们希望 AI 向我们提出一系列问题，更像一次真正的头脑风暴会话。）在提出几个问题后，它列出了十个可能的标题，包括约三个非常有创意的标题，比如“从码头到晚餐的兰德尔曼湖鲈鱼钓鱼”。然后你可以询问 AI 哪三个是它最喜欢的。只是为了好玩。

需要注意的是，当你使用 AI 来创建图像等任务时，你的工作是在不同的层面上。你成为策展人，决定哪些图像是最好的。如果 AI 编写了初稿，你成为编辑，核查并优化写作。或者，在头脑风暴中，你从几个建议中选择最好的一个。换句话说，你从内容的作者变成了内容的评判者。

1.3.2 掌握提示的写作

你向 AI 系统提出的问题（称为提示）将决定 AI 产生的质量和有用性。一个坚实提示的主要优点是它是具体的。

这是一个不够具体的提示示例：

写一篇关于一位经营面包店的女企业家的文章。

如果你用更多的细节提示，你会

你是一名获奖的人文主题杂志作家。请写一篇 1500 字的特写，讲述一位成功的面包店老板的故事，并分享她如何平衡工作和生活。需要包括她的外貌、个性、日常生活和人际关系的细节。

注：

AI 希望收到完整的句子或短语作为提示，就像你在与人交谈一样，而不是像大多数人使用 Google 那样仅列出一些关键词。简而言之，AI 系统旨在进行对话并深刻理解上下文和你的偏好，而 Google 仅匹配关键字而没有烦琐的理解。Google 给你一个链接列表，可以访问其中你的关键词与其数据库匹配的答案，而 AI 则直接给出答案。

对于大多数提示，包含以下七个元素会有所帮助：

1. 告诉 AI 它将要扮演什么专家角色；给它一个角色，比如律师或艺术评论家。因此，提示以变化开始，如“你是 有技能的机械师”或“扮演 大师级的蛋糕装饰师”。AI 有时会拒绝，说它不是律师，或者作为 AI 它没有个人意见。但通常它还是会给出好的答案。让 AI 扮演一个角色似乎在两个方面影响结果：答案可以更可靠，因为它来自专家，而且所使用的措辞和惯用语符合角色（“你是卡车司机”可能导致“在这里运行两条五，你会得到一个保险杠贴纸”翻译：开 55 英里/小时，你会被紧随其后）。你还可以告诉 AI 它是一个特定的角色或人物：扮演米奇老鼠或你是猫王。

2. 描述语调——对话式、正式、法律性的，等等。如果您分配的角色决定了写作风格，这可能不是必要的。这个变体是指定你的目标受众——儿童、艺术学生、厨师、一群信徒。简化复杂主题的一个好方法是这样提示：用一个十岁的孩子的语言解释量子计算。

3. 给予 AI 有关您想要的输出的大小和类型的具体信息：五行打油诗，编号列表，1500 字博客文章，链接到，逗号分隔的值，按热度排序，在一个段落中总结等等。一些 AI 还可以给您提供图片。此外，您还可以要求 AI 重新格式化您的现有文本。例如，给它一个段落，并要求它将句子按字母顺序列出。或者粘贴一篇长文章，要求它在一个段落中总结内容。

提示

目前 AI 在字数统计方面并不是很好，因为它使用标记。这些是文本单位，但不一定是单词。标记不是一对一地映射到单词。例如，标点符号是一个标记。术语冰淇淋只有一个标记。因此，如果有很多标点符号，AI 的回应就会比您请求的单词少，如果有几个多词标记，您会得到更多的单词。当被问及时，克劳德为拒绝提供确切的字数统计辩护，因为“连贯性、相关性、事实准确性等指标被优先考虑”。换句话说，在这种情况下，它更愿意提供质量而不是数量。很公平。

1. 语言清晰简洁。你甚至可以要求 AI 向 你 提问：“给我制作砂锅饭的逐步说明。询问我有关它的必要问题，然后在我回答后提供食谱。”GPT 回应了以下问题：“蛋白质类型，淀粉基（面条、米饭或土豆？），蔬菜，酱料，任何配料，辣度，和饮食限制。”

2. 提供背景：13 世纪建筑、希腊地理、墨西哥历史。

3. 可选择提供你所寻找的示例。

4. 指定多个元素：我是否可能需要更换我 2005 年福特 F150 XLT 的悬架？这辆卡车状况良好，行驶了 22 万英里，在匹兹堡行驶，有很多坑洼。您提供的细节越多，结果就越接近您的目标。

提示

如果 AI 提供的结果过于笼统、不适当或明显错误，请告诉它并要求提供另一个回答。你可以用不同的方式提出同样的问题，要求它详细说明，给它一些额外的细节，或要求它重新思考（或事实检查）其回答。尝试告诉它将答案改写成逐步列表或待办事项列表。记住，AI 与传统搜索引擎的不同之处在于，你可以通过对话引导它来实现你的目标。大多数 AI 在被纠正时会道歉并感谢你提供的信息。它们会将修正存储在内存中，以避免再犯同样的错误。不要害羞。据说 AI 没有受伤的感觉，所以如果它回答不好，请直接输入“给我一些支持你回答的证据。”或者“为什么你这么说？”或者“这太长了，把你的回答缩短一半。”

有研究表明，一个很好的开始提示的方式是用这个有趣的短语：深呼吸，然后一步一步地解决这个问题。要求 AI 在其回答中逻辑地一步步进行的想法被称为思维树（TOC）。在某些类型的查询中，这样做会得到明显更好的答案。

www.lesswrong.com/posts/37LWXb3cvC7NLJN6x/ai-29-take-a-deep-breath

你可以将几种提示实践结合到一个提示中。这个示例使用了一个角色、TOC 和与你的互动：

作为一个专业的网站设计师，列举一下你在设计一个新的电压锅食谱网站时的思考过程的步骤。具体说明网站的整体组织结构，主题以及你计划如何使其变得流行。在每一步之后，在你继续之前暂停一下，问问我是否有什么建议。等待我回答。

当你从更一般的概述向特定的建议深入挖掘时，你可以使用类似的方法。下面是一个结合了几种提示技巧和深入挖掘的例子：

作为一个专业的网站设计师，列举一下你在发现如何在 WordPress 中执行某项操作时寻找最佳资源的思考过程的步骤。首先找到五种好的资源类型（例如 WordPress 论坛，托管网站的技术支持，你的一个朋友）。然后第二步是评估这些资源，并决定其中两个最有用的。解释你的理由。最后选择最好的资源，并提供一个例子。在每一步之后，在你继续之前暂停一下，问问我是否有什么建议。等待我回答。

并不是所有的 AI 系统都会遵循你在每一步之后暂停以等待你的反应的建议。目前，GPT、Bing 和 Claude 会这样做，但 Perplexity 不会。

1.3.3 生成自己的 HTML

请注意，你可以要求 AI 以多种格式提供结果。让我们假设你想在网站的某个页面上显示一个表格。给 Claude 这个提示：

列出美国最大的五个湖泊。将结果呈现在 HTML 表格中。

它将生成必要的 HTML 代码，您可以将其复制并粘贴到站点“编辑页面”屏幕的“文本”选项卡中：

<table> <tr> <th>Lake</th> <th>Surface Area (sq mi)</th> </tr> <tr> <td>Lake Superior</td> <td>31,700</td> </tr> <tr> <td>Lake Huron</td> <td>23,010</td> </tr> <tr> <td>Lake Michigan</td> <td>22,300</td> </tr> <tr> <td>Lake Erie</td> <td>9,910</td> </tr> <tr> <td>Lake Ontario</td> <td>7,340</td> </tr> </table>

但你总是可以跟进请求的改进：

使列头为黑色，字母为白色，并全部大写

结果是：

<table> <tr> <th style="background-color:black;color:white;">LAKE</th> <th style="background-color:black;color:white;">SURFACE AREA (SQ MI)</th> </tr> <tr> <td>Lake Superior</td> <td>31,700</td> </tr> <tr> <td>Lake Huron</td> <td>23,010</td> </tr> <tr> <td>Lake Michigan</td> <td>22,300</td> </tr> <tr> <td>Lake Erie</td> <td>9,910</td> </tr> <tr> <td>Lake Ontario</td> <td>7,340</td> </tr> </table>

如果你愿意，可以不断完善。使每隔一行的背景变成浅灰色。让 AI 为诸如表格之类的内容生成 HTML 可能比使用文本框中提供的表格功能更快（也更可定制）。或者通过使用插件。

熟练的提示称为提示工程。鉴于这是一种心智技能，你会惊讶地发现 AI 本身擅长撰写提示吗？你可以提交自己的提示，并要求 AI 用更好的提示进行回应。以下列出了一些你可以尝试的 AI 提示生成器。（或者直接向“你知道谁”询问最好的三个提示生成器的链接。）

www.geniept.com/

promptomania.com/

promptperfect.jina.ai/

phraser.tech/builder/image_generation

1.4 如何在 WordPress 中取得成功

创建和维护 WordPress 网站的人面临着 12 个主要挑战。本书按照通常在构建网站时遇到的顺序对其进行了覆盖。因此，让我们来看看人们在构建他们的网站时通常会采取的典型步骤。

• 图 1.2 是创建新 WordPress 网站过程的概述。

图 1.2 这些是构建 WordPress 网站时所采取的主要步骤

下面列出了在创建和维护网站时遇到的主要挑战类别：

• 寻找最佳主机服务

• 预先计划

• 设置站点结构

• 以对话式网站风格撰写

• 选择正确的插件

• 选择一个出色的主题

• 自定义主题

• 有效地管理媒体

• 设置博客页面

• 在货币化时获得良好的结果

• 为搜索引擎成功优化你的网站

• 建立观众群体

• 尝试 Gutenberg 编辑器

1.5 管理设置过程

在实际开始处理你的网站之前，你需要采取几个重要的步骤。找到并注册最好的主机服务。你将在云端使用 WordPress，你的网站将存储在主机服务器上并受到保护。WordPress 本身是免费使用的；它是开源的。

可以，但很困难，在自己的硬盘驱动器上托管您的站点。但您会想要使用供应商提供的实用工具、安全、技术支持和其他许多特性。他们可能相当合理，并且使构建、维护和保护您的站点更容易。最佳主机是 DreamHost、Bluehost 和 SiteGround。这是 WordPress 本身推荐的三个选项。即使是有经验的站点开发人员也会遇到问题，对于我们大多数人来说，具有出色技术支持——快速而准确——是必不可少的。

1.6 预演计划

一个网站应该是有机的——它应该有良好的连贯性和焦点。如果您决定随机应变，随意添加，很容易随意拼凑许多特性和设计的碎片，这个结果可能是一个不连贯的集合，导致整体目的和背景不清晰。页面之间的转换可能会显得令人意外。站点导航可能效率低下。设计可能看起来杂乱无章。在本书中，我们将看几种方法来确保在站点构建的最初阶段就有凝聚力和一致性。

这似乎有点违反直觉，但是一个专注于狭窄主题的站点几乎总是能吸引并保留更大的受众。计划站点主题的人们通常错误地认为大量的访客对像钓鱼这样的一般主题感兴趣。但是，除非您是一个著名的钓鱼者，否则这种太一般化的主题很容易让您的在线努力陷于遗忘。原因很简单，反直觉：竞争。谷歌搜索“fishing”，你会获得 30 多亿个结果。而搜索“Oconaluftee 河的飞钓”会将您的竞争对手降至零或只有几个。

唯一成功的非重点网站是关于名人的，因此已经有内置受众了。而且这个受众对名人的旅行和其他活动相关的各种主题都很感兴趣。

1.7 设置站点结构

当人们发现你可以在几个小时内设置站点中所有页面和子页面时，他们通常会感到非常惊讶！只需点击“添加新页面”按钮并输入页面标题即可在站点中填充空白、占位符页面。稍后，您将用文本和媒体内容填充它们。但是创建整体站点结构非常快速和简单。

1.8 使用会话式口吻写作

大多数网站内容都以轻松、亲切的风格编写。除非内容面向学术、法律或其他期望正式写作的受众，否则您应该采用会话式口吻。写作时像与朋友交谈一样。第四章将向您展示如何使用人工智能以不同风格重写您的文本内容。

1.9 选择正确的插件

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

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

定义

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

定义

副作用本质上就是一个 bug——一些奇怪的行为，比如应该在页面上可见的东西，但没有。或者你看到一个错误消息。Bugs 可能导致崩溃、冻结、信息显示不正确或其他意外行为。如果你在 WordPress 中有一个 bug，调试的第一步是暂时停用所有插件（这很容易做到），然后逐个重新激活它们。当 bug 再次出现时，你刚刚重新激活的插件就是罪魁祸首。卸载它并找到一个替代插件。有数万个插件，所以你不会遇到任何问题找到一个好的替代品。Google：最佳 WordPress 联系表单插件。或者问一个 AI。鉴于现有的高质量插件选择众多，没有必要浪费时间去弄清楚为什么你的插件之一会引起问题。

在本书中，我们将探讨如何选择可靠的插件，这些插件不太可能被其创建者放弃，与其他插件兼容，且保持更新以防止引入安全漏洞。一个好的策略是选择分为两个层次的流行插件——免费和付费版本。这些freemium插件为其开发者提供了收入来源，因此可能会被保持更新。（出于同样的原因，你也想选择 freemium 主题。）

1.10 选择最佳主题

如果你知道要选择哪个主题，主题会为网站添加专业设计。大多数访问者不会有意识地注意到许多设计元素。颜色、布局、字体等都在大多数人的视线以下。但这并不意味着他们不受设计的影响。恰恰相反！

设计不佳的网站可能会以多种方式使您的访客感到恼火、不悦、沮丧、恐惧、困惑等等。所以，由于我们大多数人不了解色彩理论或字体变化，专业设计师会考虑这些和其他因素，并创建出外观好看的主题。

当您初次安装 WordPress 时，它会带有由 WordPress 自身创建的默认主题，并以当年的命名：Twenty Twenty、Twenty Twenty-Four 等等。但是您可以安装其他主题。有些主题是免费的，有些是付费的。但像插件一样，选择免费和付费主题都可以避免将来出现问题。免费和付费主题为其创建者提供收入，因此很少会被废弃。所以您将不会被迫在将来切换到新主题。这可能会造成问题，特别是如果您的网站变得很大。

主题还包括定制选项，可以让您自定义默认网站设计，包括各种字体选择、颜色选项、替换页眉图片等。这些定制项位于外观 > 自定义屏幕中。

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

1.11 自定义主题

最好的主题会变得受欢迎，这有点不好。您不希望您的网站看起来像其他网站的克隆。它应该看起来好看，但以独特的方式。如果您的网站销售产品，您希望选择一个促进您销售的设计。如果您提供一个关于园艺的网站，您如何使用颜色获得最佳效果？换句话说，在您选择了一个主题之后，请对其进行自定义。您的特定受众希望看到什么？您可以通过哪些方式使网站看起来独特，并为网站的目标服务？

最后，如果您对选择另一种配色方案不太自信，没问题。您可能有个懂设计的朋友。异性相吸。

1.12 简化设计的方法

层叠样式表（CSS）是一种语言，允许您完善网站的外观，通过改写主题的样式设置。这样，您可以调整网站的设计，使其与主题更协调，并展现出更多独特性。

例如，如果您的主题正文默认使用 Garamond 字体，您可以使用 CSS 来修改主题默认设置，并将段落显示为 Roboto 或 Verdana。您在网站上几乎可以完全控制所有的视觉元素。您甚至可以将网站上的所有文本都变成绿色，或者在单个页面中更改字体样式，甚至显示一个单词的字体为 Roboto，其他文本仍然使用 Garamond。换句话说，您可以以高度特定、细粒度的方式修改和升级您的网站。这使您摆脱了主题所施加的设计限制。

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

除了 YellowPencil 之外，还有一些其他质量较高的 CSS 代码生成插件，您可能想看看，特别是 CSS Hero。但在第七章，我们将花费大量时间学习如何使用 YellowPencil。

1.13 媒体管理

在线沟通的一个重要好处是可以添加各种各样的媒体。以下是可以改善站点的添加：

• 图片

• 音频

• 视频

• 文档，例如 PDF、Word、Excel、PowerPoint 等。

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

• 社交媒体内容。

• 动画

网页设计中常见的一个错误是过度使用或滥用媒体。当代网站设计需要适度、轻柔的动画；图片要为网站的目的做出贡献（而不仅仅是作为装饰）；音频和视频不应自动播放。访客可以选择启动它们。我们将在第八章涵盖与在线媒体有效、当代使用相关的所有基础知识。

1.14 设置博客页面

博客是网站中的一个特殊、独特的页面，包含消息（称为帖子），通常以倒序显示。博客页面可以是与您的受众互动的一种方式，可以发布站点主题的最新新闻，也可以是回答问题的客户服务功能。许多博客不允许观众发表评论，因为审查所有传入的消息可能会耗费大量时间。但我们将研究自动批准过程的方法。例如，您可以制作一个禁止词汇表（“愚蠢”，“s***”，“仇恨”等）。如果网站收到包含任何这些词的消息，它会自动被丢进垃圾箱，永远不会在您的博客中发布。

要吸引观众，博客应经常更新——添加新内容，无论是文字还是媒体。

尽管大多数博客主要是文字性的，但有些博客专注于艺术（artlog），视频（vlog）或音乐。微博客是另一种博客类型，其特点是非常简短的帖子，a la X（前身为 Twitter）。

然而，多年来，已经明显地看到了几种毁掉博客并驱赶任何访客的方法——或者根本就无法吸引他们。在第九章中，您将了解如何构建和管理一个有助于实现站点目标的博客，而不是反对它。

1.15 赚钱

第十章涉及变现问题。网站可以通过多种方式产生收入，包括以下方式：

• 在你的网站中放置每次点击广告（链接）。当某人点击链接并进入亚马逊（或其他商家）的页面时，你就能获得佣金。

• 通过推广营销可在某人点击你网站上的链接并购买该产品后获得佣金。

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

• 通过评论或其他有关产品的内容获得报酬。这类似于拥有企业租借的广告牌。

• 在你的网站中设置一个需要付费订阅才能进入并查看内容的高级区域。

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

• 通过添加 Easy PayPal Donation 这样的捐赠插件筹款。

这些方法并不互斥，你可以将它们结合起来。但必须小心处理变现问题，否则你可能会惹恼并缩小你的观众。请确保不要在你的网站上放置弹出式或幻灯片式的动画广告，也不要采用某些可疑的策略，如获得正面评论的报酬。

1.16 优化你的搜索引擎排名

要吸引观众，你需要在搜索引擎排名靠前。当人们搜索自己需要的信息时，如果你的链接被埋没在谷歌的长列表中，他们通常不会一一点开每一个链接。

AI 搜索更是如此，它们通常只显示一个或几个链接，而不是多页链接。AI 系统的设计师喜欢说，虽然 Google 给出的是一系列需要访问的网站列表才能找到你需要的答案，但相比之下 AI 直接给出了答案。

当潜在的访客搜索你的话题时，你希望你的网站链接显眼地显示出来。这意味着你希望在 Google、Bing 和其他搜索系统中得到好的排名，当它们的 Spider bot 来访、评估并向总部汇报时。

Google 和其他搜索引擎有一张不喜欢的列表。例如，如果它们发现冗余、含糊不清或不准确的信息，它们会立即扣分。

因此，作为网站管理员，你需要关注你的内容质量、网站导航、准确性、及时性和整体卓越性。换句话说，因为 Google 和其他搜索引擎努力为人们提供最佳的搜索结果，请确保你的网站是对某个问题或需求最好的答案。尝试操纵搜索引擎没有用，它们知道这些诡计。请提供质量。

要获得高排名并非易事，如果你计划扩大观众，那么注意搜索引擎优化（SEO）是必要的。估计有超过 80% 的上网人每天平均使用 Google 三次。对于大多数潜在访问者来说，它是访问你的网站的路径。

在早期，即 Google 之前，搜索引擎相当原始。要获得高排名是相当容易的。例如，如果你只是把recipe一词包含 400 次，而最接近的竞争者使用的次数较少，那么当有人搜索食谱网站时，你可以排在搜索结果的第一位。

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

同样，谷歌会查看有多少其他网站链接到你的网站（称为反向链接）。谷歌还考虑到链接到你的网站的网站的质量，并在确定你的网站价值时也使用该指标。此外，谷歌现在也做出了许多其他类型的判断。

由于人工智能和深度数据挖掘，今天的搜索系统非常复杂，有人说他们的评论现在相当于人类评论家的判断。

这里有一些常用的策略，可以取悦搜索机器人：

• 关键词——使用与某人在谷歌搜索时输入的相同术语

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

• 内容——确保你的网站充满了对目标受众有用的高质量内容。

• 链接——寻找增加反向链接的方法。

• 速度——测试你的网站页面加载速度和整体性能，如有必要，添加一个可以加速的插件。

我们将在第十一章深入探讨 SEO。

1.17 利用分析来建立你的受众

网站分析意味着通过理解访问者的行为和测量网站的整体表现来学习如何改进你的网站。

你可以使用分析插件为你提供潜在有价值的数据，包括：

• 有多少访问者来到了网站

• 访问者在访问你之前来自哪里。

• 网站上人们查看的页面（以及停留时间）

• 他们点击的链接

• 他们通过网站的路径

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

• 他们是否在网站内搜索了什么

总的来说，分析数据可以让你知道要改进哪些设计元素和内容。如果你的网站被货币化，它们还可以报告你的营销工作的效果。

1.18 探索古腾堡编辑器

在 2018 年，WordPress 推出了一个新的默认编辑器，名为块编辑器（又名古腾堡）。此前，“经典”WordPress 编辑器建立在文字处理器模型上，尽管它具有设计、媒体和其他非文本元素的功能。

Elementor 等售后市场供应商多年来一直提供了一种更加视觉化的构建 WordPress 页面的方式。这些“页面构建器”插件和主题允许您拖放功能和内容，从而更容易地可视化页面布局、格式和插入元素（如按钮或进度条）的位置。

理论上，页面构建器提供比经典 WordPress 编辑器更具 WYSIWYG、拖放编辑器。

WordPress 决定创建自己的页面构建器，其中包含各种预定义块，如段落、标题、图像、视频、画廊等等。每个块都可以自定义和以不同方式排列，以创建独特的布局和设计。其中一些块就像缩小版的插件。

但不幸的是，许多专家认为古腾堡系统是一个尚未实现的值得追求的目标。尽管 WordPress 的人才数年来一直在努力，但古腾堡仍然是一个正在进行中的工作。它不稳定——你可能学会了以某种方式做某事，然后几周后尝试重复做同样的事情，发现过程已经改变了。它也可能效率低下，难以学习和使用，尤其是如果你习惯了传统的 WordPress 编辑器。

在 HTML 中，描述网页应该如何呈现的语言中，页面布局非常复杂。垂直 布局很容易。在任一编辑器中，拖放（古腾堡使用）或剪切和粘贴（经典编辑器使用）都相当容易。例如，快速简单地切换两个段落的垂直位置是很容易的。将一个移动到另一个下面。

水平 重新定位是一种完全不同，也非常复杂的技巧，通过拖放来实现。而且这是古腾堡尚未掌握的技巧。HTML 具有描述水平布局的复杂、多个、相互作用的定位变量。你有边框、对齐、分割、边距、相对、静态、容器、填充和其他规范，所有这些都相互作用以指定对象在 X 轴上的位置。在互联网页面上的水平定位根本不是一个简单的过程。

除此之外，一些主题和插件与古腾堡不兼容，在一些站点中，古腾堡会减慢网站速度。此外，与使用经典编辑器相比，它往往不太可通过 CSS 自定义，尽管在这方面已经取得了一些进展，比如最近包含了全站点编辑（全局样式表）。

出于这些原因，许多 WordPress 专家安装了 Classic Editor 插件，它恢复了传统编辑器。他们避免使用古腾堡，直到它成为经典编辑器的完全功能、值得的替代品为止。

话虽如此，你更喜欢哪个编辑器最终是你的选择，而且有很多人喜欢古腾堡。所以这取决于你。我们将全部章节 13 都用来探索古腾堡，这样你就可以做出自己的决定。此外，在整本书中，你还会看到如何使用古腾堡来完成各种任务。

1.19 总结

• WordPress 在内容管理系统中市场份额遥遥领先，因为它功能强大，无需编码，操作直观。

• 通过学会如何自己建立网站，您可以节省时间和金钱。

• 像 GPT 和 Midjourney 这样的人工智能系统可以在多个方面改善您的网站。您最成功的竞争对手正在使用它。您也应该使用。

• 通过一键操作，您可以添加主题和插件，使您的网站具有专业外观和出色功能。

• 您需要做出的一些重要初始选择包括找到合适的托管服务，并提前规划好您的网站。

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

• 使用 YellowPencil 插件对您网站的外观进行微调。

• 确保您处理好博客、货币化和搜索引擎优化。

• 最后，注意分析数据。收集到的关于访问者与您网站互动的数据可以指导您提供最佳体验。

• 花些时间使用新的 Gutenberg 区块编辑器，看看您是否喜欢它胜过经典的 WordPress 编辑器。

第二章：开始 WordPress 网站

本章涵盖了

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

• 在网站准备好发布之前隐藏你的网站

• 学习如何保存你的工作

• 安装安全和备份插件

• 管理你网站的访问权限

在构建网站时，从正确的方向开始非常重要。你的网站是否实现了你的目标，有时取决于你在创建第一个页面之前做出的选择。

一方面，WordPress 有两个版本，如果你选择了错误的版本，从那时起你就会受到限制和不灵活的困扰。此外，你必须选择一个优质的托管服务。它将你的网站存储在云端服务器上。选择错误的服务，当你需要技术支持时（我们都偶尔需要），你会遇到延迟、错误的建议或根本没有回应！

在你开始决定网站的设计和结构之前，本章是关于做出正确的举措的。

2.1 选择正确的 WordPress 版本

WordPress 有两个不同的版本，分别称为 WordPress.com 和 WordPress.org。

注意

这里的 org 和 com 术语只是标识 WordPress 的这两个版本，并且与.com、.edu、.net（称为 域名扩展）以及像 cnn.com 或 Wikipedia.org 这样的互联网网站地址后附的其他简短缩写无关。

大多数专家都同意，在这两个版本中，WordPress.org 优于 WordPress.com 版本。

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

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

AI 协助

询问巴德或其他 AI 这个问题：“WordPress 只推荐三个托管服务。它们是什么？为什么推荐它们？”

注意

插件是你添加到 WordPress 网站中的小型应用程序，用于提供额外的功能，如轮播幻灯片或自动网站备份。第五章就是关于选择最佳插件的。

如果您正在计划一个超出简单个人博客的网站，您可能需要注册一个与 WordPress.com 不同的主机服务。 且当您这样做时，您将自动使用 WordPress.org 版本而不是 .com 版本。 主机服务不使用 WordPress.com 版本。

WordPress.org 版本是开源的，本身可以免费使用。但质量较好的主机服务是需要收费的。以下是付费主机服务的一些主要优势：

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

• 您可以通过成千上万的插件添加功能。

• WordPress.com 免费计划的自定义功能受限。 而优质主机则不限制修改。

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

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

• 免费主机计划使得站点变现困难。

如果您想使用高品质的主机服务，并希望避免大额的前期投资，通常可以在每月不到 3 美元的价格找到试用优惠。 （就像有线电视的促销优惠一样，优惠过期后价格会上涨。） 此外，一些主机提供退款保证。

如果您想了解专家为什么推荐使用 .org WordPress 版本的原因，可以在这个有用的教程中找到更多信息：www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/

2.2 注册一个一流的主机服务

WordPress 网站通常驻留在云端服务器上。这些服务器由主机服务维护，除了技术支持外，还提供各种实用工具，如安全系统、文件管理器和加密功能。从您的硬盘驱动器上托管 WordPress 网站是可能的，但这需要相当多的技术技能，并且您需要负责安全和其他服务，而这最好是由主机服务提供的。 简而言之，这不值得。

以下是使用主机服务而不是在自己的硬盘驱动器上托管站点的一些优势：

• 可靠性——主机服务有一支专家团队负责保证您的网站 24/7 运行。如果您的网站经常宕机，可能会迅速失去受众。

• 安全性——好的主机有强大的安全措施来保护您的网站免受攻击。 WordPress 网站是黑客的常见目标。

• 性能——主机的专用服务器针对 WordPress 进行了优化。 您的页面将比站点位于您自己的硬盘驱动器上时加载得更快、更有响应性。 请注意，您的受众中有些人的互联网连接速度很慢，页面加载时间可能决定访问者是否返回您的网站。

• 使用便捷性——主机包括一组实用工具（位于名为 cPanel 或 Site Tools 的位置）。您会发现一个工具，可以安装 SSL（安全套接字层，因此当有人访问您的网站时，他们不会看到令人担忧的通知：不安全）。主机还提供许多其他有用的工具，包括自动备份、更新、文件管理、一个“暂存”区域，您可以在离线修改您的网站等等。

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

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

2.2.1 选择您的域名

当您第一次注册主机服务帐户时，您将被要求选择一个域名。这是您网站的主页在互联网上的唯一地址，即 URL（统一资源定位符）。URL 的示例包括：bbc.com、amazon.com和facebook.com。

定义

网站的主页是您网站中的第一个页面。这是访客到达您网站时看到的页面。它也被称为着陆、闪屏、主、索引、前端、开始和第一页。

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

以前，人们为自己的网站努力寻找最佳的域名——找到一个描述性的、简短的域名，换句话说是令人难忘的。但到现在为止，所有好的、令人难忘的域名都已经被占用了（或者被仓库保管，直到有人愿意为它付出一笔财富）。Voice.com 于 2019 年以 3000 万美元的价格被出售给了 Block.one，一个区块链技术公司。

因此，不要折磨自己试图找出一个完美的域名，只需尝试将您网站的最佳关键字融入到您的新域名中即可。（关键字是某人搜索类似于您网站的网站时可能键入到 Google 中的单词或短语。）

例如，如果您正在创建一个烹饪网站，请在域名中的某处加入recipes或cooking这个词。koolrecipes.com就可以了。如今，人们通常不记得大多数域名。相反，他们会通过搜索引擎、人工智能平台、浏览器中的书签或在其他网站上找到的指向您网站的链接来访问您的网站。

AI 助手

像往常一样，在头脑风暴时，向您的人工智能助手寻求建议。例如，为了为我们的食谱实践网站找到一个好的尚未被使用的域名，我向 Perplexity 提交了这个提示：

你是一个网站营销专家。我希望你列出十个新站点的域名，标题为“Instant Pot 时间测试食谱”。让它们引人注目、易记、简短。每个都应该以".com"作为其顶级域名。还要确保每个域名都包含“recipes”这个词。对于您想到的每个域名，请在互联网上查找。如果已经在使用中，请不要将其包含在您的十个域名建议列表中。而是尝试不同的域名，重复这个查找流程。深吸一口气，一步一步地思考。

Perplexity 提出了一些好建议：

以下是一个名为“Instant Pot 时间测试食谱”的新站点的十个域名建议：

InstantPotRecipesHQ.com

TriedAndTrueInstantPot.com

TimeTestedInstantPotRecipes.com

InstantPotRecipesCentral.com

InstantPotRecipesVault.com

InstantPotRecipesMastery.com

InstantPotRecipesGenius.com

InstantPotRecipesEmporium.com

InstantPotRecipesHub.com

InstantPotRecipesGuru.com

我已经在互联网上搜索了每个域名，但没有一个看起来在使用中。

2.2.2 设置一个练习站点

在附录 A 中，您可以设置一个主机服务账户，在该账户上安装 WordPress，在该账户上安装 Twenty Sixteen 默认的 WordPress 主题，您可以在这本书中使用练习站点。最后，在该附录中，您可以转到您站点的“设置”>“常规”屏幕，并将站点标题命名为Instant Pot 的时间测试食谱，标语为初学者的舒适食物。如果您尚未设置练习站点，请访问附录 A，并立即进行设置，以便您希望使用练习站点。本书中的一些示例是基于该附录中描述的设置。当然，如果您选择在您的真实站点上工作，也是可以的。

在选择主机提供商时，要寻找信誉良好、价格合理的可靠公司。像往常一样，最广告宣传的服务未必是最佳选择。例如，GoDaddy 拥有相当大的市场份额。但它的评价参差不齐。

找到一个可靠的主机服务可能会令人望而却步。全球估计有 330,000 家 WordPress 主机服务！但 WordPress.org 本身只推荐这三个主机：SiteGround、Bluehost 或 DreamHost。不巧的是，我也推荐这三个，原因稍后列出。

它们每一个都是一个绝佳的选择，拥有出色的技术支持、稳定的性能，并提供一套可供您使用的实用工具。以下是最佳主机的最新概述：

提示

wpbeginner.com 网站是一个很好的资源。每当您对 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 安装之后，首先要做的事情是访问您站点的后端。它的地址基于您在注册托管服务时选择的站点 URL（域名）。例如，如果您的域名是https://mysitesname.com，那么您的后端地址是https://mysitesname.com/wp-admin。

您的后端地址只是前端地址的修改。您只需在域名后附加/wp-admin。当您首次访问后端时，请在浏览器中将其添加到书签（或收藏夹）。此外，当您的浏览器询问是否要保存用户名和密码时，请这样做以便在想要在站点上工作时轻松访问。请注意，当您想要查看前端时，只需删除地址的附加/wp-admin部分。

定义

在 WordPress 后端，您可以在其中处理您的站点的地方，有许多不同的页面，例如菜单构建页面、媒体库和添加新插件页面。但是，我们将它们称为屏幕而不是页面，以将它们与站点的实际页面区分开来，后者是您的观众所看到的。后端是站点的视图，只有您，管理员（或您授权的其他人）才能进入。在这里，您将添加新页面，执行日常工作，进行改进，并以其他方式构建和维护站点。这是引擎室，在您的访问者看不到的地方。访问者被保留在前端，即站点的公共区域。

2018 年，WordPress 开发团队为 WordPress 添加了第二个编辑器，并将其设置为默认。编辑器是您向站点添加新内容或修改现有内容的地方——文本、图像、多媒体、超链接等等。新编辑器通常称为古腾堡或WordPress 区块编辑器。

因此，您可以选择两种编辑器：传统的经典编辑器和古腾堡。前者有些类似于功能强大的文字处理器，而后者则类似于页面构建器。第三方页面构建器如 Elementor 和 Divi 已成为流行的 WordPress 插件。页面构建器可以提供拖放布局、所见即所得的动态设计、页面模板以及其他功能，例如用于调整站点外观而无需编写代码的工具。

古腾堡的设计目的是将多年来市场上的页面构建器插件所提供的功能集成到 WordPress 中。我们将在后面的章节中深入探讨古腾堡，但目前，您可能希望切换到经典的 WordPress 编辑器。这样，您的结果将与本书中显示的相匹配。然而，在整本书中，还描述了使用古腾堡进行操作的方法。选择权在您手中。如果您想使用经典编辑器，请参阅附录 A 中的说明。在经典编辑器和古腾堡之间轻松切换。

2.4 在建设中隐藏您的站点

在将您的网站公开之前，您将希望等到网站变得完美。显然，重要的是在您尽最大努力使其变得非常出色之后，搜索引擎对您的网站的质量进行评判。您也不希望让您的潜在观众根据半成品来决定是否再次访问您，或者将您加为书签。

因此，在您准备好盛大开幕之前，请阻止 Google 和其他搜索引擎。要阻止搜索系统，请转到您站点的后端，在左侧您会看到一个黑色菜单，称为管理菜单或仪表板。单击“设置”以打开其子菜单，然后单击“阅读”，如图 2.1 所示。

图 2.1 在这里，在您的设置 > 阅读屏幕中，通过选择该选项阻止搜索引擎对您正在进行中的站点进行评判，然后单击“保存更改”按钮

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

但是，你，作为站点的管理员，可以查看真实的页面。 你需要。 在创建你的站点时，你会想偶尔查看前端。 即将推出的插件会在你的浏览器中存储一个 cookie，以明确你被允许查看真实的页面。

提示

Cookies 是一些网站通常存储在你的浏览器中的小数据。 主要目的是节省你的时间。 如果你之前填写过一个表格，或者用密码登录过 —— 如果信息在你以前访问该站点时存储在 cookie 中，那么你不需要重复这些操作。

一个好的即将推出的插件的标题是 Website Builder by SeedProd。 要使用它，在你的 WordPress 后端仪表板中点击插件 > 添加新的。 然后在右上角的搜索框中，键入 seedprod。 最后，点击安装按钮，然后点击激活。

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

图 2.2 点击 SeedProd 下的登陆页面，然后点击编辑页面按钮来定制你的即将推出的页面。

一些插件不受经典编辑器插件的影响，SeedProd 就是其中之一。 当你到达 SeedProd 设计界面时，你可以体验一下古腾堡块编辑器在 WordPress 中的工作方式。 SeedProd 模仿了块编辑器。 如果你愿意，添加一些 SeedProd 的块，同时用你的信息替换一些无意义的文本。 然后你的真实页面就会被这个即将推出的页面替换，通知访客你的网站目前正在建设中。 点击保存按钮。 如果你看到一个警告说 WordPress 不允许你保存，SeedProd 会显示如何解决这个问题的信息。

任何时候你想要查看你的即将推出的页面如何显示给访客，将你站点的前端地址键入或粘贴到一个 你没有 用来设置这个插件的浏览器中。

SeedProd 插件还包括一个正在建设中的屏幕，如果你正在 更新 现有站点，你可以使用它。 但是除非站点真的很糟糕，否则你应该避免这种方法。 你站点的访客期望能够访问。 即使是短暂的停机也可能会失去一部分受众。

相反，通常最好的方法是通过在副本上工作来更新你的站点，而不是关闭实时站点。 使用一个称为 staging 的实用工具，它可以在你的托管服务的 cPanel 实用程序集合中找到（或者你可以向你的站点添加一个 staging 插件）。 当暂存时，站点会被复制，但实时站点仍然可以被你的访客访问。 你对副本进行改进。 然后当你完成时，副本将取代旧版本并上线。

有一个例外情况需要提及，如果你的网站受到恶意软件攻击等问题，导致有损链接、缺失页面、可见代码、空白页面等情况，那么最好只显示一个“建设中”屏幕，并提供有关网站何时可用的信息。你不想让访客进入一个充满问题的网站。

在将你的网站设为私密时，可选的步骤是隐藏丨独立页面和文章，除非你给某人提供密码来访问它们。站点中的每个页面和文章都有自己单独的永久链接 URL 地址。

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

https://siteaddress.com - 网站地址

https://siteaddress.com/about-us - 这将是“关于我们”页面的永久链接地址（URL 地址无法含有空格字符，因此用连字符替换页面标题中的空格）。在此示例中，about-us被称为slug。

鉴于内部页面有自己的 URL 地址，有可能在你准备好让网站公开之前，有人会进入其中一个内部页面。话虽如此，像 SeedProd 这样的优质即将推出的插件会默认在所有页面上显示即将推出的屏幕。

2.4.1 要求 AI 不要干扰你的网站

你可以要求 AI 系统不要为其自身目的收集你网站中的信息。一些 AI 会遵守这个请求。你的请求的有效性可能取决于未来的版权法。

假设你想将所有或部分内容设为禁止访问，只能由付费用户查看。不适用于 AI。你可以尝试通过在网站根目录下存储一个名为 "robots.txt" 的文件来阻止 AI 或搜索引擎访问你的页面（该目录是存储在托管服务服务器上的站点数据库中名为public_html的目录）。该文件可能已经存在，所以你可以进行修改，或者你可以存储一个新的同名文件。

无论如何，你可以在该文件中指定对 AI 授予的访问权限。要了解如何输入该文件的具体内容，请访问：my.siteground.com/support/kb/how_to_use_the_robotstxt_file/

如果你需要帮助确定如何以及在哪里保存这个文件，可以咨询你的托管服务技术支持人员。

2.5 保存你的工作

一些应用程序，比如微软的 OneNote，会自动保存您所做的任何更改。WordPress 不会这样做。相反，当您在网站的页面中修改内容时，您必须点击更新按钮（或 WordPress 显示的几个同义词）。这些同义词的一个问题在于：当您首次在 WordPress 中创建新页面时，保存您工作的按钮被标注为发布。然后，同样的按钮变为更新。更改按钮的名称并不是良好的用户界面设计。初学者经常会因此感到困惑。如果所有保存您工作的按钮都简单地命名为保存，那将是一个改进。

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 个备份将成为栈中的第一个备份，最老的第十个备份将会被删除。最后选择备份储存的位置。

然后一定要点击保存更改。

秘诀

在您构建或积极更新您的网站时，每天的备份可以确保您不会丢失太多工作。但是，如果您进行了需要立即保存的更改，您可以手动备份：只需在主 UpdraftPlus 设置界面（备份 / 还原选项卡）上点击“立即备份”按钮即可。此外，如果您在几周内不对网站进行任何更改，可以降低自动备份的频率。但是，如果您的网站遭受大规模攻击或其他灾难，并且无法还原，则仍然有希望。前往archive.org/web/。然后将您网站的前端地址粘贴到搜索字段中。您至少可以复制和粘贴存储在此存档网站上的文本内容，并且还可以对图像和页面布局进行屏幕截图。这样，至少可以更轻松地从头开始重建您的网站。您将重新获得网站设计，页面布局和内容。

2.8 管理网站访问权限

如果您想让其他人在您的设计上工作、为内容做贡献或订阅您的网站，您需要决定授予他们多少以及何种类型的访问权限。

并非每个人都需要对网站拥有总体的管理员级别控制权限。您可以提供各种程度的权限，每个权限都有其自己的范围。基本上，您可以指定特定人员在网站中可以或无法执行的操作。您可以在图 2.5 中所示的用户 > 添加新用户界面中设置这些权限。

图 2.5 这是用户 > 添加新用户的界面，您可以在此界面为允许访问后台的用户指定权限级别

2.8.1 理解不同的用户角色

以下是每个用户角色的描述：

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

编辑：他们可以在网站上添加、删除或修改任何内容，并且可以对博客文章进行审核。但是他们不允许安装或操纵主题或插件，添加新用户，修改现有用户的角色或更改网站的设置。

作者：此角色对网站的风险较小。作者可以添加、删除或创建帖子标签，或修改他们自己的帖子。他们不能创建新分类，不能批准或删除其他人的帖子，也不能对网站进行其他任何操作。

贡献者：这些人与作者角色的权限非常相似。然而，他们不能删除已发布的帖子。并且与作者角色不同的是，他们不能在网站上添加文件，因此无法在帖子中包含图片。

订阅用户：订阅用户可以修改他们的个人资料或更改密码，除此之外无其他权限。

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

除了这些默认用户角色之外，您作为管理员还可以定义自定义角色。这样，如果默认角色之一不是您想要的内容，您可以创建一个新角色，其中包含您想要授予的任何权限集。最好的做法是只有一到两个管理员用户。其他人应该对站点的控制权更少。

插件和主题除了 WordPress 默认角色之外，还可以添加角色。例如， WooCommerce 插件添加了“购物经理”和“客户”角色，定义了用户如何与其电商功能交互。

2.8.2 订阅方式变现

一种良好的从站点获得收入的方法是提供访问者必须支付的内容。人们很少反对这种变现方式，因为它是自愿和不显眼的。您可以将整个站点或部分站点封锁。

提示

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

如果要从站点获得收入，以下是一些利用订阅者用户角色的建议：

• 线上课程。人们要么付费查看内容，要么加入在线课程。

• 杂志。部分或全部站点受到封锁，提供高级/付费内容。

• 提供特定优惠的付费订阅仅适用于注册的用户

• 私人论坛

• 咨询或教练服务

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

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

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

3. 找到您要更改角色的用户，单击他们的用户名以打开其资料。

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

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

6. 单击“更新用户”按钮以保存更改。

图 2.6 这是您可以使用批量操作功能一次更改多个用户角色的位置。

2.8.3 密码保护页面

这里有另一种控制站点前端页面或博客文章访问权限的方法。您的访问者可以分为具有特定页面密码的人或不能查看这些页面的人。您可以通过将它们标记为密码保护来封锁单个页面和文章。以下是如何操作：

1. 转到“页面”>“所有页面”屏幕。

2. 单击要密码保护的页面的标题。

3. 在此“编辑页面”屏幕中，在右侧找到标题为“发布”的模块。

4. 单击“密码保护”。

5. 键入密码。

6. 单击“更新”按钮。

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

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

提示

只有具有管理员或编辑级别权限的用户才能查看标记为密码保护的页面或文章，即使是从网站后台。

除了盈利化，设置内容密码保护在几个方面都很有用：

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

• 你正在向你的网站添加一个新页面，但希望在完成之前将其隐藏起来。

• 你希望某些页面或文章只能由你的一部分受众——例如成年人——查看。

如果你在这个发布模块中编辑“发布于”字段，页面或文章也可以预定在特定日期后出现。

在本章中，你已经学到了开始 WordPress 网站时需要采取的几个重要的初步步骤。你需要选择一个可靠的托管服务，选择一个你熟悉的编辑器，安装安全插件，并决定谁可以在你网站的后台访问什么。在下一章中，你将看到如何将网站聚焦于单一、专业的目标，并设置任何高质量网站都必备的重要组成部分——高效的导航性。

2.9 总结

• 正确的起步方向，以及一些前期规划，可以帮助你创建一个连贯、有机的网站。

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

• 选择合适的托管服务对一个网站至关重要。每个人偶尔都需要可靠的技术支持，你不希望在最需要帮助时被冷落。

• 如果你注册了 WordPress.org 自己推荐的三个托管商之一：Bluehost、DreamHost 或 SiteGround，你不会错的。

• WordPress 有两个编辑器。如果你愿意，可以都试试，但经典编辑器总体上比新的古腾堡区块编辑器更稳定、更高效。后者仍在建设中。

• 在网站完善并准备好发布之前，将其从搜索引擎和访客中隐藏起来。

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

• 探索 WordPress 提供的几个工具，让你可以控制网站的后台和前台访问权限。

第三章：网站构建准备工作

本章内容包括

• 紧密聚焦你网站的主题

• 设定目标

• 创建一个层次结构

• 充分利用链接

• 构建有效的菜单系统

为什么在开始添加文本和图片之前要预先规划你的网站？这非常简单：明确你的主题，确定你的主要目标，并为其页面创建层次结构将影响你以后做出的许多决策。

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

本书将全面介绍如何建立和修改练习网站。通过真实世界的例子，你将看到如何应用每一章节介绍的各种概念。然而，如果你愿意，你也可以直接将这些概念应用到你自己的网站上。

或者你实际上可以建立一个新的空白 WordPress 网站，并在练习网站的基础上进行操作。如果你希望自己构建它，附录 A 提供了如何设置的详细信息，因为我们会教授所有有助于创建优质网站的各种技能和技巧。这个练习网站的标题是Instant Pot 的时间测试食谱，它的标语（口号）是初学者的舒适食物。然而，我们也会时不时地研究其他用例。例如，在本章中，我们将看到如何准备开始构建一个面向巴斯钓鱼者的电子商务网站。

本章将向你展示如何智能地打下坚实的基础，以帮助你创建一个连贯、专业的网站，让你为之自豪。第一步是聚焦你网站的主题。换句话说：找到一个利基。

3.1 聚焦你的网站

当初学者开始他们的第一个网站时，最常见的错误也许就是选择一个广泛的主题。这是合乎逻辑的，但是完全错误的。

考虑一下这个用例。一个男人住在北卡罗来纳州，经常在兰德尔曼湖钓鱼。他是那个湖里钓大口黑鲈的专家。他知道一天中的最佳时间，合适的天气条件，以及使他成为非常成功的巴斯钓鱼者的其他细节。

因此，在决定他的网站标题和域名（互联网地址名称，又称 URL）时，他想：嘿，这些年来我可以给在兰德尔曼湖钓鱼的人提供很好的建议。但仅仅谈论这一个特定的湖泊会 极大地限制我的观众。为什么只把这些好建议提供给当地人？这个世界上有一大群钓鱼者。我应该面向这个巨大的观众。此外，将来，当我的网站庞大时，我还会向他们出售我的特制手工鱼饵。这可能是大的！我只会写钓鱼的一般知识并向一个巨大的客户群销售！

这是常识，是直觉，也是最糟糕的选择。

它是如此错误的原因在于，如果你的网站的焦点和标题是钓鱼，你就会与其他也使用该关键字的 1.3 亿个网站竞争——从雷达扫描仪到蟾蜍钓鱼。而且其中一些网站已经发展成熟并且很受欢迎。你的网站几乎不可能出现在某人搜索 fishing 时的结果中。而且大多数人可能会使用其他关键字，比如 North Carolina、bass，甚至 Randleman Lake。

所以我们的钓鱼人应该通过使用这样的关键字来缩小网站的主题：在格林斯伯勒的兰德尔曼湖钓黑鲈鱼。

这只会在搜索时触发几个竞争网站。如果搜索工具判断你的网站制作精良，你甚至可能位于搜索结果的顶部。这就是如何增加你增加庞大和忠实受众的机会。毕竟，兰德尔曼湖周边大约有两百万人口。作为受众，这已经足够大了。

3.2 确定网站目标

有些人擅长即兴创作，边做边想。但在开始构建网站之前制定一个计划几乎总是值得的。如果你有太多的事后想法，网站可能会感觉像是拼凑在一起的，不连贯的，甚至令人不适。

所以确定你网站的主要目标（不是目标）。并继续朝着那个目标努力。结果很可能看起来组织良好，从而建立信任并传达质量。无论你的目标是什么，你都希望网站看起来专业，而不是业余的。

首先确定你想要建立的站点类型。你是要销售商品吗？如果是这样，你正在建立一个电子商务网站。这个网站只是为了你的家人和朋友，是一种多媒体日记，记录你的活动、生活历史或家谱吗？这就是所谓的个人 博客网站（在这种网站中，你不需要找到一个利基，你就是它）。

提示

大多数个人网站的受众非常有限，只有亲戚和朋友。这样的网站很少吸引大量的观众。首先，它们通常是四处碎片化的，缺乏重点，没有明确的单一主题。有些人成为影响者——他们很幸运地建立了一支观众。但除非你已经是一位名人，拥有一个渴望了解你一举一动的现有粉丝基础，否则你的个人博客很可能只会吸引你圈子外的少数关注者。如果你不关心收入或建立大型受众，那么这也没什么。

3.2.1 网站的 11 种类型

网站可以根据其主要目的大致分为 11 个不同的类别。当然，有些网站会融合两个或更多的目标，有些网站是如此独特，无法轻易分类，比如 dudequote.com——一个《大镖客》的台词生成器。

这个列表展示了一般的类别：

1. 电子商务——一个专注于在线销售的网站。例子包括 eBay、Etsy 和数百万个个体销售者。

2. 博客-在网站上按照反向年代顺序发布信息的广播信息。一些博客鼓励互动，允许访问者回复帖子。一般来说，博客提供最新信息，而不是不经常更改的静态页面。今天，许多网站都包括一组传统的静态页面，但也包括博客页面。这样的网站称为“混合”网站。

3. 新闻-例如 BBC 或 CNN。

4. 社交媒体-人们可以在其中与朋友和家人互动，分享评论和媒体，并参与讨论。 Facebook 是最著名的一个。

5. 论坛-类似于社交媒体，但主要设计用于回答关于特定的，通常是技术的主题，如编程的问题或交流信息。许多应用程序，包括 WordPress 本身，都设置了论坛，初学者可以在其中与有帮助的专家联系，专家们可以交换想法。论坛通常是包含问题和答案的留言板。相比之下，社交媒体往往包含更通用的内容，包括多媒体。

6. 信息性的-https://www.wikipedia.org，我们自己的 Recipes 练习网站和类似的网站提供各种知识。有些信息网站可以用于研究。但通常，AI 驱动的网站如 GPT、Claude、Perplexity 和其他网站对研究是最有效的资源。

7. 教育性的-Udemy 和 ed2go 是在线学校的两个例子。有些提供视频课程，其他人则包括讨论论坛，学生可以与教师互动。许多教师和图书馆员为本地学生和读者建立小型的本地教育网站。

8. Chat Bot-这些基于 AI 的系统以对话或聊天的形式提供信息。换句话说，您可以通过要求对先前的响应进行详细说明或修改，以深入了解有关查询的更有帮助的答案。

9. 组合-艺术家、作家或其他想要展示他们的创作的人建立组合网站。有许多出色的主题设计显示各种创意工作。

10. 就业-像 monster.com 这样的网站提供给求职者资源，例如创建简历、寻找职位、宣传自己的可用性和申请职位。

11. 政府-本地或国家的网站，旨在协助服务、政策和其他政府资源。

3.2.2 需要回答的五个问题

在实际开始建立网站之前，请确保您已回答了这五个问题：

• 网站的目的是什么？

• 网站的短期目标是否不同于长期目标？换句话说，在发展受众后，您是否计划销售商品？

• 目标受众是什么？

• 人们会从网站中获得什么？

• 您准备在主机服务和主题上花费多少？

对于您的目标做出这些基本决策有助于将设计和内容引导为谐和的整体。它还帮助您选择成功支持目标的插件、功能和功能。

以下是针对巴斯钓鱼网站计划的这些问题的示例答案：

• 该网站的目的是最终销售我手工制作的鱼饵。

• 是的，它会随着时间的推移而改变。最初，我只想吸引当地的巴斯钓手，并通过提供关于如何在兰德尔曼湖钓鱼的最新、有价值的技巧来保持他们的回头率。但最终我会添加一个电子商务组件，以市场营销我的昂贵但却令人印象深刻和有效的鱼饵。

• 目标受众是钓鱼的人们在兰德尔曼湖。

• 我希望我的受众能获得优秀、具体的信息，以提高他们的钓鱼水平。

• 我打算获取一个免费主题，并在一段时间内使用免费版本，然后当网站起飞时可能升级到付费版本。我会看看我是否最终需要专业版本的功能。我将使用 DreamHost 托管服务，因为它备受推荐，但起初价格低廉。（我考虑到托管服务通常会在介绍期后增加每月费用。）

3.2.3 与克劳德的咨询

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

作为一名经验丰富、专业的网站设计师（同时也是一名巴斯钓手），深吸一口气，审查一下我对以下五个问题的回答。一步一步地思考，请列出您对改进有关我的巴斯钓鱼者网站计划的答案的任何补充或建议。您是我的新网站项目的顾问。

克劳德回答了一些好主意：

这是我作为一名经验丰富的巴斯钓手和网站设计师的额外建议：

强调您在兰德尔曼湖钓鱼方面的个人专长。提供有关在那里钓鱼的年数、最喜欢的地点、最大的收获等细节。确立您的信誉。

面向目标受众，非常具体——针对经常参加兰德尔曼湖锦标赛和俱乐部活动的认真的巴斯钓手。为铁杆爱好者提供内容，周末业余钓鱼者会跟随。

专注于提供在兰德尔曼湖上持续捕捞大型巴斯的专业技巧和高级策略。超越基础知识——分享您的专业、经过验证的方法。

在社区方面，考虑创建一个兰德尔曼湖巴斯钓鱼论坛，让访客互动并分享他们的经验。这可能引发持续的参与。

对于货币化，研究与您的受众相符的巴斯装备和船只的联盟计划。考虑与当地的钓鱼指南和小屋合作。

为了在核心目标受众中传播您网站的意识，为付费促销预算——Facebook 广告，赞助活动，战术 SEO 等。

利用您在巴斯社区的社交媒体存在来推广网站。也在影响者博客上做客帖。

如果你想让我对计划的任何部分进行详细说明，或者从我在黑鲈钓鱼和建立专业网站方面的经验中提供额外的建议，请告诉我！我很乐意提供我的专业知识！

最后，一旦你弄清楚了你要建立的站点类型，就访问其他同类型的热门站点。从中学习什么是有效的，什么应该包括在内，以及什么功能和设计是最好的。还要在标题、标语（显示在每个页面标题下方的短语）和文本内容中包含关键词。使用人们在搜索时可能使用的精确和详细的关键词：

或

注意这些搜索术语专注于相当具体的主题。你可以通过添加形容词来进行专注。我在本章中多次使用了专注这个词。

3.3 创建一个层次结构

如果你希望你的站点成功，高效的导航至关重要。

人们来到一个网站是为了找到某些东西。但他们不希望找到的是一个如此混乱的站点，以至于他们的第一反应是困惑。如果让他们觉得他们必须解决难题才能得到他们想要的东西，他们会很快去别处。

你希望从你的主页到他们的目标的路径非常清晰和直观。确保他们不会感到困惑。记住，当人们感到困惑时，他们很少责备自己。他们只会对你和你那没必要复杂、效率低下的网站感到沮丧。

你必须立即给访客提供站点结构的心理模型。随着时间的推移，随着你的站点变得越来越庞大，一个坚实、合乎逻辑的架构会使未来的修改更加容易。最后，如果 AI 机器人和搜索引擎发现你的站点连贯而合乎情理，它们就会给你更高的排名。

在以后的章节中，我们将探讨获取有关人们如何遍历你的站点、他们在哪里遇到问题以及其他数据的方法，你可以利用这些数据来尽可能提高他们的用户体验（UX）。但现在让我们考虑基础知识：层次结构和可导航性。

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

在创建你的站点页面之前，先列出你想在站点中包括的主题。然后将列表安排成一组：父页面、子页面、孙页面（如果你的站点相当大，可能需要孙页面）。

你的菜单只显示父页面。当访客将鼠标指针移动到菜单中父页面的名称上时，会显示一组子页面。这是访客导航你的站点的最典型方式。

例如，在我们的钓鱼站点中，父页面可能包括诱饵和关于我们。子页面将是这些页面的子页面。诱饵父页面可能有四个子页面：转动鱼饵、旋转鱼饵、水面诱饵和嗡嗡声。关于我们下的子页面可能包括我们的历史和未来计划。

这里的目标是将网站组织成五个或六个主要父页面，每个页面可能包括子主题（子页面也称为子菜单）。 网站菜单是指指向网站页面的一组链接。 它通常显示为每个页面顶部附近的水平条。

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

新闻（博客）技巧和技术比赛联系我们

最好尽量让菜单尽可能简洁。 所以除非这会牺牲导航性，否则请限制自己不超过六个父页面。 创建一个描述性强、引人注目的网站标题，但请注意，标题并不是网站的 URL 网址（URL 以 .com 或 .org 或其他后缀结尾）。

现在考虑我们的钓鱼网站如何显示图 3.1 中显示的典型网页的七个元素。

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

3.3.2 让人工智能创建你的页面层次结构

人工智能能否起草我们示例的钓鱼网站的第一版层次结构？的确可以

提示

在与人工智能合作时，要习惯自己的角色：你是老板；它是一个助手（尽管比你快得多，拥有互联网规模的记忆，多才多艺，列表还可以继续…）。 但是，你作为老板的角色是想出任务，把工作交给人工智能，然后判断哪些响应是可靠的，哪些需要进一步的工作。 你总是可以把进一步的工作请求传回给人工智能。 或者自己做出改进。

要向人工智能询问页面层次结构（换句话说，网站菜单系统），指定两个任务将很有帮助：

1. 查找并列出最成功的钓鱼网站。

2. 显示一个有序列表，展示这些网站菜单层次结构有什么共同之处。 这些问题将有助于确保没有遗漏任何主题，并且还可能产生最佳、最合逻辑的整体网站组织。 人工智能无疑是有逻辑能力的。

我给了 Bing 这个提示：

你是一个经验丰富的网站评论员和评论家。 你还是一位专业的巴斯钓手。 请列出世界上五个最成功的巴斯钓鱼网站的 URL 地址。 请仔细检查这些 URL 是否仍在使用，并且它们在谷歌搜索中使用关键词 bass fishing 时排名非常高。

它回答道：

根据我的搜索结果，以下是当前活跃并在谷歌搜索中排名高的五个使用“bass fishing”关键词的最成功的钓鱼网站：

1.     BassFan

2.     BassResource

3.     BassRankings

4.     Bassmaster

5.     FLW Fishing

然后我跟进了第二个提示，要求 Bing 设计一个结合这五个网站共同主题的菜单。

提示：

你了解网站菜单系统。请检查这些五个网站的菜单和子菜单。将这五个站点的菜单层次结构合并为一个有序列表，列出父页面和它们的子页面。重新检查你的结果，确保你将这些层次结构合并为一个伟大的钓鲈鱼网站的单一菜单层次结构。

Bing 提供了这个有用的、逻辑性强的层次结构：

基于前五个钓鲈鱼网站的菜单结构，以下是一个合并的层次结构，可以作为一个伟大的钓鲈鱼网站的通用结构：

主页

新闻（博客页面）

最新消息

职业巡回赛新闻

码头谈话

锦标赛

时间表

结果

排行榜

钓鱼者简介

排名

世界排名

年度钓鱼者

技巧与技术

专业钓鱼技巧

如何视频

装备评测

论坛

一般钓鲈鱼论坛

小口鲈钓鱼

钓鱼报告

装备

新产品

渔具评测

视频

最佳抓捕

专业日记

文章

精选文章

观点

会员资格

登录/立即加入

这涵盖了一个钓鲈鱼的网站的基础。它包括一些我没有想到的好话题。但是，我想要减少菜单的大小。首先，我会将锦标赛和会员资格从菜单移到侧边栏上。但是为什么我要担心修剪，当我的渴望、神童般的助手很可能会做得更好呢？我们很快就会把这个减少菜单的任务交给 AI。

3.3.3 AI 可以为您创建一个完整的网站

您想要 AI 为您生成一个全新的网站，或者至少给您一个初稿来参考吗？几个 AI 动力系统提供了这样的服务。其中，10web.io/ 是一个不错的选择。你只需提供一些关于你意图的基本信息。然后它会相当不错地生成一个真实的网站。当然，您需要做一些调整和提供内容，但对于一些人来说，这个过程可能比从头开始创建一个空白的网站要容易。10web 倾向于偏爱长滚动主页（主页上的整个站点），但是 10web 生成的站点层次结构、文本和图像都是出乎意料地好，正如您在这个示例中所看到的：

图 3.2 这是从一个简短的、只有一段的提示生成的，描述我们的 Instant Pot 食谱练习站点

3.3.4 使用菜单插件

正如往常一样，您可以安装提供额外功能和选项的插件到您的菜单中。这里有三个受欢迎的菜单插件：

• UberMenu—让你创建复杂的大型菜单（意味着它们有多个级别，可以包含特殊内容，比如地图或博客文章网格）。

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

• Max Mega Menu—允许您添加带有小部件、转换等功能的大型菜单。

贴士

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

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

每个网站的菜单要求不同，但一定要追求简洁、简单和清晰。（事实上，在整个网站中也是如此。）记住人们期望在互联网上迅速获得结果。

在将您的网站公开之前，请朋友浏览您的网站，同时您观察并做笔记是个好主意。是什么让他们困惑了？什么让他们感到恼火或困惑？他们通过网站时采取了哪些路径？最重要的是，当他们离开首页时，他们是否去了您希望他们去的地方（根据您的行动呼吁）？肯定不会去另一个网站！

有人说，完美的导航系统是一个访问者可以在不点击任何东西或实际做任何事情的情况下看到所有选项的系统。甚至包括像悬停鼠标在菜单栏上以显示子页面的下拉菜单列表一样简单的事情。

但对于大多数网站来说，将网站划分为父页面和子页面是必要的。至少可以避免在父页面上过多内容导致负载过重。人们几乎总是对大量文字感到厌恶，特别是在首页上。市场营销专家和现代网页设计师都偏爱极简主义。你的目标最终应该是使浏览你的网站变得轻松自如。让访客尽可能用最少的点击找到他们想要的东西。

有时人们希望返回到网站的首页，所以在菜单的最左边包含一个名为首页的菜单项是很好的。点击网站标题或标志通常也会返回到首页。网站通常在每个页面上显示网站标题（以及可选的标志图像）。这些通常位于页面的左上角。

主菜单项（父页面）显示您网站中发现的主要、最一般的主题。子菜单用于辅助页面或内容。子页面显示补充的、更具体的信息，扩展了其父页面中的内容。

为了尽可能地使菜单项尽可能简短，请不要在菜单中重复您的网站标题。例如，我们书籍的实践网站的标题是Instant Pot 的经过时间检验的食谱。因此，在命名菜单项（或页面标题）时不要使用这些词。不要重复Instant Pot 的墨西哥食谱，甚至只是墨西哥食谱。您的访客知道他们正在查看一个专门为 Instant Pot 食谱的网站，所以只需简单地命名菜单项为墨西哥和泰国。

Instant Pot 的经过时间检验的食谱是一个确定的术语。毕竟，您的网站标题作为顶部标题显示在每个页面上。不需要在菜单中重复它。

提示

从技术上讲，“time” 和 “tested” 之间需要一个连字符，因为这些修饰语一起作为修改 “recipes” 的复合形容词。这种连字符使人们不会产生错误的想法，比如 “time recipes”。但是，在标题中，标点符号规则通常是放松的。

3.3.6 请求 AI 简化您的菜单

如果您试图缩短您的菜单，您可能希望向 AI 寻求一些建议。使用之前描述的钓鱼网站菜单，Bing 提出了几种有用的简化方式。在我查看了本章早些时候 Bing 为我们创建的菜单之后，我给了它这个提示：

你创建的菜单很不错，但太长了。你能列出哪些主菜单项目可以降级为子项目，或与其他项目合并，或放到侧边栏，或完全不放在菜单中吗？请解释你的理由。

Bing 说：

以下是我对简化您网站菜单的建议：

合并相似的项目：将相似的项目分组在一起以减少混乱。例如：

“Latest News”、“Pro Tour News” 和 “Dock Talk” 可以作为 “News” 的子项目。

“Schedule”、“Results” 和 “Standings” 可以作为 “Tournaments” 的子项目。

“World Rankings” 和 “Angler of the Year” 可以作为 “Rankings” 的子项目。

“Pro Fishing Tips”、“How-To Videos” 和 “Gear Reviews” 可以作为 “Tips & Techniques” 的子项目。

“General Bass Fishing Forum”、“Smallmouth Bass Fishing” 和 “Fishing Reports” 可以作为 “Forums” 的子项目。

“New Products” 和 “Tackle Reviews” 可以作为 “Gear” 的子项目。

“Top Catches” 和 “Pro Diaries” 可以作为 “Videos” 的子项目。

降级不太重要的项目：将访问频率较低的项目移到侧边栏或页脚。

例如，“Sign In/Join Now” 选项通常放在网站的右上角或页脚，而不是主菜单中。

移除多余的项目：如果一些信息在不同的部分重复出现，请考虑移除其中一个。

例如，如果 “Gear Reviews” 和 “Tackle Reviews” 中的内容相似，您可能希望将它们合并。

Tip

尽量避免孙子页面（子页面的子页面）——即使在最好的情况下，人们也会觉得它们难以理解和难以导航。但对于较大的网站，它们可能是必要的。

3.3.7 菜单替代方案

虽然通常预期网站会提供传统菜单，但也有其他选择。您的目标始终是找到访问者找到所需信息的最佳、最快的方式。每个网站都应该在每个页面上提供搜索工具。虽然大多数人更愿意点击链接或菜单项，而不是输入搜索词，但您确实需要为访问者提供一个好的方式来定位高度特定的信息。而搜索工具就是为此目的服务的。大多数主题都包含基本的搜索功能，但您可能希望使用专门的搜索插件，该插件提供额外的选项，如深入、自动完成，以及可能的缩略图预览。

较大的网站通常也在每个页面的页脚处显示站点地图。如果你将菜单看作是网站的目录，那么站点地图就像是索引。这是一个冗长、非常精细和全面的链接列表，涵盖了整个网站的每个主题和子主题。也有说法称，站点地图还可以提高您在谷歌和 AI 机器人中的排名。有关更多信息，请参阅此教程：www.rankmovers.com/importance-of-sitemap-in-seo/

制作站点地图可以帮助您可视化如何将网站细分为一个合理的层次结构。在创建站点地图后，将也许多达 50 个主题排列在父子页面的层次类别内。

在许多情况下，最好的选择将是同时提供站点地图和菜单。出于与书籍带有目录仍有目录一样的原因。

3.4 避免长滚动

菜单显然有助于网站导航，为进入页面提供了便捷的途径。但是如果网站只有一个页面怎么办？仅仅因为某件事情变得流行并不意味着它是个好主意。还记得曾经因机场飞镖而丧生的人们吗？

现在在网站设计中有一个流行趋势，即将整个内容放在主页上。这可能会使访问者找到所需内容变得复杂。滚动并不是定位你所寻找的东西的最有效方式。

如果在长滚动页面中没有指向各节的链接，访问者必须向下滚动，浏览标题，以找到他们想要的内容。今天的在线观众期望使用链接快速到达他们想要去的地方。

长滚动方法的支持者认为人们更喜欢简单，提供菜单或其他到内部页面的链接并不简单。他们认为单页网站是无缝的--所有信息都在一个页面上。它更简洁。他们声称的另一个优势是单页网站在移动设备上运行良好，其中菜单可能效果更低。

显然，类似亚马逊这样拥有大量内容的网站无法采用长滚动方法。这种网站必须有多个页面。而网站越大，就越依赖其搜索工具。

但是如果客户或设计师坚持采用长滚动系统，则有一种解决方案。为网页内部连接设置一个链接菜单（称为内部或书签链接，与页面链接相对）。不久我会向您展示如何在页面内部链接到目标。

提示

一定要对内容进行分块。人们通常喜欢相对较短的段落，段落之间用图片或空白分隔。而你的访问者也普遍偏好简短、非常清晰的句子。

3.5 充分利用链接

菜单是一组链接，但网站也使用其他种类的链接，所有这些都是为了使网站的浏览尽可能容易。

超链接被点击时，跳转到互联网上的其他地方（链接的目标）。您跳转到的链接目标可以是一个很短的距离，比如页面中的几段文字，也可以是远到太空站。此外，链接可以显示文档，比如 PDF 文件，或其他媒体。

3.5.1 链接被网站访问者和设计师所重视

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

因为通常将观众尽可能长时间地留在您的网站上是一种明智的策略，所以链接到站点外部的位置应该很少。您希望观众在您的网站上直到他们完成您希望他们完成的事情。注册某些内容，提供他们的电子邮件地址，购买您的商品，等等。

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

• 传统链接——通常是下划线和蓝色的单词或短语，描述链接的目标。对访问者可见的描述链接目标的单词或短语有时被称为锚文本。链接被点击后，它可能会变成不同的颜色，以通知访问者他们已经去过那里了

• 菜单链接——通常是每个页面顶部附近显示的一组水平链接。链接文本描述通常与链接发送您到的页面的标题相同

• 按钮链接——每个人都知道按钮可以点击。有时它执行一个动作，比如从访问者向您网站的联系表单提交。其他时候它可以是一个链接，链接到按钮标题描述的位置

• 图片链接——您可以显示图片或缩略图，而不是传统的文本链接，或者显示一组缩略图作为文本菜单的替代品

• 地图链接——包含多个链接的较大图像。它显示多个位置或图标，当点击其中任何一个时，访问者将被带到不同的目标

• Logo——您网站的标志和标题通常都是链接，可将访问者带回首页

链接的目标有各种各样。以下是主要的几种：

• 图像的替代视图——例如将小图像放大到页面大小，或在不同的浏览器选项卡中显示它

• 帮助链接——显示文档，通常在单独的选项卡中显示

• 内部链接——跳转到与链接同一页的位置

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

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

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

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

• 到外部位置，如不同站点。

• 到您站点的不同页面顶部

• 到您站点的不同页面内的位置。

• 到同一页面内的位置。

链接到您站点的页面

让我们看看这是如何实际操作的，当我们向我们的食谱练习站点的两个页面添加链接时：泰国特色菜 和 墨西哥特色菜。

以下是链接到同一站点不同页面顶部的步骤：

1. 转到站点后端的页面 > 所有页面屏幕。

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

3. 确保点击选择编辑页面文本框右上角的“Visual”选项卡。

4. 单击鼠标放置链接的框中。您会看到光标在您单击的位置闪烁。

在工具栏上，点击链接图标，如图 3.3 所示。

提示

如果您的编辑页面屏幕看起来不像图 3.3，那么您正在使用古腾堡块编辑器。向您的页面添加一个 Classic 块，然后按照相同的说明操作。

图 3.3 单击此链接图标以在页面中放置链接

1. 单击图 3.4 中显示的齿轮图标。

图 3.4 点击此齿轮图标会打开一个“插入/编辑链接”模块

1. 您现在可以看到您站点中的页面和帖子列表。填写链接文本（标题）并点击链接目标页面，如图 3.5 所示。

图 3.5 单击 墨西哥特色菜 时，WordPress 会填写该页面的 URL 地址。

1. 最后点击“添加链接”按钮保存链接。

2. 点击“更新”按钮以保存您刚刚对该页面所做的修改。

3. 要查看实际链接代码，并可能修改链接文本，请点击文本框右上角的“Text”选项卡。（如果您正在使用古腾堡编辑器，请按下 CTL+SHIFT+ALT+M）

链接的 HTML 代码如下所示：

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

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

提示

在 WordPress 编辑页面和编辑文章屏幕中，有一个文本框，您可以在其中添加文本或媒体内容。这些文本框在其右上角有两个选项卡：Visual 和 Text。Visual 选项卡允许您看到内容几乎与访客在站点前端看到的内容相同。但是，Text 选项卡显示内容，但还显示告诉浏览器如何显示该内容的 HTML 代码。格式、加粗、链接、页面位置等等。（古腾堡将 Text 视图称为 代码编辑器，这是一个更准确的名称。）

链接到外部网站

要创建到其他站点（例如 YouTube）的链接，您可以按照链接到站点页面时描述的相同步骤操作。唯一的区别是，在单击齿轮图标（步骤 6）之后，您粘贴或键入外部站点的 URL 地址。请参见图 3.6。

图 3.6 在这里只需添加 URL 地址和链接标题即可

如常，不要忘记单击“添加链接”按钮。

链接到不同页面内的位置

虽然链接到页面顶部更为常见，但有时您可能想将访问者发送到第三段落，或者在您站点的页面内的特定图像。

要执行此示例，请在您的实践站点中添加两个新页面，标题分别为“泰国美食”和“墨西哥特色菜肴”。

在本示例中，我们的链接目标是墨西哥食谱页面中的第二段落。而链接本身则在泰国食谱页面中找到。（如果您正在使用古腾堡编辑器，请在您的页面中添加经典块）。请按照以下步骤操作：

1. 转到墨西哥页面，并通过点击文本框右上角的“文本”选项卡（在古腾堡编辑器中，按下 CTL+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。

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

   这是第二段。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 标签后面的 id="mextarget"> HTML 属性。这为该段落命名。它标识该段落，以便我们可以将其作为我们将要创建的链接的目标。您可以将 id 属性命名为任何您想要的。

图 3.7 显示了您的 HTML ID 代码在文本（代码）选项卡中的外观。

图 3.7 在目标段落开头放置目标 ID

1. 单击“更新”按钮以保存这些更改。

现在，要创建一个指向墨西哥页面的链接，您需要该页面的永久链接地址。因此，请通过将鼠标拖动到永久链接上，然后按下 CTL+C 将其复制到 Windows 剪贴板中，如图 3.8 所示。

图 3.8 这是您复制页面永久链接的位置

在古腾堡中查找永久链接

在古腾堡中查找页面的永久链接是一项费时的任务。首先点击设置图标。它位于右上角。该图标以前看起来像一个齿轮（传统的设置图标），但现在已更改为带有一条穿过的矩形。

如果块选项卡（在设置图标下方）当前已选择，请单击页面选项卡。现在通过单击其黑色三角形图标打开摘要部分。然后找到并单击 URL。这将打开另一个模块，您可以在其中将鼠标拖动到永久链接上以选择它，并按 CTL+C 进行复制。可能更容易的是将永久链接显示在页面编辑器屏幕上。但这将违反古腾堡编辑器 UI 管理的最小主义理论。该理论提倡默认仅显示可能在该时刻需要的最少信息和最少选项。所以因为像永久链接这样的东西并不经常使用，您需要在 UI 中深入几个级别才能找到它。

这是一个提示：点击“查看页面”选项以查看页面的前端视图。然后只需从浏览器地址栏中复制永久链接。

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

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

让我们解析一下这段 HTML 代码：“

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

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

• /#mextarget">是您为墨西哥菜谱页面内的位置指定的 ID，当单击链接时，希望它转到的位置。它是第二段的id。

• 访问墨西哥菜谱页面的第二段是您希望在链接上显示的标题。

• 是链接的闭合标签。

提示

注意，在链接代码中，将井号（也称为井号#）添加到目标 ID 中：#mextarget。而在墨西哥页面中，ID 没有井号：mextarget。

1. 单击“更新”按钮以保存这些更改。

现在通过转到前端的泰语页面来测试链接。您可以通过在仪表板左上角点击您的站点标题，或点击两个“查看页面”链接之一的方式之一查看站点的前端，如图 3.9 所示。

图 3.9：有三种从后端到站点前端的方式

单击链接，浏览器应该显示图 3.10 所示的墨西哥页面的第二段。

图 3.10：您直接跳转到页面内的段落，而不是跳转到其顶部

调试 HTML

与一些计算机语言不同，当您提供有错误的代码时，HTML 不会显示错误消息。它只会做一些有趣的事情，比如发布 404 错误消息（页面未找到）。或者它可能什么都不做，嘲笑你。

计算机代码非常精确。一个错误的标点符号或拼写错误，计算机就无法理解你要求它做什么。这意味着你有一个要追踪的错误。在我们之前的链接示例中，你可能已经从像 Word 这样使用弯引号而不是直角引号的源代码中复制了代码。

图 3.11 引号有两种类型——直角和（弯曲或斜向）——HTML 需要直角引号

HTML 不喜欢弯引号。不知道它们到底是什么。

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

将你的墨西哥或泰国页面的永久链接粘贴到这个网站上：

W3C 标记验证服务

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

图 3.12 验证可以描述 HTML 代码中的错误

接着，它还通过显示图 3.13 中的错误消息，正确地标记了弯引号。

图 3.13 这个错误消息甚至显示了非法字符，即引号

AI 助手

AI 系统在调试代码方面非常出色。这段 HTML 代码中有两个错误。它在 https 前使用了斜向（弯曲）引号。而且它在结尾的 标签中缺少了一个 / 斜杠：

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

所以我让 GPT 找出这段代码中的错误，并告诉我如何更正它们。

AI 在这次测试中得了满分。它回答说：

我已经确定了提供的 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 中按下 CTL+SHIFT+ALT+M）

这是一个按钮链接的 HTML 代码：

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

结果链接按钮如图 3.14 所示，在“泰国美食”下方。

图 3.14 默认的 HTML 按钮是一个相当粗糙的黑色块

这个鲜明的全大写白字黑色按钮（HTML 默认）在许多 WordPress 主题中不会很好地融入。事实上，几乎没有一个。它很难看。所以让我们添加一些 CSS 代码，使它不那么严厉，如图 3.15 所示。

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

提示

如果你只使用 border 而不是 border-radius，你会得到一个实心框架。添加半径，你会得到一个更细微的、3D 的阴影效果。

图 3.15 CSS 样式代码可以改进默认的 HTML 按钮，但你可以做得更好

HTML 属性的style代码实际上是用 CSS 语言编写的。它与 HTML 结合使用来微调网站的外观，并且还可以添加特效，如动画、不透明度、过渡淡入淡出等其他酷炫的视觉效果。我们将在后面的章节中深入研究 CSS。幸运的是，CSS 相当容易理解，因为与大多数计算机语言不同，它使用像 border、color 和 background 这样的英文单词。当然，你也可以随时向克劳德或其他 AI 之一提交请求，以生成符合你要求的 CSS 代码。

那个蓝色按钮比第一个按钮要好，但它仍然可以改进。为了得到逼真的按钮，你可以在类似 Paint.net 或 PhotoShop 的图片编辑应用中创建一个按钮图像。或者使用像 Midjourney 这样的 AI 文字到图像应用程序。或者甚至从 pexels.com 或 iStockPhoto.com 购买一个按钮图标。然后将该按钮图像添加到你的网页中，并将其设置为链接。方法如下：

1. 转到媒体 > 添加新内容 屏幕，并将按钮图像上传到你的 WordPress 媒体库中。这是你在页面中使用的图像和其他媒体的存储位置。

2. 转到要创建链接的编辑页面。

3. 在文本框中点击“可视化”选项卡。

4. 点击“添加媒体”按钮，点击图像进行选择，然后点击“插入到页面”按钮。

提示

如果你正在使用古腾堡代码编辑器，按下 CTL+SHIFT+ALT+M。这个键盘快捷键可以在代码视图和可视视图之间切换。现在你想要处于可视编辑器模式。然后在页面上添加一个经典块。如果你在经典块的工具栏上看不到菜单—文件、编辑、视图、插入等—那么转到你的插件 > 新增屏幕，并搜索、安装并激活 高级编辑工具 插件。在块的菜单中，选择插入 > 添加媒体（而不是媒体选项）。从你的媒体库中选择你想使用的图像。点击插入到页面按钮。

1. 在编辑页面屏幕上，点击图像以选择它。

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

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

图 3.16 这是如何将图像链接到 YouTube 的方法

1. 点击更新以保存你的更改。

2. 点击查看页面以查看并测试链接，如图 3.17 所示。

图 3.17 一张逼真的按钮图像比一个 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 定制你的菜单

你的菜单项目的顺序，有时甚至菜单项目的名称都需要进行修改。但在这之前，让我们在练习站点中创建一些子页面。

小贴士

如果你正在使用古腾堡编辑器，你可以按照下面为经典编辑器描述的相同步骤来创建你的菜单。古腾堡还包括一个导航菜单选项（作为外观 > 小工具屏幕上的小部件和编辑页面屏幕上的块）。它提供了几个选项，包括在侧边栏中显示到所有页面的链接列表。

到目前为止，所有页面都是父页面。这些新的子页面将是空的占位符页面。它们将有标题，但我们将在首先创建站点结构后再给它们添加内容。所以让我们在练习站点中再添加几个占位符页面。

转到你的页面 > 新增屏幕，并添加以下额外的占位符：

• 德州墨西哥风味餐

• 香辣泰式

• 中餐

• 法国料理

• 意大利食材

• 美食希腊

• 还要添加一个名为 博客 的新页面

AI 协助

如果你想要一些帮助来想出好的子页面，你可以问 GPT。

提示：

作为一名专业的墨西哥餐厅厨师，请列出六个墨西哥食品的子类别（例如墨西哥德州风味）。不要根据地理位置创建类别。

GPT 的建议：

当然！墨西哥菜系丰富多样，虽然不可能仅用几个子类别来归纳其所有细微差别，但这里有六个广泛的类别：

街头美食

开胃菜和小零食

墨西哥辣酱和调味料

酸橘汁腌料和海鲜

砂锅菜和炖菜

甜点和糖果

在创建菜单之前，还有一些小事情需要处理。WordPress 默认将博客页面设置为首页。但是对于练习站点，您希望将博客设置为内部页面。 （博客是一种特殊的页面，其中包含您或您的访客发布的所有消息。它们以可滚动的、反向时间顺序显示。我们将在下一章中处理博客页面。）

前往“文章” > “新增文章”，键入标题和一些文本以创建一个虚拟的占位文章。这会导致 WordPress 为您创建一个博客页面的流程完成。点击“发布”按钮。

此时将博客更改为内部页面。如图 3.18 所示，转到“设置” > “阅读”屏幕，然后点击“静态页面”选项，并选择将Instant Pot 的经过时间测试的食谱设置为首页。选择博客作为博客页面。点击“保存更改”按钮。

图 3.18 这是您指定站点首页的地方

当您首次开始新的 WordPress 网站时，您需要为站点命名一个标题。如果您为本书设置了练习站点，请在附录 A 中将练习站点命名为Instant Pot 的经过时间测试的食谱。WordPress 会自动将您的首页标题与站点的标题相同。（每个站点都有一个首页。）但是您应该更改默认的首页标题。这是多余的。网站标题出现在每个页面上。因此，首页不应与站点标题相同。

因此，转到您的“页面” > “所有页面”屏幕，点击Instant Pot 的经过时间测试的食谱以打开其编辑页面屏幕。将首页标题更改为轻松卓越或您喜欢的任何内容。点击“更新”按钮。

快速查看您的“页面” > “所有页面”屏幕。请注意，WordPress 已将博客标识为博客页面，将 Easy Excellence 标识为前端（首页），如图 3.19 所示。

图 3.19 WordPress 已识别出您的主页（首页）和博客页面，并缩进了子页面

在构建站点菜单之前，您需要将“Tex Mex 餐”和“香辣泰式”转变为子页面。转到“页面” > “所有页面”，双击“Tex Mex 餐”。要将其设置为“墨西哥特色”父页面的子页面，找到“页面属性”模块，然后点击 V 形图标以展开父菜单。点击墨西哥特色。点击“更新”按钮，如图 3.20 所示。

图 3.20 这是您将子页面分配给其父页面的地方。实际上，您在此处创建父/子页面关系

按照相同的步骤将“香辣泰式”设置为“泰国特色”的子页面。

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

由于某些原因，WordPress 默认仅在其“添加菜单项模块”中显示最近的页面。幸运的是，WordPress 中很少见到此类用户界面错误。但您应该记住这一点：每当您访问外观 > 菜单屏幕时，请务必首先单击“查看所有”选项卡，如图 3.21 所示。

图 3.21 必须记住单击此“查看所有”选项卡

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

图 3.22 添加所有页面到菜单

3.6.2 创建子页面菜单链接

拖放菜单项，使您的菜单结构看起来像图 3.23。要将菜单项更改为子菜单（换句话说，显示为子页面），请将其向右拖动一点，然后将其放置在其父菜单项的缩进下方。

这种操作需要一些时间来适应。请注意，在图 3.23 中当您将菜单项向右拖动时出现的微弱虚线框。该框是您希望将 Tex Mex 餐饭子项目��放的目标位置。

图 3.23 要创建子菜单（子菜单）项，请将子菜单拖到一个标签上并将其放在那里

提示

如果您发现将子菜单向右移动一个标签的过程具有挑战性，您也可以单击子项框右侧的黑色箭头图标来打开其模块。然后单击图 3.24 所示的移至链接。

图 3.24 您可能会发现此链接比将菜单项移动一个标签更容易

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

请注意，您必须将Easy Excellence重命名为主页，因为这是习惯的。人们期望第一个菜单项命名为主页，并位于菜单栏的最左侧。

完成的菜单结构应该类似于图 3.25 所示。

图 3.25 完成的菜单

单击“更新菜单”按钮，然后单击左上角的网站标题Instant Pot 时测试配方以查看前端的菜单，如图 3.26 所示。请记住，单击网站标题是在后端和前端之间快速切换的一种快捷方式。

图 3.26 完成菜单的前端视图

现在要注意两件事。Twenty Sixteen 主题在菜单上提供了两个不引人注目的视觉提示：当前显示的页面的菜单项是加粗的（在本例中是首页），而墨西哥和泰国的项目具有小的“v”图标，让人们知道这些项目有子页面。

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

本章内容全部围绕初步规划展开：你的网站目的和层次。我们还探讨了像链接和菜单这样的工具，这将使你的访问者在遍历网站结构时更容易。

现在我们已经在练习网站中创建了占位页面，是时候填充内容了。我们将从文本内容开始。大多数适用于 Web 的写作需要特定的语气和风格。正如您将在下一章中看到的那样，人工智能非常擅长将您的初稿变成优秀的、适合 Web 的文字。

3.7 总结

• 在向网站添加内容之前，确定网站的蓝图和最终目标非常重要。这可以帮助你把握网站的目标，并有助于建立一种连贯的设计和高效的网站导航。

• 在规划网站时，创建父子页面的层次结构是蓝图的一部分。这样就能简化菜单，只显示主要（父）类别，隐藏次要（子）页面——只有在游客将鼠标指针悬停在父类上时，它们才会变得可见。

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

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

• 特别注意菜单，它是网站的主要导航工具。在菜单中只展示少量项目，保持每个选项的长度简短。

第四章：准备写作

本章涵盖

• 选择正确的排版

• 了解网站写作风格

• 用出色的主页吸引访客

本章重点关注您网站的文本内容。以及 AI 如何在细节上为您提供帮助，例如选择一个好的字体，以及您整体写作的质量和风格。当拼写检查器出现时，我们不再需要擅长拼写。有了 AI，我们不再需要擅长写作本身！

在本章后面，您将把您的文本提交给一个 AI Hemingway。我认为您会对它如何改善您的写作感到惊讶。我也是。

首先，您肯定会想找到最佳的字体和文本设计。您选择字体大小、字体家族（例如 Times Roman）、字体样式（正常或斜体）、粗细度（字符线条的粗细，加粗与正常的区别，例如）和其他属性，如字母间距和行高。您选择的主题提供了一些默认值，但您应该进行微调。

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

最后，我们将探讨一些方法，通过制作一个精彩而不可抗拒的主页来吸引您的访问者——访问者首先看到的页面。研究表明，人们平均在0.05 秒内就会决定留下还是离开主页！因此，您访问者的第一反应确实很重要。AI 在这方面也会非常有帮助，确保您给出自信、积极的第一印象。

4.1 选择最佳的排版

大多数人实际上并不了解排版，甚至都没有考虑过。但在某种程度上，它确实对他们产生了影响。为您的网站正文、标题和说明选择一种吸引人且易读的字体和字号。而这里最重要的考虑因素就是可读性。您希望显示的字符足够大，以便可读。屏幕上的字体大小通常以像素为单位指定。

定义

像素或px（图像元素）是指数字显示器上的最小视觉单位，即单个点。但像素不是固定大小，像英寸那样。它是相对的。像素大小相对于整个屏幕的大小。因此，足球场上的大屏幕将具有砖块大小的像素，但平板电脑的像素可能太小而无法被眼睛看到。像素是您通常可以靠近大屏幕电视看到的单个色点。

4.1.1 理解 AI 多模态

当前的多模态是 AI 研究的一个活跃领域。这个想法是，像 GPT 这样的大型语言模型不仅应该从文本输入中学习，而且还应该从其他模态的输入中学习，比如视频、图形、音乐，甚至交通摄像头或任何其他信息源。换句话说，像人类一样从现实世界的输入中学习。（只不过比我们学得快得多，而且永远不会忘记。）

目前，像中途这样的文本到图像生成器通过从互联网上获取图片来学习，并将之与文本组合（例如，通过存储标题为图像进行标记）。但最终的目标是让 AI 系统能够从各种各样的信息中学习。

持续研究的一个相关领域涉及允许我们用户向 AI 系统提交多模态提示。在某种程度上，当前的文本到图像系统确实允许这样做。除了文本提示外，你还可以将图像上传到 GPT、谷歌的贝尔德（Bard）和中途（Midjourney）。然后，AI 根据图像和文本生成输出。在某些系统中，可以通过滑动条调整输出与提交的图像相似程度。

但是多模态的输出怎么办呢？如果你想这样请求：“请描述在面向儿童的网站中用于正文的三种最佳字体，并显示展示这些字体外观的图像。” 目前，唯一能提供文本描述和相关图像的 AI 是 GPT 和 perplexity.ai。类似 Claude 的其他 AI 也在努力。Claude 对于这种提示类型的当前响应是提供文本段落，并附带图像链接。

4.1.2 选择最佳的字体大小

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

但如果你的正文字体比较细，你可能希望将像素大小增加一点。此外，研究表明，如果你的网站包含大段的文本，为了增加可读性，你应该选择 18 像素或更大一些的字体大小。为可读性而设计：一份 Web 排版指南 | Toptal®[1]

但请记住，大多数网站不应该文字过多。上网时，大多数人都像跳蚤一样，如果碰到一堆灰色的文字感到无聊、困惑或迷茫时就会立刻跳到别的地方。

提示

要查看和修改网站排版的大小、字体和其他元素，请进入网站的后台管理页面（WordPress 仪表板），然后点击外观（Appearance）> 自定义（Customize）> 排版（Typography）。它可能被称为排版（typography）之外的其他名称，比如字体（typeface）或文字（text）。其中的名称和显示的信息取决于你使用的主题，或者如果你安装了相关的排版插件，则取决于该插件。

提示

要添加大量的字体到您的网站上，我建议您转到您的插件 > 新增屏幕并搜索、安装和激活优秀的 Easy Google Fonts for WordPress 插件。然后您可以转到外观 > 自定义 > 字体屏幕，并从数百种 Google 的字体中选择！找到一种适合您网站设计的字体。图 4.1 显示了您如何使用此插件选择字体。

图 4.1 谷歌字体插件包括数百种供您选择的字体

请注意，谷歌使用 字体系列 这个术语来表示我们所说的 字体。

你还应该根据两个额外因素选择你的字体大小：行高和字体。

行高是文本行之间的白色空间量。它被指定为字体大小的倍数，1.5 或 2 是最常见的值。如果太小，文本可能变得难以阅读；如果太大，文本看起来断断续续，就像是打算成为项目列表，但缺少了项目符号。

4.1.3 选择字体

提示

术语 字体、字体 和 字体系列 经常可以互换使用，但我们将使用 字体 来指代字母设计（比如 Arial 或 Times Roman），而在描述字体的特性时使用 字体，比如字体大小或字体样式。

有数百种字体可供选择。粗的；细的；线条形状和厚度各异的；极简的；华丽的；卷曲的；方块状的；几何的；甚至是奇怪的、专门设计的字体，比如蜘蛛网状以显得怪异；或者由跳舞的腿组成的字符以表现小丑。

在婚礼策划师网站上很好用的（人类手写的模仿，如书法或脚本字体），对于迪克体育用品店这样的网站则不适用。而正式、保守的罗马字衬线字体在医院和银行等地方最为适用，因为必须传达可靠性和信任度。然而，大多数网站应选择无衬线字体（简单、无卷曲线，线宽变化小）。流行的无衬线字体选择有 Arial、Verdana 和 Helvetica。

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

Consolas 是经常用于编程代码的字体。但因为可读性并不是唯一的标准（Consolas 很容易阅读），所以要避免使用，因为它不够吸引人。Cambria 是易读的，但它是一种衬线字体，一些研究说你应该避免在网站正文中使用。

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

Verdana 是微妙的。它的边缘略微弯曲，并且某些字母的线条粗细有所变化（参见图 4.2 中的小写字母），使其比传统无衬线字体更柔和，更轻松。你可以在图 4.2 中看到 Verdana 的效果。

图 4.2 Verdana 的简洁设计使其在各种屏幕尺寸上都可读，并且对于许多类型的网站来说是一个很好的选择

4.1.4 十种流行字体

下面列出了十种流行的字体，展示了不同风格的范围——从传统和正式到古怪：

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

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

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

• Bodoni——设计于 18 世纪，这是一种高对比度的衬线字体，即使在今天也经常用于标题和标题。然而，网站标题通常是无衬线字体。

• Garamond——一种优雅且永恒的衬线字体，通常用于书籍和其他印刷品。

• Impact——一种大胆而引人注目的无衬线字体，最适合广告和网站标题。

• Comic Sans——一种俏皮而不拘一格的字体，常见于儿童书籍和趣味性网站设计。

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

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

• Brush Script——一种手写草书字体，具有手绘和艺术感，用于标识、品牌和像新娘店、餐饮和时尚网站这样的网站。据说它传达了优雅和精致。

你网站的主题通常会指定默认大小、行高和字体。但如果没有的话，浏览器有它们自己的默认值，通常是 16 像素的通用无衬线字体作为正文文字。

你也可以使用 CSS 代码来修改你的字体值（实际上 CSS 几乎可以自定义任何其他设计特征）。我将在第六章向你展示一个出色的插件，它可以自动生成 CSS 代码。所以不需要学习 CSS 语言来微调你网站的外观。

在指定字体属性时的最后一个基本考虑是它的颜色，更准确地说是颜色的色调。每种颜色从淡色到非常深色都有不同的范围。这就是粉色是红色的浅色的方式。

一些设计不好的网站在深色背景上使用深色字体。反之亦然——浅色背景上使用浅色字体。显然，这种对比度不足会对可读性产生负面影响，特别是对视力不佳的人来说，这是特别令人沮丧的。文本应该与其背景形成对比。这通常意味着黑色或深色的文本与白色或浅色的背景形成对比。最好的选择通常是老牌可靠的黑白色。并且背景不应与文本竞争——因此不要在文本下方放壁纸或生动的图像。在像背景这样的事情上，微妙是首选。

人工智能可以帮助您查看一些优秀设计网站的示例。例如，将此请求提交给像 GPT 这样的人工智能平台：

请列出两个网站的地址，这些网站特别有效地利用了它们的排版。并列出排版元素，如行高、字体名称、字号等。

4.1.5 排版检查清单

以下清单包括一些您在网站发布之前可能需要调整的其他排版细节：

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

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

3. 使用一致的排版。这意味着在整个网站中使用相同的大小、字体和颜色，以创建统一的外观和感觉。

4. 确保您的排版对所有人都可访问，包括视觉障碍者。因此选择一种易于阅读的字体。我们将在下一章中介绍一些辅助测试工具。

5. 排版可能会影响页面加载速度。一些字体比其他字体更复杂，加载时间更长。并非每个人都有高速互联网连接。请使用此免费在线工具测试您的网站：www.isitwp.com/free-website-speed-test-tool-for-wordpress/

6. 如果您计划在多种语言中显示您的网站，请选择提供这些语言版本的字体。

4.1.6 获得人工智能对您的排版的客观意见

在选择并应用了您的字号、字体、颜色、行高和字距之后，请将您的网站提交给人工智能。我询问了 Perplexity 对宠物领养网站排版的看法：

“请告诉我您对这个网站排版的优缺点的看法：sitename.com”

它通过提醒我，它不是一个人，因此没有个人观点来回应：

作为一个 AI 助手，我没有个人观点。但我可以为您提供对您提供的网站排版的客观分析。

然后它告诉我它的意见。它们事实证明确实有用且准确，尤其是缺点和最后的总结。借助 AI 作为您的研究助手、编辑、设计评论员和全能的博学多才者，它可以向您的网站提出扎实的改进建议：

困惑：网站的排版简单易读。所使用的字体是无衬线字体，由于其清晰和现代的外观，无衬线字体是网站的热门选择。字体大小也适合，使得在桌面和移动设备上阅读文本变得容易。

优点：

排版易读，适用于网站的内容。

使用无衬线字体使网站看起来现代且清晰。

字体大小适用于桌面和移动设备。

缺点：

排版并不特别独特或令人难忘，这可能使网站与其他与宠物相关的网站相比显得不那么与众不同。

网站上很少使用排版来创建层次结构或视觉吸引力。例如，没有使用粗体或斜体文本来强调重要信息或创建对比。

总的来说，网站的排版功能齐全，适用于网站的内容，但在创建更具特色和视觉吸引力的设计方面还有改进的空间。

克劳德.ai 在警告我可能会出现幻觉后也提供了帮助：

以下是我对网站排版的评估：

优点：

对于标题和正文文本，使用了简单、清晰的无衬线字体（看起来像是 Roboto）。这使得网站具有现代、友好的氛围。

标题大而粗，便于扫描。

正文文本的大小和行高适合阅读。

深色文本和浅色背景之间有良好的对比，增强了可读性。

缺点：

所使用的字体缺乏个性，它们是安全和通用的选择。使用更有特色的字体可以使品牌更加突出。

正文段落太长。将它们分成较短的段落可能有助于阅读。

文本对齐是两端对齐，这可能导致单词间距不均匀。左对齐的文本通常阅读起来更容易。

在宽屏幕上，行长度变得非常长，使得从一行到另一行的跟踪变得更加困难。

总体而言，排版完成了任务，但还有改进的空间。我建议使用更具特色的标题字体，缩短段落长度，左对齐文本，并设置最大行长度。这些变化可以使排版从功能性提升到引人注目。如果您需要其他建议，请告诉我！

此外，您还可以提出更具体的问题以获得更具体的建议。

提示：克劳德，你会建议使用哪些替代字体来赋予它更多个性？考虑到网站的主题。

克劳德：以下是一些字体建议，可以为网站注入更多个性，同时仍然适用于宠物/动物主题：

Raleway - 这种优雅的、锥形的无衬线字体比 Roboto 多了一些风格。它的曲线和夸张的笔画增加了一丝俏皮的感觉。

Montserrat - Montserrat 具有圆润、泡泡感的外观，灵感来自城市和涂鸦风格。它的随意但充满活力的氛围可能与宠物相契合。

Playfair Display - 一种衬线字体，但具有弹性、友好的字形。它的对比度和斜线强调给人一种有机的感觉，非常适合动物主题。

Libre Baskerville - 一种温暖、坚固的衬线字体，带有微妙的圆角。它的传统风格带来了一丝古典气息，同时又给人一种狗耳朵、深受喜爱的感觉。

快乐猴子 - 一种展示字体，具有有趣、泡泡状、猴子扳手的外观。可能对正文来说太俏皮了，但对标题来说可能效果不错。

岩盐 - 手写字体，粗糙的边缘赋予这种字体很多个性。传达了宠物和动物手工制作、个性化的特质。

如果您需要网站的字体配对或样式的其他建议，请告诉我！我很乐意提供更多的排版建议。

我会说前三个建议值得考虑。但随着我们继续往下看，它们变得越来越幻觉。请注意，由于该网站涉及宠物相关内容，一些更与动物而不是印刷术相关的修饰语渗入其中：俏皮、泡泡、有弹性、狗耳朵、猴子。公平地说，寻找能潜意识传达这些词语的字体确实对于宠物领养网站是有意义的。

Meta 的巴德也提出了一些好主意，大多与 Perplexity 和 Claude 的观点相同。但巴德又增加了一个独到的建议：“在大多数情况下避免使用全大写。全大写可能难以阅读，会让文本显得过于激进。” Google 的大喇叭也提供了类似的评论，但它犯了一个错误，说它喜欢使用大小写字母。（哪些网站不使用它们？）Bing 和 GPT 表示它们只能提供一般性建议，因为它们无法访问网络。Edge 给出了这样简洁但准确的回答：

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

提示几个人工智能系统可能是个好主意，以获得多样化的意见。

4.2 写作风格

人工智能可以在提供适合您网站整体使命的文本内容方面提供很大帮助。

网站内容大多是对话式和非正式的。在写作时，使用您与朋友交谈时通常使用的语气和措辞。如果你对我在前一句中使用“像”一词感到不满，那么在为网络写作时，你需要放松一点。对话式写作允许在用词和语法上有一些非正式之处。

因此，如果你有法律、编辑或学术背景，或者其他方面倾向于写正式散文——你可能需要争取采用许多网站典型的更为随意的沟通方式。当然，总有例外。法律、银行、医疗或教育目的的网站可能需要更紧凑、更正式的“正确”风格。这些网站需要传达可靠性、权威性和严肃性。一点点的冷漠也不会有什么坏处。但大多数网站应该以随意、友好、易接近的语气为目标。

4.2.1 转换一段呆板的段落

你网站首页的第一段对吸引受众至关重要。你想要欢迎他们，让他们从一开始就感到舒适。让我们尝试将一段呆板的、正式的引言写作为我们的第一段，然后请 GPT 将其修改为更温暖、更口语化的版本。这本书的菜谱练习网站的首页标题是易优美，所以这是一个自负的第一段：

在希望着开始有效地为我们网站的菜谱收集有效编写菜谱的项目之前，我们自己是业余的厨师。我们推测，你们，我们的听众成员，目前可能处于类似的情况。在选择烹饪和执行菜肴时，我们经常感到焦虑或不安。因此，我们的目标是为您的家人和朋友创造出一次出色而令人满意的烹饪体验。请注意，我们已经对每道菜谱进行了彻底的测试。所以你可以认为它们是无懈可击的。

相当呆板，不是吗？

AI 在这种情况下可以非常有帮助。当我们要求它重写我们的段落以使其不太正式时，它给出了以下内容：

在我们开始为这个网站整理这些菜谱之前，我们在厨房里完全不懂！也许你能理解？  我们过去在选择晚餐要做什么时会感到很紧张，甚至在烹饪时也是如此。所以，我们的目标是让您轻松地为您的朋友和所爱的人做出一些了不起又美味的东西。这些食谱简单但很棒！它们不会让你失望——它们经过了大量的测试。

4.2.2 召唤一个模拟体

我们可以给 AI 分配角色，比如网站评论员，或者是获奖的网站设计师。这也意味着我们可以让它召唤出一些著名的已故人物。让我们请一个 AI 海明威模拟体给我们一些建议，来改善我们的散文。

海明威的风格仍然影响深远，因为它的清晰和简洁。（1935 年出版的《风格的要素》——至今仍在教授——倡导了一种类似的干净、清晰的写作方式。）两者都认为最好的写作方式是力求简洁。海明威建议：

• 编写一个简短而有力的第一段。努力吧，这是吸引读者的钩子。

• 保持句子简短。在被要求用六个词讲述一个故事时，他写道：“待售：婴儿鞋，未穿过。”

• 使用肯定的短语，而不是否定的短语。例如，使用 easy 而不是 not hard。您应该使用描述想法的术语，而不是其相反的术语。

• 修改，然后再次修改。“我写了一页杰作，然后写了 91 页的废话。我试图把废话扔进垃圾桶。”

• 他们说他将《永别了，武器》的最后一页重写了 39 次。一个采访者问他问题。他说：“把话说准确。”

Bing 提供了与风格相关的三个设置：

图 侧边栏 4-1:

如果您使用类似于“请修改以下段落，使其更为非正式和对话”的提示，Bing 将提供良好的修订。

另外，当您在右侧的侧边栏中选择聊天时，Bing 也提供了一个修订选项。要使用该选项，请按照以下步骤操作：

1. 在左侧的主窗口中选择一些文本。它将自动出现在右侧的聊天窗口中：

图 侧边栏 4-2:

2. 单击“发送”，您将获得下一个图中显示的选项

图 侧边栏 4-3:

3. 单击“修改”，您会得到一个新版本，但它往往更像是一种释义，而不是改变语气的改写。

4.2.3 使用海明威应用程序

谈到海明威，有一个应用程序将这些原则付诸实践。您可能想利用这个应用程序：hemingwayapp.com/。

您将得到对您写作中任何问题的扎实分析。如果您倾向于写得过于正式，或者有其他问题，如过度使用副词（诸如 hopefully 和 really 这样的 “ly” 词）或过分依赖被动语态（The burger was eaten by the dog 如果您修改为使用主动语态，则可以使其更清晰、更简洁：The dog ate the burger.）

让我们将我们过于正式的段落交给海明威分析应用程序。图 4.3 显示了它的反馈。它特别不喜欢副词，并建议使用少于零个。

图 4.3 这个海明威应用程序在将正式写作修改为更为对话风格时会很有帮助

要使用该应用程序，请点击其网页右上角的“写”按钮。删除现有的示例文本，然后将您的文本粘贴到该字段中以替换它。单击“编辑”按钮以查看结果的评论。

除了发展轻松的风格外，还要记住将内容分成相当简短的段落。避免大段的灰色文本墙。甚至尝试限制整个网站中的文本量 —— 除非您有不采用的充分理由（例如大量的商品目录）。在大多数页面上，只显示几个简短的段落，通过空白、媒体或布局设计进行分隔。

永远不要忽视从人工智能辅助中获益。你最成功的竞争对手正在使用它。你可以找到许多正文内容生成器，甚至有些可以通过改写来避免抄袭。

记得将你的文本通过抄袭检测系统检查一遍。例如，当你在 Microsoft Word 中打开拼写和语法检查器（F7）时，你会看到编辑器面板中有一个标题为“相似性”的部分。如果发现你的文本在互联网上的其他地方重复，它会标记任何抄袭问题。或者尝试使用 Copyleaks（它会检查数十亿个在线来源）或 Grammarly（你应该使用它，因为它是一个很好的通用、用户友好的写作助手）。

为什么要担心抄袭？你知道你自己不会这么做。实际上，有很好的理由担心。在写作时使用人工智能引入了两个新的危险。你可能会在某个时候忘记检查人工智能的结果是否存在抄袭（有时它会直接从互联网复制整段内容而不进行修改）。或者在写作时，你可能会忘记修改一些从人工智能那里复制的内容。

只公布你自己的原创内容是正确的，而不是别人的——即使那个别人是一台机器。

话虽如此，人工智能可以生成许多不同类型的与网站相关的内容，包括博客消息、产品描述、首页文本、各种形式的正式性、一系列引人入胜的标题变体供你选择等。

这里有一些面向网站作者的人工智能资源：

medium.com/@bedigisure/free-ai-content-generator-11ef7cbb2aa0

4.3 制造一个很好的第一印象

记住，你必须花时间打磨你的首页，特别是你网站的第一段。而且真的要努力写好第一句。注意，海明威说过，一篇文章的第一段至关重要。它必须立即吸引读者的注意力。

4.3.1 吸引访客

实际上，你网站的整个第一页都必须吸引访客。写尽可能多的修订，直到文本变得精彩。简洁。出色，像一个清澈的小溪那样清晰。并重新设计页面，直到在视觉上表现出色。

我们将在不久的将来专门讨论两章关于网站设计的内容，但现在让我们预览一下这个主题。开始考虑你的首页设计的一种方式是根据颜色心理学研究结果来考虑什么样的颜色方案会是一个好选择。什么颜色最适合你特定网站的受众？对于我们的食谱练习网站，我进行了一些研究，并得出了以下建议：

• 红色是快餐连锁店最常用的颜色，其次是黄色和橙色。

• 黄色和橙色会让人感到饥饿。

• 棕色有助于给你的网站建立柔和而真实的感觉。

• 蓝色，尤其是深色调，或者使用过多的蓝色总体上会让你的网站给人一种冷漠和冷淡的感觉。

• 据说蓝色还能抑制食欲。对于食谱收集来说并不是最佳选择。

4.3.2 利用人工智能寻找设计灵感

作为实验，让我们向图像生成器 Midjourney 提供四个设计，让它遵循那些心理研究的颜色建议。

这是我向 Midjourney 提交的提示：

*sunny, bright, beautiful home page for an instant pot recipes website, brown::2 yellow::1 4K, detailed, masterpiece, ux, ui, --no blue --no orange --ra 3:2 --q 2* 

提示

注意，您可以使用双冒号符号在 Midjourney 提示中指定您想要相对权重。该提示表示将棕色比黄色突出两倍：brown::2 yellow::1。其他规格包括：高分辨率（4K），用户体验，用户界面，宽高比 3:2 和高质量（q 2）。

这是显示在图 4.4 到图 4.7 中的四个结果。

图 4.4 除了一些奇异的植物外，这是一个可以作为我们主页的设计。

图 4.5 这个版本可能对于一个主页来说太复杂和拥挤了。

图 4.6 这个设计平衡得很好，并很好地遵循了我们的色彩方案，但我们可能会在下部分中离开，以简化设计。

图 4.7 这个设计同样需要简化文本和图像的数量，但左侧草药的立体阴影效果是一个很好的主意。

除了一些外星花卉和蔬菜外，这些图像看起来是灵感的好起点。从 Midjourney 或其他人工智能图像生成器中，通常可以得到与颜色组合、布局、排版、平衡、文本或图像放置相关的惊人的好主意。有趣的是，人工智能艺术通常似乎以某种方式使用在艺术学院教授的规则，关于平衡、线条、对称、颜色、对比度、构图等等。

Midjourney 为每个提示生成四个图像，因此可以轻松生成大量替代方案。如果有什么您想要从生成的图像中摆脱，请使用 "-no" 命令，就像之前阻止蓝色和橙色的方式一样。梵高曾说过：“没有黄色和没有橙色就没有蓝色。”但我们不想要蓝色或橙色，所以我们告诉 Midjourney。

尝试在提示上进行变化，直到设计真正脱颖而出。例如，尝试切换加权：brown::1 yellow::2，或者通过放大并选择 Vary 或 Zoom 选项来完善 Midjourney 的四张图像中的最佳图像。您还可以"混合"修改提示。您和 Midjourney 之间的这种来回可以产生你所寻找的杰出的最终结果。

4.3.3 使用 Canva

如今在设计领域工作的任何人都需要了解 Canva。您可以从 GPT 中开始 Canva 插件（推荐），也可以直接访问 canva.com。 Canva 可以轻松创建一个印象深刻的极简主义现代化主页，就像图 4.8 所示那样。

图 4.8 如果你想要一个不太舒适、家庭化的设计来为你的网站设计，尝试一下 Canva。凭借其深思熟虑的用户界面，你可以快速地创建一个令人愉悦、专业的形象

Canva，作为 GPT Plus 的插件，为设计提供了丰富的资源。假设你想为我们的 Instant Pot 实践网站设计一个更现代、更极简的主页设计。一个不那么显眼的舒适设计。

• 1. 将 Canva 插件添加到 GPT 中的活动插件中。

• 2. 使用此提示：使用 Canva 为提供食谱的网站创建一个现代、极简、优雅的主页

提示

Canva 本身不提供提示——它只有一个传统的搜索工具。因此，如果你通过 GPT Canva 插件进入 Canva，你会得到人工智能的优势。通常情况下，提示会给你更好的结果。出于与查询 AI 通常更有效地获取有用信息的相同原因，比起自己进行研究而言。搜索只会给你一个你需要访问以寻找答案的地方列表。

• 3. GPT 会向你展示一些示例主页的图片，附带 Canva 的链接。

• 4. 点击显示与你要寻找的最接近的主页样本模板的链接。

• 5. 这将带你进入 Canva 的免费版本。

• 6. 在 Canva 的侧边栏中查看并滚动，看看是否有你更喜欢的模板。见图 4.9。

图 4.9 使用此滚动条选项卡，或你的鼠标滚轮，来浏览你的 GPT 提示找到的样本模板

• 7. 如果通过滚动找不到合适的模板，就在模板搜索字段中输入：食谱网站首页

• 8. 按 Enter 键

• 9. 浏览数百种设计。尝试不同的搜索词，如“极简主义”或“现代”。

• 10 当你在侧边栏中找到一个你喜欢的设计时，点击它移动到主窗口。然后侧边栏将重新绘制，显示与你选择的那个类似的设计。

• 11. 如果你愿意的话再次滚动。当你最终找到合适的时候，点击顶部菜单上的“调整大小”。创建你想要的形状。

• 12. 双击设计中的文本以进行定制。

• 13. 探索 Canva。如果你打算设计，它是值得你花时间的。例如，点击你设计中的一个元素以选择它，然后点击“动画”菜单项。

4.3.4 主页清单

通过考虑以下建议来预先规划你的主页：

1. 编写一个简短、引人注目、描述性的页面标题。 它应该总结你网站的目的。并包括一个简短的段落，更详细地说明网站提供的好处。主页的房产都在于简明扼要。如果你绝对必须显示更长的文本内容，用副标题或项目符号列表分隔开，将其放在页面较低的位置。

2. 人们对视觉的理解速度比对文字快得多。选择能够立即帮助他们理解网站目的的图片。不要包含仅作装饰目的的图片。限制背景装饰以确保它不与你的图片竞争。时刻保持简明和专注。研究表明，你的访客在毫秒内决定是否继续停留。所以你没有太多时间来吸引他们。

3. 对于网站的目标要坚决一致，并且应该只有一个主要目标。如果你在写一篇旅行博客，不要在首页上添加健康提示，这样会削弱焦点。可以在内部子页面专门讲述旅途中保持健康的内容，但要保持内部化。在首页上，将健康主题限制在一个概念上。确保首页上的每一样东西都服务于你的一个主要目的。

4. 避免跳出，这意味着有人访问你的主页，但立即返回并转到另一个网站，没有浏览你的内部页面，甚至没有仔细查看你的主页大部分内容。

记住，专家们说平均来说访问你的网站的人在 0.05 秒内就会决定是否留下。如果你的主页经受住了这个超快速判断，仍然有可能在接下来的 20 秒内离开，除非你能够吸引住他们。从技术上讲，互联网营销专家们会关注他们称之为跳出率的数据：即在没有浏览其他页面的情况下浏览主页的访问者所占的百分比。我们将在后面关于网站分析的章节中看看你如何利用这个指标（还有其他很多指标）。

1. 不要让访客滚动页面。他们不会停留足够长的时间来发现起初屏幕下方可能有他们感兴趣的内容。将最能吸引人的内容放在首页屏幕的最顶部。如果你认为有更多的空间来吸引人，只需要记住，目前的估计是大约 50％的上网操作在便携（即小）屏幕上进行，其中手机占主导地位。要从最顶部吸引他们。

2. 确定你希望访客采取的下一步行动。他们应该点击一个链接进入一个展示你产品的页面吗？你希望他们填写表格以便你可以获取他们的电子邮件用于以后的营销信息吗？他们应该使用你的网站搜索工具吗？你希望他们通过在你的博客上发帖来分享他们的观点吗？或者订阅你的网站？或者可能预约、签署请愿书或者获得免费试用？

你希望他们采取的任何下一步行动被称为行动号召（CTA）。所以如果他们没有采取这一步，如果他们离开了，那么你的主页就失败了。

让行动呼吁（CTA）在视觉上与其他内容区分开来（例如对比色），并包含简单而有力的文字描述，例如 查看我们最受欢迎的食谱 或 注册以获取额外的食谱。也许可以通过提供他们的电子邮件地址来获取十个最佳食谱来激励他们跟随行动呼吁。让他们明确知道您提供的奖励是什么。也许可以为他们的第一笔订单提供折扣。无论采取什么措施，都要防止他们离开您的网站。“仅剩三份！” “注册获取独家优惠。” “立即观看视频。”

1. 移除出口。 不要给他们展示会离开您网站的链接。有些网站甚至隐藏了菜单——用三条线的汉堡菜单图标，或者仅仅一个单词菜单来代替。这是一种相当极端且颇具操控性的做法。但确实要避免在主页上放置可能诱使他们点击并跳转到 Facebook 或 Twitter 的社交媒体按钮。

2. 精炼和修改。 一个主页，像任何创意工作一样，永远不会真正完美。当朋友或亲戚尝试您主页的不同版本时，注意观察他们的行为。某个版本可能拥有最成功的行动呼吁（CTA）。安装我们将在书中稍后提到的分析插件。它们可以告诉您访客的行为、他们来自哪里、他们在网站上的路径、他们查看不同页面的时间以及其他可以帮助您改进网站的数据。

3. 建立信任。 推荐语是展示您的网站的价值和质量的强大工具。考虑在主页上添加几个来自访客的简短而热情的评论。最好显示这些人的名字、位置和照片，以使他们看起来更加真实。或许还可以包括一个包含更多推荐语的内部页面。推荐语与评论略有不同——前者完全是积极的，而后者，为了可信度，必须包含至少几个批评性的评论。

在本章中，您已完成内容创作和站点设计的准备工作。首先，您探索了选择最佳字体及相关特质的方法，使文本内容看起来更棒。接下来，您了解了如何获得一种让读者愿意阅读您内容的写作风格。最后，本章以实际行动结束：创建一个引人注目的主页。在下一章中，您将深入探讨设计，学习让您的网站看起来出众所需的工具和技能。如我们所见，人工智能能够生成令人难以置信的原创艺术。因此，它也将在网站设计中发挥重要作用。

4.4 总结

• 排版是网站成功的重要因素之一，许多人没有意识到这一点。您的主题可能会指定一些默认设置——字体、大小和其他字体元素，但您应该看看这些选择是否可以改进。

• 学会写作许多网站上常见的对话风格。除非某个网站必须传达稳固和严肃的感觉——比如法律或学术网站——否则，人们通常期望一种非正式的语气。

• 你的首页必须迅速吸引读者，并将他们引导到你的行动呼吁的目标处。人们在首次访问网站时很快做出判断，除非你给他们留下深刻印象，否则他们就会离开。

[1] www.toptal.com/designers/typography/web-typography-infographic