创建适合移动设备的 WooCommerce WordPress 主题的最佳实践

创建适合移动设备的 WooCommerce WordPress 主题可能很棘手。 当涉及到移动性能时，有很多因素需要考虑，从加载速度到插件再到图像优化。

出于显而易见的原因，WooCommerce 主题必须在移动设备上运行良好； 如果网站在移动设备上使用更具吸引力，电子商务购物者将点击离开。

最重要的是，谷歌使用移动优先索引最佳实践，这意味着他们将在索引和排名方面优先考虑网站的移动版本。 因此，确保您的 WooCommerce 主题尽可能适合移动设备非常重要。

如果您是 WooCommerce 的新手并且想要构建适合移动设备的主题或提高当前主题的移动性能，您可能需要考虑以下几个关键因素。

1.选择响应式主题

就移动性能而言，选择响应式主题至关重要。 如果您有一段时间使用相同的主题，最好使用适合移动设备的测试工具对其进行测试（下一节将详细介绍）。

如果您的 WordPress 或主题版本需要更新，现在是时候了； 即使是微小的调整也可能使您的主题在移动设备上运行更流畅，并可能解决一些您需要注意的小问题。

您应该能够在您的 WordPress 管理菜单中看到它； 转到仪表板 > 更新应该标记您需要安装的任何新更新。 这可能需要一点时间，但确保您的网站顺利运行是值得的。

只需确保您在更新后测试主题，以确保一切正常。

选择新主题：一些技巧

选择一个新主题比听起来要复杂得多！ WordPress 有数以千计的 WooCommerce 主题； 筛选它们确实需要一些时间，但是您可以记住以下几点以使该过程更容易：

• 测试主题以查看它在移动设备大小的屏幕上的表现。 您可以使用演示来执行此操作，让您很好地了解它在较小屏幕上的外观。
• 查看其他用户的评论。 您可以按 Ctrl+F 并输入“responsive”或“mobile”来查看出现的结果。 如果这方面有任何问题，您可以找到更详细的评论。
• 看速度。 同样，查看此处的评论会有所帮助，但您也可以阅读主题描述以确保主题顺利快速地运行。 （我们将在本文后面更详细地讨论速度。有多种方法可以提高现有主题的速度，但最好知道您要付费/安装的新主题是否设计为尽可能快。）

您可以在上面的示例（Presence by WPZoom）中看到您可以在不同的设备上查看主题； 这是确保您的网站在台式机、移动设备和平板电脑上看起来不错的好方法。

文章在下面继续

2.使用移动友好的测试工具

您可以使用适用于移动设备的测试工具（例如来自 Google 的这款免费工具）来测试现有或新安装的主题。 只需将您的网址复制并粘贴到搜索栏中即可。

这将需要一些时间，但它会得出一个结论：要么你会得到一个绿色的勾号，要么得到一个红色的叉号。 如果该工具确定您的网站无法在移动设备上使用，它会告诉您原因（例如，它可能会说“文本太小无法阅读”）。

这意味着您可以进行必要的更改，使您的 WooCommerce 主题易于移动用户浏览。 查看建议的更改，看看您是否可以调整主题以适应它们。 即使是小的修复（比如文本稍微太小）也会对移动用户产生很大的影响！

3.考虑插件

现在您可以开始考虑插件了。 插件可以在桌面上增加很多设计和功能，但这些同样出色的功能可能会在移动设备上引起问题。 因此，无论何时为所选主题安装新插件，都可以预览它在移动设备和桌面设备上的外观。

一些插件专门设计用于帮助提高您网站的性能 - 您可以在我们的必备 WordPress 插件指南中阅读更多相关信息，以增强您的网站以获得最佳性能。

虽然插件过载不是一个好主意（这会导致您的网站速度变慢），但从访问者的角度来看，一些精心选择的插件可以在性能和易用性方面产生巨大差异。

4. 考虑速度

您的 WooCommerce WordPress 主题加载得越快越好！ 如果您的网站需要很长时间才能加载，客户就会转身离去，但深入了解缓慢的加载时间可能需要花费时间和精力。
您可以使用免费工具诚实地评估您的页面加载时间：Google 的 PageSpeed Insights 是一个不错的选择。

将您的 URL 粘贴到搜索栏中将为您提供四个关键领域的详细分类：性能、可访问性、最佳实践和 SEO。

这使您可以进行调整以改进关键区域。 要关注的主要领域是性能（如果您试图提高加载速度）：该领域分解了一些关键因素，以便您可以识别导致加载速度滞后的任何因素。 如果您需要帮助来弄清楚这些指标的含义，Google 拥有包含更多信息的良好知识库。

