作者： tianbao

无论您是为客户设计网站还是管理自己的WordPress网站，在公开任何更改之前了解它在移动设备上的外观和工作方式都很重要。

您可能有一部手机可以用来查看您的网站。但是，如果您在笔记本电脑或台式机上工作，则不得不继续使用手机会很不方便。

即使您的网站在您的手机上看起来不错，也有很多手机和平板电脑。仅仅因为它看起来不错，并不一定意味着它可以在各种不同的屏幕尺寸、浏览器和操作系统上完美运行。

那么，您究竟如何在移动设备上预览WordPress网站呢？在本指南中，我们将介绍一些无需离开计算机即可在移动设备上测试您的网站的简单方法。

为什么测试网站的移动版本如此重要？

几年前，移动设备取代台式电脑成为浏览网页的主要方式。2021年第一季度，移动设备占全球网络流量的54.8%，去年手机和平板电脑占据了全球57.37%的市场份额。

在全球一些地区，移动设备的使用比桌面设备的使用要大得多。例如，在印度，移动设备拥有超过77%的市场份额。

为了应对不断增长的移动互联网使用，谷歌已经开始惩罚那些不能在移动设备上提供良好用户体验的网站。

在过去的几年中，已经有许多算法更新，旨在为移动用户提供更好的搜索体验。2015年的“ Mobilegeddon ”更新最为激烈，因为谷歌转向了移动优先模式。

作为WordPress用户，选择移动响应主题是确保您的网站看起来不错并且在移动设备上运行良好的第一步。

但是使用块编辑器，用户可以比以前更好地控制单个页面的格式。因此，即使您不是在开发主题或插件，每次添加新内容时，检查您的网站在移动设备上的外观也很重要。

如果您使用Divi或Elementor等可视化拖放页面构建器来创建新页面布局或向您的网站添加内容，这一点尤其重要。

• 方法一：使用内置的WordPress移动预览
• 方法二：在Chrome中使用开发者视图
• 方法三：使用第三方设备模拟器或测试服务

方法一：使用内置的WordPress移动预览

您始终可以在发布之前预览您的WordPress文章和页面。但是您是否注意到您还可以预览您的网站在移动设备上的外观？

在WordPress中有两个地方可以访问移动预览：

1. 来自文章和页面编辑器（并不总是准确的）
2. 来自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开发人员来说，彻底测试他们开发的网站、主题和插件非常重要。对于这种测试，使用设备模拟器或模拟器是必不可少的。

模拟器复制设备的硬件和软件，而模拟器仅模拟操作系统和用户界面。

设置和运行模拟器可能很复杂，而且它们往往运行缓慢。幸运的是，它们主要用于测试应用程序和游戏，而不是网站测试所必需的。

以前，您必须在计算机上安装模拟器软件才能运行测试。现在更容易了，因为有几种服务可以在云中在线运行。

这意味着您可以在几乎任何您想要的设备上运行任何浏览器来测试您的WordPress网站。

您可以尝试的一些服务包括：

• MobileMoxie – 使您能够在50多部手机上测试您的网站和移动搜索结果。您可以在有限的基础上免费使用该服务，或者以每月29美元的价格注册以进行无限制的实时测试。
• LambdaTest – 一个基于云的测试平台，可在多个设备上的数千个浏览器和操作系统上进行站点预览，并带有用于实时调试的工具。免费计划包括每月60分钟的测试，付费计划每月15美元起。
• BrowserStack – 这实际上不是一个模拟器，而是一项服务，可让您在云基础设施上的2,000多个浏览器和真实设备上测试您的网站。该服务每月收费39美元，但有免费试用。

审核和测试您的网站以确保它针对移动设备进行了优化

以上任何一种方法都可以让您查看您的网站在移动设备上的外观。但是，您可能需要再运行一些测试，看看您是否可以为移动用户做出任何其他改进。

谷歌移动友好测试

这个简单的在线工具将允许您输入任何URL，并让您知道它是否认为它“适合移动设备”。

要使用该工具，只需转到https://search.google.com/test/mobile-friendly并输入您要测试的站点上的页面的URL。

运气好的话，您会得到如下所示的响应：

如您所见，这还可以让您方便地预览您的网站在移动设备上的外观。虽然这只是一个截图，但如果有任何重大问题，它可以提醒您。

如果有任何加载问题或问题，您可以查看有关如何改进页面的完整详细信息和建议。

注意：绿色的“页面适合移动设备”并不意味着您已获得 Google 的批准印章，并且您的网站完全针对移动设备进行了优化。它只是让您放心，没有任何重大问题意味着它对于移动用户来说难以辨认或无法使用。

谷歌PageSpeed Insights

