用WordPress创建单页网站

简介

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

示例网站

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

链接

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

锚点

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

固定头部

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

平滑滚动

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

结论

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

排查网站问题:插件与主题冲突

在本课中,我们将学习如何排查 WordPress 网站上的常见问题,并逐步指导您诊断和修复问题,确保网站平稳运行。我们将涵盖“白屏死机”等问题、多种故障排除方法、如何停用插件,以及如何使用健康检查和故障排除插件。

白屏死机及其他问题

白屏死机(WSOD)是 WordPress 中常见的问题,您的网站会显示空白白屏,导致无法访问。其他问题如严重错误消息也可能出现在网站上。这可能发生在前端、后端或两者同时出现。


最常见的原因包括:

  • 内存限制耗尽
  • PHP 错误
  • 数据库问题
  • 最后,插件或主题冲突或兼容性问题,这将是本课的重点。

插件和主题冲突可能源于多种问题,包括代码不兼容(插件或主题与当前 WordPress 版本冲突)、JavaScript 错误(中断页面加载)以及使用过时 WordPress 功能的已弃用函数。

故障排除步骤

有条理地处理问题

当问题出现时,保持冷静并系统地处理问题至关重要。以下是几种有助于解决冲突的故障排除方法。

创建网站备份

在对网站进行更改之前,请先进行完整备份。https://learn.wordpress.org/lesson-plan/backing-up-your-wordpress-site/
大多数托管提供商会备份整个服务器,包括您的网站。请联系您的主机商了解他们提供的备份服务。

您还可以通过使用 FTP 客户端将文件传输到计算机上的文件夹来创建网站备份。之后,您可以将它们压缩成 zip 文件以节省空间,从而更轻松地存储多个版本。

创建开发或暂存站点

WordPress 开发或暂存站点是您在线网站的克隆。这是安全进行网站管理的最佳实践。您可以在此安全地测试更新和插件,在受控环境中排查问题并进行更改,而不会影响在线网站的功能。这可以避免停机或错误,确保访客获得流畅的体验。

要创建一个,您可以:

  • 使用暂存插件 https://wordpress.org/plugins/search/staging/
  • 检查您的托管提供商是否提供轻松创建暂存站点的功能
  • 或者通过将 WordPress 文件和数据库复制到本地站点(使用 Studio、DevKinsta 或 WordPress Playground)进行手动设置。

使用错误日志

使用错误日志来识别网站上的错误,您可以定位问题的根源,例如有问题的插件、主题或脚本。有几种启用错误日志记录的方法:

  • 安装调试插件
    使用调试插件激活调试模式并显示错误日志,无需编辑任何文件。
  • 如果您熟悉文件编辑,可以访问您的 wp-config.php 文件。wp-config.php 文件就像您网站的控制中心,包含重要设置,告诉 WordPress 如何连接数据库以及网站应如何运行。

要访问它:

  1. 登录您的网站托管账户(cPanel 或其他托管仪表板)。
  2. 进入托管控制面板后,打开文件管理器工具。
  3. 在文件管理器中,转到 public_html 或 www,这是您 WordPress 仪表板的根目录。
  4. 在根目录中,找到包含 WordPress 配置设置的 wp-config.php 文件。
  5. 右键单击 wp-config.php 并选择编辑以进行更改。
  6. 进入后,在 Codex 调试链接下方
    * @link https://codex.wordpress.org/Debugging_in_WordPress

 */
添加以下行以启用调试并将错误日志记录到 wp-content/debug.log 文件:

define( 'WP_DEBUG', true );

define( 'WP_DEBUG_DISPLAY', false );

define( 'WP_DEBUG_LOG', true );
  1. 添加行后保存文件。
  2. 访问您的网站以检查一切是否正常运行。
  3. 问题解决后,通过将 WP_DEBUG 中添加的行从 true 改为 false 来禁用调试:
<code class="">define( 'WP_DEBUG', false );

检查主题问题

如果您的 WordPress 仪表板可访问,请将当前主题更改为默认的 WordPress 主题,如 Twenty Twenty-four。

如果您的 WordPress 仪表盘无法访问,可以通过 FTP https://developer.wordpress.org/advanced-administration/upgrade/ftp/ 或文件管理器重命名当前启用的主题文件夹,使其自动停用,这样您无需使用 WordPress 仪表盘即可切换主题。

访问 FTP 的步骤:

  1. 从您的主机提供商处获取 FTP 凭据,例如用户名、密码和主机地址。
  2. 下载 FTP 客户端,例如 FileZilla、Cyberduck 或 WinSCP。
  3. 打开 FTP 客户端并输入 FTP 详细信息。
  4. 点击“连接”以连接到服务器。
  5. 在 FTP 客户端中,进入您的特定 WordPress 安装目录,例如 public_html。
  6. 打开 wp-content 文件夹,然后打开“themes”文件夹以查看已安装的主题。

6.1 找到当前启用的主题文件夹,右键单击该文件夹并选择重命名选项(例如:在文件夹名称末尾添加 “-old”,如 active-theme-name-old)。

如果切换到其他主题能解决问题,您的仪表盘应该会重新变得可访问,这样您就可以根据需要激活另一个主题。您也可以重新激活之前的主题,看看错误是否再次出现。如果您希望继续使用导致问题的主题,请参考该主题的文档或通过其支持论坛寻求帮助。

检查插件问题

插件为您的 WordPress 网站添加功能,但有时也可能导致冲突或问题。自动回滚功能会在插件更新失败时恢复之前安装的版本,有助于维护网站稳定性并确保功能顺畅。然而,此功能仅在插件更新期间生效。如果已安装的插件在没有更新的情况下导致冲突或使网站崩溃,回滚功能将无法解决问题。

