打造适用于移动设备的网站

打造适用于移动设备的网站

您知道吗?在您站点的访客中,有一半以上的人可能是在用手机或平板电脑查看您的网站。从选择响应式主题到微调内容,本指南将引导您完成必要的步骤,在所有屏幕尺寸上提供无缝的用户体验。

在此指南中

选择适用于移动设备的主题在编辑器中预览站点在移动设备上的效果响应性提示谨慎处理包含文本的图片响应式设置字体大小使用叠加菜单在移动设备上堆叠显示区块允许多行换行加速移动页面 (AMP)

有问题?

询问我们的 AI Assistant

返回顶部

选择适用于移动设备的主题

在 WordPress 站点上选择适用于移动设备的主题至关重要,这有助于在各种设备上提供无缝和优化的用户体验、提高可访问性,并将对搜索引擎排名产生积极影响。

WordPress.com 提供的所有主题均采用移动响应式设计,这意味着它们在移动设备和台式电脑浏览器上的呈现效果都很美观。

如果您使用的是第三方主题,请确保该主题标明其适用于移动设备,并且在使用移动设备访问时呈现效果良好。查看主题文档,了解自定义选项或设置,以便控制主题在移动设备上的呈现效果。

在编辑器中预览站点在移动设备上的效果

选择移动响应式主题后,您可能会对默认内容做出更改,使其成为您自己的主题。在 WordPress 编辑器中编辑您的站点时,请务必确保其在所有设备上都呈现良好的效果。

WordPress 中没有单独的“移动编辑器”。您对站点所做的更改会同时反映在移动设备和台式设备上。只要您的站点使用的主题适用于移动设备,内容就能适应所有大小的屏幕。这就是我们所说的“响应性”。

您可以点击编辑器右上角的“预览”图标,查看站点对访客的显示效果。选择“手机”或“平板电脑”,在编辑器中查看近似内容:

“预览”菜单,包含平板电脑和手机视图选项

我们之所以说是近似内容,是因为编辑器视图的许多元素都由站点主题决定。主题的样式不会显示在编辑器中;只有在新选项卡中预览页面或在设备浏览器中查看站点时,这些样式才会显示。要查看应用主题样式的内容,请点击“在新选项卡中预览”选项。

点击“在新选项卡中预览”选项后,您可以使用浏览器中的检查器工具查看移动版本。要使用浏览器的“检查”模式预览页面或文章在移动设备视图中的呈现效果,请执行以下步骤:

点击 WordPress 编辑器右上角的“预览”图标。

选择“在新选项卡中预览”选项。

右键单击预览页面,然后点击“检查”(Chrome、Firefox、Edge)或“检查元素”(Safari)。

在浏览器的“检查”模式下,点击移动设备图标,切换到移动设备视图的预览。

发布更改后,您最好打开您的手机或平板电脑,以公众的身份查看站点,进行最后的检查,以确保其呈现效果符合您的预期。

响应性提示

请参考以下提示,最大程度地提高站点设计的响应性,确保网站内容在手机、平板电脑和台式电脑上都能很好地呈现。

谨慎处理包含文本的图片

如果图片本身包含文本,这些文本在较小的屏幕上可能会被截断,如下所示:

这是因为在图片内部设计的文本不具有响应性。

您可以使用 WordPress 编辑器在图片上写入文本。以这种方式向图片添加文本时,文本具有响应性。在下面的视频中,我们将使用封面区块重新创建上面这张图片,演示其在较小屏幕上的响应性:

响应式设置字体大小

要尽可能提高页面字体大小的响应性,请使用 em 或 rem 单位代替像素 (px)。使用像素表示字体大小实质上是在页面中使用特定字体大小的硬编码,这意味着无论屏幕尺寸如何,字体都将始终显示为该确切的大小。相比之下,em 和 rem 值是相对大小单位,可根据查看者屏幕上的可用空间增大或减小字体。

使用叠加菜单

您可以自定义站点的导航区块来显示移动菜单,即叠加菜单(也称为“汉堡菜单”或“烤肉串菜单”),而不是在移动布局中使用文本菜单。该功能有助于使标题更紧凑,菜单更易于在移动设备上查看和使用。

在移动设备上堆叠显示区块

某些区块包含“在移动设备上堆叠显示”选项,以便在较小的屏幕上更好地利用空间。如果内容在台式设备屏幕上并排显示,那么它在较小的屏幕上将向下移动,以便移动设备查看者更容易阅读。

“在移动设备上堆叠显示”设置适用于以下区块:

列区块

媒体和文本区块

展示 Instagram 文章

允许多行换行

允许按钮和菜单多行换行后,它们在较小的设备上将更易于阅读。

“允许多行换行”选项适用于以下区块的布局设置:

多个按钮区块

共享按钮区块

导航区块

社交图标区块

评论区块

行和堆叠区块

加速移动页面 (AMP)

AMP(Accelerated Mobile Pages,加速移动页面)是一个第三方开源框架,可让您创建的网站近乎即时地在移动设备上加载,从而为站点访客提供快速的浏览体验。要在您的站点上添加 AMP,您可以安装 AMP 插件。如果您的 WordPress.com 站点支持插件且在 2022 年 6 月 13 日之前创建,AMP 插件默认已安装。

请注意,为了加快站点的加载速度,使用 AMP 会导致移动设备访客无法使用站点上的大量功能(布局、许多特性)。除非您在创建主题时考虑到了 AMP 的影响,否则最好不要使用该插件。WordPress.com 的所有主题现在都适用于移动设备,因此您无需使用 AMP 来提供更优质的移动设备体验。

如果您的站点遇到显示问题,并且您已安装 AMP,我们建议您先停用 AMP 插件,再看看站点性能是否有所改善。如果您在网站上看到“退出移动版本”选项,想要将其完全删除,那么也请停用 AMP 插件。

请记住,如果您的站点使用 AMP 已有一段时间,Google 不会立即更新其结果,并且会在您停用该插件后的一段时间里继续显示 AMP 页面。停用 AMP 后,您可能想要设置页面重定向。搜索引擎会索引 AMP 页面的 URL,并且需要一些时间才能将这些 URL 从列表中删除,这意味着一些移动设备访客可能会被定向到 404 错误页面。

我们有几种热门的免费重定向插件可供选择。您可以设置 301 重定向,并且可能需要类似于 /(.*)\/amp 的 Regex 表达式。我们建议您进行一些测试,并参阅重定向插件的说明指南,以确保设置正确的重定向。

🌈 相关推荐

一辆宝马正常寿命多少年?
microsoft365破解版

一辆宝马正常寿命多少年?

📅 07-30 👁️ 512
意大利队|意大利国家队
microsoft365破解版

意大利队|意大利国家队

📅 06-30 👁️ 7210