教学

您已经运行WordPress网站一段时间了，它一直在做您需要做的事情。但是现在，您决定需要对其进行自定义。 或者，您可能正在使用从主题目录下载的主题或已购买的主题创建站点，但您意识到它不能完全按照您的需要运行。 那你怎么办呢？ 您可以找到一个插件来提供您需要的自定义或切换到新主题。但是，如果您对当前的主题感到满意并且找不到可以添加您需要的功能的插件怎么办？ 答：您需要自定义您的主题。最佳实践说：您通过（WordPress）子主题来做到这一点。 在本教程中，我们将更多地讨论子主题是什么以及它是如何工作的。我们还将带您完成从头开始创建主题的过程，并向您展示如何将修改后的主题变成子主题。 修改现有主题是开始WordPress开发的好方法。更改的结果将很容易看到和理解。但是，直接对活动主题进行编辑可能会导致问题，因为即使是一个小错误也可能导致主题无法使用。每当主题更新时，您所做的所有更改也将丢失。 然而，有一种方法可以避免这些问题，那就是创建“子主题”。子主题的工作方式与任何其他WordPress主题大致相同，不同之处在于它使用现有主题作为基础（或“父”）。您对子主题所做的更改将反映在您的站点上，而无需直接更改父主题。 自定义WordPress的方法 什么是WordPress子主题？ 何时在WordPress中使用子主题（优点） 何时不使用WordPress子主题（缺点） 如何创建WordPress子主题 如何激活WordPress子主题 如何在WordPress中自定义您的子主题 如何对子主题和父主题进行故障排除 使用WordPress子主题时的有用提示 自定义WordPress的方法 自定义主题有风险。如果您在第三方主题（例如您从市场上购买的主题）中编辑代码，那么当您下次更新主题时，您所做的所有更改都将丢失。这意味着您的网站不仅会恢复原状，而且您的所有工作都被浪费了。 可以通过三种方式自定义您的WordPress网站： 直接编辑您的主题。 安装插件。 创建当前主题的子主题。 让我们依次来看看其中的每一个。 编辑您的主题 如果您的网站运行自定义WordPress主题，这意味着它是专门为您的网站开发的，您可以选择安全地编辑它，因为下次更新主题时不会丢失您的自定义设置。 相反，如果您或您的开发人员将来对主题进行更改，您将编辑的是主题的自定义版本，而不是更改之前的原始版本。 这并不意味着编辑您的主题并非没有风险。如果您没有编写主题的经验，创建子主题可能仍然更安全（我们稍后会看到如何）。这是我做的事情：我有一个基本主题，我在我所有的网站上使用，具有标准布局、钩子和函数，然后我在每个网站上使用子主题对其进行自定义。 如果您直接编辑主题，请确保保留原始主题的备份，不要在实时站点中编辑主题（改用开发或临时站点），并使用版本控制来跟踪您的更改。 如果您使用的是第三方主题，则永远不要直接编辑它。相反，使用插件或创建子主题。 添加插件 自定义WordPress主题的第二个选项是安装或编写插件。 如果您要进行的自定义是功能性的而不是与设计相关的，那么插件是一种更合适的方法。所以如果你想添加额外的代码，最好还是创建一个插件。 插件不必很大或很复杂：如果您需要向主题中的functions.php文件添加额外的代码，请创建一个简单的插件来向您的站点添加几行代码。一个很好的例子是注册自定义文章类型。 将代码添加到主题的functions.php可能很诱人，但添加帖子类型是对网站的功能更改，而不是设计更改。如果您以后要切换主题，您不会希望丢失这些帖子类型以及您使用它们创建的所有帖子。这就是为什么您应该安装或创建插件的原因。 有时您可以找到一个现有的插件来满足您的需求，但有时您可能需要自己编写插件代码。 WordPress插件库 如果对是否应该创建插件或自定义主题（或子主题）有疑问，请问自己：如果我想在将来更改网站的设计并安装新的WordPress主题，我是否希望保留此更改? 如果答案是肯定的，这意味着更改是功能性的而不是美学的，它应该包含在插件中。 创建子主题 自定义WordPress主题的第三个选项是创建子主题。 以下是您使用子主题的一些场景： 您希望更改网站的设计，而不是功能。 您的网站正在运行第三方主题或您想在当前状态下再次使用的主题。 您不想直接编辑现有主题，以防它引起问题（可能您不是经验丰富的主题开发人员）。 您的站点正在运行一个设计为父主题的主题，例如框架主题。这些主题具有许多自定义选项，例如hooks，专为您添加到您自己的子主题而设计。 因此，子主题是一种向您的网站添加自定义内容的有效且安全的方式。因此，让我们更深入地了解它们。 什么是WordPress子主题？ 那么，WordPress中的子主题究竟是什么？它是如何工作的？ 子主题是与另一个主题协同工作的主题，称为父主题。 它包含一些特定的说明来告诉WordPress这是一个子主题以及父主题是什么。WordPress 然后在大多数情况下使用来自父主题的代码，但会使用来自子主题的代码（如有必要）覆盖它。 在许多方面，子主题的功能就像一个“正常”的WordPress主题。它以相同的方式安装、启用和配置。子主题的独特之处在于它依赖于另一个主题来确定其大部分内容。另一个主题被称为“父主题”。 WordPress将始终优先考虑子主题的设置。因此，你能想到的子主题为坐在前面的家长。如果子主题中的设置覆盖了父主题中的匹配设置，则子主题优先。这使您可以仅更改要更改的主题部分，其他所有内容都由现有父级处理。 例如，大多数父主题包含定义不同标题文本级别的样式，例如h1、h2、h3、h4等。假设父主题将h1字体大小定义为20px，但子主题指定与32px相同的标题。在这种情况下，WordPress会将后一种样式应用于所有h1文本。但是，如果同一个子主题不包含h2、h3 和 […]