如果您的 WordPress 仪表盘可访问,停用插件的步骤:
  • 前往“插件”>“已安装的插件”
  • 在“插件”标签旁边,勾选复选框以选择所有插件
  • 点击“批量操作”并选择“停用”,然后点击“应用”。

在“已安装的插件”部分,逐个重新激活插件,并在每次激活后检查您的网站。当启用某个特定插件时错误再次出现在页面上,请记下它。如果您不再需要该插件,可以将其删除。如果仍然需要,请查看插件文档页面或支持论坛寻求帮助。

如果您的 WordPress 仪表盘不可访问,停用插件的步骤:
  • 通过 FTP https://developer.wordpress.org/advanced-administration/upgrade/ftp/filezilla/ 或文件管理器访问
  • 找到 wp-content/plugins 文件夹
  • 右键单击导致问题的插件文件夹,选择重命名选项。例如:在文件夹名称末尾添加 “-old”,如 plugin-name-old)。重命名后,该插件将自动停用。


如果导致问题的插件已被停用,仪表盘应该会重新变得可访问。从仪表盘的“插件”>“已安装的插件”中,您可以逐个重新激活插件,以确认启用的插件是否会导致错误再次出现。重新激活有问题的插件会使您失去对仪表盘的访问权限。如果发生这种情况,请通过 FTP 停用或删除该插件(如果您不再需要它),或联系其支持团队寻求帮助。

健康检查与故障排除插件


健康检查与故障排除插件 https://wordpress.org/plugins/health-check/ 是由 WordPress.org 社区创建的一个宝贵工具,用于诊断和修复常见问题。


该插件会执行一系列检查以发现常见问题,并提供如何解决已识别问题的信息。它还包含一个故障排除模式,可以在不影响访问者看到实时网站内容的情况下测试您的网站。

如何使用此插件:

1. 安装并激活插件:

  • 前往“插件”>“安装插件”并搜索“Health Check and Troubleshooting”。
  • 点击安装并激活插件。

2. 运行网站诊断:

  • 导航到“工具”>“站点健康”。
  • 查看结果并遵循建议。

3. 启用故障排除模式:

  • 前往“故障排除”选项卡并启用“故障排除模式”。
  • 这将停用所有插件,并仅为您的会话切换到默认主题。
  • 逐个重新激活插件和主题,以找出问题的根源。在启用每个插件或主题时,刷新您查看网站的浏览器,看看哪个启用的插件或主题会在页面上显示错误。

结论

通过遵循这些故障排除步骤,您现在应该能够解决常见的 WordPress 问题,例如白屏死机、插件冲突和主题相关问题。请始终记住在修改网站前进行备份,并利用错误日志和健康检查插件等可用工具,快速识别并修复问题。

样式如何生成

引言

在本课中,我们将探讨样式是如何生成的。如果你已经完成了中级WordPress用户学习路径中的自定义模块,你会记得WordPress通过站点编辑器提供了两种修改颜色、字体和布局的方式。一种是使用全局样式,另一种是使用样式手册,它能直观展示你正在修改的区块。但这些内置样式从何而来,又在哪里定义呢?

Theme.json

答案就在一个名为theme.json的文件中,这也是本课的重点。但首先,什么是theme.json?theme.json文件用于定义主题的全局和基于区块的样式。从颜色、排版到间距和尺寸,每个属性的每个视觉方面都在其中。这种方法通常被称为单一事实来源。在这种情况下,theme.json是负责指定和组织主题所有设计方面的主要文件,使得更新、修改和管理更加容易。那么,我们在哪里找到theme.json呢?在本章的第一课中,我们曾窥探过站点的主题文件。让我们回到那个页面,导航到工具,然后选择主题文件编辑器。你会看到一个警告信息,建议你不要直接编辑主题。这只是一次简短的介绍性访问,所以你可以安全地点击“我了解”按钮。在右侧边栏的主题文件下,点击主题样式和区块设置。如果你学习了上一课《WordPress模板的构建块》,你可能已经注意到theme.json主要包含JSON,这是一种通用的数据格式。JSON以键值对的形式表示数据。

示例

在这个示例中,我们有一个按钮区块。键是按钮区块的属性,例如背景颜色、文本颜色和边框圆角。值则是其样式和设置。让我们再看两个例子。在这个示例中,JSON定义了一个调色板。调色板数组或列表中的每个对象代表调色板中的一种颜色,具有以下属性:十六进制代码、颜色的人类可读名称以及颜色的别名或简短标识符。在最后一个布局示例中,我们会看到一个名为内容大小的键,其值为620像素。这意味着该主题的内容宽度设置为620像素。当你通过编辑器自定义样式时,例如在本例中我们将内容宽度改为650像素,WordPress会将这些更改生成为JSON,确保它们被渲染成CSS样式,从而在浏览器中正确显示。花点时间浏览一下Theme.json。向下滚动,搜索你在编辑器中熟悉的词汇,比如颜色、布局、按钮、边框等。注意,例如颜色在文件中出现了多次,而布局只指定了一次。所有这些属性都描述了主题的预定义样式,这些样式由创建主题的设计师和开发者决定。

Theme.json与编辑器

虽然你可以直接在theme.json中更改这些默认样式,但无论是对于用户还是扩展者来说,这都不是推荐的方法。通过编辑器自定义设计是一种更实用、更直观的方法。深入探讨JSON的具体细节超出了本课的范围。要继续你的网页制作之旅,请查看初学者WordPress开发者学习路径,特别是《WordPress主题开发入门》模块中的全局设置和样式课程。

结论