您还可以找到缓存小部件来提高站点速度，如果您的加载时间太长，这可能是解决方案。
最后，您可以使用付费工具来测试页面速度：例如，Sematext 的 Synthetic 提供网站监控以诊断和标记任何性能问题。 如果您经营的是大型电子商务商店并希望自动收到潜在问题警报，这可能是一个不错的选择。

文章在下面继续

5.优化图像

优化图像也很重要。 例如，一些 WooCommerce WordPress 主题在桌面上看起来很漂亮，但图像需要更好地缩小以适应移动设备。

您可以找到图像优化器插件来帮助解决这个问题——查看我们的 WP Compress Review 了解更多详情。

您可以做两件重要的事情来优化您的移动图像：

• 压缩您的图像– 查看图像的大小，包括您在主题中使用的任何照片。 减小文件大小可能有助于提高桌面和移动性能。 阅读我们的 Optimus Review 以了解更多相关信息！
• 删除不必要的图像——虽然一些以摄影为主的主题看起来很漂亮，但从客户的角度仔细检查是否所有图像都是必需的，这是个好主意。 拆分测试工具可以提供帮助； 您可以在删除一些图像的情况下运行 A/B 测试，以查看它如何改变客户在您网站上的旅程。
• 使用 CDN 加速图像传输——使用内容传输网络服务可以提供帮助。 它通过减少站点服务器的压力来加快页面加载速度。 虽然这涉及一些额外的步骤，但这是值得的。

优化图像可以在速度上产生巨大差异，因此花一点时间浏览现有图像以在不影响质量的情况下尽可能减小文件大小是一项不错的投资。

6. 要避免的一些陷阱

在创建适合移动设备的 WooCommerce WordPress 主题时，您应该避免一些事情：

• 避免在手机上弹出窗口。 对于移动用户而言，弹出窗口可能令人难以置信且难以点击。 如果访问者被弹出窗口轰炸，他们很可能会点击离开。 即使是电子邮件选择加入弹出窗口（非常适合扩展您的电子邮件营销列表）对于移动用户来说也是繁琐和烦人的。
• 仔细检查你的插件。 添加额外内容和动态菜单的插件也需要在移动设备上进行测试：有时，它们在移动设备上的扩展性不佳，并且可能会使较小屏幕上的导航变得令人沮丧。
• 注意你的分析。 如果您关心用户如何与您的新主题互动，请查看参与率：这衡量您的用户如何与您的网站互动以及他们在那里停留的时间。 例如，如果移动用户快速点击离开，他们可能会发现移动体验令人沮丧。
• 记得测试一下！ 当您的主题全部设置好后，请在移动设备上查看。 检查每个页面，从您的产品页面到您的博客。 这些图像看起来还不错吗？ 菜单是否适合触摸屏？

记住 iPad/平板电脑用户。 检查您的网站在平板电脑上的运行情况也是一个好主意：图像是否适当缩小？ 菜单可以在平板电脑大小的屏幕上使用吗？

经常问的问题

在你开始之前，这里有一些你可能想知道的常见问题：

WooCommerce 适合初学者使用吗？

在我们看来，是的。 为 WordPress 安装 WooCommerce 主题确实需要几个步骤； 但是一旦你完成了它，WooCommerce 本身就非常适合电子商务。 它为新店主提供了有用的指南，并且 WooCommerce 界面易于浏览。

运行一个 WordPress 网站需要多少费用？

运行 WordPress 网站的实际成本因您需要使用它的目的而异。 您可以在我们的指南中看到详细的分类：建立一个 WordPress 网站要花多少钱？

本文中提到的一些插件需要额外付费。 因此，虽然 WooCommerce 是免费的，但一些移动优化工具将是一项额外的投资。 （尽管我们认为它们物有所值！）

文章在下面继续

所有 WooCommerce 主题都适合移动设备吗？

不必要。 大多数新主题在设计时都考虑到了移动用户，但一些较旧的主题在移动设备上的运行可能不如在桌面设备上流畅。

WooCommerce 自己的主题 Storefront 设计为适合移动设备使用，因此如果您想保持简单，您可以始终坚持使用 Storefront 并对其进行自定义以适合您的品牌。

创建适合移动设备的主题：关键原则

希望这能帮助您获得一个基本概念，确保您为 WordPress 选择的 WooCommerce 主题在移动设备上运行良好。

需要考虑的关键是速度和导航。 您需要确保您的网站尽可能快地运行，从主页到结帐。

导航是一个很大的因素。 移动设备上任何笨重、难以使用的菜单都会让您的客户感到沮丧，因此在移动设备上测试您的主题至关重要； 桌面上漂亮的菜单在小屏幕上用拇指使用可能会很烦人。

最终，大多数新主题在设计时都考虑到了移动设备，但仍然值得确保您选择的主题适用于所有设备。 从长远来看，这可以提高客户满意度并提高销售额，特别流畅的移动体验甚至可能会吸引客户在未来再次光顾！