PageSpeed Insights是Google的另一个免费工具，它会根据您的网站在速度方面的优化程度为您的网站打分（如何做到PageSpeed Insights测试满分）。

您可以在移动设备和桌面设备之间切换（您将获得每个分数），该工具将为您提供一个列表，列出您可以采取哪些措施来加快您的网站速度，以及每个项目节省的估计时间。

MobiReady

MobiReady是一款免费工具，可在您的网站上运行移动就绪测试，并为您提供有关其运行情况的报告。

您可以将您的网站与竞争对手进行基准比较，并获得分析和建议您可以采取哪些步骤来改进您的网站以供移动用户使用。

如何使您的WordPress网站移动友好

如果您使用的是WordPress，那么您应该先拥有一个适合移动设备的网站。WordPress拥有内置工具，可确保您的网站多年来在移动设备上运行良好。

即便如此，您仍应采取一些步骤来确保您的WordPress网站为移动设备上的用户提供出色的体验。

1. 使用响应式WordPress主题

如果您使用的是定期更新的现代主题，那么您在这里可能没问题。

但是，如果您使用的是几年前的主题，您应该检查它是否为移动响应而构建。

如果您的网站没有重新格式化自身以在较小的尺寸下更易于阅读，请检查您使用的是最新版本的 WordPress 核心和您的主题。

如果更新没有帮助，您应该考虑切换到更现代、更适合移动设备的WordPress主题。

2. 确保你的插件也是响应式的

大多数插件不会影响您的网站在移动设备上的显示方式。但是，如果他们向您的网站添加任何视觉元素，您需要检查它们是否在小屏幕尺寸上正常工作。

同样，现代插件应该被设计为在移动设备上和在高分辨率下一样好。但这绝对是您在启动网站之前应该检查的内容。

对于插件来说，功能尤为重要。例如，如果他们向您的网站添加表单或小工具，请确保它易于在移动设备上导航和使用。

3.禁用移动设备上的弹出窗口

弹出窗口对于台式机或笔记本电脑上的用户来说可能是一种痛苦，但它们会使您的网站对移动用户完全无法使用。

来源：https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on

最好为移动用户完全禁用它们，而不是触发填充整个屏幕的弹出窗口。

谷歌实际上已经开始惩罚那些有侵入性弹出窗口掩盖底层内容的网站。所以最好完全避免它们。或者切换到只占用少量屏幕空间的横幅。

4.确保图像和视频正确缩放并且可以调整大小

媒体和媒体画廊在小屏幕上显示可能特别棘手。确保媒体元素在缩放时可见，或者如果它们不是必需的并且在移动设备上看起来不太好，请考虑禁用它们。

对于视频和图像画廊，请确保您使用的画廊插件考虑了移动体验。例如，用户应该能够浏览图片库。

如果图像或视频按比例缩小，则让用户可以轻松地以更大的尺寸查看它们。大多数移动用户都希望以全屏尺寸观看视频。

5.优化网站速度和性能

确保您的网站快速加载始终很重要。但是页面加载时间对于为移动用户提供良好的用户体验尤为重要。

移动用户经常在旅途中并希望快速访问信息。几年前的一项谷歌研究发现，如果页面在3秒内没有加载， 53%的移动用户会放弃该页面。随着互联网速度和技术的不断进步，用户每年都变得越来越不耐烦。

然而，平均网页在移动设备上的加载时间要长87.84%。

您可以做很多事情来加速您的WordPress网站和移动设备。您将从以下方面获得最大收益：

1. 选择一个好的网络主机
2. 优化图像
3. 使用CDN

小结

您可以使用这些方法中的任何一种来测试您的WordPress网站在移动设备上的外观，但它们都不能准确地复制真实体验。

在启动新网站或进行任何重大更改之前，请确保至少在一部真正的智能手机上检查您的网站。

如果您已经利用了上面的一些预览方法，它应该看起来没问题。因此，只需确保您可以在网站上导航（确保检查按钮和可触摸区域），所有菜单都正确显示，并且任何表单或交互式小工具都可以正常工作。

然后，您可以满怀信心地启动您的网站，确保为桌面和移动用户提供出色的用户体验。

你还在为古腾堡感到困惑吗？或者您是那些坚信区块编辑器的潜力并想知道使用区块编辑器可以将他们的创造力推到多远的人中的一员？

无论您属于哪种类型的用户，古腾堡都会留下来，这篇文章将让您深入了解 WordPress 块编辑器幕后发生的事情。但这还不是全部！

在我们之前的教程中我们提供了对Gutenberg区块开发的一般介绍之后，本文超越了基础知识，介绍了更高级的区块类型。这些块被称为动态区块。

今天，您将了解什么是动态区块、它们是如何工作的，以及从头开始创建动态区块所需了解的一切。