那么接下来呢?如果你已经在站点编辑器中对样式进行了更改,例如像本例中更改图像区块的圆角,或者为某个区块选择了不同的颜色,你不会在theme.json中找到这些更改。这是因为这些自定义内容存储在数据库中,而不是主题文件中。要了解数据库和主题文件之间的区别,以及如何更新主题的theme.json以包含你的修改,请查看模块《WordPress如何保存你的内容》以及课程《使用创建区块主题插件进行导出和主题变体》。

WordPress模板的基础构成

介绍

在本课中,我们将探讨模板的构成,并一窥 WordPress 的幕后机制。在前几课中,你已经学习了管理菜单中几乎所有的页面。既然你已经熟悉了各种选项,现在是时候进入尚未探索的代码世界了。在本课中,你将了解模板页面在后台的样子,更深入地理解 WordPress 网站的构建模块,并学会识别和阅读一些代码。

幕后机制

首先,让我们对你的主题进行“X 光检查”,并查看主题文件。导航到“工具”,然后点击“主题文件编辑器”。你会看到一个警告信息,建议你不要直接编辑主题。这只是一个简短的介绍性访问,所以你可以安全地点击“我理解”按钮。你面前的是你主题的骨架,一张揭示模板、模板部分、模式和样式如何编码的“X 光片”。让我们看一个例子。在右侧边栏的“主题文件”下,点击“模板”,然后点击“page.html”。这个文件负责显示你网站上的页面。第一行调用了页眉模板部分。最后一行调用了页脚。中间是主要部分,包含一个组容器,里面放置了页面标题和内容块,由几个间距块分隔开。花点时间阅读这些标记。识别重复出现的模式。注意有些行以小于号、感叹号和两个连字符开头,后面跟着 WP 和冒号。另一个你会看到的重复模式是小于号、感叹号和两个连字符,后面跟着 /wp 和冒号。然后,你可以暂停这个视频,使用 WordPress Playground 或其他测试网站探索其他文件。

编程语言

由于不建议通过仪表盘编辑器修改主题,让我们打开页面编辑器,尝试一个安全的例子。这样我们可以返回仪表盘,转到“文章”,并打开一篇文章。你会注意到我添加了一些额外内容。下一步是切换到代码编辑器。点击右上角的三个垂直点,然后点击“代码编辑器”,或者使用键盘组合:Mac 上按 Command、Option、Shift 和 M,Windows 上按 Control、Alt、Shift 和 M。我将点击“代码编辑器”,你会看到三种编程语言的组合。第一种是 HTML,即超文本标记语言的缩写。第二种是 CSS,即层叠样式表的缩写。第三种是 JSON,即 JavaScript 对象表示法的缩写。

HTML 是用于构建页面的基本网络语言。它由元素组成,比如左尖括号、P、右尖括号表示段落,li 表示列表项,h2 表示二级标题,img 表示图像。回到代码编辑器,我们可以看到这些元素的实际应用。顶部有一个段落,然后是一个 h2 标题,接着是一个列表,最底部是一张图像。另一方面,CSS 定义了网页及其元素的样式。让我们看一个例子。标签 h3 带有颜色十六进制代码 #8d26d1,代表紫色副标题“带链接的段落”。

接下来我们可以谈谈 JSON。JSON 是一种使用键值对的数据格式。WordPress 既生成也解释这些键值对,确保它们被渲染成相关的样式。当我们返回代码编辑器时,可以看看图像的例子,有两个值得提及的键值对。第一个是“align”:“wide”,第二个是“className”:“is-style-rounded”。但它们是什么意思呢?“align”:“wide”意味着图像对齐设置为宽幅,“className”:“is-style-rounded”意味着图像有圆角。然后,我们可以看另一个例子,向上滚动到第一个段落。我们还会看到键值对 {“dropCap”:true}。这意味着段落块中单词的首字母更大,也称为首字下沉。在下一课“样式如何生成”中,我们将更详细地介绍这一点。同时,如果你对此感到好奇,可以查看“WordPress 开发者入门学习路径”,特别是“WordPress 编程语言”模块中的 HTML 课程。

演示

接下来,是时候动手实践了。既然代码不再像完全陌生的语言,就该练习你学到的东西了。我们将创建一个新文章。打开代码编辑器。然后,从文字记录中粘贴代码。接着,我们要做一些调整。第一件事是将某个标题的颜色从紫色改为红色,通过替换顶部和底部的十六进制颜色代码。然后,保存草稿并返回可视化编辑器,查看更改效果。接着,我会打开列表视图,进入大纲查看标题结构。我们会看到这个标题是 h3。然后,返回代码编辑器。我想将标题结构从 h3 更新为 h2。这里,我将在三个不同位置进行修改。再次保存并返回可视化编辑器。然后,进入大纲,看到标题级别从 h3 变成了 h2。我要做的最后一个更改是编辑外部链接的 URL。所以返回代码编辑器,将 URL 从 WordPress.org 更新为 learn.wordpress.org。然后,返回可视化编辑器查看更改效果。当我们点击链接文本并选择编辑时,会看到链接或 URL 已经更新。最后,值得注意的是,如果出现问题,别担心。点击撤销并重新开始。你所做的更改仅限于这个特定文章,不会影响其他文章或主题文件。所以放心大胆尝试吧。

开始使用WordPress Playground

简介

大家好,我是 Adam,我将向大家展示如何使用 WordPress Playground。当你访问 playground.wordpress.net 时,你会得到一个完全在浏览器中运行的完整 WordPress 网站。利用它来尝试插件、主题,构建你自己的主题和完整网站。

安装插件

我们先安装几个插件。我将前往 WordPress 插件目录,下载 Gutenberg 插件、Create block theme 插件和 Skatepark 主题。拿到这些文件后,我们进入“插件”->“安装插件”,开始安装。你可能首先会注意到一条错误消息,提示无法联系 WordPress 插件目录,这是因为 Playground 无法访问互联网。这有助于保护你的隐私,但意味着我们无法获取插件列表。

