分类: WordPress开发

  • WordPress调试完整指南(启用WP_DEBUG + 其他工具)

    WordPress调试完整指南(启用WP_DEBUG + 其他工具)

    在一个完美的世界中,您永远不会遇到需要调试的问题。但在现实世界中,您几乎肯定会在WordPress网站上遇到需要深入了解的问题。

    为了帮助您做到这一点,WordPress包含其自己的内置调试模式,您还可以找到有用的第三方工具来帮助您调试WordPress。

    在这篇文章中,我们将深入研究内置的WordPress调试模式并向您展示如何启用它。然后,我们还将分享其他一些调试WordPress网站的方法。

    这是我们将涵盖的所有内容:

    WP Debug有什么作用?

    核心WordPress软件是用PHP编写的,插件和主题也是如此。

    如果您的网站出现问题,WordPress Debug模式可以通过显示所有PHP错误、通知和警告来帮助您找出问题所在。

    启用Debug模式后,只要出现问题(即使它不会立即引起问题),您就会看到如下消息:

    WordPress网站上的WP_DEBUG错误示例

    WordPress网站上的WP_DEBUG错误示例

    然后,您可以修复问题或将其报告给您的开发人员或主题/插件的开发人员。

    什么是WordPress调试日志?

    当你本身启用WordPress的调试模式,你会看到的消息像上面网站上的例子在那一刻-但这些消息不会被保存任何地方。

    如果您想保存它们,您还可以启用WordPress调试日志以将所有这些消息和错误保存到您服务器上的文件中。

    通过将WP_DEBUG_LOG常量设置为true启用后,WordPress会将所有问题写入以下文件:

    wp-content/debug.log

    但是,您也可以指定自定义文件路径以将日志写入服务器上的其他位置。

    如果您想将问题保存到日志中但不想在页面的HTML中公开显示它们(如上面的示例屏幕截图),您还可以使用WP_DEBUG_DISPLAY常量来保持启用调试模式但不在您的站点上显示消息。

    通常,您需要WP_DEBUG_DISPLAYWP_DEBUG_LOG.

    如何启用WordPress Debug模式

    要启用WordPress调试模式,您有多种选择。我们将介绍三种启用它的方法:

    1. 如何使用WordPress调试插件
    2. 如何手动启用WordPress调试模式

    如何使用WordPress调试插件

    您可以使用免费的WordPress调试插件,启用调试模式。WordPress.org上有几个选项,但我们推荐Andy Fragen提供的免费WP Debugging插件

    WP Debugging插件

    WP Debugging插件

    安装并激活插件后,它会立即开始工作。默认情况下,它将以下常量设置为true(即启用以下功能):

    • WP_DEBUG – 启用调试模式。
    • WP_DEBUG_LOG – 将消息保存到日志文件。
    • SCRIPT_DEBUG
    • SAVEQUERIES

    我们将在本文稍后介绍最后两个常量的作用。

    要配置一些选项,您可以转到工具 → WP Debugging:

    WP Debugging插件设置

    WP Debugging插件设置

    完成后,请确保禁用插件以禁用调试模式。

    如何手动启用WordPress调试模式

    最后,您还可以通过手动将常量添加到wp-config.php文件来启用WordPress调试模式。

    首先,通过FTP连接到您的服务器并编辑wp-config.php文件。默认情况下,此文件位于您站点的根文件夹中(除非您出于安全原因移动了它)。

    要启用只是基本的WordPress的调试模式,添加下面的代码片段上面写着/* That’s all, stop editing! Happy blogging. */:

    // Enable WP_DEBUG modedefine( ‘WP_DEBUG’, true );
    // Enable WP_DEBUG modedefine( ‘WP_DEBUG’, true );
    // Enable WP_DEBUG modedefine( 'WP_DEBUG', true );

    您还可以根据自己的喜好使用以下一些常量:

    // Enable Debug logging to the /wp-content/debug.log filedefine( ‘WP_DEBUG_LOG’, true );// Disable display of errors and warningsdefine( ‘WP_DEBUG_DISPLAY’, false );@ini_set( ‘display_errors’, 0 );
    // Enable Debug logging to the /wp-content/debug.log filedefine( ‘WP_DEBUG_LOG’, true );// Disable display of errors and warningsdefine( ‘WP_DEBUG_DISPLAY’, false );@ini_set( ‘display_errors’, 0 );
    // Enable Debug logging to the /wp-content/debug.log filedefine( 'WP_DEBUG_LOG', true );// Disable display of errors and warningsdefine( 'WP_DEBUG_DISPLAY', false );@ini_set( 'display_errors', 0 );

    完成后,您可以将常量设置为false或仅删除代码段以禁用调试模式。

    确保在完成后禁用WordPress中的调试模式

    调试模式在您尝试解决WordPress问题时很有用,但您不应该让它24/7全天候启用,因为它可以将您的PHP代码中的文本显示给网站访问者。

    我们在上面提到了这一点 – 但这只是提醒您在完成故障排除后始终禁用调试模式。

    其他调试WordPress的方法

    除了我们上面介绍的内置调试工具之外,还有其他几个内置和第三方工具可以帮助您调试WordPress网站。

    脚本调试

    SCRIPT_DEBUG是另一个内置常量,它强制WordPress使用核心CSS和JavaScript文件的开发版本,而不是它通常加载的缩小版本。

    如果您正在测试对内置 .js 或.css文件的更改,这会很有帮助。

    要启用SCRIPT_DEBUG,您可以:

    • 使用上面的免费WP Debugging插件,默认情况下启用它。
    • 将以下常量添加到您的wp-config.php文件中 –define( 'SCRIPT_DEBUG', true );

    数据库查询调试

    如果您的站点的数据库有问题,您可以使用SAVEQUERIES常量来启用数据库查询日志记录:

    • 每个数据库查询。
    • 调用数据库查询的函数。
    • 查询用了多长时间。

    要启用查询日志记录,您可以:

    • 使用上面的免费WP Debugging插件,默认情况下启用它。
    • 将以下常量添加到您的wp-config.php文件中 –define( 'SAVEQUERIES', true );

    注意:这会影响您网站的性能,因此请尽可能在临时网站上使用它,并在完成后立即将其禁用。

    Query Monitor插件

    Query Monitor插件是一个免费的插件,这对在WordPress包括调试许多不同的领域有所帮助:

    总的来说,它是您能找到的最好的WordPress调试工具之一,这就是为什么它在320多条评论中几乎获得了完美的5星评级。

    安装并激活插件后,您将在WordPress工具栏上获得一些显示调试信息的新选项。单击后,这些选项将打开一个新的Query Monitor框,为您提供更多信息:

    Query Monitor插件

    Query Monitor插件

    为了更详细地了解,我们有一整篇关于如何使用Query Monitor插件的文章

    New Relic

    New Relic是用于分析和调试站点性能的高级工具。它可以帮助您发现影响站点性能的瓶颈和问题。

    服务器日志

    最后,您的服务器日志也可以成为调试WordPress的有用工具。

    如果您在使用宝塔面板,也可以轻松查询服务器日志,参考宝塔面板日志查阅教程

    小结

    如果您需要调试WordPress,内置的WordPress调试模式提供了一种查看PHP错误和通知的有用方法。

    您可以使用插件或通过将代码片段添加到您网站的wp-config.php文件来启用它。

    如需更多帮助,您还可以使用其他内置工具或第三方工具,例如New Relic和免费的Query Monitor插件。

  • WP-CLI v2 – 通过终端管理WordPress

    WP-CLI v2 – 通过终端管理WordPress

    在其生命的大部分时间里,WordPress都是使用简单的代码库构建的,其中少量面向对象的 PHP 是最抽象的系统。然而,在过去的几年里,这种情况正在好转。从单元测试到CSS预处理和命令行工具,越来越多对开发人员友好的资产不断涌现。在本文中,我们将介绍我的最爱之一:WP-CLI

    什么是WP-CLI?

    WP-CLI是一个命令行工具,供开发人员管理 WordPress 安装的常见任务(并不常见)。它可以添加/删除用户、文章、类别、插入测试数据、在数据库中搜索和替换、重置密码、帮助解决性能问题等等!

    WP-CLI作为一个开源项目已有十多年的历史, 自2003年以来主要由Daniel Bachhuber维护 。WP-CLI 的主要目标是帮助加快WordPress开发人员的工作流程

    多年来,该项目已经出现了更多!它现在甚至成为其他开源项目(例如Trellis和Bedrock )的要求。截至2017年1月,WP-CLI正式迁移到WordPress.org,现在也由Alain Schlesser共同维护

    WP-CLI v2于2018年8月8日发布,因此我们还将探索一些变化和新功能。

    获取WP-CLI

    WP-CLI v2.0.0的最低PHP要求已提高到PHP 5.4。虽然这是一个很好的进步,但我们建议您至少运行受支持的PHP版本,即5.6或更高版本。

    要开始使用,您需要安装WP-CLI——一个非常简单的过程。Linux和OSX的步骤如下,依次发出这三个命令:

    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
    chmod +x wp-cli.phar
    sudo mv wp-cli.phar /usr/local/bin/wp
    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
    chmod +x wp-cli.phar
    sudo mv wp-cli.phar /usr/local/bin/wp
    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
    chmod +x wp-cli.phar
    sudo mv wp-cli.phar /usr/local/bin/wp
    

    如果出现问题或者您使用的是Windows,请参阅基本说明其他安装方法

    完成后,您应该能够发出wp --info命令并获得有意义的响应。

    如果你想在你的服务器上安装WP-CLI,这个过程是一样的。不确定您当前运行的是哪个版本?您可以随时发出wp cli version命令来查找。

    WP-CLI的基础知识

    从命令行访问WordPress本身就很强大,但在使用bash脚本时可以为您提供更多控制和速度提升。

    Bash脚本允许您使用单个命令运行一系列命令。您可以键入bash install-and-setup.sh并获得以下结果:

    • 下载WordPress
    • 创建和填充 wp-config.php
    • 创建数据库
    • 安装WordPress
    • 安装并激活您需要的任何插件
    • 安装并激活主题
    • 下载并添加测试内容

    这些将是我为项目创建新测试环境所采取的步骤。通常至少需要5-10分钟,特别是如果涉及到一些插件。发出单个命令显然要快得多。

    一般WP-CLI命令

    如果您习惯于在终端中工作,那么WP-CLI对您来说没有什么特别之处。命令总是以开头,wp后跟命令和子命令,后跟必需和可选参数,如下所示:

    wp command subcommand requiredparam –optionalparam –optionalparam2=value
    wp command subcommand requiredparam –optionalparam –optionalparam2=value
    wp command subcommand requiredparam --optionalparam --optionalparam2=value

    让我们安装一个主题,看看它是如何与真实命令配合使用的:

    wp theme install twentyseventeen –activate
    wp theme install twentyseventeen –activate
    wp theme install twentyseventeen --activate

    这将在您的 WordPress 安装中安装并激活二〇一七主题。

    请注意,WP-CLI将与您当前在终端中的WordPress安装一起使用。如果您切换目录以转到另一个WordPress安装,它将适用于该安装。

    有用的例子

    简而言之,这就是WP-CLI!虽然您可以执行一些高级操作(我们稍后会介绍),但您已经掌握了足够的知识,可以开始并执行所需的任何操作。我建议查看命令列表,尝试其中的一些。我们将在这里看一些有用的东西,然后继续通过SSH使用WP-CLI和使用bash脚本。

    安装WordPress

    我经常使用WP-CLI来设置测试环境,第一步是vanilla安装。这是我运行的命令列表:

    wp core download
    wp core config –dbname=mydbname –dbuser=mydbuser –dbpass=mydbpass –dbhost=localhost –dbprefix=whebfubwef_ –extra-php <<PHP
    define( ‘WP_DEBUG’, true );
    define( ‘WP_DEBUG_LOG’, true );
    PHP
    wp db create
    wp core install –url=http://siteurl.com –title=SiteTitle –admin_user=username –admin_password=mypassword –admin_email=my@email.com
    wp core download
    wp core config –dbname=mydbname –dbuser=mydbuser –dbpass=mydbpass –dbhost=localhost –dbprefix=whebfubwef_ –extra-php <<PHP
    define( ‘WP_DEBUG’, true );
    define( ‘WP_DEBUG_LOG’, true );
    PHP
    wp db create
    wp core install –url=http://siteurl.com –title=SiteTitle –admin_user=username –admin_password=mypassword –admin_email=my@email.com
    wp core download
    wp core config --dbname=mydbname --dbuser=mydbuser --dbpass=mydbpass --dbhost=localhost --dbprefix=whebfubwef_ --extra-php <<PHP
    define( 'WP_DEBUG', true );
    define( 'WP_DEBUG_LOG', true );
    PHP
    wp db create
    wp core install --url=http://siteurl.com --title=SiteTitle --admin_user=username --admin_password=mypassword --admin_email=my@email.com
    

    注意这有多酷!使用第一个命令下载最新版本的WordPress。第二个命令使用数据库访问权限和一些附加的PHP设置配置文件。额外的常量确保我们有我们的调试选项进行测试。如果您想了解有关调试WordPress的更多信息,我们在此处提供了详细指南。

    第三个命令创建数据库(WP-CLI使用配置文件中的数据库访问信息),最后,我们使用几个参数安装WordPress。

    重新安装WordPress核心

    您还可以使用WP-CLI重新安装WordPress核心。以下命令将下载没有默认主题和插件的WordPress核心。

    wp core download –skip-content –force
    wp core download –skip-content –force
    wp core download --skip-content --force

    更改WordPress网址

    您可能需要或想要更改WordPress URL的原因有很多。也许您正在更改域、移动到子域、从www更新到非www、移动文件,甚至从 HTTP 迁移到 HTTPS。无论情况如何,您都可以轻松使用该wp option update命令。下面是一个例子:

    wp option update home ‘http://example.com’
    wp option update siteurl ‘http://example.com’
    wp option update home ‘http://example.com’
    wp option update siteurl ‘http://example.com’
    wp option update home 'http://example.com'
    wp option update siteurl 'http://example.com'

    包含详细信息的当前插件列表

    要获取站点上安装的当前插件列表,只需使用以下命令。在此示例中,您可以看到我们安装了Schema和Yoast SEO插件。它还将返回状态(活动/停用)、是否有可用更新以及当前版本。

    wp plugin list
    wp plugin list
    wp plugin list

    WP-CLI插件列表

    WP-CLI插件列表

    安装多个插件

    要安装多个插件,您可以简单地堆积参数。这是一个下载并激活3个插件的示例:

    wp plugin install advanced-custom-fields jetpack ninja-forms –activate
    wp plugin install advanced-custom-fields jetpack ninja-forms –activate
    wp plugin install advanced-custom-fields jetpack ninja-forms --activate

    请注意,插件名称来自它们在存储库中的名称。解决这个问题的最简单方法是访问他们的页面并查看URL或使用wp plugin search searchterm,它将在终端中为您提供列表。

    WordPress插件库URL

    WordPress插件库URL

    如果需要,您还可以使用--version属性安装旧版本的WordPress插件。

    wp plugin install wordpress-seo –version=4.8 –activate
    wp plugin install wordpress-seo –version=4.8 –activate
    wp plugin install wordpress-seo --version=4.8 --activate

    更酷的是,您可以从远程文件安装插件,而不仅仅是在开发插件或使用高级插件时很方便的存储库。以下命令从存储库安装两个插件,一个从Amazon S3服务器安装。

    wp plugin install advanced-custom-fields jetpack https://d1qas1txbec8n.cloudfront.net/wp-content/uploads/2015/06/23073607/myplugin.zip –activate
    wp plugin install advanced-custom-fields jetpack https://d1qas1txbec8n.cloudfront.net/wp-content/uploads/2015/06/23073607/myplugin.zip –activate
    wp plugin install advanced-custom-fields jetpack https://d1qas1txbec8n.cloudfront.net/wp-content/uploads/2015/06/23073607/myplugin.zip --activate

    停用多个插件

    要停用单个插件,您可以运行以下命令。

    wp plugin deactivate wordpress-seo
    wp plugin deactivate wordpress-seo
    wp plugin deactivate wordpress-seo

    要一次停用所有插件,请运行以下命令。

    wp plugin deactivate –all
    wp plugin deactivate –all
    wp plugin deactivate --all

    WP-CLI停用所有插件

    WP-CLI停用所有插件

    如果您正在解决兼容性问题并且只需要一举停用所有插件,则上述命令会很方便。然后,您可以返回并一一启用它们,随时进行测试。

    更新插件

    您还可以手动更新WordPress插件。下面的例子:

    wp plugin update wordpress-seo
    wp plugin update wordpress-seo
    wp plugin update wordpress-seo

    WP-CLI手动更新WordPress插件

    WP-CLI手动更新WordPress插件

    数据库搜索和替换

    仅通过复制粘贴数据库难以搬迁站点的主要原因之一是该数据库包含序列化数组。如果您需要http://testsite.comhttp://livewebsite.com序列化数组替换所有实例将没有意义,因为字符串计数不匹配。

    search-replace命令首先反序列化数组,然后执行搜索和替换,然后重新序列化数组。您可以使用一个简单的命令完成此操作:

    wp search-replace oldstring newstring
    wp search-replace oldstring newstring
    wp search-replace oldstring newstring

    附加参数允许您执行更多操作,包括预览将使用--dry-run.

    导出导入

    有两种使用WP-CLI导出内容的方法。您可以创建一个XML文件,就像WordPress导出工具一样,或者您可以导出/导入原始数据库。我发现后者在我的日常生活中更有用,它在同步站点时派上用场。

    wp db export这是您创建SQL文件所需要做的wp db import file.sql全部工作,并且是您导入它所需的全部工作。就像一个魅力,只是小心不要覆盖你需要的任何东西,导入基本上会转储现有的数据库并使用提供的SQL文件代替。

    管理角色和权限

    WP-CLI 可以使用该wp role命令轻松地为您管理角色。如果您想测试您的插件如何与自定义角色一起工作,但您实际上并未在插件中创建角色,那么这非常酷。

    wp role create organizer Organizer
    wp cap list ‘editor’ | xargs wp cap add ‘organizer’
    wp cap add ‘organizer’ ‘manage-events’
    wp role create organizer Organizer
    wp cap list ‘editor’ | xargs wp cap add ‘organizer’
    wp cap add ‘organizer’ ‘manage-events’
    wp role create organizer Organizer
    wp cap list 'editor' | xargs wp cap add 'organizer'
    wp cap add 'organizer' 'manage-events'

    上面的命令将创建一个新角色(Organizer),将编辑器角色的所有功能添加到它,然后添加一个新功能:管理事件。使用正确的命令,您可以使用 WP-CLI更改您的WordPres密码

    生成测试数据

    我喜欢各种类似faker的功能 – 向您的网站添加可用于测试的虚拟内容的功能。WP-CLI内置了其中的一些功能,这里有一些功能可以生成用户、术语和文章。

    wp user generate –count=5 –role=editor
    wp user generate –count=10 –role=author
    wp term generate –count=12
    wp post generate –count=50
    wp user generate –count=5 –role=editor
    wp user generate –count=10 –role=author
    wp term generate –count=12
    wp post generate –count=50
    wp user generate --count=5 --role=editor
    wp user generate --count=10 --role=author
    wp term generate --count=12
    wp post generate --count=50

    管理WP-Cron事件

    您可以在WP-CLI中管理WP-Cron事件和/或WordPress Cron作业。例如,以下命令将为您提供当前的cron事件列表。

    wp cron event list
    wp cron event list
    wp cron event list

    wp-cron事件列表

    wp-cron事件列表

    删除瞬态

    您甚至可以使用以下命令删除和清除一个或所有瞬变。

    wp transient delete –all
    wp transient delete –all
    wp transient delete --all

    如果您正在运行multisite,则需要更复杂的命令。默认情况下,该命令仅检查wp_options表。它不检查wp_1_optionswp_2_options等等。

  • 如何使用Gatsby为WordPress生成静态网站

    如何使用Gatsby为WordPress生成静态网站

    典型的动态网站(例如基于 WordPress 的网站)如何工作?当访问者在浏览器上输入URL或通过链接访问您的网站时,会向您的Web服务器发送请求。

    服务器通过必要的数据库查询收集所需的数据,并生成一个HTML文件供您的浏览器显示。另一方面,静态站点将这些响应存储到服务器上的平面文件中,这些文件会立即传递给访问者。

    静态站点生成器已经存在了很长时间,但它们最近变得越来越流行。在本分步指南中,我们将了解如何将WordPress与静态网站生成器Gatsby集成。

    1. 什么是Gatsby?
    2. 第1步:设置Gatsby
    3. 第2步:如何将Gatsby连接到WordPress
    4. 第3步:创建基本页面模板
    5. 第4步:高级迁移任务

    什么是Gatsby?

    WordPress创建动态网站,需要在服务器上安装一堆PHP、MySQL和Apache或Nginx才能运行。可以通过为您网站上的所有内容生成HTML页面列表来创建WordPress的静态版本。

    这个静态版本的WordPress称为无头WordPress或无服务器WordPress。此转换过程只需执行一次,以便可以多次向访问者提供同一页面。您如何将您的WordPress网站转换为静态版本?这就是Gatsby出现的地方。

    Gatsby或GatsbyJS是一个使用ReactJS构建并由GraphQL提供支持的静态站点生成器。Gatsby允许任何人创建功能丰富、引人入胜的网站和应用程序。Gatsby通过GraphQL从各种来源(包括现有网站、API调用和平面文件)为您的站点获取数据,并根据您指定的配置设置构建静态站点。

    Gatsby是一年前才开发出来的,但大量用户都在尝试Gatsby。Gatsby在各种环境中都得到了认可。Airbnb的数据科学与工程博客的主页由Gatsby提供支持,但实际的博客文章托管在Medium上。

    Airbnb的工程与数据科学博客

    Airbnb的工程与数据科学博客

    BRAUN(博朗)是消费品公司宝洁的品牌。它的加拿大站点由Gatsby托管,而站点上的搜索功能由React提供支持。

    博朗品牌的加拿大网站

    博朗品牌的加拿大网站

    此外,Gatsby还激发了自由职业者开发人员对其作品集的兴趣。诸如Jacob Castro的作品集主要包含静态内容,其中包含作品链接和电子邮件联系方式,因此静态网站非常适合他的需求。

    Jacob D. Castro的作品展示站

    Jacob D. Castro的作品展示站

    为什么选择Gatsby?

    快速网站: 使用Gatsby构建静态网站的主要好处是速度,自从Google宣布在网络搜索排名中使用网站速度以来,网站管理员一直在努力优化速度。加载时间也会影响页面浏览量和转化率。据估计,网站加载时间延迟一秒会导致转化次数减少7%。

    安全性: 您还可以通过静态站点获得额外的安全性。由于提供的是一堆静态文件,因此没有什么可破解的。此外,如果静态文件丢失,您始终可以重新生成它们。

    服务器成本:托管动态站点需要您的服务器与您的技术堆栈兼容。如果您使用的是静态站点,则几乎可以在任何服务器上托管它,这也降低了与托管相关的成本。

    在每次更改时使用Gatsby生成静态站点确实需要JavaScript,这也可以在将静态文件传输到站点之前在本地计算机上完成。

    为什么要避开Gatsby?

    没有内置动态内容: 如果你想使用Gatsby,你需要重新考虑如何控制和提供动态内容,即你需要创建静态/动态的混合来实现这一点(更多关于这个以下)。

    例如,评论需要通过像Disqus这样的服务在外部托管。

    联系表格还需要通过Google表格等外部合作伙伴重新发送。简而言之,您将失去对此类动态内容的直接控制,因为它们的响应未存储在您的服务器上。

    频繁构建不方便: 静态站点也存在频繁重新转换的问题。只有在重新生成页面并将其重新上传到服务器后,您在网站上所做的任何更改才会反映出来。

    技术专长:  Gatsby建立在ReactJS和GraphQL之上。因此,需要一些JavaScript知识和GraphQL的基本概念来处理网站并将其移植到Gatsby。

    静态网站非常适合那些正在寻找具有高安全性的低成本解决方案的人。一些用例是自由职业者的投资组合网站和产品演示网站。

    如果您认为好处大于缺点,那就太好了!我们现在将尝试设置Gatsby以与我们的WordPress站点集成。

    我们在本教程中构建的Gatsby站点的最新版本在GitHub上可供您使用。

    第1步:设置Gatsby

    在本节中,我们将了解如何安装Gatsby并使用Gatsby创建一个基本的静态站点。

    先决条件

    开始使用Gatsby的第一步是检查其先决条件。Gatsby通过npm(NodeJS包安装程序)提供服务。因此,在安装Gatsby之前,您的环境中需要NodeJS和npm。此外,Gatsby要求您安装源代码管理系统Git。

    如果您运行的是Windows,您可以通过下载页面上的安装程序安装NodeJS和Git。在Mac上,您可以下载他们的安装程序或使用自制软件。

    brew install nodejs
    brew install git
    brew install nodejs
    brew install git
    brew install nodejs
    brew install git

    如果您运行的是Linux操作系统,则可以通过apt之类的包安装程序安装NodeJS。

    sudo apt update
    sudo apt install nodejs git
    sudo apt update
    sudo apt install nodejs git
    sudo apt update
    sudo apt install nodejs git

    安装Gatsby

    成功安装NodeJS和Git后,就可以安装Gatsby了!最简单的方法是在终端上运行以下命令(在Windows上使用命令行npm):

    npm install -g gatsby-cli
    npm install -g gatsby-cli
    npm install -g gatsby-cli

    安装程序首先安装依赖项,然后安装Gatsby。您现在已准备好创建您的第一个Gatsby站点。

    构建和部署您的Gatsby站点

    运行以下命令以创建Gatsby站点。

    gatsby new gatsby-wordpress
    gatsby new gatsby-wordpress
    gatsby new gatsby-wordpress

    Gatsby通过克隆Gatsby入门模板在目录/gatsby-wordpress中创建一个站点。您可以提供不同的入门模板进行克隆。克隆完成并安装依赖项后,您可以使用以下命令运行站点的开发版本。

    cd gatsby-wordpress
    gatsby develop
    cd gatsby-wordpress
    gatsby develop
    cd gatsby-wordpress
    gatsby develop

    然后,您可以在http://localhost:8000访问该站点的开发版本。

    Gatsby入门网站

    Gatsby入门网站

    最后一步是构建您的静态站点。以下命令在公共目录中创建静态文件。要将其上传到服务器,您只需将该目录的内容上传到服务器的根目录即可。您可能希望添加像www.example.com/blog/这样的路径前缀作为构建的根URL。

    gatsby build
    gatsby build
    gatsby build

    要在本地启动HTML服务器以显示您网站的这种静态形式,您需要使用serve 命令。请注意,它仅在运行build命令后才有效。

    gatsby serve
    gatsby serve
    gatsby serve

    现在您已经从Gatsby成功创建了一个基本的静态站点,让我们尝试将其与WordPress集成。

    第2步:如何将Gatsby连接到WordPress

    在本节中,您将把您的WordPress网站与Gatsby集成。您可以将Gatsby指向您的WordPress博客的地址,以使其在您运行开发服务器或生成静态页面时能够提取最新数据。

    将Gatsby连接到WordPress的过程是获取由构建触发的WordPress数据。Gatsby获取WordPress数据后,它会根据当前模板创建静态站点。

    该过程使用WordPress站点,该站点具有Gatsby上的文章的来源。为了方便这种交流,您需要通过以下命令安装Gatsby的WordPress插件:

    npm install gatsby-source-wordpress
    npm install gatsby-source-wordpress
    npm install gatsby-source-wordpress

    配置Gatsby

    接下来,将此插件添加到Gatsby的配置文件gatsby-config.js中。

    然后,将以下代码添加到文件中以将Gatsby连接到您的WordPress源。在此示例中,我们在MAMP上使用本地托管的WordPress站点。在旁注中,您可能希望在siteMetadata中编辑站点的标题和描述。

    <code>module.exports = {
    siteMetadata: {
    },
    plugins: [
    {
    resolve: `gatsby-source-wordpress`,
    options: {
    // Specify the URL of the WordPress source
    baseUrl: `localhost:8888/wordpress`,
    protocol: `http`,
    // Indicates if a site is hosted on WordPress.com
    hostingWPCOM: false,
    // Specify which URL structures to fetch
    includedRoutes: [
    ‘**/posts’,
    ‘**/tags’,
    ‘**/categories’
    ]
    }
    }
    </code>
    <code>module.exports = {
    siteMetadata: {

    },
    plugins: [

    {
    resolve: `gatsby-source-wordpress`,
    options: {
    // Specify the URL of the WordPress source
    baseUrl: `localhost:8888/wordpress`,
    protocol: `http`,
    // Indicates if a site is hosted on WordPress.com
    hostingWPCOM: false,
    // Specify which URL structures to fetch
    includedRoutes: [
    ‘**/posts’,
    ‘**/tags’,
    ‘**/categories’
    ]
    }
    }
    </code>
    module.exports = {
    siteMetadata: {
    ...
    },
    plugins: [
    ...
    {
    resolve: `gatsby-source-wordpress`,
    options: {
    // Specify the URL of the WordPress source
    baseUrl: `localhost:8888/wordpress`,
    protocol: `http`,
    // Indicates if a site is hosted on WordPress.com
    hostingWPCOM: false,
    // Specify which URL structures to fetch
    includedRoutes: [
    '**/posts',
    '**/tags',
    '**/categories'
    ]
    }
    }
    

    使用GraphQL获取文章

    在配置文件中指定WordPress站点的来源后,您需要指定需要从WordPress站点提取哪些数据。Gatsby使用GraphQL(一种用于API的开源查询语言)来批量获取WordPress文章。

    在最终确定要选择的查询之前,您可以交互地选择需要从WordPress获取的内容。运行开发服务器并转到URL:http://localhost:8000/___graphql以打开GraphQL编辑器。

    使用GraphQL查询数据

    使用GraphQL查询数据

    完成要拉取的内容后,可以将GraphQL查询添加到文件index.js。

    现在让我们只从每个文章中提取标题和摘录。我们可以稍后添加更多字段。

    import React from “react”
    import { graphql } from “gatsby”
    import Layout from “../components/layout”
    import SEO from “../components/seo”
    export default ({ data }) => {
    return (
    <Layout>
    <SEO title=“home” />
    <h4>Posts</h4>
    {data.allWordpressPost.edges.map(({ node }) => (
    <div>
    <p>{node.title}</p>
    <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
    </div>
    ))}
    </Layout>
    )
    }
    export const pageQuery = graphql`
    query {
    allWordpressPost(sort: { fields: [date] }) {
    edges {
    node {
    title
    excerpt
    }
    }
    }
    }
    import React from “react”
    import { graphql } from “gatsby”
    import Layout from “../components/layout”
    import SEO from “../components/seo”
    export default ({ data }) => {
    return (
    <Layout>
    <SEO title=”home” />
    <h4>Posts</h4>
    {data.allWordpressPost.edges.map(({ node }) => (
    <div>
    <p>{node.title}</p>
    <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
    </div>
    ))}
    </Layout>
    )
    }
    export const pageQuery = graphql`
    query {
    allWordpressPost(sort: { fields: [date] }) {
    edges {
    node {
    title
    excerpt
    }
    }
    }
    }
    import React from "react"
    import { graphql } from "gatsby"
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    export default ({ data }) => {
    return (
    <Layout>
    <SEO title="home" />
    <h4>Posts</h4>
    {data.allWordpressPost.edges.map(({ node }) => (
    <div>
    <p>{node.title}</p>
    <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
    </div>
    ))}
    </Layout>
    )
    }
    export const pageQuery = graphql`
    query {
    allWordpressPost(sort: { fields: [date] }) {
    edges {
    node {
    title
    excerpt
    }
    }
    }
    }
    

    当您检查开发站点时,您会注意到所有来自Wor

  • WordPress高级自定义字段教程

    WordPress高级自定义字段教程

    WordPress自定义字段是使WordPress成为灵活的内容管理系统的重要组成部分,而不仅仅是“一个博客平台”。

    对于WordPress自定义字段,Advanced Custom Fields插件是最知名的名称之一。它使在各个方面使用自定义字段变得更加容易,这也是我们今天文章的主题。

    具体来说,我们将解释为什么高级自定义字段如此有价值,然后逐步向您展示如何将其应用到您的WordPress网站。

    以下是您将在这篇文章中找到的所有内容:

    1. 什么是WordPress自定义字段?他们让你做什么?
    2. Advanced Custom Fields插件使自定义字段更容易
    3. 高级自定义字段教程:如何添加字段
    4. 如何在前端显示高级自定义字段

    什么是Advanced Custom Fields插件?

    由Elliot Condon开发的高级自定义字段(通常简称为 ACF)是一个WordPress插件,允许您向网站添加和管理WordPress自定义字段。它既可以作为免费插件也可以作为高级插件使用,称为ACF PRO,终身更新和1个站点的起价为25美元。

    什么是WordPress自定义字段?他们让你做什么?

    WordPress自定义字段可让您添加、存储和显示有关WordPress中某段内容的附加信息。在更技术层面上,自定义字段可帮助您存储元数据。

    即使您不熟悉这个术语,自定义字段也会为您喜欢的插件和主题中的大部分功能提供支持。

    例如,构建电子商务商店的最流行方式WooCommerce使用自定义字段来存储有关产品的其他信息,例如:

    • 价格
    • 重量
    • 颜色

    或者,如果您有WordPress事件日历插件,该插件将使用自定义字段来存储有关事件的额外信息,例如:

    • 地点
    • 开始/结束时间
    • 价格

    您还可以创建自己的自定义字段来存储与您的独特需求相关的信息,这就是整篇文章的内容。

    什么时候应该使用自定义字段?

    现在,您可能想知道为什么首先需要自定义字段。

    例如,如果您想在您的WordPress网站上发布活动,您不能将所有这些信息作为常规文本放入WordPress编辑器中吗?

    嗯,是的,你可以。但是出于以下几个原因,使用自定义字段是一种更好的方法:

    • 更轻松的输入——而不是从头开始输入内容,布局良好的自定义字段组将使输入数据变得更加容易。例如,您可以直接从日期选择器中选择日期,而不是输入日期。
    • 一致性——您在自定义字段中输入的信息将始终根据您的设置显示,这意味着它将在您的整个站点中保持一致。
    • 易于更新和维护——如果您想更改该信息在未来的显示方式,您可以只更新一件事,而不必单独编辑每个帖子。

    WordPress包括内置的自定义字段功能

    WordPress实际上包含用于向您的内容添加自定义字段的内置功能。在经典的TinyMCE编辑器中,您可以从屏幕选项区域启用此功能。或者,在新的区块编辑器中,您可以从选项区域启用它:

    如何在区块编辑器中访问自定义字段

    如何在区块编辑器中访问自定义字段

    然后,您可以使用键/值对输入自定义字段数据:

    内置的WordPress自定义字段功能

    内置的WordPress自定义字段功能

    这种本机自定义字段功能是完全实用的,但它不是最用户友好的做事方式,这就是为什么很多人转而使用高级自定义字段插件的原因。

    Advanced Custom Fields使其更容易

    简而言之,Advanced Custom Fields使在WordPress中使用自定义字段变得更加容易……几乎所有方面。

    它简化了在WordPress仪表盘中添加和管理自定义字段的界面,还简化了在站点前端显示自定义字段信息的过程。这一事实仅有助于解释为什么它在超过100万个网站活跃,并在1,000多条评论中获得4.9星评级

    在后端,它可以让您创建用户友好的元框,其中包括预选的字段类型。因此,您将能够使用日期选择器、复选框等,而不是通用键值对接口(如您在上面看到的那些):

    区块编辑器中的高级自定义字段

    区块编辑器中的高级自定义字段

    高级自定义字段总共提供 30 多种不同的字段类型,您可以将它们添加到仪表板中的任何区域,包括文章、用户、分类法、媒体、评论,甚至自定义选项页面。

    您可以在此处查看有关每种字段类型的详细信息

    高级自定义字段还通过详细记录的功能、简码、古腾堡块等,使显示该信息变得更加容易。

    或者,您可以找到与其他工具的集成,例如一些拖放式WordPress页面构建器

    Advanced Custom Fields免费与专业:您需要哪一个?

    高级自定义字段既有免费版本,也有价格实惠的高级版本。

    对于大多数基本用途,免费版本完全没问题。它使您可以访问几乎所有的字段类型,以及上面概述的所有节省时间和用户友好的功能。

    如果您只想存储有关您的内容的一些额外信息,免费版本就是您所需要的。

    话虽如此,专业版确实添加了一些非常方便的功能,可以帮助您以更有趣的方式使用高级自定义字段:

    • 重复字段——这些允许您在逐个帖子的基础上重复某些字段/字段组。例如,如果您要向事件添加有关发言人的信息,中继器字段将帮助您处理有多个发言人的情况(您可以根据需要多次“重复”发言人的字段,它可以让您处理有多个扬声器的边缘情况)。
    • ACF区块– 将您的字段显示为Gutenberg区块,而不是元框。如果您正在为客户构建站点并希望为他们提供一种简单的方法来输入和可视化自定义字段数据,这将特别方便。
    • 灵活的内容字段– 从其他字段创建布局。它有点像基于自定义字段信息的轻量级页面构建器。
    • 图库字段– 将多个图像上传到单个字段。

    还有一些其他差异,例如选项页面、克隆字段的能力、对关系字段的改进以及其他较小的调整。

    您可以在此处查看所有ACF PRO功能

    ACF PRO起价为25美元,可在单个站点上终身使用。或者,您可以支付100美元在无限网站上终身使用。

    如有疑问,请从免费版本开始,直到您确切了解所需的功能。如果需要,您可以随时升级。

    Advanced Custom Fields教程:如何添加字段

    现在让我们深入研究实际的高级自定义字段教程,我将向您展示如何创建和显示您的第一组自定义字段。

    对于这个例子,假设你有一个关于跑步的博客。你喜欢……真的很喜欢跑步,你想与你的读者分享你的日常锻炼。具体来说,对于每篇博文,您都想分享一次跑步:

    • 目的——假设你有两种不同类型的跑步:“速度训练”和“训练”。
    • 距离——你跑了多长时间。
    • 开始时间——你开始跑步的时间。
    • 完成时间——你完成跑步的时间。
    • 位置——你跑步的地方。

    要收集该信息,您需要添加五个自定义字段。

    请务必注意,您将在此高级自定义字段教程中学习的原则适用于任何用例。我们只是选择一个具体的例子,因为它有助于有一个具体的例子来连接。

    我们将把本教程分为两部分:

    1. 如何在后端添加和管理您的自定义字段。
    2. 如何在您的网站前端显示自定义字段信息。

    1.创建一个新的字段组

    从WordPress.org安装并激活Advanced Custom Fields的免费版本后,转到Custom Fields > Add New以创建您的第一个Field Group

    顾名思义,“Field Group”是一组一个或多个自定义字段,它们一起显示在您的WordPress仪表盘中。

    对于此示例,您将创建一个包含五个自定义字段的字段组。

    为您的字段组命名,然后选择其Location。在本例中,我们希望为常规WordPress博客文章显示这些自定义字段,因此您可以将其保留为默认Post

    但是,如果您想在其他地方显示自定义字段,例如自定义文章类型或分类,您需要更改此设置。您还可以设置多个规则以在多个位置显示您的字段:

    创建一个新的ACF字段组

    创建一个新的ACF字段组

    2.添加自定义字段

    接下来,单击+ Add Field按钮以添加您的第一个自定义字段:

    添加新字段

    添加新字段

    这将打开很多选项,但您不一定需要填写所有内容。

    两个最重要的选择是:

    • Field Label——这是将出现在编辑器中的内容。它还将用于生成字段名称,这是您将在代码中使用的名称。您不需要更改字段名称(尽管您可以根据需要更改)。
    • Field Type— 这是您要收集的信息类型。例如,您需要一个Number字段来收集号码信息或一个Email字段来收集电子邮件地址。

    对于第一个字段,您需要一个Radio Button字段类型:

    配置字段

    配置字段

    再往下,您可以在“Choices框中输入单选按钮选择选项:

    输入单选框选项

    输入单选框选项

    您还可以做出许多其他选择,例如是否需要字段和默认值。随意配置这些以满足您的需求。

    让我们看另一个示例:用于收集跑步距离的自定义字段。这一次,您需要一个Number字段类型:

    创建数字字段

    创建数字字段

    您还可以通过选择Append距离单位使事情变得更加用户友好。如果您愿意,您还可以使用Minimum ValueMaximum Value添加验证。例如,你可能不会跑1000英里(如果你这样做了……天哪,你就是终极阿甘正传)!

    更多字段设置

    更多字段设置

    只需对您要收集的所有其他自定义字段重复该过程。完成后,它应该看起来像这样:

    5个不同的ACF字段

    5个不同的ACF字段

    3.配置设置和发布

    要完成任务,请向下滚动到“Settings框。在这里,您可以控制字段在WordPress编辑器中的显示方式。

    大多数情况下,您可以将这些保留为默认值。但是,如果您愿意,请随时更改。例如,您可以选择在常规WordPress编辑器上方显示自定义字段:

    WordPress高级自定义字段教程-5

    配置ACF字段组设置

    做出选择后,Publish您的字段组以使其生效。

    4. 在WordPress编辑器中添加一些信息

    发布字段组后,您会在创建新文章时看到您的字段。

    默认情况下,它们将一起出现在经典TinyMCE编辑器和新区块编辑器中的编辑器下方:

    区块编辑器中的高级自定义字段

    区块编辑器中的高级自定义字段

    您在此处输入的信息将存储在您网站的WordPress数据库中,以便于检索(您将在我们的高级自定义字段教程的下一部分中看到)。

    探索条件逻辑

    在我们继续之前,让我们快速绕道。

    看,高级自定义字段如此受欢迎的原因之一是它允许的所有有趣的实现。

    这里一个强大的选项是条件逻辑(Conditional Logic),它允许您根据前一个字段的回答方式显示/隐藏字段。

    让我们看一个简单的例子来说明它是如何工作的……

    假设您想写关于食物、旅行或跑步以外的任何内容的博客。当您撰写关于非运行主题的文章时,显示有关运行信息的自定义字段没有多大意义,对吧?

    如果不是自动显示您刚刚创建的所有自定义字段,而是可以添加一个自定义字段,上面写着“Is this a run?”:

    条件逻辑示例

    条件逻辑示例

    如果您选中该框,则运行信息字段会自动出现。如果您不选中它,它们将保持隐藏状态:

    选中时显示其他字段

    选中时显示其他字段

    这就是条件逻辑允许您做的事情!

    要进行设置,您将编辑您的字段组并为“Is this a run?”添加一个新的True/False字段:

    添加True/False字段

    添加True/False字段

    然后,您将编辑现有字段并打开条件逻辑(Conditional Logic),以便每个字段仅在“Is this a run?”时显示。检查字段:

    向其他字段添加条件逻辑

    向其他字段添加条件逻辑

    如何在前端显示高级自定义字段

    好的,我们的高级自定义字段之旅已经完成了一半。您现在可以将信息添加到您的自定义字段,将其与相关的文章类型相关联,并将其存储在您的数据库中。

    但是,仍然存在一个潜在问题:自定义字段中的信息还没有出现在前端的任何地方!

    也就是说,即使您为博客文章添加了一些自定义字段到编辑器,您的博客文章仍然看起来像前端的普通博客文章:

    前端没有自定义字段

    前端没有自定义字段

    让我们解决这个问题。

    您可以通过几种不同的方式在网站前端显示高级自定义字段数据。您选择的确切方法将取决于您的需求和知识水平。以下是实现这一目标的三种不同方法:

    1. 您的主题的模板文件——这需要一点技术知识,但大多数时候这是最好的方法,尤其是当您对使用主题的模板文件感到满意时。
    2. 使用简码– 如果您只想逐个插入自定义字段数据,这是一个超级简单且不错的选择。但是,它需要更多的手动工作,因为您需要为每个文章添加短代码
    3. 使用Elementor Pro — 这很棒,因为它完全无需使用PHP,但它是一款优质产品,这也意味着您需要使用Elementor Pro进行模板制作。

    您可以单击上方直接跳转到特定方法,也可以通读所有方法。由你决定。

    如何在主题模板文件中添加高级自定义字段

    显示自定义字段信息的第一种方法是将高级自定义字段的PHP函数直接添加到子主题的模板文件中

    这有点高级,因为它需要您深入研究主题的模板文件,但它可以确保您的自定义字段每次都会自动显示在同一位置。

    具体来说,您需要为相关文章类型编辑single模板。

    对于普通的博客文章,这是single.php。或者,一些主题将事物分解为模板部分。例如,对于TwentyNineteen主题,您实际上需要编辑content-single.php模板部分。

    如果您在这里感到迷失,您可能想要使用不同的方法。

    找到单个文章的主题模板文件后,您可以使用高级自定义字段的the_field()函数来显示字段的信息。例如,

    <?php the_field(‘FIELD_NAME’); ?>
    <?php the_field(‘FIELD_NAME’); ?>
    <?php the_field('FIELD_NAME'); ?>

    在此处了解更多信息。

    例如,要显示“Purpose”字段,您可以使用

    <?php the_field(‘purpose’); ?>
    <?php the_field(‘purpose’); ?>
    <?php the_field('purpose'); ?>

    您可以在编辑字段组时找到字段名称:

    在哪里可以找到ACF字段名称

    在哪里可以找到ACF字段名称

    因此,将一点HTML标记与PHP结合起来,您可能会得到类似这样的东西来显示所有字段:

  • 什么是PHP Worker及应该如何使用

    什么是PHP Worker及应该如何使用

    在选择托管计划时,选择最符合您的WordPress网站需求的计划非常重要。

    例如,一个每月有50,000名访问者的电子商务网站通常比具有相同流量的简单博客对资源的要求要高得多。

    这仅仅是因为电子商务网站本质上通常是动态的,并且需要更多资源用于PHP和数据库查询。

    这就是PHP worker发挥作用的地方。阅读下文,了解PHP worker是什么以及如何使用它们来加快您网站上请求的处理速度。

    1. 什么是PHP worker?
    2. WordPress如何使用PHP Workers?
    3. PHP Worker与CPU的关系
    4. 如何优化您网站的PHP Worker使用
    5. PHP Workers不足的后果
    6. 估计所需PHP workers的数量

    什么是PHP worker?

    在WordPress的上下文中,PHP worker构建页面、处理计划的后台任务等等。由于PHP worker直接负责生成HTML页面以提供给您网站的访问者,因此他们决定了您的网站在任何给定时间可以同时处理多少个未缓存的请求。

    例如,假设您的WordPress站点配备了两个PHP workers,并且没有设置页面缓存。如果四个请求同时到达您的站点,则其中两个请求将立即得到处理,而另外两个则必须在队列中等待,直到前两个请求完成处理。

    尽管我们实现了服务器级缓存,但对于绕过或丢失缓存的请求,PHP workers变得非常重要,因为他们必须为每个请求工作。

    通常我们会在电子商务和社区论坛网站上看到很多未缓存的请求。因此,这些站点将需要额外的PHP workers来确保处理每个请求而不会出现延迟或超时。

    如果您的网站经过高度优化或没有大量PHP代码(例如复杂的主题或大量WordPress插件),那么处理每个请求应该几乎立即发生。即使有2个PHP workers和4个请求,所有4个请求都将很快得到处理。

    简单地说,PHP workers是运行PHP代码的服务器上的后台进程

    WordPress如何使用PHP Workers?

    在我们讨论如何优化WordPress的PHP worker使用之前,我们必须首先了解WordPress如何使用PHP worker。

    未缓存环境中的典型请求如下所示:

    1. Web服务器(Nginx或Apache)接收来自访问者的请求。
    2. Nginx将请求传递给PHP。
    3. PHP根据需要查询MySQL数据库并使用主题的PHP模板生成HTML页面。
    4. PHP将呈现的HTML页面交还给Web服务器。
    5. 该页面提供给访问者。

    在上面突出显示的过程中,第3步是最耗费时间和资源的(CPU和RAM)。具有最少数据库查询和高效PHP代码的高度优化的站点将相对较快地完成第三步。

    相反,一个编写糟糕的PHP代码并进行大量不必要的数据库查询的站点将花费更多的时间来完成第3步,这意味着请求将占用PHP worker更长的时间。

    PHP Worker与CPU的关系

    当谈到WordPress性能时,PHP worker和可用CPU之间的关系是一个需要考虑的重要因素。

    如果CPU资源不足是您网站的瓶颈,那么增加PHP worker的数量不会提高您网站的性能——它只会让您的网站同时处理更多请求,而每个请求的性能会降低。

    让我解释。

    想象一个带有一根软管的消防栓。只需连接一根软管,消火栓就能提供足够的水压。现在,如果我们将十根软管连接到消火栓上会发生什么?

    有限的水压分布在十根软管上,这意味着每根单独的软管完成工作所需的水压较小。在这个类比中,消火栓是CPU,软管是PHP worker。

    考虑到上述情况,如果您的主机不断建议您增加PHP worker而没有提及CPU,您应该小心。

    让我们暂时回到消防栓的比喻。

    想象一下,您需要用5根软管扑灭10场火灾。连接所有五根软管后,您会意识到消火栓仍在提供足够的水压。

    在这种情况下,连接更多软管是有意义的,因为消火栓的水压不是瓶颈。

    同样,如果您的站点在CPU和RAM开销充足的情况下表现不佳,那么您应该考虑增加PHP worker的数量作为提高性能的一种选择。

    如何优化您网站的PHP Worker使用

    我们已经解释过PHP workers是使用PHP代码生成HTML页面的后台进程。现在,减少和优化PHP workers使用的最明显方法是减少满足对您的站点的请求所需的CPU和PHP资源量。

    这是如何做到的。

    1. 为您的WordPress网站设置缓存

    减少PHP worker使用的第一步是为您的WordPress站点设置缓存层。默认情况下,WordPress是一个动态CMS,可以按需满足每个页面请求。

    对于博客、在线杂志和作品集等许多网站,使用PHP为每个请求动态生成页面是不必要的。

    页面缓存

    您当前正在阅读的博客文章是不需要动态生成的页面的完美示例。与我们的许多其他文章一样,此文章中的内容被设计为静态的,因此无需花费CPU资源来连续生成相同的页面。

    相反,最好让PHP生成一次页面然后缓存它。与使用PHP动态生成页面相比,页面缓存具有许多明显的优势。

    例如,想象一下,如果您网站上的博客文章在发布后的几个小时内传播开来并获得100,000次页面浏览量。如果没有页面缓存,您的PHP worker可能会不堪重负,您的服务器可能会崩溃。

    使用页面缓存,只会动态生成首页视图。其他99,999个请求将从您的页面缓存中提供服务,该缓存使用相对较少的CPU资源。

    有两种方法可以为您的WordPress网站设置页面缓存。

    1. 使用Nginx等Web服务器进行服务器级页面缓存。
    2. 使用WP-Rocket等WordPress插件进行基于插件的页面缓存。

    为了获得最佳性能,我们建议尽可能使用服务器级页面缓存,比如使用Nginx的FastCGI缓存模块以获得超快的性能。

    如果您的主机不提供服务器级页面缓存选项,则下一个最佳选择是使用WordPress缓存插件在应用程序级别实现页面缓存。

    对象缓存

    对于无法有效利用页面缓存的WooCommerce商店、社区论坛和其他WordPress站点,在MySQL数据库前添加像Redis这样的持久对象缓存可以提高性能并减少 PHP worker的负载。

    如果没有持久对象缓存,MySQL数据库查询将为每个请求执行,即使结果与前一个查询相同。

    例如,绕过页面缓存的社区论坛站点将对数据库进行单独的相同查询以获取帖子数据以构建页面。

    对于高流量和大量数据库的站点,这种查询数据库的方法效率低下,因为它使用PHP worker为单独的请求生成相同的查询结果。这就是Redis的用武之地。

    Redis将数据库查询的结果存储在RAM中,这允许PHP抓取已经执行的查询结果。这种对象缓存方法允许PHP worker节省CPU资源并花费更少的时间来完成请求,因为它消除了重复数据库查询的需要。

    2. 优化你的PHP代码

    除了设置页面缓存之外,另一个可以帮助您减少PHP worker使用的策略是优化您的PHP代码。在WordPress的上下文中,“优化PHP代码”可能意味着各种不同的东西,所以让我们更深入地了解一下。

    WordPress最受欢迎和最讨厌的功能之一(取决于你问谁)是它通过插件和代码片段的可扩展性。

    如果您想向您的WordPress网站添加股票行情小部件,可以使用插件。同样,如果您想添加自定义字体,也有一个functions.php代码片段。

    使用附加功能扩展WordPress核心变得如此容易,以至于我们经常过火而没有考虑对网站性能的潜在影响。

    因此,优化PHP代码的第一种方法是执行站点范围的审核,以确定哪些插件和代码片段是真正需要的。

    选择优质插件

    通常情况下,WordPress网站上的插件数量并不像插件的质量那么重要。如果插件在过去六个月内没有更新,我们建议选择另一个符合要求的插件。

    这样做的原因是WordPress正在不断改进。如果一个插件多年没有更新,很可能它的代码没有使用最新的WordPress开发和安全最佳实践。

    相反,如果插件每隔几周不断更新,那么开发人员很可能会认真对待质量,这使其成为您的WordPress网站的不错选择。

    仅在需要时使用插件

    如果您希望在您的网站上执行一项简单的任务,例如添加JavaScript或CSS,那么您并不总是需要插件。相反,您可以将代码直接添加到主题的PHP模板或带有子主题style.css文件中。

    下次当您考虑安装插件时,请先花一些时间看看它是否100%必要。有时,没有办法安装另一个插件,这没关系。其他时候,您可以通过不安装不必要的插件来避免添加额外的代码膨胀。

    选择轻量级主题

    根据我们监控数千个WordPress网站的经验,我们发现主题偶尔会导致PHP性能不佳。为了迎合WordPress作为通用CMS的多功能性,一些开发人员对主题进行编码以适用于各种用例。

    通常,这会导致代码繁重且臃肿的主题无法有效地使用PHP和数据库查询。

    当建立一个WordPress站点,它是重要的选择一个主题,这是最高效的,可定制的-  GeneratePress,OceanWP和Astra有三个例子。

    3. 选择一个注重性能的WordPress主机

    信不信由你,选择正确的WordPress主机会对您网站的性能产生巨大影响。由于PHP worker的效率与CPU和RAM直接相关,因此将您的网站托管在具有最新硬件的现代服务器上可以帮助您优化 PHP 工作者的使用。

    以下是两个示例,说明为什么选择以性能为中心的主机对您的WordPress网站很重要。

    高性能CPU

    PHP使用CPU资源来执行代码。更快的CPU意味着更快的代码执行。

    快速SSD存储

    磁盘I/O速度会对代码执行和数据库查询产生直接影响。如果您的数据库存储在速度较慢的机械磁盘或基于云的SSD上而没有足够的IOPS(每秒输入/输出操作),您的 PHP 工作人员将被迫花费更多时间来满足请求。

    4. 与绩效专家合作(可选)

    如果您不确定如何解决网站上的性能问题,我们建议您与合格的性能专家合作来诊断问题。

    专家可以通过使用New Relic或WordPress插件Query Monitor等高级监控工具来帮助您识别代码中的特定瓶颈。

    通过放大和检查单个PHP进程和数据库查询,可以识别给您网站的PHP worker带来高负荷的特定代码块及其相关功能。

    总结PHP worker优化,请记住以下提示。

    1. CPU和RAM应该与PHP worker一起扩展。如果CPU使用率锁定在100%,添加更多PHP workers不会提高性能。
    2. 使用注重性能的主机托管您的网站可以解决许多性能问题。
    3. 页面缓存和对象缓存可以显着减少PHP工作负载。
    4. 使用优质的WordPress插件和主题可以减少您网站上不必要的代码膨胀量。
    5. 如有必要,请与性能专家合作以识别和解决复杂问题。

    PHP Workers不足的结果

    为了让您的WordPress网站获得快速可靠的性能,确保它有足够的PHP workers非常重要。当PHP worker已经在一个站点上忙碌时,他们开始建立一个队列。

    一旦达到PHP worker的限制,队列就会开始推出较旧的请求,这可能导致504错误或不完整的请求。

    由于缺少PHP worker,我们看到的另一个常见错误是502 bad gateway errors。这些与504错误略有不同,因为错误发生在PHP工作队列中的60秒超时之后。

    这些错误不仅会给访问者带来糟糕的用户体验,还会对您网站的SEO产生负面影响。

    502(错误网关)错误

    502(错误网关)错误

    有许多不同的因素会导致页面加载缓慢或错误。例如,如果未缓存的请求需要来自数据库的大量数据,则生成的查询可能需要20-30秒才能完成。

    在这种情况下,一个PHP worker至少会被占用半分钟。如果您的站点只有两个PHP worker,那么这些长请求中的两个或三个就足以开始导致错误。

    为了解决这个问题,优化MySQL数据库并在CPU尚未达到极限的情况下增加PHP worker可以提高性能。

    估计所需PHP worker的数量

    一般来说,以静态内容为主的站点——文章、静态页面和作品集——不需要很多PHP worker。

    对于具有更多动态功能(如电子商务或论坛)的大型WordPress网站,我们发现4个PHP worker是一个很好的起点。但是,这可能因站点而异,因为每个站点都有自己独特的一组主题、插件、数据库查询和缓存与未缓存的比率。

    在某些情况下,可能需要更多的PHP worker才能获得快速和可靠的性能。

    PHP Worker限制图表

    部分主机服务商会提供PHP worker限制图表可让您查看PHP引擎在其错误日志中报告达到最大分配worker数量的次数。此图表可以帮助您衡量性能优化是否会影响您的PHP worker使用情况。

    顶级缓存绕过

    顶级缓存绕过

    例如,如果您将站点的PHP版本从5.6切换到7.4,您可能会看到PHP worker限制下降,因为PHP 7.4比​​5.6快得多。

    同样,如果您与性能专家合作修复长数据库查询并切换到更轻量级的主题,您可以使用PHP worker限制图表查看优化前后的差异。

    缓存分析图

    您还可以使用服务器提供商的缓存分析报告(如果有)来确定缓存命中、绕过、未命中和过期的数量。在优化您的网站对PHP worker的使用时,此数据可能特别有用。

    使用查询字符串绕过缓存

    默认情况下,带有查询字符串的URLhttps://kinstalife.com/?query=123会绕过页面缓存。在某些情况下,查询字符串可能会导致不必要的PHP和CPU使用率大幅上升。

    例如,如果您访问Facebook的链接,您通常会在URL的末尾看到查询字符串?fbclid=。同样,单击电子邮件通讯中的链接后,您可能会看到UTM跟踪参数。

    带有查询字符串 (?querystring=123) 的URL

    带有查询字符串 (?querystring=123) 的URL

    如果您网站上的帖子病毒式传播,并且不断通过查询字符串访问,您将能够使用缓存分析报告识别特定URL。

    使用该关键信息,您可以强制缓存该特定URL,以减少PHP worker的负载。

    识别资源密集型插件

    在某些情况下,缓存分析图还可用于识别资源密集型插件和进程。

    例如,如果您看到顶部缓存绕过URL指向特定插件目录中的文件,则该插件很可能是导致PHP worker使用率高的原因。

    如果您在缓存绕过列表中看到大量与插件相关的请求,您可以与开发人员合作解决问题或切换到使用较少资源的插件。

    小结

    维护快速WordPress网站的目标是最大限度地提高后端的效率。当通过在worker数量、CPU使用率和代码优化之间找到平衡来正确利用PHP worker时,WordPress可以成为一个非常高性能的CMS。

  • WordPress Cookies和PHP会话——你需要知道的一切

    WordPress Cookies和PHP会话——你需要知道的一切

    Cookies是由一位名叫Lou Montulli的计算机程序员于1994年首次发明的。没有它们,网络将是一个完全不同的地方。无论您是登录WordPress网站的后端还是关闭烦人的弹出窗口,您每天都会使用cookie并与之交互(即使您没有意识到)。

    到目前为止,您可能已经猜到,当我们提到cookie时,我们指的是用于在网站上存储重要访问者信息的cookie ,而不是美味的巧克力片。

    今天我们将深入探讨cookie和PHP会话这个有时令人困惑的话题。具体来说,您需要了解有关WordPress如何使用它们的所有信息,以及在托管您的网站、自定义代码或使用第三方插件时应该注意的一些常见问题(尤其是作为开发人员)。在我们看来,这个话题讨论得还不够。

    什么是Cookie?

    cookie(也称为网络cookie、跟踪cookie、HTTP cookie、浏览器cookie)是用户浏览器(Chrome、Firefox 等)在访问网站时存储的一小段数据。它包含有关浏览活动的信息,通常用于个性化用户体验或用于身份验证和验证目的。会话cookie和持久性cookie是常见的cookie类型。

    Cookie的类型

    通常设置两种不同类型的cookie:会话cookie持久性cookie

    会话Cookie

    会话cookie,也称为临时cookie,是临时的。它们没有附加到期日期,仅存储有关用户在单个会话期间所做操作的信息。会话只是当有人访问网站时分配的随机生成/唯一值。会话cookie临时存储在内存中,并在浏览器关闭或会话结束时自动删除。

    持久性Cookie

    正如您可能已经猜到的那样,持久性cookie是那些包含过期日期的cookie。这些持续时间更长,并存储在磁盘上,直到它们过期或由用户手动清除 。这些有时也称为“跟踪cookie”,因为这些是Google Analytics、AdRoll、Stripe等都使用的cookie类型。

    我们的返利联盟计划是另一个例子。当用户点击附属链接时,会在用户的浏览器中放置一个60天的cookie。这可以确保推荐人获得适当的信用,即使此人已多次关闭并重新打开其浏览器。

    WordPress核心如何使用Cookie

    当我们提到WordPress核心时,我们只是指在安装任何第三方插件或主题之前构成开源项目的文件。它是我们喜欢称之为自然状态的WordPress。

    现在您已经了解了cookie是什么以及不同类型的基础知识,让我们来看看WordPress核心为什么以及如何使用它们来使所有这些魔术在幕后发生。有趣的事实Cookie最初源自“magic cookie”一词。

    WordPress核心将cookie用于两个不同的目的:

    1. 登录Cookie

    登录cookie包含身份验证详细信息,并在用户登录WordPress管理仪表盘时使用。根据WordPress Codex,设置了几个不同的会话cookie:

    • 登录时,WordPress使用wordpress_[hash]cookie存储身份验证详细信息(仅限该/wp-admin/区域)。
    • 登录后,WordPress设置wordpress_logged_in_[hash]cookie。这表明您何时登录以及您是谁。

    当您尝试访问WordPress网站的后端时,会检查上述两个cookie是否存在并且尚未过期。这就是让您神奇地绕过 wp-login.php页面的原因。

    WordPress还设置wp-settings-{time}-[UID]cookie。ID是WordPress用户数据库表中的用户ID。这存储个人仪表板和管理界面设置。

    2.评论Cookie

    默认情况下,当有人对博客文章发表评论时会设置cookie(有效期为347天)。因此,如果他们稍后回来,他们不必重新填写所有信息。存储了以下三个cookie:

    • comment_author_[hash]
    • comment_author_email_[hash]
    • comment_author_url_[hash]

    但是,由于GDPR最近对隐私政策进行了更改,WordPress核心引入了新工具,以确保您让用户选择加入这些正在设置的cookie。此设置(如果尚未设置)可以在WordPress管理仪表盘的“设置 → 讨论”下启用。选择“显示评论cookies复选框,允许设置评论者cookies。”选项。流行的Akismet插件还允许您显示隐私声明。

    评论cookie如何选择加入

    评论cookie如何选择加入

    第三方WordPress插件和主题如何使用Cookie

    就像WordPress将cookie用于某些功能一样,您安装的第三方插件和主题也会设置cookie。他们中的大多数使用存储在wp_options表或他们自己的自定义表中的浏览器cookie和数据库行的组合。这是因为WordPress是无状态的。

    无状态应用程序是一种应用程序,它不会保存在一个会话中生成的客户端数据,以便在与该客户端的下一个会话中使用。每个会话都像第一次一样进行,响应不依赖于前一个会话的数据。–TechTarget

    有了新的隐私法,真正了解设置了哪些cookie以及它们是否为访问者提供了选择加入的方式比以往任何时候都更加重要。提示:并非所有cookie都需要选择加入。

    以下只是cookie用途的众多示例中的几个:

    • 如果您的WordPress网站上有一个弹出框并且访问者将其关闭,这通常会设置一个cookie,以便它不会再次出现。
    • 在您的电子商务网站上添加到购物车的商品。存储cookie以便购物车在您继续浏览网站时保留您的产品。
    • IP地理位置功能可能会存储浏览该站点的访问者的IP地址和纬度/经度坐标。这通常用于向特定区域显示特定内容,甚至可能将用户重定向到不同的子站点。
    • 使用PrettyLinks插件等链接缩短器跟踪点击活动。
    • 如果用户已经订阅,通讯插件可能会为他们设置一个cookie,这可以完全隐藏通讯框。

    基本上,在WordPress网站上的任何操作或选择加入,通常都会涉及在幕后在浏览器中设置cookie。当然,这样做的目的是尝试帮助改善浏览器体验或通过验证提供额外的功能。

    WooCommerce Cookie

    诸如WooCommerce之类的电子商务插件通常会设置自己的附加cookie,以便买家可以轻松地将商品添加到购物车、存储以供以后结帐以及登录和退出帐户。

    为了跟踪购物车数据,WooCommerce设置了以下三个cookie  (cookie中不存储个人信息):

    • woocommerce_cart_hash
    • woocommerce_items_in_cart
    • wp_woocommerce_session_

    前两个cookie包含有关购物车的信息,只是帮助WooCommerce知道购物车数据何时更改。第三个cookiewp_woocommerce_session_包含每个客户的唯一代码,该代码对应于数据库中自定义wp_woocommerce_sessions表中的条目。

    wp_woocommerce_sessions表

    wp_woocommerce_sessions表

    wp_commerce_session_数据之前存储在wp_options表中,但在WooCommerce 2.5中引入了新的会话处理程序时,它们被移动到了自己的自定义表中。这是为了提高性能、可伸缩性和会话管理。否则,您很快就会得到一个必须清理的臃肿的wp_options表

    Easy Digitial Downloads Cookie

    Easy Digital Downloads默认使用WP_Session,它是浏览器cookie和存储在wp_options表中的数据库行的组合。下面是它设置的cookie:

    • edd_items_in_cart

    Cookie和WordPress缓存

    说到WordPress缓存,这就是事情变得棘手的地方。缓存本质上是存储来自一个请求的资源并将这些资源重用于后续请求的过程。基本上,它减少了生成页面视图所需的工作量。虽然这对性能很有好处,但在涉及cookie时会引起问题。

    为什么?因为cookie用于执行特定操作,例如在您浏览WooCommerce网站时保持购物车的填充。但是,如果页面是从缓存中提供的,那么PHP和数据库都不会做任何事情,服务器只会提供页面的静态副本。

    所以,你可以做什么?

    1. 使用JavaScript

    第一个选项是使用JavaScript并动态更新页面上的内容。基本上,您有HTML占位符并使用JavaScript通过API或ajax调用获取信息。

    一个示例是通过使用JavaScript在wp-api上获取文章列表,然后在侧边栏中呈现它们,从而在WordPress侧边栏中加载文章列表。在这种情况下,您可以在不从缓存中清除页面的情况下更新文章列表,因为数据是动态生成的。

    虽然这并不理想,但在性能方面,如果可能的话,缓存总是更好。但是,如果您必须让一些内容保持动态,而页面本身可以保持静态(从缓存中提供),这是一种方法 – 使用JavaScript通过API/ajax动态下拉页面该部分的内容称呼。但是,除非您可以聘请WordPress开发人员来构建自定义JavaScript解决方案或插件扩展,否则此选项通常不实用。

    2. 使用Admin-Ajax调用

    Admin-ajax.php无法缓存,因此您可以使用admin-ajax调用。No Cache AJAX Widgets插件就是一个很好的例子。它进行admin-ajax调用,因此不必担心与服务器级或第三方缓存解决方案发生冲突。

    然而,就像使用JavaScript一样,沿着这条路线走对于普通用户来说通常是不可行的。它还可能导致其他性能问题,例如高admin-ajax使用率 和大量未缓存请求。

    除非您可以使用JavaScript或admin-ajax路由,否则当存在特定cookie时将页面从缓存中排除是最好的方法。这通常是我们推荐的,尤其是那些运行高度动态网站的网站,例如WooCommerce和Easy Digital Downloads。

    在设置缓存的时候,我们应该将某些WooCommerce和Easy Digital Downloads页面(例如购物车、我的帐户和结帐)设置自动从缓存中排除。比如设置服务器级别的规则,以便用户在检测到woocommerce_items_in_cartcookie 或 edd_items_in_cartcookie时自动绕过缓存,以确保顺利和同步的结帐过程。

    当我们检测到有人登录WordPress时,我们还会侦听相关的登录cookie并将缓存设置为绕过。这可以防止后端仪表板意外被缓存。

    默认情况下,我们不会wp_woocommerce_session_从缓存中排除cookie。根据我们的经验,大多数WooCommerce网站都没有任何问题。这还通过增加缓存HIT比率来提高性能,同时使用更少的PHP workers

    但是,由于有许多不同的WordPress主题和插件配置,wp_woocommerce_session_如果需要,我们可以从缓存中排除cookie。只需联系我们的支持团队。结果是,一旦用户将产品添加到他们的购物车中,所有后续请求都不会从缓存中得到处理,从而增加了PHP worker的使用率。

    如果您需要从缓存中排除的自定义页面,请随时与我们的支持团队开票。同样,您必须小心excludes。太多未缓存的页面确实会降低性能。

    如何查看和清除Cookie

    在网站上查看和清除cookie很容易。要查看在特定站点上设置了哪些cookie,请浏览到该站点并单击顶部的小挂锁图标。然后点击“Cookie”。

    正在使用的Cookie

    正在使用的Cookie

    然后深入到该网站的文件夹。在下面的示例中,您可以看到我们设置了一些WooCommerce cookie以及 wordpress_logged_in_[hash]cookie。您还可以查看过期时间以及它是持久cookie还是会话cookie(浏览会话结束时)。

    WordPress cookie

    WordPress cookie

    要删除cookie,只需单击单个cookie并单击“删除”按钮。您也可以在文件夹级别或Chrome DevTools中执行此操作。

    清除cookie还可以帮助您修复304错误

    或者,您可以在浏览器中搜索或清除所有cookie

    GDPR和Cookie

    GDPR是一项新的隐私法,于2018年5月25日生效。它旨在让公民重新控制他们的个人数据。

    下面是一个为帮助遵守新法律所做的一项更改的示例。当您第一次访问我们的网站时,您可能已经看过它,您会在屏幕底部看到“ACCEPT Cookies”提示。这是因为我们现在被法律要求为用户提供一种选择加入和选择退出设置的cookie的方式。在不通知用户数据收集的情况下只运行您想要的任何东西的日子已经一去不复返了。

    GDPR和Cookie

    如果您单击“ACCEPT Cookie”,则会为用户设置所有Cookie。如果您单击“Cookie Setting”,我们现在会提供一种方式来选择加入和退出您想要的任何Cookie。

    Cookie设置

    Cookie设置

    很漂亮吧?我们的cookie解决方案是由我们的开发人员内部构建的,但这里有一些有用的GDPR WordPress插件,可以帮助您完成类似的事情。同样,Cookie只是完全符合 GDPR 的一小部分。

    PHP会话

    PHP会话是标准cookie方法的替代方案。它仍然是一个cookie,但它被称为PHPSESSID,通常存储在Web服务器本身的/tmp/目录中。服务器知道将给定会话与给定请求相关联的方式是它也存储在HTTP cookie中。

    PHPSESSID HTTP cookie

    PHPSESSID HTTP cookie

    这也可以在站点的HTTP标头下看到。

    HTTP标头设置cookie PHPSESSID

    HTTP标头设置cookie PHPSESSID

    PHP session很像一个普通的session,它在用户关闭浏览器时结束。

    PHP会话的问题都归结为性能和缓存问题。存储在浏览器cookie中的信息必须随着每个请求来回反弹,以便服务器知道用户是谁。这意味着对于使用PHPSESSID的站点,主机必须设置PHPSESSID以绕过缓存。然而,结果是PHPSESSID必须设置为100%的时间绕过,因为与 wordpress_logged_in不同的是,PHPSESSID是在每个PHP请求上设置的。

    所以想象一下,wordpress_logged_in必须设置100%的时间才能允许登录功能正常工作。这意味着即使是注销的用户也必须拥有cookie,并且它必须对他们来说是唯一的。想象一下,为了使WordPress登录系统正常工作,这是必需的。在这种情况下,每个页面视图都必须绕过缓存,以便wordpress_logged_in为登录和注销的用户正确设置cookie。

    这就是使用PHPSESSID的问题。因为它是在每一个PHP请求上生成的,所以如果一个站点依赖于PHPSESSID cookie,主机将不得不设置PHPSESSID以100%的时间绕过缓存。否则,PHPSESSID最终会被缓存,并且会破坏依赖它的任何功能。

    我们不建议使用PHP会话,PHP会话还具有其他应考虑的安全隐患。

    如果您在您的网站上看到代码使用session_start,这意味着它使用PHP会话。

    许多插件和主题开发人员已经开始使用浏览器cookie和数据库行的组合(在wp_options表中或他们自己的自定义表中)。如果您需要会话数据,这是更好的方法。

    小结

    希望现在您比以前更了解WordPress cookie和PHP会话的工作原理。Cookies目前是让世界运转的东西,对于WordPress网站上发生的几乎所有事情都很重要。从让我们保持登录状态,到确保顺畅的购物车体验,甚至确保弹出窗口保持关闭状态。

  • 学习如何使用Sublime Text:快速概述

    学习如何使用Sublime Text:快速概述

    Sublime Text是世界上最受欢迎的文本/代码编辑器之一。它充满了强大的功能,例如多行编辑、为数十种编程语言构建系统、正则表达式查找和替换、用于开发插件的Python API等等。

    最重要的是,它是跨平台的(Mac、Windows 和 Linux),并且作为“共享软件”分发,这意味着它可以通过偶尔的购买弹出窗口免费使用。

    在本文中,您将学习如何使用Sublime Text来满足您所有的文本和代码编辑需求!

    1. 什么是Sublime Text?
    2. 如何下载Sublime Text
    3. Sublime Text 101 – 基础
    4. 编辑的Sublime Text
    5. 面向开发人员的Sublime Text
    6. 小结

    什么是Sublime Text?

    Sublime Text将自己标榜为“用于代码、标记和散文的复杂文本编辑器”。Sublime Text最初于十多年前于2008年1月发布,现在是第四个主要版本,支持Mac、Windows和Linux。

    Sublime Text的核心类似于一把瑞士军刀,可以应用于任何涉及文本操作的用例或问题。

    乍一看,Sublime Text似乎是一个只对开发人员有用的文本编辑器。虽然它对于开发人员来说是一个很棒的工具,但对于作家和博主来说,它也是一个强大的应用程序。

    在深入探讨Sublime Text的所有特性和功能之前,让我们快速浏览一些Sublime Text可能有用的场景。

    正则表达式查找和替换

    Regex是正则表达式的缩写,是一种用于指定搜索模式的语法。正则表达式通常用于定位相似(但不同)的文本字符串以进行文本编辑。

    例如,如果您想从文档中删除所有HTML<h1>标记,则搜索每个要删除的标记(例如、<p><span>等)将非常耗时。

    相反,您可以使用单个正则表达式模式执行搜索。在这种情况下,正则表达式模式[a-zA-Z0-9]可用于查找文档中的所有HTML标记。

    在Sublime Text中查找和替换文本

    在Sublime Text中查找和替换文本

    在Sublime Text中执行正则表达式查找和替换非常简单。在菜单栏中,单击Find > Find in Files中查找。接下来,在查找和替换菜单中启用正则表达式模式,在“Find”字段中指定正则表达式模式,选择,然后 根据您需要完成的任务<current file>单击FindReplace

    快速运行代码

    与传统的文本编辑器不同,Sublime Text允许您直接在应用程序中运行代码。这对于小型 Bash或Python脚本等简单项目特别有用。

    例如,如果你正在编写一个简单的Python脚本来从URL列表中抓取数据,那么设置一个单独的终端来调试代码不如直接在Sublime Text中运行脚本方便。

    在Sublime Text中运行代码

    在Sublime Text中运行代码

    要在Sublime Text中运行代码,请转到Tools > Build System,然后为您的代码选择语言(Sublime支持各种语言,如Python、Ruby、Bash等)。接下来, 在Mac上按Cmd+B或在Windows上按Ctrl+B运行您的代码。

    多行编辑

    在各种情况下,您可能需要同时编辑文本文档中的多行。想象一下,您有一个domain列表,并且您需要在每一行前面添加http://。当然,您可以逐行进行,但这可能需要很长时间。

    Sublime Text中的多行编辑

    Sublime Text中的多行编辑

    使用Sublime Text,您可以选择所有要编辑的行,按Shift+Cmd+L,然后同时编辑每一行!

    如您所见,虽然Sublime Text内置了面向开发人员的高级功能,但还有各种强大的工具,如正则表达式支持和多行编辑,无疑对非开发人员也很有用。

    现在您已经大致了解了Sublime Text可以做什么,让我们更深入地了解并了解有关该应用程序的更多信息。

    文本片段

    Sublime Text拥有的最强大的功能(尤其是对于编码人员)可能是文本片段。

    我们都知道编写代码有时会很麻烦。Sublime Text Snippets提供了一种快速简便的方法来插入将在任何项目中重复出现的文本块。

    使这些文本片段变得更好的是它们易于理解且编写起来非常简单。该工具可帮助开发人员在开发过程中节省时间并消除许多错误

    键入“trigger”词并按tab按钮开始一个片段。

    如何下载Sublime Text

    Sublime Text可从Sublime Text官方网站免费下载。话虽如此,Sublime Text在技术上并不是“免费软件”。相反,Sublime Text是一个“共享软件”应用程序,这意味着它可以免费下载,但一段时间后可能会有一些功能限制。

    对于Sublime Text,该应用程序将无限期地继续运行,但您偶尔会看到一个弹出窗口,其中包含有关如何购买该应用程序的详细信息。

    如果您有兴趣购买Sublime Text,您可以以99美元的价格获得个人许可证,或以65美元/座位/年的价格获得商业许可证。虽然付费许可证不会解锁任何额外的核心功能,但您确实可以获得以下特权:

    • 没有购买提醒弹窗
    • 访问Sublime Text的开发版本
    • 应用内更新通知

    Sublime Text 101 – 基础

    由于Sublime Text在功能方面是如此拥挤的应用程序,因此我们将讨论两个用户子集(作家和开发人员)的基本功能和工作流程。但首先,让我们在分支到用户特定项目之前建立对Sublime Text的核心理解。

    如何自定义Sublime Text设置

    与其他具有图形设置菜单的应用程序不同,Sublime Text设置完全基于文本。要查看您的Sublime Text设置,请转到Sublime Text > Preferences,然后单击Settings。然后,您应该会看到这样的文档:

    Sublime Text设置

    Sublime Text设置

    这个设置文档起初可能看起来令人生畏(特别是如果您不习惯使用面向开发人员的工具),但现在我们将帮助您理解所有内容!

    Sublime Text的设置以JSON格式存储。JSON是一种用于存储键值信息的行业标准格式,因此您之前可能已经在其他地方看到它使用过。JSON将信息存储到键值数组中,如下所示:

    {
    “color”: “blue”,
    “type”: “sedan”,
    “seats”: 5,
    }
    {
    “color”: “blue”,
    “type”: “sedan”,
    “seats”: 5,
    }
    {
    “color”: “blue”,
    “type”: “sedan”,
    “seats”: 5,
    }

    上面的数组可以用来描述汽车的属性——在本例中,是一辆有五个座位的蓝色轿车。类似地,JSON数组可以为应用程序指定设置,这正是Sublime Text所做的。

    让我们回到Sublime Text设置文件。如您在上面的屏幕截图中所见,设置文件显示为两个JSON数组。左边的数组包含Sublime Text的默认设置,而右边的数组包含自定义用户设置。

    通常,您永远不应该直接更改默认设置。相反,您可以使用自定义设置覆盖默认设置——这允许您在出现问题时恢复为默认设置。

    那么,您将如何更改一些默认设置?假设您要进行以下更改:

    “font_size”: 10 to “font_size”: 20
    “font_size”: 10 to “font_size”: 20
    "font_size": 10 to "font_size": 20
    “margin”: 4 to “margin”: 6
    “margin”: 4 to “margin”: 6
    "margin": 4 to "margin": 6
    “line_numbers”: true to “line_numbers”: false
    “line_numbers”: true to “line_numbers”: false
    "line_numbers": true to "line_numbers": false

    要进行这些更改,请将每个元素以有效的JSON格式添加到自定义用户设置文档,如下所示(如果您有现有的自定义设置,请添加每个设置而不创建新数组):

    {
    “font_size”: 20,
    “margin”: 6,
    “line_numbers”: false,
    }
    {
    “font_size”: 20,
    “margin”: 6,
    “line_numbers”: false,
    }
    {
    "font_size": 20,
    "margin": 6,
    "line_numbers": false,
    }

    如果您不确定设置的格式是否正确,可以使用JSONLint等在线工具来验证您的JSON数组。指定设置后,保存文件,一切就绪!

    Sublime Text中的项目和文件管理

    在处理项目时,无论是一系列博客文章还是Web应用程序的源代码,您的文件通常都组织在项目文件夹中。Sublime Text考虑并提供了一个用于管理文件和目录的功能图形界面。

    假设您有一个名为“my-sublime-text-project”的文件夹,如下面的屏幕截图所示。如果将此文件夹拖放到Sublime Text中,您将能够直接在Sublime Text中创建新文件和文件夹。

    Sublime Text项目

    Sublime Text项目

    如您所见,“my-sublime-text-project”文件夹可以在“Folders”下的Sublime Text窗口的左侧看到。

    Sublime Text中的文件和文件夹管理

    Sublime Text中的文件和文件夹管理

    右键单击项目文件夹会弹出一个子菜单,可让您创建新文件、重命名文件、创建和删除文件夹等。Sublime Text的内置文件管理功能无需使用 Finder 等外部工具来执行基本文件管理任务。

    创建文件和文件夹

    创建文件和文件夹

    在Sublime Text中,项目是指导入的文件和文件夹的集合(例如我们之前导入的“my-sublime-text-project”文件夹。如果您单击菜单栏中的Project,您会看到有诸如“Open Project”、“Switch Project”和“Save Project As”。但是,没有创建新项目的选项。

    这是因为当您创建新文件并导入文件夹时,会隐式创建Sublime Text项目。在上面的例子中,我们可以点击 菜单栏中的Project,然后点击Save Project As来保存项目。

    面向编辑作者的Sublime Text

    突出文件管​​理

    突出文件管​​理和项目管理功能如何组织内容。例如,作者可以为书中的每一章创建一个文件,而博主可以为不同类别的帖子创建不同的文件夹。

    强大的搜索引擎和替换

    Sublime Text具有强大的搜索和替换实现。它不仅支持正则表达式,还可以指定要搜索的文件和文件夹。例如,如果作者想要更改故事中人物的名字,他们可以指定搜索文件夹并在文件夹的所有内容上运行搜索。

    非常可扩展

    Sublime Text是可扩展的,它的MarkdownEditing包对于使用Markdown语法的作者来说是一个很好的工具。

    面向开发人员的Sublime Text

    丰富的插件生态系统

    Sublime Text有一个丰富的插件生态系统,可以通过内置的包管理器访问。开发人员可以安装插件来改进他们的工作流程。例如,Formatter插件包括HTML、CSS、JS、Python和其他语言的格式化规则。

    该插件可以配置为自动格式化源代码文件,这有助于在格式化方面保持代码整洁和标准化。

    还有几个必须考虑的插件包括Package Control(安装插件所需)和Emmet

    多行编辑

    Sublime Text提供多行编辑,可以通过在Mac上按住Command(在Windows上为Ctrl)并使用鼠标选择多行来访问。选择多行后,可以一次编辑所有行,甚至支持多行复制/粘贴。

    拆分窗口支持

    Sublime Text支持拆分窗口以同时查看和编辑多个文件。在处理项目时引用不同的文件时,这可能很有用。

    支持构建系统

    Sublime Text附带对构建系统的支持。构建系统允许您直接在Sublime Text编辑器的终端中运行代码,而无需外部终端。

    例如,您可以创建一个构建系统来运行Python程序,并创建另一个构建系统来运行Go程序。在开发应用程序时,您可以选择构建系统并使用快捷方式直接从Sublime Text运行程序。

    更多主题可定制性

    您可以通过下载Sublime Text主题进一步增强您的编码体验。它们中的大多数已经捆绑了各种配色方案。

    Sublime Text的主题和配色方案之间的区别在于,主题装饰了核心UI元素,如侧窗格、选项卡、菜单等,而配色方案负责语法高亮。

    一些最好的主题包括:

    小结

    Sublime Text是当今最流行的代码编辑器之一。理所当然地,它为作家和开发人员提供了大量的工具可供使用。

    没有什么比找到完美的代码编辑器更令人满意的了。如果您从未尝试过Sublime Text,那么值得一看。

  • 构建自定义古腾堡区块:权威WordPress区块开发教程

    构建自定义古腾堡区块:权威WordPress区块开发教程

    许多人抱怨开始构建古腾堡区块和应用程序的障碍。学习曲线陡峭,主要是由于开发环境的安装和配置困难。此外,扎实的JavaScript、Node.js、React和Redux知识是这个相当复杂的秘诀的必备要素。

    官方的WordPress区块编辑器手册为开发人员提供了大量信息,但您可能会发现自己迷失在这些细节的海洋中。

    值得一提的是,Gutenberg项目的首席架构师Matías Ventura在接受WP Tavern采访时所报告的内容:

    虽然有些人可以快速学习它,但这对人们来说仍然是一个很大的障碍。我认为这有几个层次;文档在组织和演示方面可能要好一个数量级。我希望我们可以在那里做更多的事情。

    考虑到这一点,我们决定提供一个分步教程,旨在帮助我们的读者开始使用Gutenberg区块开发。

    1. 古腾堡区块开发先决条件
    2. 什么是古腾堡区块?
    3. 设置您的WordPress开发环境
    4. 初学者区块脚手架的演练
    5. 项目:建造你的第一个古腾堡区块

    古腾堡区块开发先决条件

    对于本教程,唯一需要的技能是对WordPress插件开发有很好的了解,并且至少对HTML、CSS、JavaScript和React有基本的了解。

    这会是一个雄心勃勃的项目吗?你打赌它会的!

    在完整性和简单性之间找到正确的折衷方案或决定包含哪些主题和省略哪些主题并不容易。

    希望中高级读者能原谅我们没有深入研究某些概念,例如React状态Redux存储高阶组件等。这些主题需要额外的空间和注意力,并且可能对于开始区块开发来说太高级了(除非您是 React 开发人员)。

    出于同样的原因,我们不会涵盖与Gutenberg区块开发相关的一些更高级的主题,例如动态区块元框

    有了本文结尾您将获得的知识,您将能够立即开始享受乐趣并提高工作效率。

    一旦您开始构建区块,您将准备好进一步提高您的技能并自行构建更高级的古腾堡区块。

    什么是古腾堡区块?

    自2018年12月首次发布以来,区块编辑器在各个方面都得到了极大的改进:更强大的API、更高级的用户界面、改进的可用性、大量新区块、全站点编辑的首次实现等等.

    简而言之,即使古腾堡仍在大力开发中,它也已经走过了漫长的道路——如今,区块编辑器已成为可靠的功能性页面和网站构建器的成熟候选者。

    从开发人员的角度来看,Gutenberg是一个基于React的单页应用程序(SPA),它允许WordPress用户在WordPress中创建、编辑和删除内容。但是,这不应该让您想到传统内容编辑器的增强版。

    我们想明确这一点:

    Gutenberg不是常规的WYSIWYG编辑器。相反,它重新定义了WordPress中的整个编辑体验。

    在古腾堡,内容被划分为区块,这些区块是用户可以用来创建文章和页面或整个网站的“砖块”。

    但从技术上讲,什么是区块?

    我们喜欢WordPress的定义

    “区块”是用于描述标记单元的抽象术语,这些标记单元组合在一起形成网页的内容或布局。这个想法将我们今天在WordPress中实现的概念与短代码、自定义HTML和嵌入发现结合到一个一致的API和用户体验中。

    标题、段落、列、图像、画廊以及构成编辑器界面的所有元素,从侧边栏面板到区块工具栏控件,都是React组件。

    那么,什么是React组件?W3Schools提供以下定义

    组件是独立且可重用的代码。它们的用途与JavaScript函数相同,但独立工作并通过render()函数返回HTML。

    在WordPress 5.8中使用Gutenberg区块

    在WordPress 5.8中使用Gutenberg区块

    虽然Gutenberg提供的编辑体验与经典的WordPress编辑器相比是全新的,但WordPress将您的内容片段存储在数据库中的方式根本没有改变。这是因为Gutenberg是一个在WordPress中运行的应用程序,但不会改变CMS的核心工作方式。

    使用Gutenberg创建的文章(包括文章、页面和自定义文章类型)仍存储在wp_posts表中,与经典编辑器完全相同。

    但是在使用Gutenberg创建的文章中,您会在表格中找到更多信息,这些信息代表了通过Classic Editor与Gutenberg创建的文章之间的根本区别。

    这些信息看起来像HTML注释,它们有一个特定的功能:分隔区块:

    代码编辑器视图中的博客文章

    代码编辑器视图中的博客文章。

    区块分隔符告诉WordPress要在屏幕上呈现什么区块。它们还为JSON对象中的区块属性提供值。这些道具决定了区块应该在屏幕上呈现的方式:

    wp_posts存储在表中的博客文章

    wp_posts存储在表中的博客文章

    设置您的WordPress开发环境

    设置现代JavaScript开发环境需要扎实的高级技术知识,例如WebpackReactJSXBabelESLint等。

    被吓倒了?不要!WordPress社区已经通过提供强大的工具来帮助您避免混乱的手动配置过程。

    为简单起见,我们不会在本文中介绍转译(不过,我们建议您在了解区块开发的基础知识后熟悉一下)。相反,我们将介绍两种替代工具,您可以使用它们在几分钟内快速轻松地设置现代JavaScript开发环境。您可以选择对您的项目最方便的一个。

    设置JavaScript开发环境以构建Gutenberg区块是一个三步过程:

    1. 安装Node.js和npm
    2. 设置开发环境
    3. 设置区块插件

    让我们开始吧。

    1. 安装Node.js和npm

    在安装您的开发环境并注册您的第一个区块之前,您需要安装Node.js和Node包管理器 (npm)。

    注:Node.js是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。npm,通常被称为Node包管理器,被认为是“世界上最大的软件注册表”。

    您可以通过几种不同的方式安装Node.js和npm。但首先,您可能需要检查该软件是否已安装在您的计算机上。

    为此,请启动终端并运行以下命令:

    node -v
    node -v
    node -v

    如果结果为command not found,则您的计算机上未安装Node.js,您可以继续安装。

    对于本文,我们选择了最简单的安装选项,即Node Installer。您需要做的就是下载与您的操作系统相对应的版本并启动安装向导:

    Node.js下载页面

    Node.js下载页面

    安装Node.js后,再次在终端中运行node -v命令。您还可以运行npm -v命令以确认您有可用的npm包。

    您现在配备了以下工具:

    • npxNode.js包运行器(请参阅文档)。这允许您运行npm命令而无需先安装它。
    • npmNode.js包管理器(请参阅文档)。这用于安装依赖项和运行脚本。

    下一步是安装开发环境。

    2. 设置你的开发环境

    在本地计算机上安装最新版本的Node.js和npm后,您将需要一个WordPress开发环境。

    您可以使用本地开发环境,也可以使用官方WordPress工具。让我们来看看这两种选择。

    选项 1:本地开发环境

    您可以选择不同的本地开发工具,例如MAMPXAMPP

    在本地环境中创建一个新的WordPress网站

    在本地环境中创建一个新的WordPress网站。

    选项 2:wp-env

    您也可以选择官方wp-env工具,它提供了一个本地WordPress开发环境,您可以直接从命令行启动。Noah Alen将其定义如下

    本地WordPress环境现在就像运行单个命令一样简单。wp-env是用于本地WordPress环境的零配置工具。它提供有关选项的决策,以便用户可以快速启动WordPress而不会浪费时间。事实上,我们的目标是让所有人都能轻松访问这些环境——无论您是开发人员、设计师、经理还是其他任何人。

    如果您决定试一试,安装wp-env所需的工作量很小。只需按照以下步骤操作:

    第 1 步:确认Docker和Node.js安装

    为了满足技术要求,您首先需要在您的计算机上安装Docker和Node.js。那是因为wp-env创建了一个运行WordPress网站的Docker实例。对代码所做的任何更改都会立即反映在WordPress实例中。

    第 2 步:从命令行安装@wordpress/env

    在您的计算机上运行Docker和Node.js,您可以继续安装WordPress开发环境

    您可以全局或本地安装wp-env。要在全局范围内执行此操作,您需要从插件目录中运行以下命令(更多信息请参见下面的“重要”通知框):

    npm install -g @wordpress/env
    npm install -g @wordpress/env
    npm install -g @wordpress/env

    让我们分解一下:

    提示:默认情况下,在Mac或Linux上,节点包安装/usr/local/lib/node_modules中。

    如果当前用户对该目录没有写权限,则会发出EACCES错误。了解有关在全局安装包时解决EACCES权限错误的更多信息。

    要确认wp-env已成功安装,请运行以下命令:

    wp-env –version
    wp-env –version
    wp-env --version

    您应该会看到当前wp-env版本,这意味着您现在可以使用插件文件夹中的以下命令启动环境:

    wp-env start
    wp-env start
    wp-env start

    您可以使用以下地址访问WordPress仪表盘:

    • http://localhost:8888/wp-admin/

    默认凭据如下:

    • 用户名:admin
    • 密码:password

    设置你的区块插件

    现在您需要一个入门区块插件来构建。但是,无需手动创建包含所有必要文件和文件夹的开发区块插件,您只需运行一个开发工具,即可提供开始区块开发所需的所有文件和配置。

    同样,您有几个选项可供选择。让我们来看看每一个。

    选项 1:使用@wordpress/create-block设置区块插件

    @wordpress/create-block是用于创建Gutenberg区块的官方零配置工具:

    创建区块是一种官方支持的创建区块的方法,用于为WordPress插件注册区块。它提供了一个没有配置的现代构建设置。它生成PHP、JS、CSS代码以及启动项目所需的所有其他内容。

    它很大程度上受到create-react-app的启发。向@gaearon、整个Facebook团队和React社区致敬。

    本地环境启动并运行后,您可以通过简单地运行命令npx @wordpress/create-block 来设置起始区块,它将提供创建插件脚手架和注册新区块所需的所有文件和文件夹。

    让我们运行一个测试,看看它是如何工作的。

    从命令行工具导航到/wp-content/plugins/目录并运行以下命令:

    npx @wordpress/create-block my-first-block
    npx @wordpress/create-block my-first-block
    npx @wordpress/create-block my-first-block

    当要求确认时,输入y继续:

    使用@wordpress/create-block创建一个区块

    使用@wordpress/create-block创建一个区块

    该过程需要一些时间。完成后,您应该得到以下响应:

    区块插件已创建

    区块插件已创建

    现在启动您的WordPress开发环境并转到WordPress仪表盘中的插件屏幕。一个名为“My First Block”的新插件应该已添加到您的插件列表中:

    区块插件已成功安装

    区块插件已成功安装

    注:如果您使用wp-env工具并从包含插件的目录运行wp-env start,它将自动挂载并激活该插件。如果您从任何其他目录运行wp-env start,将创建一个通用的WordPress环境(另请参阅WordPress开发站点)。

    如果需要,激活插件,创建一个新的博客文章,向下滚动区块插入器到小工具部分,然后选择你的新区块:

    使用@wordpress/create-block创建的示例区块

    使用@wordpress/create-block创建的示例区块

    现在返回终端并将当前目录更改为my-first-block

    cd my-first-block
    cd my-first-block
    cd my-first-block

    然后运行以下命令:

    npm start
    npm start
    npm start

    这使您能够在开发模式下运行插件。要创建生产代码,您应该使用以下命令:

    npm run build
    npm run build
    npm run build

    选项 2:使用create-guten-block设置区块插件

    create-guten-block是用于构建古腾堡区块的第三方开发工具:

    create-guten-block零配置开发工具包 (#0CJS) 可在几分钟内开发WordPress Gutenberg区块,无需配置React、webpack、ES6/7/8/Next、ESLint、Babel等。

    就像官方工具create-block一样,create-guten-block基于create-react-app,可以帮助您轻松生成您的第一个区块插件。

    该工具包提供了创建现代WordPress插件所需的一切,包括以下内容

    • React、JSX和ES6语法支持。
    • 幕后的webpack开发/生产构建过程。
    • ES6之外的语言附加功能,例如对象扩展运算符。
    • 自动前缀CSS,因此您不需要 -webkit或其他前缀。
    • 一个构建脚本,用于将JS、CSS和图像与源映射捆绑在一起进行生产。
    • 使用单个依赖项cgb-scripts对上述工具进行无忧更新。

    请注意以下警告:

    权衡是这些工具已预先配置为以特定方式工作。如果您的项目需要更多自定义,您可以“eject” 并自定义它,但是您需要维护此配置。

    一旦你手头有一个本地WordPress网站,启动你的命令行工具,导航到你安装的/wp-content/plugins文件夹,然后运行以下命令:

    npx create-guten-block my-first-block
    npx create-guten-block my-first-block
    npx create-guten-block my-first-block

    在创建项目结构并下载依赖项时,您必须等待一两分钟:

    使用create-guten-block创建Gutenberg区块

    使用create-guten-block创建Gutenberg区块

    该过程完成后,您应该会看到以下屏幕:

    使用create-guten-block成功创建Gutenberg区块

    使用create-guten-block成功创建Gutenberg区块

    下一张图片显示了在Visual Studio Code中运行终端的项目结构:

    Visual Studio Code中的区块插件

    Visual Studio Code中的区块插件

    现在回到您的WordPress仪表盘。插件屏幕中应该会列出一个新项目——它是my-first-block插件:

    使用create-guten-block创建的新插件的插件屏幕

    使用create-guten-block创建的新插件的插件屏幕

    激活插件并返回终端。将当前目录更改为my-first-block,然后运行npm start

    cd my-first-block
    npm start
    cd my-first-block
    npm start
    cd my-first-block
    npm start

    您应该得到以下响应:

    npm启动

  • 什么是TTL及应如何选择正确的值

    什么是TTL及应如何选择正确的值

    当用户访问您的网站时,您希望他们收到最新信息。

    但是,您还需要快速加载您的网站。否则,您将面临跳出的风险,即用户放弃并迅速离开您的网站。

    幸运的是,您可以通过调整网站的生存时间 (TTL) 来找到平衡点。您可以使用它来改善网站的加载时间并保持信息最新。

    在本指南中,我们将了解TTL是什么以及它是如何工作的。我们还将检查它的用途以及如何为您的站点选择正确的TTL值。

    1. 什么是TTL?
    2. TTL是如何工作的?
    3. TTL有什么用?
    4. 您应该如何选择TTL?
    5. 如何更改TTL?

    什么是TTL?

    TTL——正如我们已经提到的,它代表“生存时间”——是一种设置,它确定在路由器清除数据之前,您的数据(以数据包形式)在网络中有效和可用的时间。

    我们也可以将此时间称为“跳数”,即它在不同路由器之间反弹的次数。

    一旦TTL过期,路由器将需要再次检索信息及其更新。

    内容交付网络 (CDN)也使用TTL来缓存您的数据。CDN是托管静态文件的全球服务器网络,因此您网站的访问者将收到最接近他们的信息。

    这决定了CDN在检索更新信息之前将保留您的数据多长时间。

    我们将在本文后面更深入地了解它的功能。现在,让我们检查一下域名系统 (DNS) 服务器、ping和Internet协议 (IP) 标头的上下文中的TTL是什么。TTL对这些应用程序中的每一个都有不同的作用,因此了解它们的区别很重要。

    DNS中的TTL是什么?

    DNS服务器充当Web服务器和域名之间的桥梁。当您输入“www.wbolt.com”之类的域名时,服务器无法解释此信息。他们以称为IP地址的数字读取数据。

    所以DNS方便了域名和IP地址的转换,使用户能够访问网站。

    充当网桥的DNS服务器

    充当网桥的DNS服务器

    要了解DNS服务器和TTL的关系,我们首先需要看一下缓存。在这种情况下,缓存是将您网站的域名转换为其IP地址的存储。

    每次用户想要访问您的网站时,都需要进行这种转换。如果转换存储在缓存中,则连接可以更快地发生,因为存在DNS记录。事实上,服务器几乎可以瞬间拉起记录。

    在这种情况下,TTL确定DNS服务器在再次请求信息之前将保留此DNS记录的时间。它是控制DNS传播的因素之一,它决定了DNS更新所需的时间。

    Ping中的TTL是什么?

    Ping是衡量您的连接反应时间的指标。例如,它衡量您发出的请求需要多长时间才能返回。这种ping测量是测量网络延迟的方法之一,网络延迟是连接响应和延迟的通用术语。

    当您运行ping测试时,报告可能包含TTL。此TTL值可以为您提供有关完成连接所需时间的更多信息。

    运行ping测试

    运行ping测试

    在此测试期间,ping记录来自四个单独数据包的结果。它显示花费的时间量和TTL,显示这些数据包花费了多少“跳”。

    但是,此报告不会向您显示其他网站服务器设置的TTL。因此,您需要知道该值才能计算真正的TTL。

    什么是TTL值?

    当您为您的网站设置TTL值时,您选择一个以秒为单位的值。例如,600的TTL值相当于600秒或10分钟。

    可用的最小TTL通常为30,相当于30秒。理论上,您可以将TTL设置为低至一秒。但是,大多数站点使用3600(一小时)的默认TTL。您可以应用的最大TTL为86,400(24 小时)。

    从技术上讲,您可以设置最小和最大参数之间的任何TTL值。在本文的后面部分,我们将讨论如何为您的网站选择实现价值的最佳时间。

    什么IPv6字段类似于IPv4数据包中的TTL字段?

    IPv6和IPv4 是不同类型的IP。它们都通过一系列规则(或协议)路由数据包。这些IP包含使数据能够到达其预期目的地的信息。

    IP标头包含数据包开头的信息。例如,它们具有来自源和目标的IP地址的信息以及其他详细信息。

    IPv4是原始IP,自1984年以来一直可用。它有一个由数字和句点组成的32位地址。IPv6是较新的IP,它使用包含字母和数字的128位地址格式。

    当您使用IPv4标头时,它使用TTL字段,但IPv6不使用。对于IPv6标头,它有一个名为Hop Limit的字段,其作用类似于TTL。在这里您可以看到两个IP标头的比较。

    IPv6跃点限制

    IPv6跃点限制

    跳数限制确定数据包在路由器丢弃之前将移动多少“跳”。

    TTL是如何工作的?

    现在,让我们更深入地了解TTL的实际工作原理。我们已经知道,它的值决定了数据包在路由器拒绝之前将存在多长时间(或多少跳)。但是,此功能的方式比您想象的要复杂一些。

    当您为数据包数据分配TTL时,它会将此数字作为数值(以秒为单位)进行携带。每次数据包到达路由器时,路由器都会从TTL值中取出一个数字,并将其传递到链中的下一步。

    如果数据包被传递太多次,它的数值就会变为零。如果发生这种情况,它将无法建立整个连接,路由器将丢弃它。

    然后,您将收到Internet控制消息协议 (ICMP),这是一种错误消息。例如,如果您的数据的TTL为300,则它最多只能通过不同的路由器300次。

    TTL有什么用?

    到目前为止,我们已经看到TTL有各种应用。如果您有一个网站,您主要关心的可能是您的网站加载速度。如果您的内容加载速度太慢,您可能会失去访问者和潜在客户。此外,缓慢加载的网站不利于搜索引擎优化 (SEO)

    因此,让我们在缓存的上下文中分析TTL。您的网站包含一系列页面、代码、图像和其他可能需要很长时间才能加载的内容。如果所有这些内容都必须为每个用户重新加载,它会显着降低您网站的速度。

    您可以使用更长的TTL使您的缓存站点在更新之前存在更长时间。因此,您的网站加载速度会更快,并且对服务器的压力也会更小。

    然而,在某些情况下,短TTL也可能是有益的。例如,不断更新的网站可以从更短的TTL中受益。像Xe这样的网站使用实时货币转换,因此较长的TTL可能会使其数据冗余。

    Tye Xe网站

    Tye Xe网站

    此外,短TTL可以保护您的站点免受分布式拒绝服务 (DDoS) 攻击。当一个实体在短时间内用来自不同位置的数千个请求淹没您的网站时,就会发生这些攻击。较短的TTL有助于保护您的站点,因为频繁的DNS更新可用于阻止控件。

    您可能还想在计划编辑您的站点之前更改您的DNS TTL,例如,如果您要添加新网站或更新服务器的IP地址。旧信息将在TTL期间缓存,因此您可能需要根据您的时间线减少它。

    您应该如何选择TTL?

    为您的需求确定合适的TTL可能具有挑战性。幸运的是,您可以遵循一些一般准则来查看最适合您网站的内容。

    我们建议大多数网站的TTL为1-24小时 。请记住,TTL值以秒为单位,因此相当于3,600到86,400秒。

    此TTL值可以减少加载时间,从而改善访问者的用户体验并降低跳出率。一般规则越长越好,但请记住相应地安排任何网站维护。

    如果您拥有一个注册网站,您可能希望选择大约一小时(3,600 秒)的TTL。这些站点是可能以“.org”或“.com”结尾的高级域。例如,Verisign是一个注册网站:

    Verisign注册主页

    Verisign注册主页

    我们建议在对您的站点进行任何操作更改之前将您的TTL更改为大约300秒(五分钟),尤其是在它们会影响DNS的情况下。否则,更新可能无法及时生效。

    对于易受DDoS攻击的站点,我们还建议300秒的TTL。如果您所在领域的竞争激烈,竞争对手的网站可能会试图通过其中一种攻击使您失去行动。此外,有争议或举报的网站也是DDoS的潜在目标。

    最后,我们推荐300秒的短TTL用于基于DNS的负载平衡。这是当多个服务器通过为服务器请求提供各种IP地址来共享流量时。通过这样做,系统减少了单个服务器的压力。

    如何更改TTL?

    希望到现在为止,您对您的网站所需的TTL值有一个很好的了解。现在我们可以看到如何在DNSPod网站上更改此值。

    您可以使用DNSPod轻松更改DNS记录的TTL。DNSPod仪表盘侧栏中的DNS解析-我的域名菜单提供此可自定义设置。

    在DNSPod仪表盘中查找DNS解析

    在DNSPod仪表盘中查找DNS解析

    导航到我的域名并添加您的域。单击所选域以添加和查看DNS记录。从那里,您可以单击添加NS记录>TTL。

    在DNSPod中添加DNS记录 > TTL

    从下拉菜单中,您可以选择一小时到四个星期的TTL。一小时是默认值。我们不建议超过24小时,除非您的DNS很少发生更改和更新。

    小结

    TTL是一项基本设置,可让您控制服务器存储站点信息的时间。您可以使您的TTL更长或更短,以减少页面加载时间、保持数据最新并避免DDoS攻击。

    您可以将TTL设置为低至30秒或高达24小时。但是,对于大多数一般站点,1到24小时之间的TTL提供了极好的平衡。通过选择此值,您可以保持站点快速加载并仍显示当前数据。

  • 如何提高WordPress中的PHP内存限制

    如何提高WordPress中的PHP内存限制

    你的插件不工作。您的网站未加载。您不断看到“Allowed memory size exhausted”错误,并且一直说增加您的PHP内存限制。那是什么,你如何解决它?

    PHP内存限制的存在是为了阻止占用RAM的资源使您的网站崩溃。但有时它也可能导致问题,例如当您安装需要一点额外功能的插件并最终切断对您网站的访问时。

    当您因内存不足而遇到白屏死机时,您需要立即修复此问题。让我们来看看PHP内存限制是什么,以及如果达到资源上限如何解决它。

    1. 什么是PHP内存限制?
    2. 如何在WordPress中增加PHP内存限制
    3. PHP内存限制应该是多少?

    什么是PHP内存限制?

    PHP内存限制设置您网站上的任何脚本可以使用的最大内存量。但这究竟是什么意思?

    您的网站由服务器提供支持,这些服务器只是用于保持网站后端运行的专用计算机。与普通计算机一样,它们使用处理器、存储和RAM(也称为内存)等组件。

    RAM是服务器最重要的部分之一。每个程序和应用程序都会占用一点内存。程序越密集,占用的内存就越多。当您的内存不足时,您的网站将运行缓慢甚至拒绝加载。

    Web应用程序(例如WordPress插件)是可能占用服务器内存的众多事物之一。通常,这些应用程序占用的空间非常小,除非您的主机给您的内存非常少,否则您永远不会遇到任何问题。

    但是对于任何PHP应用程序的脚本可以在您的服务器上占用多少内存也有一个硬性上限。当其中一个脚本超过限制时,您就会开始遇到问题。

    您会看到一个带有错误的白屏,甚至可能会禁止您访问整个网站。

    为什么有内存限制?

    想象一下,您的服务器出了点问题。也许一个程序陷入无限循环并不断占用越来越多的内存,或者攻击者诱骗您安装运行恶意脚本的东西以占用您的所有资源。

    当PHP进程失控时,内存限制会在它们导致整个服务器崩溃或耗尽当月所有分配的资源之前对其进行硬性阻止。

    大多数合法的PHP脚本都很小。每个单独的脚本应该只占用少量的RAM,除非你有一个不寻常的程序需要在一个脚本中比大多数程序作为一个整体占用更多的资源。这些类型的插件当然存在,但很少见。

    如果您的内存不足,则很有可能存在损坏或恶意的PHP程序,因此会出现内存限制错误。

    但有时你确实在使用需要额外内存的大型插件。一些Web主机还将PHP内存限制设置得非常低,因此即使您没有安装异常耗电的应用程序,也会导致出现错误。

    无论哪种方式,您都会很快遇到内存耗尽错误。

    内存耗尽错误

    所以你遇到了内存耗尽错误。您可能会在整个站点中或在执行某些功能(例如提交表单)时遇到带有错误消息的白屏。

    出现在WordPress中的内存限制耗尽错误

    出现在WordPress中的内存限制耗尽错误

    这是一个严重的问题,尤其是当它影响您的整个网站时。过去的每一个小时都会有很多迷路的游客。

    罪魁祸首可能是一个非常大或配置错误的插件。因为WordPress插件是用PHP编码的,所以它们受PHP内存限制的限制。

    您可以通过一一禁用插件来找到导致问题的插件,直到重新访问您的站点。一旦你确定了它,检查文档并查看它是否说明它需要运行多少内存。

    如果没有迹象表明它应该是一个非常强大的插件,您可能需要向插件开发人员提交一张票,因为它可能是错误的。请记住,PHP内存限制仅影响单个脚本,而不影响整个插件。因此,脚本很有可能陷入无限循环或其他故障。

    这个问题也可能在你身上。也许您的内存限制设置得太低,因此只有最小的插件才能正确运行。或者,也许您正在尝试安装一个插件,该插件要求您将限制提高到比正常水平更高的水平。

    无论哪种情况,您都应该尝试增加PHP内存限制。现在让我们向您展示如何做到这一点。

    如何在WordPress中增加PHP内存限制

    在做任何事情之前,有一种简单的方法可以检查您当前的PHP内存限制,而无需挖掘任何文件。如果您运行的是WordPress 5.2或更高版本,请转到后端的工具 > 站点健康运行状况。

    如果看不到,请安装运行Health Check & Troubleshooting

    在WordPress中查看站点健康信息

    在WordPress中查看站点健康信息

    信息选项卡下,您将看到您的PHP内存限制。如果它已经设置得相当高,那么您的一个插件可能只是被破坏了。

    但是,如果您发现它非常低,则需要通过编辑wp-config.php文件来增加它。

    这并不总能解决问题。最终,PHP内存限制由您的Web主机设置。有时,您的站点设置为使用的资源少于主机提供的资源,调整文件可以解决此问题。但是如果他们的硬编码限制太低,无论你手动设置多高,你都无法真正增加它。

    但值得一试,所以让我们现在去编辑那个文件。

    PHP内存限制是多少?

    不同的服务器提供商所设置的限制都不太一样,稍微良心的服务器提供商可能会给出256MB的默认PHP内存限制。这对于99%的WordPress插件来说应该绰绰有余,而且实际上远远超过了大多数插件所应采用的。

    它可能仍然值得通过并确保它没有在WordPress的设置中无意中设置得太低。有可能某些东西改变了数量并减少了您可以访问的资源数量。

    如何通过FTP更改PHP内存限制

    要编辑wp-config.php文件,您需要使用FTP或SFTP访问您的站点。这允许您编辑影响站点运行方式的敏感内部文件。

    你只会改变一条线,所以应该很容易。首先安装FileZilla或您选择的其他FTP客户端。它是免费的,所以不用担心。在开始之前,您还应该备份您的网站。在编辑核心文件时很容易意外破坏某些东西。

    打开FileZilla并输入您的凭据。片刻之后,您应该连接到您的站点。

    单击公共文件夹并找到wp-config.php。如果找不到public或public-html,它可能被称为root、www或您的网站名称。

    在FileZilla中查找wp-config

    在FileZilla中查找wp-config

    打开wp配置。注意不要编辑PHP内存限制行以外的任何内容,因为这是一个敏感文件,可能会破坏您的网站。浏览它,直到找到这一行:define(‘WP_MEMORY_LIMIT’, ‘256M’);

    出现在wp-config中的WP内存限制

    出现在wp-config中的WP内存限制

    更改此处列出的数字,保存文件,然后关闭FileZilla。

    如何在cPanel中更改PHP内存限制

    有些主机不允许您通过FTP编辑文件。相反,他们可能会让您访问cPanel。如果您遇到这种情况,请不要担心——您也可以通过这种方式更改您的PHP内存限制。

    第一步:使用主机提供的凭据登录cPanel。在主屏幕上,您将看到一个带有选择PHP版本按钮的软件部分。

    在cPanel中选择PHP版本

    在cPanel中选择PHP版本

    单击它,然后在屏幕顶部,您将看到Switch to PHP options。向下滚动,直到看到带有下拉菜单的memory_limit 。单击它并将其更改为您想要的设置。单击应用,您就完成了。

    不是每个人都会有选择PHP版本选项。相反,您可能会看到MultiPHP Ini Editor 。如果是这种情况,您的步骤会有所不同。

    cPanel中的MultiPHP Ini编辑器

    cPanel中的MultiPHP Ini编辑器

    您需要单击它,然后在下一个窗口中,在Configure PHP INI basic settings下,您应该打开下拉列表并选择您的域。找到memory_limit部分并输入您想要的数字。单击应用以保存您的更改。

    您也可以尝试使用cPanel的文件管理器。这与通过FTP访问您的站点非常相似。在主页的文件部分下,单击文件管理器。找到您的public/public-html文件夹(或任何可能被称为的文件夹)并打开wp-config.php

    找到上一节中概述的WP_MEMORY_LIMIT行,并将数字更改为您想要的。保存您的更改并确保应用它们,这就是您需要做的所有事情。

    PHP内存限制应该是多少?

    当您更改内存限制时,您的第一个冲动可能是将其设置为900MB 或类似的值——尽可能高。但这实际上可能是一个非常糟糕的主意

    如果您网站上的脚本中断,它可能会迅速失控并使您的整个服务器崩溃。即使您的站点托管在功能强大的硬件上,一个脚本占用所有内存仍可能导致严重问题。

    错误配置的脚本异常繁重,但没有破坏到导致问题的程度,也可能被忽视。大多数PHP脚本都很小,内存限制错误是后端出现问题的警告信号。将其设置得太高,您可能会在不知不觉中搞砸脚本,使您的网站陷入困境。

    您应该将PHP内存限制设置得尽可能低,同时仍然允许您的站点正常运行。

    128MB是一个很好的基准。这是相当大的内存量,可以处理大多数密集型插件。如果您知道您将需要一些额外的功能,那么256MB甚至可以涵盖最重的插件。如果你确定你有一个真正的强者,512MB是你应该设置的绝对最大值。在90%的情况下,您永远不需要将内存限制提高到256 MB以上。

    如果更改内存限制不起作用怎么办?

    如果在编辑您的PHP文件后您仍然遇到内存错误,则问题之一是两个问题之一:您的主机分配的资源很少,或者您的服务器上有一个PHP脚本占用了太多的内存。

    同样,您应该检查并禁用您的插件,直到您确定罪魁祸首。使用128-256MB内存,没有插件应该占用这么多空间而不在文档中的某处提及它。禁用它并通知插件作者发生了什么。

    即使在所有插件都被禁用后仍然遇到错误?一定有一些冲突或其他PHP应用程序导致了问题。这超出了您自己能够处理的范围,因此请向您的网络托管服务商寻求帮助。

    如果问题根本不是插件,那么责任可能在于您的主机将内存限制设置得太低。您可能正在使用共享主机,它因分配非常少量的内存而臭名昭著 – 这是可以理解的,因为如果一个站点使用过多的RAM,它会使整个系统陷入数十个其他网站的困境。

    您在这里唯一的选择是升级到提供更多资源的计划。这可能最终代价高昂,特别是如果您只是想在新站点上安装一个密集的插件。如果您还没有很多访客,那么从升级中获得的所有其他资源都不会对您有太大帮助。

    您还可以切换到提供更多内存的主机。

    小结

    PHP内存限制的存在有一个非常正当的原因:您不希望流氓进程占用比预期更多的RAM。但是,当您在使用合法插件时达到极限并遇到白屏死机时,这可能会很烦人。

    最后,取决于您的主机您可以访问多少PHP内存。如果他们设置的标准太低,就不可能提高。

    但是,有时您的网站使用的资源会比您真正可以访问的资源少。在这种情况下,可以增加你的记忆力。尝试将其设置为128或256MB,因为您不希望它太高。

    如果这些方法都不起作用,则可能是缺少分配的资源导致了问题,而不是需要更改的设置。联系您的主机并询问如何获得更多,或切换到提供更大内存的主机,它可以为您提供比您需要的更多内存。