WordPress钩子（Hook）是WordPress开发人员的武器库中最重要的工具之一。它们是WordPress插件和主题开发的基础。您可以使用WordPress的许多内置钩子将自定义代码“连接到”WordPress核心，并执行或修改某些内容。 有两种类型的WordPress钩子：Actions和Filters。Hook非常普遍，甚至WordPress Core本身也广泛使用它们。WordPress还提供了一种让您定义自己的自定义钩子的方法，以便其他开发人员可以挂钩到您的代码中。 了解动作、过滤器和自定义钩子的工作原理对于掌握WordPress开发至关重要。 本文的前半部分介绍了WordPress钩子的基础知识，并解释了它们如何与多个示例一起工作。在后半部分，您将学习如何使用钩子来自定义WordPress，创建自己的自定义钩子，并使用它们来构建自己的可扩展插件。 什么是WordPress钩子？ 钩子 vs 动作 vs 过滤器 WordPress钩子如何工作？ 在哪里注册钩子及其函数？ 使用WordPress钩子 WordPress钩子列表和资源 查找在WordPress页面上注册的钩子 “所有”钩子 WordPress钩子存储在哪里？ 如何创建自定义WordPress钩子 从WordPress钩子中删除回调函数 更多WordPress钩子教程 什么是WordPress钩子？ 一个WordPress的页面是由很多的功能和数据库查询组装。WordPress核心、插件和主题协同工作以输出页面元素，如文本、图像、脚本和样式。完全组装后，浏览器会将它们放在一起并呈现页面。 WordPress钩子允许您在某些点“钩入”这个构建过程并运行您的自定义代码。钩子的主要功能是让你在不接触核心文件的情况下修改或添加功能到WordPress 。 钩子将帮助您使用自己的代码扩展WordPress 在WordPress的插件API赋予WordPress钩子的功能。您可以通过在WordPress运行时在特定实例中调用某些称为Hook Functions的WordPress函数来使用钩子。 使用钩子函数，您可以将自定义代码捆绑在回调函数中，并将其注册到任何钩子中。注册后，此回调将在钩子所在的任何地方运行，允许您增加或替换默认的WordPress功能。 钩子在代码执行过程中的位置是一个重要的因素。您将在接下来的部分中详细了解其重要性。 两种类型的WordPress钩子：动作和过滤器 WordPress包括两种类型的钩子，称为Actions和Filters。动作允许您在WordPress运行时的某些预定义点执行某些操作，而过滤器允许您修改WordPress处理的任何数据并返回这些数据。 动作（Actions）在WordPress代码中定义为： do_action( ‘action_name’, [optional_arguments] ); action_name字符串是动作的名称。您可以指定[optional_arguments]变量以将附加参数传递给回调函数。如果未指定此字段，则其默认值将为空。 示例：do_action( ‘wp_head’ )每次WordPress处理站点标题时，都可以挂接该动作以运行自定义代码。此动作没有任何其他参数。 过滤器（Filters）在WordPress代码中定义为： apply_filters( ‘filter_name’, ‘value_to_be_filtered’, [optional_arguments] ); filter_name是过滤器的名称，value_to_be_filtered是可以被过滤器函数修改的值，[optional_arguments]可选，若干个可以传递给过滤器函数的参数。 例如：apply_filters( ‘admin_footer_text’ , string $text ) 这个过滤器可以用来修改管理页脚显示的文本。从WordPress […]