好吧,我们上传它们。我找到硬盘上的 Gutenberg 插件 zip 文件,直接拖放到这里。然后安装并激活它。用同样的方法处理 Create block theme 插件,再次拖放 zip 文件并安装激活。现在安装 Skatepark 主题,和插件一样,我把它拖放到这里。然后激活主题。瞧,我们刚刚建立了一个新站点,安装了几个插件,激活了一个主题,整个过程大约只花了一分钟,还不错。

自动安装插件和主题

如你所见,Gutenberg 编辑器已经就位,正确的主题也已应用,一切正常。不过,刚才的过程有点繁琐。让我们看看如何自动化插件安装流程。我将刷新整个站点,重新开始。这是一个没有应用任何更改的新 Playground。在地址栏中,我输入 theme=skatepark,然后输入 plugin=gutenberg&plugin=create-block-theme。这样它会自动下载并安装所有这些插件和主题。现在我们得到了和之前完全相同的配置,但几乎不需要手动操作,只花了几秒钟,我们就拥有了想要的插件和主题的站点。

构建主题

我们还能用 WordPress Playground 做什么?既然安装了 Create block theme,我们可以在 WordPress Playground 中构建一个完整的主题。为此,进入“外观”->“编辑器”打开站点编辑器。在站点编辑器中,我们开始自定义。我会更改主题的背景颜色,调整一些行高和字体,让我们加快一点速度。在这里,你可以完全自由地按自己的喜好自定义主题。现在完成了,这就是我们的自定义主题。我们可以通过“选项”->“Create block theme”导出它,向下滚动一点,会看到一个“导出”按钮。点击它,就会下载一个包含自定义主题的 zip 文件,可以安装到任何 WordPress 站点上。

让我们启动一个新的 Playground,进入“管理”->“外观”->“主题”,安装我们新的自定义主题。我使用刚刚导出的那个文件上传它。安装并激活后,新的 Playground 就拥有了和我刚刚构建的一模一样的主题。我可以把这个主题带到世界上任何 WordPress 站点并安装它,就这么简单。你也可以访问 playground.wordpress.net,构建你自己的 WordPress 主题。

构建站点

我们不要止步于此,来构建一个完整的站点。这是 WordPress Playground 文档。让我们用新的自定义主题重新创建它。复制内容总是一个好的起点,所以我将复制整个部分,粘贴到一个模板中。找一个最有用的模板,这个有列,看起来很不错。我把内容粘贴到这里,在右侧列添加一个 YouTube 视频,自定义网站的顶部区域和页脚。调整一些样式,移除社交链接,再做一些小修改。瞧,这就是我们模仿 WordPress Playground 文档的全新站点。

导出站点

现在,这个站点只存在于我的浏览器中。让我们把它保存到磁盘上。在 WordPress Playground 网站上,点击这个小下载图标,它会下载一个包含整个 WordPress 站点的 zip 文件。我解压它,看看里面有什么。这个 WordPress 目录包含所有 WordPress 核心文件。深入查看,我甚至能找到 SQLite 数据库文件,里面存储了所有页面、文章和 WordPress 配置。这个 zip 文件包含了一个完整的 WordPress 网站。我可以直接把它托管到某个地方,也可以导入到另一个 WordPress Playground 实例中。为此,我使用这里的小上传图标,选择 wordpress-playground.zip,点击“导入”。瞧,我的 WordPress 站点现在在这里了。我不再需要给朋友和客户发送截图或视频,我可以直接发送一个真实的 WordPress 网站,让他们在浏览器中交互式地操作。

兼容性测试

让我们来看看 WordPress Playground 的另一个功能,即对我们网站的插件和主题进行兼容性测试。Playground 允许你在不同的 PHP 和 WordPress 版本之间切换。我们选择 6.0 版本,然后安装本教程前面创建的主题,在网站上可以看到它确实能正常工作,这很棒。

不过,我们不要止步于此。我们也在 WordPress 5.9 上测试一下。所以我只是选择了另一个版本。现在我们有了一个 WordPress 5.9 的网站。让我们再次尝试安装同一个主题。选择正确的压缩包。这里出现了一个错误:该主题需要 WordPress 6.0 或更高版本。要发现这一点,我们只需访问 playground@wordpress.net 并点击几个按钮即可。我们不需要创建 20 个不同的 WordPress 网站,只需要点击几下,花几分钟时间。

希望你能像我一样喜欢 WordPress Playground,我迫不及待地想看看你会用它构建什么。

WordPress用户为何需要运行本地站点

简介

在本课中,我们将探讨为什么应该运行本地站点。本地环境对于安全高效地构建、测试和实验您的网站至关重要。在本课中,我们将定义本地测试环境,识别使用本地环境的好处,并探讨设置开发站点的三种选择。但什么是本地测试环境?本地测试环境是您计算机上的一种设置,它镜像您的在线网站,但完全离线运行。它充当您的在线站点和您正在进行的更改之间的缓冲区。它允许您创建、测试和完善网站,而无需在线托管服务或危及您的主网站。它就像一个测试区,您可以自由工作并进行更改,而无需任何成本或风险。

好处

使用本地环境有什么好处?第一,它不花一分钱;您可以免费使用。其次,您可以用它进行实验。您可以在安全的环境中构建网站,然后再上传到网络主机,或者测试更改而不影响您的在线网站。第三,它允许您有一个备份计划。如果您的在线站点遇到问题,拥有本地副本意味着您可以快速恢复到以前的稳定版本,从而最大限度地减少停机时间。第四,它可以是一个学习空间。您可以在无风险的环境中练习您的 WordPress 技能。

工具

