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

移动友好型 WordPress 网站已成为新常态，这已经不是什么秘密了，但尽管它们看起来很常见，但创建一个美观、响应迅速的网站仍然需要一些工作。 本指南将帮助您了解为什么拥有适合移动设备的网站很重要，如何在 WordPress 上构建网站，并向您介绍创建响应式网站的最佳工具。

要使您的 WordPress 网站适合移动设备，您需要：

1. 理解为什么响应式网页设计很重要
2. 参加 Google 移动设备友好测试
3. 使用响应式 WordPress 主题（或创建您自己的主题）
4. 考虑适合移动设备的 WordPress 插件
5. 使用适合移动设备的选择加入
6. 从响应式媒体的角度思考
7. 优先考虑网站性能

准备好？ 让我们开始吧！

1. 为什么适合移动设备的网站很重要？

2019 年第四季度，61% 的谷歌搜索发生在移动设备上。 这意味着超过一半的人正在转向手机和平板电脑，而不是传统的桌面设备，因此为了跟上他们的步伐，您的网站需要准备好在任何屏幕尺寸上显示。 适合移动设备的设计可带来积极的用户体验，并帮助您的用户在旅途中找到他们想要的东西。

除了用户体验之外，您的网站应该适合移动设备的另一个重要原因是：Google。 从 2015 年（“Mobilegeddon”之年）开始，谷歌对其搜索算法进行了重大改革，以奖励被认为“适合移动设备”的网站。 这一变化归结为一个关键数据点：您的网站是否具有响应能力。

这意味着，如果您的网站在移动设备上阅读良好，那么它在搜索结果中的表现将优于其他网站。 如果您已经完成了创建适合移动设备的网站的工作，那将是一个非常不错的福利！ 但如果它不能完全满足在较小屏幕上显示的任务，它也会损害您网站的流量。

幸运的是，如果您的 WordPress 网站还不适合移动设备，有很多工具可以帮助您加快速度并构建功能齐全的响应式网站。 第一步？ 对您当前的设计进行基准测试。

2. 参加适合移动设备的测试

您的网站在一台移动设备（例如您自己的个人手机）上看起来可能很棒，但您确实需要在各种屏幕尺寸上对其进行测试，以了解它是否真正具有响应能力。 即使你碰巧有一大堆旧手机，在每个屏幕上测试它也是一个耗时的过程。

为了简化事情，谷歌为我们所有人提供了一个免费的移动友好测试工具，它会告诉你你的网站是否符合“移动友好”的条件。 只需输入您网站的 URL 即可快速评估您网站的移动设计。 如果您的网站针对移动设备进行了全面优化，您会收到一条热情洋溢的小成功消息，如下所示：

如果您看到红色，则说明您还有一些工作要做。 （我们会在一秒钟内解决这个问题！）

非常简洁的小工具，对吧？ 好吧，它变得更好了。

对于所有开发人员，Google 还发布了移动设备友好测试 API，允许您使用自动化工具测试 URL。 这样做的好处是您可以快速测试更多页面，但您也可以监控站点上最重要的页面，而无需一直手动转向浏览器工具。 分数！

使用 Google 的移动友好工具对您的网站进行基准测试后，就可以开始进行改进了。 让我们从您的 WordPress 主题开始。

3.使用（或创建）响应式WordPress主题

如果您最近安装了一个新的 WordPress 主题，那么您很有可能在这方面没有问题。 如果您的主题已经存在了一段时间，那么可能是时候进行一些更新了。

首先要做的事情：仔细检查您的 WordPress 版本和当前主题版本。 如果有待处理的更新，请从这些更新开始。 我不能代表所有主题，但一些更新将包含适合移动设备的元素，可能足以解决您的问题。 例如，WordPress 4.4 为响应式图像添加了一些非常简洁的功能（您可以在此处阅读所有相关内容）。

如果更新不起作用，可能是时候寻找新主题或考虑创建自己的主题了。 让我们探讨这两种选择。

最佳移动友好型 WordPress 主题

实际上，现在很多 WordPress 主题都是响应式的——不适合移动设备的主题可能很少见。 也就是说，在购买主题之前，请仔细检查它是否在任何屏幕尺寸上都能正常显示。 测试演示站点，缩放浏览器窗口，并阅读您能找到的任何评论，以了解真实用户的体验。

如果您对所看到的感到满意，那就去吧！ 但如果事情看起来不对劲，请避开。 即使您认为它是完美的搭配，也有太多 WordPress 主题可供选择，我保证您会找到适合您网站的另一个主题。

如果您正在查看免费主题，请务必查看包含您自己的内容后的样子 – 我相信您知道，事情看起来并不总是完全一样，因此请确保它显示您的内容您希望在移动设备上使用的方式。

不知道从哪里开始？ 当您在 WP Engine 上托管您的 WordPress 网站时，您将可以免费访问 StudioPress 主题（包括 Genesis Framework！）。 这些主题是完全响应式的，因此它们在任何设备上看起来都很棒，而且您可以轻松地在它们之间切换（而不是被您决定购买的“唯一”高级主题所困）。

如何创建自己的响应式 WordPress 主题

如果您更愿意走 DIY 路线来创建适合移动设备的网站，请务必从头开始或在测试环境中开始——您永远不应该像在您的实际网站上那样进行剧烈的更改。