在设计网站时，考虑您的受众很重要。如果您不针对各种用户优化网站，您将限制谁可以查看您的内容。如果不积极考虑 WordPress 的可访问性，它可能会导致用户快速离开您的网站并且永远不会返回。 专注于 WordPress中的可访问性使更多的人能够浏览该网站并与之交互。借助可访问的设计和包容性功能，可以改善残障人士的整体用户体验 (UX)。 在本文中，我们将仔细研究WordPress可访问性选项以及如何在您的网站上实施它们。然后，我们将向您展示如何在发布您的内容之前测试新功能。 什么是Web可访问性？ Web可访问性的主要特点是什么？ WordPress可访问性的8个要点 1. 选择正确的WordPress主题 2. 使用插件添加功能特性 3. 用替代文字描述你的图片 4.使用清晰的字体 5.选择对比色 6.添加标题 7.使用描述性锚文本 8. 为视频写字幕和文字记录 如何测试WordPress可访问性 WordPress可访问性常见问题解答 我的WordPress网站是否符合ADA标准？ WordPress的可访问性如何？ 什么是Web可访问性？ Web可访问性是使网站可供各种用户（包括残疾人）访问的过程。即使某人有视觉或运动障碍，网络可访问性也可以让他们平等地访问在线内容。 WordPress可访问性简介 例如，简单的对比色方案将使色盲用户能够轻松阅读内容。此外，由于其他访问者可能无法使用鼠标，因此您只需使用键盘即可使您的网站可导航。 在美国残疾人法案 (ADA)通过后，网络无障碍成为法律要求。如果您是Web开发人员或网站所有者，则在设计页面时必须牢记Web内容可访问性指南 (WCAG)。 例如，内容需要是： 可感知。在线用户应该能够辨别网页上的信息，即使他们使用的是屏幕阅读器等辅助技术。 可操作。网站必须易于浏览，无论访问者使用鼠标、键盘还是语音命令。 可以理解。您的内容必须可读且易于理解。 可自适应。用户应该能够使用各种设备访问您的内容，包括移动设备、浏览器和屏幕阅读器。 对于WordPress，可访问性选项可能会受到影响。尽管WordPress可访问性团队始终评估核心软件、主题和插件，但不能保证这些功能会合规。 本质上，开发人员和内容创建者负责选择他们自己的可访问性工具包。这可能需要额外的时间和精力，但它提供了许多好处： 使广泛的用户能够查看您的内容 改善残障人士的整体用户体验 它有助于与您的观众建立信任 简而言之，您希望每个人都能够访问您的WordPress网站。许多网站将有视力障碍或其他残疾的用户排除在外，但您应该在开发和设计过程中积极考虑他们。 Web可访问性的主要特点是什么？ 在使您的网站可访问时，您需要处理几个功能。这些包括： 导航。访问者应仅使用键盘或辅助技术访问网站的任何部分。 替代文字。为视障用户使用描述性文本，以便他们可以使用屏幕阅读器访问信息。 配色方案。调色板应该有对比色，使内容更具可读性。 字体。网站上的所有文本大小至少应为16像素，并使用清晰的字体样式。 即使您无法考虑所有医疗状况，但这些功能可以确保更多人可以与您的网站互动。 WordPress可访问性的8个要点 现在我们已经了解了Web可访问性的重要性，让我们讨论如何优化您的网站以符合这些准则。 1. 选择正确的WordPress主题 […]

修改网站时，您需要确保所做的更改不会对您的网站产生负面影响。事故发生，网站崩溃，因此您需要一个安全的环境，您可以先在其中测试所有内容，然后再在线发布。 为确保安全有效的修改，您可以创建一个WordPress预发布站点。 本教程将向您展示如何创建一个预发布环境以安全地开发和修改您的WordPress网站，而不会影响您的原始网站。 什么是WordPress预发布环境？ 为什么使用WordPress预发布环境？ 如何使用WP Staging创建WordPress预发布环境 其他 WordPress 预发布环境插件 1. All-in-One Migration 2. Duplicator 3. WP Stagecoach 什么是WordPress预发布环境？ WordPress预发布环境充当您网站的副本。使用它，您可以测试您计划对WordPress网站实施的任何更改，例如更新主题、插件或完全重新制作网站。 请记住，WordPress预发布站点仅用于开发目的，公众或搜索引擎无法访问。 开发人员通常会为同一个网站使用多个环境，以确保网站顺利运行。预发布环境站点是开发站点（开发人员在其中编写代码并执行初始测试）与生产站点（站点访问者看到的实时站点）之间的桥梁。 为什么使用WordPress预发布环境？ WordPress预发布站点可帮助您安全地测试对网站所做的任何更改。 有了它，您可以修改站点而不会使其崩溃或更改实时版本的功能。这有助于避免停机时间和访问者糟糕的用户体验。 但是，使用WordPress预发布站点有其优点和缺点，例如： 优点 无风险环境。一个更安全的环境来修改您的网站，而不会危及实时网站的功能。 及早预防错误。它有助于在网站上线之前发现关键问题和系统崩溃。 灵活的设置。根据您的喜好，可以在本地或在线进行设置。 最好的输出。允许您构建一个更好的站点，因为您可以在启动它之前彻底测试所有内容。 缺点 陡峭的学习曲线。如果您是一个完整的初学者，那么创建一个WordPress预发布站点一开始似乎有些挑战。 额外费用。如果您更喜欢让预发布站点在线，它可能包括额外的插件或托管费用。 耗时。您将花一些时间测试WordPress预发布站点上的更改，并将这些相同的更改重新应用到该站点的实时版本。 如何使用WP Staging创建WordPress预发布环境 如果手动创建预发布站点似乎过于复杂，那么预发布站点插件可能是您的正确选择。 WP Staging是设置预发布环境的首选插件之一，因此我们建议在使用任何其他插件之前先尝试一下。 在使用WP Staging创建预发布站点之前，请确定是在您的活动站点的子目录、子域还是其他域上设置预发布站点。 在本教程中，我们将向您展示如何在子文件夹上创建WordPress预发布站点。 1. 在子文件夹中创建新的预发布站点 使用WP Staging创建预发布站点的最简单和最快的方法是使用子文件夹。此选项在免费和高级插件版本中均设置为默认值。 （1）在您的WordPress管理侧边栏上，导航到WP Staging -> Sites -> CREATE NEW STAGING SITE。 （2）在Staging Site Name字段中输入预发布站点的名称。在此示例中，您的预发布站点URL将为https://mysite.com/staging。 […]