设置本地 WordPress 站点可以通过使用诸如 DevKinsta、WordPress Studio 和 WordPress Playground 等工具来简化。您还可以探索其他选项,例如 XAMPP、Docker 或 MAMP。

Studio

我们要看的第一个本地环境是 Studio,一个快速、轻量且可共享的 WordPress 开发环境。下载并安装 Studio 后,您可以设置一个新站点。要创建新站点,请点击左下角的“添加站点”,为其适当命名,并为其文件选择一个目录路径。然后点击“添加站点”。在“自定义”下方,您可以轻松访问站点编辑器、模式、导航和其他区域。所以我会继续打开站点编辑器,现在我将能够实现与 Local 相同的结果。我可以测试我的技能,探索新功能,将站点导入到我的测试站点,或者将我的测试站点导出到生产站点。

WordPress Playground

最后一个选项是使用 WordPress Playground 的不同方法。WordPress Playground 是一个基于浏览器的工具,允许您直接在网络浏览器中运行 WordPress,无需安装软件。它是一个平台,让您无需主机即可在任何设备上立即运行 WordPress。它创建临时环境,使用后即被丢弃。它是一个构建、实验和测试的地方。您可以通过在浏览器中导航到 playground.wordpress.net 立即开始使用 Playground。或者,您可以通过在 URL 中使用查询 API 来自定义您的设置,方法是在“.net”之后添加“?networking=yes”。这将允许您安装和激活插件和主题。

您可以决定从头开始构建您的站点,然后,当您选择汉堡菜单时,您可以将站点下载为 zip 文件并将其导出到您的生产站点。或者,如果您想导入站点,请点击“从 zip 恢复”,这将允许您用之前导出的站点替换当前的 WordPress Playground 站点。您还可以调整 URL 以自动在您的站点上安装特定的插件或主题。

例如,要自动安装和激活一个插件,您添加“?plugin=”后跟插件别名。让我们继续安装 WooCommerce 插件。插件别名是插件 WordPress.org URL 的最后一部分。让我们访问 WooCommerce 并仔细检查我们是否使用了正确的别名。然后,我们可以返回 Playground,当我们按 Enter 键时,插件将自动安装和激活。现在您可以测试和探索使用该插件。要自动安装和激活一个主题,我们写“?theme=”后跟主题别名。在这种情况下,是“twentytwentythree”。然后,它将在几秒钟内准备好使用。您还可以通过在别名之间添加“&”符号来同时安装多个插件和主题。所以,在这个例子中,您会注意到我添加了 Twenty Twenty-Three 主题、WooCommerce 插件和 Contact Form 7 插件。

默认情况下,在 Playground 中所做的更改是临时的,一旦您关闭标签页就会丢失。要使更改持久化,请使用 Playground 界面中的设置按钮启用浏览器存储。这允许您的更改即使在刷新页面后也能保存。正如我们将看到的,将您的站点本地存储在设备上的功能仍处于测试阶段。最后,还值得一提的是,您可以通过 URL 快速将语言包加载到 WordPress Playground。只需输入“?language=”后跟 WordPress 语言环境代码——例如,西班牙的西班牙语是 es_ES。然后,测试网站将以您选择的语言加载。

DevKinsta

最后一个值得探索的选项是 DevKinsta。当您点击“更多信息”时,您会找到安装说明。请注意,您需要安装 Docker 作为安装过程的一部分。

结论

使用本地测试环境对于各种 WordPress 任务至关重要,例如在托管前搭建网站、尝试新主题和插件、排查问题或磨练您的 WordPress 技能。

使用CDN提升性能

引言

在本课中,我们将讨论如何通过内容分发网络(CDN)来提升网站性能。在解释如何设置 CDN 之前,我们先来定义它。CDN 是一个全球性的服务器网络,用于缓存网站的静态内容,例如图片、CSS 和 JavaScript 文件。当有人访问你的网站时,CDN 会从离他们最近的服务器提供内容,从而加快加载速度。使用 CDN 可以提高网站的速度和可靠性,因为它会将你的内容无缝地存储在多个服务器(称为边缘服务器)上,而不是仅存储在托管服务商的单一源服务器上。

为什么要在 WordPress 中使用 CDN?

为什么要在 WordPress 中使用 CDN?在 WordPress 中使用 CDN 对桌面端和移动端用户都有诸多好处。第一,它能改善全球覆盖范围并减少延迟。由于服务器遍布全球,无论访客身在何处,你的内容都能更快加载。第二,它能减轻服务器负载。通过将静态资源的交付任务交给 CDN,你的网络服务器可以处理更多流量并表现更佳。第三,它能提高正常运行时间。CDN 确保如果某个边缘服务器出现故障,其他服务器仍能维持网站的可用性。这被称为负载均衡。第四,它能增强安全性,尤其是针对 DDoS 攻击。DDoS 代表分布式拒绝服务攻击,是一种通过大量流量淹没你的服务器导致其崩溃的网络攻击。CDN 通过将流量分散到多个服务器来帮助防止此类攻击,使攻击更难成功。

配置 CDN

接下来,如何用 WordPress 设置 CDN?让我们逐步了解如何为你的 WordPress 网站设置 CDN。首先,选择一个 CDN 提供商。一些供应商提供免费套餐,并且大多数会捆绑其他有用的服务,例如 SSL 证书和 Web 应用防火墙。因此,请研究一个符合你需求和预算的 CDN 提供商。热门选项包括 Cloudflare、KeyCDN、bunny.net、Sucuri 和 Amazon CloudFront。请注意,如果你已经使用了 Jetpack,可以启用其免费的 CDN 功能“站点加速器”。

