如何使您的 WordPress 网站对移动设备友好
已发表: 2020-10-02对移动设备友好的 WordPress 网站已成为新常态，这已不是什么秘密，但尽管它们看起来很普遍，但创建一个美观、响应迅速的网站仍然需要一些工作。 本指南将帮助您了解拥有一个适合移动设备的网站的重要性、如何在 WordPress 上构建一个网站，并向您介绍创建响应式网站的最佳工具。
为了使您的 WordPress 网站适合移动设备，您需要：
- 了解为什么响应式网页设计很重要
- 参加 Google 移动设备友好性测试
- 使用响应式 WordPress 主题（或创建您自己的主题）
- 考虑适合移动设备的 WordPress 插件
- 使用适合移动设备的选择加入
- 从响应式媒体的角度思考
- 优先考虑网站性能
准备好？ 让我们潜入吧！
1. 为什么适合移动设备的网站很重要？
2019 年第四季度，61% 的谷歌搜索发生在移动设备上。 这意味着超过一半的人口正在转向手机和平板电脑而不是传统的桌面设备，因此为了跟上他们的步伐，您的网站需要准备好在任何屏幕尺寸上显示。 适合移动设备的设计可带来积极的用户体验，并将帮助您的用户在旅途中找到他们正在寻找的东西。
除了用户体验之外，您的网站应该适合移动设备还有另一个重要原因：谷歌。 从 2015 年（“Mobilegeddon”之年）开始，谷歌对其搜索算法进行了重大改革，以奖励被认为“适合移动设备”的网站。 这一变化归结为一个关键数据点：您的网站是否具有响应性。
这意味着，如果您的网站在移动设备上阅读效果很好，那么它在搜索结果中的表现就会比没有的网站更好。 如果您已经完成了创建适合移动设备的网站的工作，那将是一个非常好的福利！ 但是，如果它不能完全胜任在较小屏幕上显示的任务，它也会损害您网站的流量。
幸运的是，如果您的 WordPress 网站还不适合移动设备，那么有很多工具可以帮助您加快速度并构建一个功能齐全、响应迅速的网站。 第一步？ 对您当前的设计进行基准测试。
2. 参加适合移动设备的测试
您的网站在一台移动设备（例如您自己的个人手机）上可能看起来很棒，但您确实需要在各种屏幕尺寸上对其进行测试，以了解它是否真正响应。 即使您碰巧周围有一大堆旧手机，在每个屏幕上测试它也可能是一个耗时的过程。
为了简化事情，谷歌为我们所有人提供了一个免费的移动友好测试工具，它将告诉您您的网站是否符合“移动友好”的条件。 只需输入您网站的 URL，即可快速评估您网站的移动设计。 如果您的网站针对移动设备进行了全面优化，您将收到一条热情洋溢的小成功消息，如下所示：
如果你看到红色，你有一些工作要做。 （我们将在一秒钟内解决这个问题！）
很漂亮的小工具，对吧？ 好吧，它变得更好了。
对于所有的开发人员，Google 还发布了一个 Mobile-Friendly Test API，允许您使用自动化工具测试 URL。 这样做的好处是您可以快速测试更多页面，但您也可以监控网站上最重要的页面，而无需一直手动转向浏览器工具。 分数！
使用 Google 的移动友好工具对您的网站进行基准测试后，就该开始进行改进了。 让我们从您的 WordPress 主题开始。
3. 使用（或创建）响应式 WordPress 主题
如果您最近安装了一个新的 WordPress 主题，那么您很有可能在这个部门还可以。 如果您的主题已经存在了一段时间，那么可能是时候进行一些更新了。
首先要做的事：仔细检查您的 WordPress 版本和当前主题版本。 如果有待处理的更新，请从这些开始。 我不能代表所有主题，但一些更新将包含适合移动设备的元素，可能足以解决您的问题。 例如，WordPress 4.4 为响应式图像添加了一些非常简洁的功能（您可以在此处阅读所有相关信息）。
如果更新不起作用，那么可能是时候寻找新主题或考虑创建自己的主题了。 让我们探索这两种选择。
最好的移动友好型 WordPress 主题
实际上，现在很多 WordPress 主题都是响应式的——主题可能不太适合移动设备。 话虽如此，在购买主题之前，请仔细检查它是否在任何屏幕尺寸上都能正常显示。 测试演示站点，缩放浏览器窗口，并阅读您可以找到的任何评论，以寻找真实用户的体验。
如果你对你所看到的感到满意，那就去吧！ 但是，如果某些事情看起来不正确，请避开。 即使您认为这是完美的匹配，也有很多 WordPress 主题可供选择，我保证您会找到适合您网站的另一个主题。
如果您正在查看免费主题，请务必查看您自己的内容的外观 - 我相信您知道，事情并不总是看起来完全一样，因此请确保它显示您的内容您在移动设备上想要的方式。
不知道从哪里开始？ 当您在 Flywheel 上托管您的 WordPress 网站时，您将可以通过您的计划免费访问 30 多个高级 StudioPress 主题（包括 Genesis 框架！）。 这些主题具有完全响应性，因此它们在任何设备上看起来都很棒，而且您可以轻松地在它们之间进行切换（而不是被您决定购买的“唯一”高级主题所困扰）。
如何创建自己的响应式 WordPress 主题
如果您宁愿走 DIY 路线来创建一个适合移动设备的网站，请务必从头开始或在测试环境中开始 - 您永远不应该在您的实时网站上进行如此大的更改。
我建议使用 Local 在您的机器上启动本地 WordPress 站点。 这个免费的应用程序可以让您在不破坏您当前网站的同时尝试您的内心内容（这在重新设计时是必不可少的）。 您甚至可以将现有网站导入本地，因此您只需从头开始。
还有一个名为 Live Links 的功能，它会生成一个可共享的本地站点 URL。 这使您可以将其发送给客户或将其拉到手机上，这样您就可以轻松地测试网站在移动设备上的外观。
如果您基于响应式父主题创建子主题，那么您的状态会非常好。 如果您从一个完全空白的状态开始并创建自己的主题，请务必使用媒体查询来建立设计边界，并一次通过一个元素来思考元素。
问问自己图像应该如何缩放，导航应该是什么样子，以及是否有任何内容会隐藏在移动设备上。 以下是一些可以帮助您的教程：
- 如何在 WordPress 中创建响应式导航菜单
- 响应式网页设计的 7 个最佳实践技巧
- 在 WordPress 中使用响应式图像
4.使用响应式插件
插件将功能添加到您的 WordPress 网站，因此它们并不总是在前端添加任何视觉上的东西。 但是，如果他们确实向您的网站添加了物理元素（如小部件或 CTA 按钮），请确保它在所有屏幕尺寸上都能很好地缩放，或者至少让您可以选择在较小的屏幕尺寸上禁用它。
例如，侧边栏小部件是桌面网站的绝佳补充，但如果它主导移动设计或不按比例缩小，则不会带来非常好的用户体验。
像主题一样，只需注意插件的功能，并在购买前尝试阅读评论或找到演示。 并且每当您激活新插件时，请记住对您的网站进行快速质量检查，以确保其在屏幕尺寸上正确缩放。
只要您拥有在移动设备上表现良好的响应式主题和插件，您的网站就会非常适合在较小的屏幕上显示。
5.避免在移动设备上添加弹窗
如果您尝试使用 WordPress 网站构建电子邮件列表，我猜您的网站上有多种选择加入。 大多数电子邮件选择加入表单在移动设备上运行良好（假设它们可扩展且易于使用）。
然而，弹出窗口是另一种野兽。 谷歌已经开始惩罚带有侵入性插页式广告的网站，即覆盖网站内容的选择加入。 这包括弹出窗口（无论是立即显示还是在用户访问网站一段时间后显示）以及用户在访问页面内容之前必须关闭的任何其他类型的选择加入。 您可以在此处阅读有关 Google 对此事的所有立场。
为了让您的 WordPress 网站保持移动友好并遵循最佳实践，请避免在您的移动设计中出现弹出窗口。 您如何进行这将取决于为您的选择提供支持的服务，但大多数提供商应该可以选择禁用移动设备上的侵入性弹出窗口。
6. 为响应式媒体制定策略
无论您使用的是投资组合网站、每日博客还是电子商务网站，响应难题的一个重要部分是考虑您网站上的媒体。 您主页上的大背景图片在台式机上可能看起来很棒，但如果它不能正确缩放，它可能会丢失所有上下文并导致在手机上的观看体验困难。 那么响应式媒体的第一条规则是什么？ 想想事情是如何扩展的。
如果缩放实际上不是您网站的最佳解决方案，您还可以考虑在移动设备上加载您的网站时隐藏某些元素。 这将有助于简化体验并让用户更快地访问最重要的内容。
最后，您还需要记住您网站上包含的媒体的文件大小。 这不仅会改善移动体验，还会改善桌面加载时间！ 媒体文件通常是网站上最大的文件，这使得它们成为加载栏和等待时间长的原因。 为了帮助简化您的网站并提高移动性能，请尝试通过使用尽可能小的文件大小来优化您的图像，同时仍然保持您需要的质量。 （例如，您的移动网站可能会加载比桌面更小的图像版本！）
7. 优先考虑网站性能
长期以来，就您的网站在 Google 桌面搜索中的排名而言，页面速度一直很重要，但截至 2018 年 7 月，移动排名现在也是如此。 再加上上面的统计数据，超过 60% 的互联网搜索使用移动设备，您的网站性能（在每台设备上）现在比以往任何时候都更加重要。
图像是性能等式的重要组成部分，但您的代码和 WordPress 主机也起着重要作用。
当涉及到您的代码时，请考虑诸如缩小之类的操作（尤其是在使用自定义主题时）。 清点您网站上安装的所有插件，并停用和卸载不再需要的任何插件。 基本上，您将网站的元素保持得越有条理，您的生活就会越好。
至于您的 WordPress 主机，请确保您使用的是优质合作伙伴，其中包括缓存技术、CDN 等服务，以及由谷歌云平台等可靠提供商提供支持的基础设施。 如果您在 Flywheel 上托管您的网站，那么您将处于所有这些领域。 此外，我们甚至还提供了 Performance Insights 插件，可帮助您在故障排除方面更进一步，以确保您的网站在每台设备上都处于最佳状态。
随着越来越多的人使用他们的智能手机或平板电脑访问互联网，网站设计师必须调整以解决这些使用模式。 那么，您的网站准备好迎接您的移动访问者了吗？ 您必须更改网站的哪些方面？ 您使用什么工具来创建响应式设计？ 在评论中分享您的经验！
访问 30 多个高级（并且适合移动设备！）StudioPress 主题
通过使用 Flywheel 托管并访问 StudioPress 主题和 Genesis 框架，为自己节省一些时间（和金钱！）。 主题完全响应且易于定制，在尝试构建适合移动设备的网站时节省您的时间。 此外，Flywheel 强大的平台将使您网站的性能保持飞速发展，帮助这些页面速度保持快速并让您的网站排名良好。
本文最初发表于 22-17-2017。 上次更新时间为 2020 年 10 月 2 日。