那么，什么是Gutenberg动态区块，静态区块和动态区块之间的主要区别是什么？

1. 什么是动态区块？一个例子
2. 从开发人员的角度来看Gutenberg动态区块
3. 如何访问文章数据
4. 如何创建动态区块：示例项目
5. 在编辑器中构建要渲染的区块
6. 构建要在页面上呈现的区块
7. 动态区块开发的推荐资源

什么是动态区块？一个例子

使用静态区块时，用户在编辑文章或页面时手动添加内容，而使用动态区块时，内容会在页面加载时动态加载和处理。使用动态区块，区块内容从数据库中提取并按原样显示或由任何类型的数据操作产生。

让我们用一个例子来解释一下。假设您要创建一组嵌套区块，显示文章作者详细信息以及来自同一作者的最新文章的选择。

包括文章作者和最新文章组区块

作为Gutenberg用户，您可以使用以下区块：

• 标题核心区块
• 文章作者核心区块
• 最新文章核心区块

您还可以创建一个包含这些区块的组，并将该组添加到可重复使用的区块中以供将来使用。

将组区块添加到可重用区块

这很简单，不是吗？您可以创建一个动态区块并将其添加到您的文章和页面中。

从WordPress 5.9开始，区块编辑器提供了90多个不同的区块，您很可能会立即找到适合您的区块。而且，如果您需要更多，请在WordPress插件目录中快速搜索，您会发现很多免费插件提供了额外的区块。

但是，如果您是WordPress开发人员，或者您正计划从事WordPress开发人员的职业怎么办？也许您有非常特定的需求，找不到您正在寻找的区块，或者您只是想获得新的专业技能。在这种情况下，您可能想学习如何创建动态区块。

从开发人员的角度来看Gutenberg动态区块

动态区块有两个主要用例。

第一个用例是当包含区块的页面尚未更新时，您需要更新区块的内容。例如，当区块包含最新文章或评论的列表时会发生这种情况，并且通常每当区块的内容是使用从数据库检索的数据动态生成时。

添加查询循环区块

第二个用例是需要立即在前端显示对区块代码的更新。使用动态区块而不是静态区块会导致更改立即应用于所有出现的区块。

另一方面，如果您要更改由静态区块生成的HTML，用户将看到一个无效对话框，直到该区块的先前版本的每个实例都被删除并替换为新版本，或者您将旧版本标记为不推荐使用的版本（另请参阅弃用和区块验证、弃用和迁移经验）。

意外或无效的内容

话虽如此，在开始构建动态区块之前，您需要了解一些概念。

1. 应用程序状态和数据存储
2. Gutenberg中的模块化、包和数据存储
3. WordPress数据存储

应用程序状态和数据存储

Gutenberg是一个React SPA应用程序，Gutenberg中的所有内容都是一个React组件。编辑器中的文章标题、标题、段落、图像和任何HTML内容块都是React组件，以及侧边栏和区块工具栏控件。

在我们之前的文章中，我们只使用属性来存储数据。在本文中，我们将通过引入state的概念更进一步。

简单地说，state对象是一个普通的JavaScript对象，用于包含有关组件的信息。组件的state可以随着时间而改变，并且任何时候改变，组件都会重新渲染。

与state对象类似，属性是普通的JavaScript对象，用于保存有关组件的信息。但是props和state之间有一个关键区别：

props传递给组件（类似于函数参数），而状态在组件内管理（类似于在函数中声明的变量）。

您可以将状态视为在给定时间点获取的数据快照，应用程序存储这些数据以控制组件的行为。例如，如果块编辑器设置侧边栏打开，则一条信息将存储在state对象的某个位置。

当信息在单个组件内共享时，我们称之为本地状态。当信息在应用程序内的组件之间共享时，我们称之为应用程序状态。

Application State与store的概念密切相关。根据Redux文档：

一个store保存着应用程序的整个状态树。更改其内部状态的唯一方法是在其上分派一个操作。

因此，Redux将应用程序状态存储在单个不可变对象树（即存储）中。对象树只能通过使用actions和reducers创建新对象来更改。

在WordPress中，商店由WordPress数据模块管理。

Gutenberg中的模块化、包和数据存储

Gutenberg存储库从头开始构建在几个可重用且独立的模块上，这些模块组合在一起构建了编辑界面。这些模块也称为包。

官方文档列出了两种不同类型的包：

• 生产包组成了在浏览器中运行的生产代码。WordPress中有两种类型的生产包：
  • 带有样式表的包提供了正确运行的样式表。
  • 带有数据存储的包定义了数据存储来处理它们的状态。第三方插件和主题可以使用带有数据存储的包来检索和操作数据。
• 开发包用于开发模式。这些包包括用于linting、测试、构建等的工具。