接下来,注册并创建一个账户。一些提供商提供 WordPress 插件,允许你直接从 WordPress 仪表盘注册账户。导航到“插件”,点击“安装新插件”,在搜索字段中输入“CDN”,然后安装你选择的提供商的插件。我将安装并激活 Super Page Cache for Cloudflare 插件,以便创建账户并将我的网站添加到 Cloudflare。回到 WordPress,该插件将引导你完成设置过程。

CDN 集成

下一步是可选的,但如果你已经安装了缓存插件,最好将其与 CDN 集成,以获得最佳效果并避免潜在冲突。让我们学习如何使用几个流行的插件来实现这一点。第一个是 WP Optimize。很酷的一点是你无需做任何操作,因为该插件会自动与 Cloudflare 集成,确保缓存与 Cloudflare 的 CDN 服务无缝协作。第二个插件叫做 W3 Total Cache。它有一个内置的 Cloudflare 扩展,你需要在“扩展”下激活它,然后按照设置说明操作。如果你使用不同的 CDN 提供商,请导航到“常规设置”、“CDN”,然后启用 CDN 并选择你希望使用且已注册的提供商。接下来,你还可以使用 LiteSpeed Cache for WordPress。它集成了 Cloudflare 和 QUIC.cloud CDN。前往“设置”、“CDN”,在这里你可以启用并设置其中任何一个。QUIC.cloud CDN 选项位于顶部,而 Cloudflare 选项在滚动到底部时可用。你还可以在 QUIC.cloud CDN 设置下注册并创建一个免费的 QUIC.cloud 账户。有关详细的设置和配置说明,请参考你选择的优化插件和 CDN 提供商提供的官方手册。

结论

总之,CDN 可以显著改善加载时间、提升用户体验,并增强网站的整体韧性和安全性。投资这一额外的性能层是值得的。要了解更多优化技巧,请查看这两节补充课程:使用缓存提升网站性能和网站优化。

使用缓存提升网站性能 – W3 Total Cache插件

简介

让我们探索缓存技术以提升网站性能。缓存是一种用于改善网站性能的技术。它涉及将频繁访问的数据存储在缓存中,当需要时可以快速检索,而不是每次用户访问网站时都从服务器获取。缓存就像是为常用文件和数据准备的一个个人书架。当用户访问一个已缓存的网站时,浏览器会先在缓存中检查所需文件。如果找到,网站加载速度会更快。它通过提供缓存文件而不是重复生成它们来减轻服务器负担。最终,缓存通过提供更快的加载时间和更流畅的网站导航来提升用户体验。

缓存层级

缓存发生在多个层级以优化网站性能。在前端,浏览器缓存将图片和CSS等静态文件存储在访客设备上,减少服务器请求。深入一层,WordPress中的对象缓存通过将频繁访问的信息存储在Redis或Memcached等快速访问存储系统中,加速数据检索。在服务器层面,操作码缓存提升PHP执行效率,而Varnish等高级解决方案可显著提升高流量网站的性能。每个缓存层都有助于加快加载速度并减少服务器负载,创造更流畅的用户体验。

添加插件可能是优化WordPress网站缓存最简单的方法之一。缓存插件简化了实施过程,优化了性能,提供了高级技术,并包含缓存管理功能,以实现高效且有针对性的网站缓存。让我们简要了解一下你将遇到的四种最常见的缓存类型。

常见缓存类型

首先是页面缓存。可以把它想象成给你的网页拍了一张快照。我们提供这个预先制作好的版本,而不是每次有人访问时都从头构建页面。这就像准备好一张照片展示,而不是当场画一幅画。这种方法创建了页面的静态副本,消除了重复查询数据库的需要。结果呢?为你的访客带来更快的加载时间。

第二种是浏览器缓存。当你访问一个网站时,你的浏览器会保存某些文件,这样下次你访问该网站时,浏览器可以使用存储的文件,而不是再次下载它们。这有助于加快网站加载速度,因为浏览器不必每次都从服务器获取所有文件。

第三种是服务器缓存。服务器缓存涉及存储常用网站数据。当用户请求这些数据时,服务器可以快速从缓存中检索,而不是重新生成。

第四种是CDN缓存。内容分发网络将网站文件的副本存储在世界各地的服务器上。当用户访问网站时,文件从最近的服务器加载,减少了内容到达用户的时间。

使用插件

一些值得探索的插件包括W3 Total Cache、WP Faster Cache和LiteSpeed Cache,但插件目录中还有许多其他选择。在今天这个示例中,我们将安装并激活W3 Total Cache插件,然后启用一些最重要的设置。一旦我们安装并激活了插件,就可以进入设置。进入后,你可以按照设置指南操作,或者跳过它(如果你愿意)。

设置指南

我们将继续按照必要的步骤进行。让我们测试页面缓存。我们追求最快的速度,你会注意到,他们也推荐了磁盘增强,这实际上是最快的。然后,我们可以点击“下一步”并选择测试数据库缓存。现在,在底部,建议保持此功能禁用,因为服务器数据库引擎可能比磁盘缓存更快。所以,我们继续测试对象缓存。然后选择最快的速度。接着,我们可以点击“下一步”并测试浏览器缓存。我们将保持启用状态,然后进入图片优化。这将允许你启用WebP转换器。它增加了将媒体库中的图片转换为现代WebP格式的能力,以获得更好的性能。最后,我们还可以启用图片的延迟加载。当选择延迟加载图片时,图片和其他媒体元素只在用户滚动到该部分时才加载,从而减少网站加载时间。

常规设置

当设置完成后,我们可以访问常规设置以了解更多额外设置和功能。让我们仔细看看一些常规设置。首先是页面缓存。我们要做的第一件事是确保它已启用。添加页面缓存可以提升性能并减少服务器负载。请注意,一些主机也提供页面缓存。