使用理想的长度（字数）是文章在Google搜索中排名良好的成功因素之一。没有决定长度的规则，这取决于你写的主题。然而，长篇文章往往表现良好，因为除了焦点关键词之外，它们还可以对长尾关键词进行排名。 不管怎样，一次展示3000字以上的文章，会让用户很快感到疲倦和无聊。解决方案是在WordPress中使用分页符，以便将文章分成几页。在本文中，我们将解释如何在WordPress中使用分页符并自定义样式。 使用分页符时会发生什么？ 分页符是WordPress中将冗长的文章拆分为所需页数的功能。您可以在一篇文章中插入多个分页符以拆分为多个页面。发表的文章会有一个分页，用户可以点击它进入下一页阅读更多内容。假设您在一篇文章中插入了两个分页符。在这种情况下，文章将分为三个页面，如下所示，三个不同的 URL： yoursite.com/test-post/ 第 1 页 yoursite.com/test-post/2/ 第 2 页 yoursite.com/test-post/3/ 第 3 页 请记住，每个URL在WordPress中都是一个单独的页面，这意味着用户可以独立访问它们。WordPress将在源代码中添加同一拆分页面（如 /2/ 或 /3/）的规范URL，以通知搜索引擎这些可以被视为独立页面。 WordPress中分页符的规范URL 但是，您的XML站点地图将有一个文章URL，即文章的第 1 页。无论您使用默认的WordPress站点地图还是使用插件为您的站点生成站点地图，情况都是一样的。 分页符的优点 在WordPress中添加分页符有助于通过以下方式提高可见性： 限制单个页面的长度而不会拉伸太长。 用户可以导航到下一页或上一页以阅读内容，从而增加现场参与度和时间。 每个页面都可能在搜索引擎中排名，从而提高您的流量。 但是，请确保内容对您的读者足够有吸引力以保留它们并将页面分解在适当的位置。否则，用户可能会在未阅读完整内容的情况下离开页面，从而产生负面影响。 在古腾堡编辑器中添加分页符 分页符是古腾堡编辑器中的区块之一，您可以在内容的任何位置插入它。创建要插入分页符的段落块，只需键入/page以插入该区块。 在Gutenberg中查找分页符区块 选择要插入的分页符区块，它将显示一条分隔线，如下图所示。这个区块没有额外的设置，你唯一能做的就是插入或删除。 古腾堡编辑器中添加的分页符 现在，发布或更新您的文章并在单独的浏览器选项卡中打开页面。您可以在编辑器中看到您在其中插入分页符的页面导航链接。Gutenberg编辑器中分页线下方的内容部分将移动到一个新页面，您可以通过单击第2页链接访问该页面。您可以插入多个分页符以将内容分成不同的页面，这些页面可以使用分页链接访问。下面是它在WordPress主题二〇二二的页面上的样式。 默认WordPress主题中的分页符 在WordPress中自定义分页符的样式 您使用的主题将决定已发布页面上分页符部分的样式。正如您在上面的屏幕截图中看到的那样，分页看起来很简单，用户甚至可能没有注意到它出现在内容的末尾。 但是，商业主题使用自定义的内置样式来使分页的外观更具吸引力。例如，下面是Astra和Kadence主题中分页符分页的样式。 Astra主题中的分页 Kadence主题中的分页符 如果您想自定义分页链接，WordPress提供了三个CSS类供您使用。您可以使用浏览器的开发人员工具部分更改实时站点的样式，以找到适合您站点的合适CSS。 我们将在此处使用默认的二〇二二主题进行说明，当您使用不同的主题时，外观可能会有所不同。分页wrapper的CSS类是.post-nav-links，您可以使用以下样式为此类添加一些背景、填充、边框半径。 .post-nav-links { background: rgb(144 238 144); padding: 10px; border-radius: 5px; […]

WordPress自定义字段是使WordPress成为灵活的内容管理系统的重要组成部分，而不仅仅是“一个博客平台”。 对于WordPress自定义字段，Advanced Custom Fields插件是最知名的名称之一。它使在各个方面使用自定义字段变得更加容易，这也是我们今天文章的主题。 具体来说，我们将解释为什么高级自定义字段如此有价值，然后逐步向您展示如何将其应用到您的WordPress网站。 以下是您将在这篇文章中找到的所有内容： 什么是WordPress自定义字段？他们让你做什么？ Advanced Custom Fields插件使自定义字段更容易 高级自定义字段教程：如何添加字段 如何在前端显示高级自定义字段 什么是Advanced Custom Fields插件？ 由Elliot Condon开发的高级自定义字段（通常简称为 ACF）是一个WordPress插件，允许您向网站添加和管理WordPress自定义字段。它既可以作为免费插件也可以作为高级插件使用，称为ACF PRO，终身更新和1个站点的起价为25美元。 什么是WordPress自定义字段？他们让你做什么？ WordPress自定义字段可让您添加、存储和显示有关WordPress中某段内容的附加信息。在更技术层面上，自定义字段可帮助您存储元数据。 即使您不熟悉这个术语，自定义字段也会为您喜欢的插件和主题中的大部分功能提供支持。 例如，构建电子商务商店的最流行方式WooCommerce使用自定义字段来存储有关产品的其他信息，例如： 价格 重量 颜色 或者，如果您有WordPress事件日历插件，该插件将使用自定义字段来存储有关事件的额外信息，例如： 地点 开始/结束时间 价格 您还可以创建自己的自定义字段来存储与您的独特需求相关的信息，这就是整篇文章的内容。 什么时候应该使用自定义字段？ 现在，您可能想知道为什么首先需要自定义字段。 例如，如果您想在您的WordPress网站上发布活动，您不能将所有这些信息作为常规文本放入WordPress编辑器中吗？ 嗯，是的，你可以。但是出于以下几个原因，使用自定义字段是一种更好的方法： 更轻松的输入——而不是从头开始输入内容，布局良好的自定义字段组将使输入数据变得更加容易。例如，您可以直接从日期选择器中选择日期，而不是输入日期。 一致性——您在自定义字段中输入的信息将始终根据您的设置显示，这意味着它将在您的整个站点中保持一致。 易于更新和维护——如果您想更改该信息在未来的显示方式，您可以只更新一件事，而不必单独编辑每个帖子。 WordPress包括内置的自定义字段功能 WordPress实际上包含用于向您的内容添加自定义字段的内置功能。在经典的TinyMCE编辑器中，您可以从屏幕选项区域启用此功能。或者，在新的区块编辑器中，您可以从选项区域启用它： 如何在区块编辑器中访问自定义字段 然后，您可以使用键/值对输入自定义字段数据： 内置的WordPress自定义字段功能 这种本机自定义字段功能是完全实用的，但它不是最用户友好的做事方式，这就是为什么很多人转而使用高级自定义字段插件的原因。 Advanced Custom Fields使其更容易 简而言之，Advanced Custom Fields使在WordPress中使用自定义字段变得更加容易……几乎所有方面。 它简化了在WordPress仪表盘中添加和管理自定义字段的界面，还简化了在站点前端显示自定义字段信息的过程。这一事实仅有助于解释为什么它在超过100万个网站上活跃，并在1,000多条评论中获得4.9星评级。 在后端，它可以让您创建用户友好的元框，其中包括预选的字段类型。因此，您将能够使用日期选择器、复选框等，而不是通用键值对接口（如您在上面看到的那些）： 区块编辑器中的高级自定义字段 高级自定义字段总共提供 30 […]

许多人抱怨开始构建古腾堡区块和应用程序的障碍。学习曲线陡峭，主要是由于开发环境的安装和配置困难。此外，扎实的JavaScript、Node.js、React和Redux知识是这个相当复杂的秘诀的必备要素。 官方的WordPress区块编辑器手册为开发人员提供了大量信息，但您可能会发现自己迷失在这些细节的海洋中。 值得一提的是，Gutenberg项目的首席架构师Matías Ventura在接受WP Tavern采访时所报告的内容： 虽然有些人可以快速学习它，但这对人们来说仍然是一个很大的障碍。我认为这有几个层次；文档在组织和演示方面可能要好一个数量级。我希望我们可以在那里做更多的事情。 考虑到这一点，我们决定提供一个分步教程，旨在帮助我们的读者开始使用Gutenberg区块开发。 古腾堡区块开发先决条件 什么是古腾堡区块？ 设置您的WordPress开发环境 初学者区块脚手架的演练 项目：建造你的第一个古腾堡区块 古腾堡区块开发先决条件 对于本教程，唯一需要的技能是对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区块 虽然Gutenberg提供的编辑体验与经典的WordPress编辑器相比是全新的，但WordPress将您的内容片段存储在数据库中的方式根本没有改变。这是因为Gutenberg是一个在WordPress中运行的应用程序，但不会改变CMS的核心工作方式。 使用Gutenberg创建的文章（包括文章、页面和自定义文章类型）仍存储在wp_posts表中，与经典编辑器完全相同。 但是在使用Gutenberg创建的文章中，您会在表格中找到更多信息，这些信息代表了通过Classic Editor与Gutenberg创建的文章之间的根本区别。 这些信息看起来像HTML注释，它们有一个特定的功能：分隔区块： 代码编辑器视图中的博客文章。 区块分隔符告诉WordPress要在屏幕上呈现什么区块。它们还为JSON对象中的区块属性提供值。这些道具决定了区块应该在屏幕上呈现的方式： wp_posts存储在表中的博客文章 设置您的WordPress开发环境 设置现代JavaScript开发环境需要扎实的高级技术知识，例如Webpack、React和JSX、Babel、ESLint等。 被吓倒了？不要！WordPress社区已经通过提供强大的工具来帮助您避免混乱的手动配置过程。 为简单起见，我们不会在本文中介绍转译（不过，我们建议您在了解区块开发的基础知识后熟悉一下）。相反，我们将介绍两种替代工具，您可以使用它们在几分钟内快速轻松地设置现代JavaScript开发环境。您可以选择对您的项目最方便的一个。 设置JavaScript开发环境以构建Gutenberg区块是一个三步过程： 安装Node.js和npm 设置开发环境 设置区块插件 让我们开始吧。 1. […]

如果您是Web开发人员，您经常处理网站错误，对吗？无论您是从头开始为网站编写代码，还是部署已经编写好的软件程序，您都一定会遇到错误。这是因为编码错误可能发生在包括WordPress在内的所有类型的计算机程序中。 但是每个问题都有解决方案，错误也是如此。事实上，作为一名Web开发人员，您的主要职责之一是调试错误或编码错误。这篇文章将全面为您提供调试WordPress编码错误一些有效的信息。 所以，如果你是WordPress开发者，这个博客对你来说非常方便。我们将在整个博客中为您提供一些杀手级和有效的调试WordPress提示和技巧。 但在此之前，让我们定义术语调试并给您一个概述。这将帮助您更好地理解后续要点。 1 Debug调试说明 2 为什么调试WordPress网站很重要 3 七个有效调试WordPress提示和技巧 3.1 WordPress调试插件的可用性 3.1.1 Query Monitor 3.1.2 Debug Bar 3.2 激活WP_DEBUG 3.3 启用WPDB错误报告 3.4 部署WordPress临时站点 3.5 识别PHP错误 3.6 检查您网站的服务器错误日志 3.7 启用SCRIPT_DEBUG 4 小结 Debug调试说明 简而言之，调试或调试是指检测和修复软件或计算机程序中的编码错误。通常，Web开发人员是执行调试任务的专业人员。 开发人员使用许多调试工具来修复代码中的错误。一旦更正，他们会运行进一步的测试以确保程序中不会再次出现错误。需要注意的是，调试是软件开发过程中的一个持续动作。 要调试一个软件，您可以采用多种策略，包括单元测试、代码审查和结对编程。在发布软件程序之前，Web开发人员的工作是确保软件程序没有错误。 但是，即使在修复了明显的错误之后，错误也可能出现在软件正式发布后。这是因为几乎不可能一次性识别出产品中的所有错误。用户开始使用该产品后，该程序的一些错误就会显现出来。当用户抱怨错误时，开发人员必须立即修复它们。 为什么提前调试WordPress网站很重要 与WordPress安全性一样，调试WordPress也很重要。当您设计WordPress网站时，您会利用许多3rd方插件来增强您的网站功能。但是所有这些插件都不太可能为您带来预期的成果。其中许多插件会触发代码冲突，从而削弱您的WordPress网站。 WordPress有一个debug调试模式，可以让您预先检测到这种类型的代码冲突。这使您可以在网站上线之前解决这些问题。因此，在网站上线后修复新出现的网站错误所需的时间和精力会减少。 7个有效的调试WordPress提示和技巧 现在，是时候切入正题了，即为您提供调试WordPress站点的可能解决方案。通常，每当我们中的任何人面对我们的WordPress网站崩溃时，我们倾向于停用或卸载我们所有活动的主题和插件。事实上，这是我们被要求做的。并不是说采用这种方法是错误的。 但这是让您的网站重回正轨的浪费时间和低效的方法。这样，您网站的真正问题也可能会被忽视。因此，你必须想出一个真正的游戏规则改变者，而这正是我们要在这里讨论的—— 如果您愿意了解如何恢复被黑的WordPress网站，可以参考以下链接 – 如何恢复被黑的WordPress网站？ WordPress调试插件的可用性 当涉及到WordPress网站的功能增强时，插件总是很有用的。例如，如果您想通过社交媒体功能丰富您的网站，您可以使用社交媒体插件。 同样，如果您想为您的WordPress网站增强调试功能，您可以使用一流的WordPress调试插件。我们会命名并推荐2个调试WordPress插件——Query Monitor和Debug Bar。 Query Monitor Query Monitor带有一些令人兴奋的WordPress调试功能。它有一个用于WordPress的开发人员工具面板。它可以让您对数据库查询、PHP错误、块编辑器块、挂钩和操作、语言和翻译、重写规则、排队脚本和样式表、HTTP […]

无论您是为客户设计网站还是管理自己的WordPress网站，在公开任何更改之前了解它在移动设备上的外观和工作方式都很重要。 您可能有一部手机可以用来查看您的网站。但是，如果您在笔记本电脑或台式机上工作，则不得不继续使用手机会很不方便。 即使您的网站在您的手机上看起来不错，也有很多手机和平板电脑。仅仅因为它看起来不错，并不一定意味着它可以在各种不同的屏幕尺寸、浏览器和操作系统上完美运行。 那么，您究竟如何在移动设备上预览WordPress网站呢？在本指南中，我们将介绍一些无需离开计算机即可在移动设备上测试您的网站的简单方法。 为什么测试网站的移动版本如此重要？ 几年前，移动设备取代台式电脑成为浏览网页的主要方式。2021年第一季度，移动设备占全球网络流量的54.8%，去年手机和平板电脑占据了全球57.37%的市场份额。 在全球一些地区，移动设备的使用比桌面设备的使用要大得多。例如，在印度，移动设备拥有超过77%的市场份额。 为了应对不断增长的移动互联网使用，谷歌已经开始惩罚那些不能在移动设备上提供良好用户体验的网站。 在过去的几年中，已经有许多算法更新，旨在为移动用户提供更好的搜索体验。2015年的“ Mobilegeddon ”更新最为激烈，因为谷歌转向了移动优先模式。 作为WordPress用户，选择移动响应主题是确保您的网站看起来不错并且在移动设备上运行良好的第一步。 但是使用块编辑器，用户可以比以前更好地控制单个页面的格式。因此，即使您不是在开发主题或插件，每次添加新内容时，检查您的网站在移动设备上的外观也很重要。 如果您使用Divi或Elementor等可视化拖放页面构建器来创建新页面布局或向您的网站添加内容，这一点尤其重要。 方法一：使用内置的WordPress移动预览 方法二：在Chrome中使用开发者视图 方法三：使用第三方设备模拟器或测试服务 方法一：使用内置的WordPress移动预览 您始终可以在发布之前预览您的WordPress文章和页面。但是您是否注意到您还可以预览您的网站在移动设备上的外观？ 在WordPress中有两个地方可以访问移动预览： 来自文章和页面编辑器（并不总是准确的） 来自WordPress定制器 WordPress文章/页面编辑器预览 我们先来看看文章和页面编辑器中的移动预览是如何工作的。单击“发布”或“更新”按钮旁边的“预览”按钮。 在弹出的下拉菜单中，选择“平板电脑”或“手机”，然后点击。 这将立即调整页面编辑器的大小。但是，这是对内容外观的非常粗略和现成的估计，可能不太准确，尤其是在您使用自定义块或外部加载的CSS时。 您可以在此示例中看到，编辑器只是调整了区块的大小以适应较小的屏幕并包装了文本。 但是，如果您以较小的屏幕尺寸查看实时站点，您会发现它看起来根本不像这样。相反，响应式设计设置已开始重新排列块并调整文本大小。 以下是它在较小的浏览器屏幕上的实际外观： 教训：不要相信文章和页面编辑器中的移动预览。公平地说，这是一个相当新的功能，并且仅在2020年年中发布的WordPress 5.5之后才出现。希望未来移动页面预览会有所改进。 WordPress定制器预览 那么WordPress定制器中的预览是否更好？让我们来看看。 要访问WordPress移动预览版，请转到WordPress仪表盘中的外观 > 自定义。 这将显示您网站外观的预览，并允许您实时查看您对样式所做的更改如何更改其外观。您可以导航到站点上的任何页面并上下滚动，就像它是站点的实时版本一样。 要查看您的网站在不同屏幕尺寸上的显示效果，请使用自定义菜单底部的图标在设备视图之间切换。 默认是桌面，中间是平板，右边是智能手机。 这是查看您网站的移动版本的最简单、最快捷的方式，因为它位于WordPress仪表盘中，只需单击几下即可访问 但是，这基本上只是为您提供与调整浏览器窗口大小相同的视图。它并不能准确复制您的网站在每台移动设备上的显示和行为方式。 它还只允许您以三种不同的屏幕宽度查看您的网站。移动设备具有许多不同的屏幕尺寸和分辨率。 正如WordPress核心开发团队对该功能的原始提案所述，“默认情况下只有三个选项可用，而且它们是故意模棱两可的。其目的不是看起来像特定的设备，而是要了解网站在大致平板大小、纵向设备或大致手机大小的设备上可能是什么样子。” 此外，WordPress定制器仅适用于支持它的主题。这意味着如果您使用的主题不适用于定制器，您将无法使用此方法在移动设备上预览您的网站。 在WordPress页面构建器中查看移动预览 如果您使用的是Divi、Elementor、Visual Composer等视觉页面构建器，它们中的大多数都带有自己的工具，用于预览您网站的移动版本并查看响应式设计在不同屏幕尺寸下的外观。 请参阅您正在使用的构建器的用户指南，以准确了解如何在移动设备上编辑和预览您的WordPress网站。 方法二：在Chrome中使用开发者视图 一些浏览器具有内置的设备模拟器。Chrome是最受欢迎的浏览器之一，您可以使用它来预览您的网站在多种不同设备和不同分辨率下的外观。 Chrome设备视图比WordPress移动预览要先进得多。除了能够在流行设备之间切换外，您还可以查看缩放或旋转屏幕时网站的外观，甚至可以模拟受限制的移动互联网连接。 但是，虽然这为您提供了比使用内置WordPress移动预览更多的预览选项，但它仍然只是您网站外观的近似值。 重要的是，您只能了解您的网站在Chrome中的外观。许多移动设备使用不同的浏览器，仅在Chrome中进行测试可能还不够。 但这是测试您的网站在不同大小下的外观和工作方式的一种非常快速和简单的方法，它可以提醒您任何重大问题。 要在“设备模式”下使用Chrome，请转到菜单中的查看 > […]

WordPress是目前流行的内容管理系统（CMS）平台，适用于各种类型的网站。它的用户友好性和高度可定制性，使其成为众多项目的热门选择。 这篇文章列出了定制WordPress主题开发中使用的常见PHP代码。我们提供了关于如何将这些函数纳入你的WordPress网站的基本概述。 最常见的WordPress函数 网站的标题 <?php bloginfo(‘title of my site’); ?> 特定文章或页面的标题 <?php wp_title(); ?> style.css文件的主题位置 <?php bloginfo(‘stylesheet_ url’); ?> 网站的Pingback URL <?php bloginfo(‘pingback_url’); ?> 网站主题文件的位置 <?php bloginfo(‘template_url’); ?> 网站的WordPress版本 <?php bloginfo(‘version’); ?> 网站的Atom URL <?php bloginfo(‘atom_url’); ?> 网站的确切URL <?php bloginfo(‘rss2_url’); ?> 网站的名称 <?php bloginfo(‘name’); ?> 网站的Html版本 <?php bloginfo(‘html_type’); ?> 网站的字符集参数 <?php bloginfo(‘charset’); ?> 特定文章或页面的作者 <?php […]

一个WordPress网站如果没有菜单和子菜单，就不算什么了。在WordPress内根据你的喜好定制这些菜单也是很简单的。因此，你的WordPress菜单是一个 “front line”工具，以获得一个高的搜索排名，并保持访问者在网站上。 WordPress内部的专用屏幕掩盖了你的菜单可以有多复杂。你也能够在你的网站上的几个位置显示菜单。如果你有编码技能，你可以定制你的WordPress菜单，几乎有无限的可能性。 在这篇文章中，我们将给你一个创建WordPress菜单的深入指南。我们还将向你展示如何利用该功能并以几种不同的方式增强它。 剖析WordPress的菜单 WordPress菜单结构的不同类型 如何创建一个自定义的WordPress菜单（3种方法） 如何加强你的WordPress菜单 剖析WordPress的菜单 对于不熟悉的人来说，WordPress菜单通常是一个链接（包括下拉）的集合。它是一个直接的功能，只是你的网站骨架中的一个 “椎体”。 WordPress网站菜单示例 我们将在下一节中更详细地讨论在网站上看到的菜单。现在，你要知道，它们可以放在你想显示的任何地方。你可能只有几个预选的选项（基于小部件的区域）。不过，从技术上讲，菜单可以放在任何地方。 当然，WordPress的菜单对于导航网站是最重要的。如果你有一个清晰明确的导航菜单，这将有助于用户在你的网站上浏览，它将使你的跳出率下降。 它们也有另一个目的：你的菜单有助于你的搜索引擎优化（SEO）。优化WordPress菜单以利于SEO，更多的是关于舍弃什么，而不是放进什么。对于初学者来说，你可以取消一些元素–如标签云–并保持你所包含的链接的数量较少。 虽然谷歌允许你在一个页面上最多添加250个链接，但保持你的 “链接价值“是至关重要的。因此，减少外部链接的数量从长远来看对你有好处。 WordPress菜单结构的不同类型 你可能已经明白，根据你的应用程序的需要，你可以选择不同的WordPress菜单结构。 例如，标题菜单是最常见的，因为它们处理的是主要的网站导航。你也会经常看到主导航上方的小菜单，因为这是社交媒体图标、搜索栏等的绝佳位置。 SAU/CAL的网站有一个 “飞入 “菜单，包括导航和社交链接： SAU/CAL网站飞入式菜单 这个菜单表明，WordPress的菜单有比导航网站更多的使用情况。使用WordPress的内置功能（后面会详细介绍），你可以为你需要的几乎任何东西创建一个菜单。 与页眉导航一样流行的是页脚。你经常会用这个区域为向下滚动的用户重复你的主要导航。此外，它也是为你的产品和服务提供更多基于上下文的链接的绝佳场所： 教学博底部菜单 如果网站使用侧边栏，你还会看到侧边栏内的菜单： 一个侧边栏导航的例子 虽然在很多情况下你不会在这里看到主要导航，但它是一个传统的社交链接、博客文章档案和更多内容的地方。 如何创建一个自定义的WordPress菜单（3种方法） 创建一个WordPress菜单是一个简单的过程，不管你的专业水平如何。有三种主要的方法来完成这项工作：使用WordPress的内置功能；安装一个合适的插件或用代码来弄脏你的手。 接下来，我们将向你展示如何使用这三种方法创建一个WordPress菜单。 1. 使用WordPress的内置功能来创建你的菜单 WordPress有内置的工具来帮助你创建一个菜单。除了最新的用户之外，WordPress管理中的一个专门屏幕对所有的用户来说都是熟悉的。 WordPress的菜单界面 当然，使用本地功能来创建你的WordPress菜单有许多好处。首先，你与你的网站有完全的兼容性。而且，你可以使用一个熟悉的界面和本地工具来建立你的菜单。 要达到这个目的，请前往WordPress内的外观>菜单页面： WordPress的菜单链接 这个屏幕分为几个不同的部分。在顶部，你会发现选择当前菜单或创建一个新菜单的选项： 菜单选择下拉 如果你决定建立一个新的菜单，给它起个名字，并查看菜单设置部分。 菜单设置选项 这里有很多复选框，但你有两个主要决定要做： 自动添加顶级页面到菜单中。 这里的 “顶级 “是指你在WordPress中创建的不是其他页面的子页面的页面。例如，一篇博客文章不是一个顶级页面，因为在许多情况下它会有一个父级档案页（例如/blog）。另一方面，一个联系页面通常是顶级的，因为它通常不会有一个父页面。 菜单位置。 每个主题都会有它的菜单位置。除非你改变了主题的核心文件，否则主题开发者已经硬编码了这些菜单位置。有些主题可能允许你通过其设置来定制它们。 一旦你准备好了，点击创建菜单按钮。屏幕将刷新，并将显示你在你的新菜单中。接下来，看一下屏幕的左侧： 菜单项的手风琴式菜单 这个屏幕列出了你网站上所有的帖子、页面、分类法和其他可链接的资产。你通过勾选左边的方框来建立你的菜单，然后点击添加到菜单按钮。 这将把它们移到菜单屏幕的中央部分： 在菜单结构部分拖放项目 […]