在这里，我们最感兴趣的是带有数据存储的包，用于检索和操作数据。

WordPress数据存储

WordPress 数据模块建立在Redux之上，并共享三个Redux核心原则，尽管有一些关键区别。

Info Redux是JavaScript应用程序的状态管理器。Redux的工作方式总结为三个基本原则：

• 单一事实来源：应用程序的全局状态存储在单个存储中的对象树中。
• 状态是只读的：改变状态的唯一方法是发出一个动作，一个描述发生了什么的对象。
• 使用纯函数进行更改：要指定状态树如何通过操作进行转换，您可以编写纯reducer。

官方文档提供了以下定义：

WordPress的数据模块用作管理插件和 WordPress 本身的应用程序状态的中心，提供工具来管理不同模块内和模块之间的数据。它被设计为一种用于组织和共享数据的模块化模式：简单到足以满足小型插件的需求，同时可扩展以服务于复杂的单页应用程序的需求。

默认情况下，Gutenberg在应用程序状态中注册多个数据存储。这些商店中的每一个都有特定的名称和用途：

• core: WordPress核心数据
• core/annotations:注释
• core/blocks:区块类型数据
• core/block-editor:区块编辑器的数据
• core/editor:后编辑的数据
• core/edit-post:编辑器的UI数据
• core/notices:通知数据
• core/nux: NUX（新用户体验）数据
• core/viewport:视口数据

通过这些商店，您将能够访问一大堆数据：

1. 与当前文章相关的数据，例如文章标题、摘录、类别和标签、区块等。
2. 与用户界面相关的数据，即开关是打开还是关闭。
3. 与整个WordPress安装相关的数据，例如注册分类法、文章类型、博客标题、作者等。

这些存储存在于全局wp对象中。要访问商店的状态，您将使用select函数。

要查看它是如何工作的，请创建一个新文章或页面并启动浏览器的检查器。找到控制台并输入以下代码行：

wp.data.select("core")

结果将是一个对象，其中包含可用于从core数据存储中获取数据的函数列表。这些函数称为选择器并充当访问状态值的接口。

核心WordPress数据存储对象

Info selectors对象包括一组用于访问和导出状态值的函数。选择器是一个接受状态和可选参数并从状态返回一些值的函数。调用选择器是从您的状态中检索数据的主要机制，并作为对原始数据的有用抽象，这些原始数据通常更容易更改并且不太容易用作规范化对象。（来源：Github）

WordPress数据存储通常包含有关WordPress的信息，选择器是您获取该信息的方式。例如，getCurrentUser()返回当前用户的详细信息：

wp.data.select("core").getCurrentUser()

检查getCurrentUser响应

另一个可用于从数据存储中检索用户详细信息的选择器是getUsers():

wp.data.select("core").getUsers()

下图显示了响应对象：

检查getUsers响应

要获取单个用户的详细信息，您只需键入以下行：

wp.data.select("core").getUsers()[0]

使用相同的选择器，您还可以检索author分配了角色的站点用户：

wp.data.select( 'core' ).getUsers({ who: 'authors' })

您还可以检索已注册的分类法：

wp.data.select("core").getTaxonomies()

检查getTaxonomies响应

已注册的文章类型列表：

wp.data.select("core").getPostTypes()

或插件列表：

wp.data.select("core").getPlugins()

现在让我们尝试访问不同的数据存储。为此，您仍将使用select函数，但提供不同的命名空间。让我们尝试以下方法：

wp.data.select("core/edit-post")

现在您将获得以下响应对象。

访问编辑器的UI数据

如果您想知道设置侧边栏是否打开，您可以使用isEditorSidebarOpened选择器：

wp.data.select("core/edit-post").isEditorSidebarOpened()

如果侧边栏打开，则此函数返回true：

侧边栏已打开

如何访问文章数据

您现在应该对如何访问数据有了基本的了解。现在我们将仔细研究一个特定的选择器getEntityRecords函数，它是提供对post数据的访问权限的选择器。

在块编辑器中，右键单击并选择Inspect。在控制台选项卡中，复制并粘贴以下行：

wp.data.select("core").getEntityRecords('postType', 'post')

这会向Rest API发送请求，并返回与上次发布的博客文章相对应的记录数组。

getEntityRecords返回文章列表

Info 请注意，第一次将请求发送到Rest API时，响应将一直持续为null到请求完成。所以，如果你得到null了，不用担心，然后再试一次。

getEntityRecords接受三个参数：

• kind 字符串：实体类型（即postType）。
• name 字符串：实体名称（即post）。
• query ?Object：可选术语查询（即{author: 0}）。

您可以使用arguments对象构建更具体的请求。

例如，您可以决定响应应该只包含指定类别的文章：