接下来,我们将了解“压缩”或“精简”技术。这项技术旨在精简网站代码中的冗余部分。压缩功能会自动去除 CSS、JavaScript、Feed 页面和文章 HTML 中不必要的数据。可以把它想象成在发送文件前先进行压缩,你不会丢失任何重要信息,只是让文件更紧凑。因此,我们可以继续启用压缩功能。我已经阅读了相关文档,所以我会表示理解其中的风险。将压缩模式保持为“自动”就足够了。不过,如果在启用此功能后,你发现网站出现异常行为或显示不正常,那么压缩功能可能就是罪魁祸首。这是一个强大的工具,但有时它可能会过度精简。

然后,我们可以向下滚动到“操作码缓存”。操作码缓存仅供专业版用户使用,它允许你存储编译后的 PHP 代码。现在,我们继续介绍“数据库缓存”和“对象缓存”。首先谈谈数据库缓存。如你所知,在设置过程中曾建议,对于这个特定网站,最好保持禁用状态。文档还提到,它最适合在对象缓存不可用时使用。由于对象缓存是可用的,因此我们启用了此功能,因为它能进一步减少常见操作的执行时间。但请注意,在使用共享服务器主机时,不建议同时启用数据库缓存和对象缓存。

接下来,我们要确保“浏览器缓存”已启用,因为它通过利用访问者浏览器中的缓存来减少服务器负载并缩短响应时间。如前所述,CDN 缓存也很重要。要实现这一点,你需要一个 CDN 提供商。所以请确保注册一个提供商,例如 CloudFlare、Amazon CloudFront 或其他。我们接着看“Google Page Speed”部分。在这里,你可以连接到 PageSpeed Insights API,从而分析你网站的性能。如果你授权此操作,则必须关联你的 Gmail 账户。

进入仪表盘后,你可以使用左侧边栏针对不同类型的缓存微调更具体的设置。最后,值得一提的是,有时缓存可能无法识别你已经对网站进行了更改或更新,从而加载旧版本而非新版本。此时,你可以考虑清除缓存,以确保加载网站的最新版本,这是一种故障排除方法。你可以在仪表盘顶部找到清除缓存的选项。

总结

总之,通过理解并实施这些不同级别的缓存,你可以提升网站的速度和性能,为访问者提供更流畅的体验。

phpMyAdmin 入门指南

当你搭建 WordPress 网站、撰写文章或创建页面时,你会不断与数据库打交道。这意味着什么?又如何访问这些数据?让我们深入了解。

课程目标

  • 理解网站文件和数据库之间的区别
  • 使用 phpMyAdmin 界面探索网站数据库
  • 基本了解数据库的结构和数据表

什么是数据库?

你和你的访问者在 WordPress 网站上创建的所有内容,几乎都存储在数据库中。文章、页面、评论、分类法、自定义文章类型、主题自定义设置以及用户详细信息——这些都不是独立的文件。相反,它们被写入或读取自 WordPress 在安装过程中创建的数据库。

解释数据库的工作原理超出了本课程的范围,但你可以把它们想象成复杂的电子表格;每个数据表都由列和行组成。列代表数据键,而行则代表具体的值。

例如,名为 wp_posts 的数据表存储了你所有的文章。每篇文章的每个细节都作为一行列在这个表中,并按列划分为相关信息:文章标题列在 post_title 列下,内容在 post_content 列下,以此类推。

由于数据库与托管服务商服务器上的所有其他文件一起存储和管理,你可以访问它、浏览甚至修改数据。

数据库可能是你网站最关键的部分,只有在具备足够知识的情况下才应修改。请将本课程视为一次“只看不动”的介绍。

访问数据库

要查看你的数据库,你需要数据库管理软件。大多数托管公司提供一种名为 phpMyAdmin 的浏览器工具,我们将在本课程中使用它。如果你无法访问托管服务商的控制面板,或者更倾向于通过 WordPress 管理后台探索数据库,可以使用 SQL Buddy(在新标签页中打开),或其他插件如 Advanced Database Cleaner 或 WP phpMyAdmin。完成后别忘了停用并删除插件,以避免潜在问题。

从你的托管服务商控制面板中,打开 cPanel 并选择 数据库 > phpMyAdmin。

如果你的托管公司使用不同的管理平台,请查阅文档资源以了解如何访问 phpMyAdmin。

点击左侧菜单中的数据库名称。你看到的是构成 WordPress 网站的所有数据表。

如果你有多个数据库,且名称没有提示属于哪个网站,请访问 WordPress 管理后台:

  1. 导航到 工具 > 站点健康。
  2. 点击 信息 标签页,向下滚动,然后点击 数据库。
  3. 找到 数据库名称 这一行,然后返回 phpMyAdmin。

探索数据表

让我们检查每个 WordPress 数据库中两个最重要的数据表:

  • wp_options 数据表存储你网站设置的信息。表中的每一行代表一个特定设置,包括主题和插件。
  • wp_posts 数据表存储你的文章、页面和自定义文章类型。表中的每一行代表一篇文章。

wp_options

点击 wp_options 并查看中间两列。option_name 列存储键(如 siteurlblognameblogdescriptionadmin_email 等),而 option_value 列存储相应的值。

这些对应你在管理后台的 设置 > 常规 屏幕中设置的详细信息:例如,siteurl 是显示为 WordPress 地址(URL)的网址,blogdescription 是网站副标题,等等。

wp_posts

现在点击 wp_posts。这个数据表包含更多列,但每一列都对应文章编辑器中的熟悉界面元素。以下是一些例子:

  • post_title 列是你看到所有文章标题的地方。
  • post_type 列指示这是文章、页面还是其他类型的内容。
  • guid 存储文章 URL。
  • post_status 指示它是草稿还是已发布。