我建议使用 Local 在您的机器上启动本地 WordPress 站点。 这个免费的应用程序将允许您随心所欲地进行实验，而不会破坏您当前的网站（这在进行重新设计时是必不可少的）。 您甚至可以将现有站点导入 Local，因此如果您愿意，只需从头开始。

还有一个名为 Live Links 的功能，它可以生成指向本地站点的可共享 URL。 这使您可以将其发送给客户或将其拉到您的手机上，这样您就可以轻松地测试网站在移动设备上的外观。

如果您基于响应式父主题创建子主题，您将处于非常好的状态。 如果您是从一片空白开始并创建自己的主题，请务必使用媒体查询来为设计建立边界，并一次考虑一个元素。

问问自己图像应该如何缩放，导航应该是什么样子，以及是否有任何内容会隐藏在移动设备上。 以下是一些可以帮助您的教程：

• 如何在 WordPress 中创建响应式导航菜单
• 响应式网页设计的 7 个最佳实践技巧
• 在 WordPress 中使用响应式图像

4.使用响应式插件

插件为您的 WordPress 站点添加功能，因此它们并不总是在前端以可视方式添加任何内容。 但如果他们确实向您的网站添加了物理元素（如小部件或 CTA 按钮），请确保它在所有屏幕尺寸上都能很好地缩放，或者至少让您可以选择在较小的屏幕尺寸上禁用它。

例如，侧边栏小部件是桌面站点的绝佳补充，但如果它在移动设计中占主导地位或不按比例缩小，则不会带来非常好的用户体验。

像主题一样，只关注插件的特性，并在购买前尝试阅读评论或找到演示。 每当您激活一个新插件时，请记住对您的网站进行快速质量检查，以确保它在不同屏幕尺寸之间正确缩放。

只要您拥有在移动设备上运行良好的响应式主题和插件，您的网站就可以很好地显示在较小的屏幕上。

5.避免在移动设备上添加弹出窗口

如果您正在尝试使用您的 WordPress 网站构建电子邮件列表，我猜您的网站上有多种选择加入。 大多数电子邮件选择加入表单在移动设备上工作得很好（假设它们可扩展且易于使用）。

然而，弹出窗口是一个不同的野兽。 谷歌已经开始惩罚具有侵入性插页式广告的网站，也就是覆盖网站内容的选择加入。 这包括弹出窗口（无论是立即显示还是在用户访问网站一段时间后显示）以及用户在访问页面内容之前必须关闭的任何其他类型的选择加入。 你可以在这里阅读谷歌对此事的所有立场。

为了让您的 WordPress 网站保持移动友好并遵循最佳实践，请避免在您的移动设计中使用弹出窗口。 你如何去做取决于支持你选择加入的服务，但大多数供应商应该有一个选项来禁用移动设备上的侵入性弹出窗口。

6. 为响应式媒体制定策略

无论您是在使用投资组合网站、每日博客还是电子商务网站，响应式难题的一个重要部分就是考虑您网站上的媒体。 主页上的大背景图片在台式机上可能看起来不错，但如果不能正确缩放，它可能会丢失所有上下文并导致手机上的观看体验不佳。 那么响应式媒体的第一条规则是什么？ 想想事情是如何扩展的。

如果缩放实际上不是您网站的最佳解决方案，您还可以考虑在您的网站加载到移动设备上时隐藏某些元素。 这将有助于简化体验并让用户更快地访问最重要的内容。

最后，您还需要牢记要包含在站点中的媒体的文件大小。 这不仅会改善移动体验，还会改善桌面加载时间！ 媒体文件通常是网站上最大的文件之一，这使得它们成为加载栏和漫长等待时间的原因。 为了帮助简化您的网站并提高移动性能，请尝试使用尽可能小的文件大小来优化您的图像，同时仍保持您需要的质量。 （例如，您的移动网站加载的图像版本可能比桌面版本小！）

7.优先考虑网站性能

长期以来，页面速度对于您的网站在 Google 桌面搜索中的排名非常重要，但从 2018 年 7 月开始，移动排名现在也是如此。 将其与上面的统计数据相结合，超过 60% 的互联网搜索使用移动设备，您网站的性能（在每台设备上）现在比以往任何时候都更加重要。

图片是性能方程式的重要组成部分，但您的代码和 WordPress 主机也起着重要作用。

当涉及到您的代码时，请考虑缩小等操作（尤其是在使用自定义主题时）。 清点您网站上安装的所有插件，停用和卸载不再需要的插件。 基本上，您越有条理地保留为您的网站提供动力的元素，您的生活就会越好。

至于您的 WordPress 主机，请确保您使用的是优质合作伙伴，其中包括缓存技术、CDN 和由 Google Cloud Platform 等可靠提供商提供支持的基础架构等服务。 如果您在 WP Engine 上托管您的网站，那么您已经在所有这些领域中设置好了。

随着越来越多的人使用他们的智能手机或平板电脑访问互联网，网站设计者必须进行调整以解决这些使用模式。 那么，您的网站准备好迎接移动访问者了吗？ 您必须更改网站的哪些方面？ 您使用什么工具来创建响应式设计？ 在评论中分享您的经验！

访问 30 多个高级（和移动友好！）主题

使用 WP Engine 托管的 WordPress 并访问 StudioPress 主题和 Genesis Framework，为自己节省一些时间（和金钱！）。 这些主题完全响应且易于自定义，从而在您尝试构建适合移动设备的网站时节省您的时间。 此外，WP Engine 强大的平台将使您的网站性能得到优化，帮助这些页面速度保持快速并使您的网站排名良好。