总结

正如开头提到的,数据库是你网站的关键部分,只有在具备足够知识的情况下才应修改。如果你想优化、清理或修改它——无论是使用 phpMyAdmin 还是插件——请确保你清楚自己在做什么,并在开始之前准备好备份和恢复方案。

要了解更多,请访问 WordPress 初学者开发者学习路径,特别是名为《WordPress 数据库》的课程。

了解文件存放位置

在本课中,我们将回答这个问题:“你的 WordPress 网站存储在哪里,或者说你的文件存放在哪里?”

学习目标

  • 通过 FTP 访问你的服务器
  • 基本了解文件结构
  • 学习如何下载和上传文件
  • 了解 WordPress 的主要配置文件

你的托管服务提供商的服务器是一台计算机,你可以访问它来浏览和操作构成你网站的文件。有几种方法可以做到这一点,最直接的是通过 FTP。FTP 代表文件传输协议:这是在计算机之间(例如你的设备和托管公司的服务器之间)传输文件的标准方式。

你可以使用独立的 FTP 应用程序,如 FileZilla 或 Cyberduck,它们支持更高级的选项,但现在,让我们使用 cPanel 的文件管理器来探索你的服务器,这是大多数托管服务提供商支持的常见基于浏览器的解决方案。从你的托管控制面板中,打开 cPanel 并选择文件 > 文件管理器。

文件结构

欢迎来到你的云端空间。如果你曾经浏览过本地设备上的文件系统,这应该不会太陌生:左侧是目录列表,右侧是文件和子目录。

点击 public_html 目录将其打开。这很可能是你 WordPress 网站的根目录,包含所有与 WordPress 核心相关的文件,以及你的主题、插件和你上传的任何资源,例如字体、图片和其他媒体。

花点时间浏览一下,熟悉文件结构、用户界面和不同的文件扩展名。感到好奇吗?选择一个文件,然后点击顶部菜单中的“查看”按钮来检查其内容。

探索 wp-content 目录

所有非核心、用户控制的 WordPress 内容都存储在 wp-content 目录中。这是插件、主题、语言和上传文件所在的地方,每个都有其各自的文件和子目录。你可能会看到其他目录,包括 upgrade(WordPress 在升级期间使用)以及插件用来存储额外文件的其他目录。

下载文件

如果你想手动备份你的网站,wp-content 是你需要下载的目录。

要从 cPanel 文件管理器中执行此操作,请选择该目录并点击顶部菜单中的“压缩”按钮。注意 ZIP 文件的保存位置(默认是上一级目录,所以在这种情况下,它可能保存在 public_html 中。如果你愿意,可以输入另一个路径),然后点击“压缩文件”。

现在导航到相关目录,选择压缩文件,然后点击顶部菜单中的“下载”按钮。一旦文件成功下载到你的设备,你可以从服务器上删除它(选择它并点击顶部菜单中的“删除”按钮)。

上传文件

有时你想手动上传插件或主题,或者以其他方式排查网站问题。通过管理仪表板进行操作显然更容易,但并不总是可行。

要通过 cPanel 文件管理器上传文件,请将其从你的设备拖放到服务器上的相关目录中,或者导航到目标位置并点击顶部菜单中的“上传”按钮。

类似于前面下载部分描述的场景,如果你想上传一个目录——比如一个未压缩的主题或插件——你需要先在设备上将其压缩。然后将压缩文件上传到服务器。要解压文件,请选择它并点击顶部菜单中的“提取”按钮。

WordPress 配置文件

让我们探索 wp-config.php,这是一个关键文件,包含你网站的配置。WordPress 在设置过程中根据你在安装过程中提供的信息创建此文件。

在排查问题或设置多站点(一个 WordPress 网站网络)时,与 wp-config.php 交互是必不可少的。我们将在接下来的课程中涵盖这两个主题,所以熟悉这个文件是个好主意。如果你计划启用多站点,你需要访问位于 public_html 目录中名为 .htaccess 的文件。

如果你看不到它,请点击右上角的“设置”按钮打开“首选项”弹出窗口,选择“显示隐藏文件(dotfiles)”,然后点击“保存”。

从文件列表中选择 wp-config.php,然后点击顶部菜单中的“查看”按钮。

当你向下滚动时,你会注意到几个部分由纯英文注释组成——这些是用星号(*)括起来的解释——后面跟着决定你网站功能的各种设置的 PHP 函数。它们指定了诸如数据库设置、身份验证密钥和调试模式状态等内容。

例如,行 define( ‘DB_NAME’, ‘MY_DATABASE_NAME’ ); 告诉 WordPress 你的数据库名称,而 define( ‘DB_USER’, ‘MY_DATABASE_USERNAME’ ); 指定了与之关联的用户名。

根据你网站的配置,你可能还会看到其他设置,例如

  • define( ‘EMPTY_TRASH_DAYS’, NUMBER ); 用于设置WordPress永久删除回收站内容前的天数。
  • define( ‘DISALLOW_FILE_EDIT’, true ); 用于禁用插件或主题文件编辑器,并阻止在管理后台访问这些区域。
  • define( ‘WP_AUTO_UPDATE_CORE’, false ); 用于防止WordPress核心的自动更新。还有数十种其他选项。

如需完整列表,请参考WordPress开发者资源中的“编辑wp-config.php”页面。

结论

即使你决定永远不通过WordPress管理后台之外的方式操作网站内容,了解其存储位置和访问方式也能加深你对网络运作原理的理解。希望揭开“云端”的神秘面纱能增强你的信心,无论是自己维护网站还是向他人寻求帮助时。

要了解更多,请访问WordPress初学者开发者学习路径,特别是关于WordPress文件结构的课程章节。