如何使 WordPress 网站移动响应
已发表: 2023-02-12由于大量用户主要在移动设备上浏览，因此响应式网站现已成为行业标准。 为了说明这种影响有多深，谷歌等行业巨头现在在搜索排名中奖励适合移动设备的网站，以帮助推动更多网站迎合非桌面设备的需求。
简而言之，响应式网站在所有平台上使用相同的站点代码，但无论查看媒体如何，都会为每种体验提供优化。 因此，建立一个响应式网站可能意味着重建你的整个设计，或者只是对你现有的网站做一些调整。
在本文中，您将了解如何使用响应式设计使 WordPress 网站适合移动设备。 我们还将解释响应能力对搜索引擎优化 (SEO) 的重要性。 让我们开始吧！
WordPress 对移动设备友好吗？
WordPress 是一个内容管理系统 (CMS)，可让您设计网站的前端以满足您的具体要求。 这意味着它可以很容易地变得适合移动设备。
自 2011 年以来，响应式默认主题已经可用。许多第三方主题现在也提供开箱即用的响应式设计。 那些没有的通常在许多其他领域已经过时。
什么是响应式设计？
让我们介绍响应式设计将如何应用于您的 WordPress 网站。 响应式设计是一种组织网站内容的方式，因此它可以动态响应其显示的屏幕大小。 这意味着在智能手机上的用户体验与在笔记本电脑上一样好。
为了实现这种跨设备的出色体验，设计人员将通过站点的 CSS 创建流畅的内容网格并将灵活性编码到图像中，以便重新排列 HTML 以直接响应屏幕的大小和分辨率。
如果您想要一个很好的示例，请在新窗口中打开 Mashable.com（假设您还没有使用移动设备）。 到达那里后，调整浏览器窗口的大小，使其越来越小，然后观察网站如何相应地重新排列自身
当您缩小窗口时，图片和内容块会根据设计者创建的流动网格竞相适应越来越小的窗口。 在最小的情况下，您只剩下 Mashable 网站在 iPhone 上的样子。 它很漂亮，也很容易阅读。 再次打开窗口，他们的反应是跑回他们的“桌面”配置。
该网站会自行重新排列，因为有 CSS 媒体查询会根据正在查看该网站的设备（在本例中为浏览器窗口）的大小对页面应用不同的规则。 HTML 保持不变，只是由 CSS 重新排列。 CSS 规则可用于重新排列网站上的所有内容，包括根据设备的分辨率提供各种尺寸的图像。 当您想专门为 iOS 设备提供视网膜增强图像时，这真的很酷。
移动应用程序与响应式网站
选择应用程序还是响应式网站归结为网站目的。 大多数网站都可以适应可适应设备的响应式设计。 当您的用户想要在他们的移动设备上使用与完整网站提供的不同的非常特定的功能时，移动应用程序就会发挥作用。 您的银行可能会提供移动应用程序，因此您可以在星巴克排队快速查看余额。 Facebook 和 Twitter 还调整了其应用程序中的功能以适应移动设备的使用。
仅当您的用户需要手机的一组特定功能，而不是他们需要您的主网站的功能时，才需要考虑使用本机应用程序。
响应式站点的性能注意事项
响应式设计会影响您网站的整体性能。 从后端处理的角度来看，加载大量 CSS 和各种尺寸的图像以响应设备尺寸可能代价高昂。 作为评估响应式设计的一部分，将性能作为一项功能进行优先排序非常重要。 用户仍然希望移动网站速度慢一点，但如果他们试图打开您的网站给朋友或他们的约会对象看，他们不会原谅他们，而且他们不得不等待几秒钟以上。
从技术角度来看，将您的网站交付到使用蜂窝数据的移动设备时，您从一开始就会有 0.5 秒的障碍。 例如，在最佳条件下，在 4G 上获取 40KB 需要 700 毫秒。 网络延迟和情况变化只会增加您的加载时间。 您无法控制蜂窝网络变量，因此从一开始就以性能作为一项功能来构建响应式站点至关重要。
确保您已完成以下操作以确保您的网站针对移动设备进行了优化。
- 优化您的图像：自动检测设备的屏幕尺寸以创建、缓存和交付正确的图像尺寸。
- 减少 HTTP 请求：尽量减少需要使用的 CSS 和 JavaScript 的数量，然后缓存其他所有内容。
- 有条件地加载资产：大型社交媒体按钮、图像等非常适合大型设备，但不会影响小型设备的用户体验。 计划您的设计以仅加载绝对必要的内容。
- 延迟加载：如果你可以在最重要的页面元素之后加载某些资产，尤其是 JavaScript，那就去做吧。 当您的用户首先使用了他们想要的内容时，其他资产就会加载。
您的 WordPress 网站需要响应吗？
越来越多，这个问题的默认答案是肯定的，特别是响应式 WordPress 主题的广泛可用性。 如果您的网站准备重新设计，或正在设计中，那么无论用户使用何种设备，都必须为他们提供高质量的体验。
考虑到这一点，我将提出一些问题来问你自己和你的团队，以评估你的 WordPress 是否应该设计为响应式的。
- 您网站的用例是什么？ 移动消费会很重要吗？ 很有可能，这个问题的答案是“是的，而且每年都在增加”。 会有例外，但不会很多。
- 谁是你的用户？ 他们的技术越多，越前沿，他们就越有可能期望为他们关联的每个品牌提供一个响应式网站。
- 你有预算吗？ 这是一个很大的。 响应式站点最初的构建成本要高一些，但构建单个响应式站点比计划构建站点的两个独立版本，然后管理两个版本的维护要便宜。
- 你准备好学习一种新型的设计了吗？ 响应式设计引入了许多新概念和理解数字内容的方法。 与一个不仅能设计出漂亮的东西，还能一路教育你的设计团队合作是很重要的。
创建响应式 WordPress 网页设计
现有的静态设计通常可以转换为响应式主题。 以下是整个转换过程中需要考虑的一些要素：
- 默认浏览器缩放
- 流体元素宽度和高度
- 图片优化
- 特定于设计的断点
- 移动设备的独立响应式菜单
您还应该在多个设备上测试更新的设计，并在测试中考虑额外的元素，例如响应表。 然而，让 WordPress 响应的最简单方法是从一开始就选择一个预构建的响应主题。
选择合适的 WordPress 主题
在您开始搜索今天可用的 10,000 多个 WordPress 主题之前，最好先列出您希望您的站点具有的功能并将该列表用作起点。
如果您不确定要寻找的功能类型，可以坚持使用一些基准来帮助您缩小范围：搜索引擎优化 (SEO) 和快速页面加载时间（无论设备如何）是任何主题都应该有两件事。
虽然有很多 WordPress 主题没有内置此功能，但使用具有这两种功能的主题将为您的网站带来更好的最终用户体验。
例如，WP Engine 的高级 WordPress 主题套件都是针对搜索引擎优化和移动响应的，这意味着它们都可以在任何设备上快速加载。 这些漂亮的主题适用于各种用例，各种类型和规模的企业都在使用它们来提升他们的在线形象。
每个 WP Engine 计划还包括对这些主题的访问，这意味着 WP Engine 客户可以免费使用所有这些主题。
移动 WordPress 插件
移动电话为诸如推送通知和在慢速连接上持续加载等功能开辟了很多潜力。 然而，虽然有一些解决方案可以帮助您将网站转变为移动网络应用程序并将移动友好概念提升到一个新的水平，但许多解决方案仍处于开发和测试阶段。
这意味着您可能缺少某些您期望的功能。 但是，有许多移动 WordPress 插件可以帮助您以各种方式改进您的网站。
1.喷气背包
虽然有许多可用的解决方案，但 Jetpack 插件是一个非常受欢迎的选项。 您可以在插件目录中找到它，但它也有用于在您的站点上创建简单移动主题的选项。
Jetpack 最好的优点之一就是它维护得很好。 这意味着将经常更新以确保其安全性和功能性。 它也是您能找到的功能最丰富的工具之一。 基本插件是免费的，并且有很多选项。 缺点是功能太多，界面一开始可能看起来很混乱。
此外，如果您想要每日备份、自定义主题和 SEO 工具，则需要购买 Jetpack 的高级版本。 根据您的需要，您可以获得个人使用的高级插件，每年 39 美元，顶级插件每年 299 美元。
2.WP触摸
此外，您可以探索 WPtouch，这是一个流行的插件，可以从您现有的网站创建移动网站。 使用此插件的主要好处之一是您可以自定义移动版本，而无需中断或更改您的原始网站。
免费版也有相当强大的功能。 但是，如果您正在寻找不同的外观和感觉，则必须购买专业版。 专业版定价计划起价为每年 79 美元，企业级许可最高可达每年 359 美元。
3. WordPress 手机包
虽然 WordPress Mobile Pack 尚未使用最新版本的 WordPress 进行测试，但它是一个用于从现有网站创建渐进式 Web 应用程序 (PWA) 的流行插件。 这意味着您网站的用户将获得“类似应用程序”的体验，而无需您投入资源为应用程序商店编写可下载的应用程序。
使用此插件，您将能够向用户推送横幅消息，提醒他们将您的网站添加到他们的主屏幕的选项。 然后您的页面将非常快速地缓存和加载。 此插件的基本功能是免费的，但您必须购买专业版才能访问更多主题、自定义选项以及同步某些内容的能力。
该插件的专业版有三个层级可供选择。 Freelancer 套餐起价为每年 99 美元，可用于三个域。 价格等级最高的是 VIP 选项，10 个域许可证每年 499 美元。
响应图像
自 4.4 版以来，WordPress 默认提供特色响应式图像。 但是，特别是对于使用旧代码的网站，您可以将一个简单的片段添加到样式表中，以确保图像在小型设备上看起来永远不会太大：
img {
max-width: 100%;
height: auto;
}
虽然有很多方法可以确保最佳的响应式图像性能，但此代码段可确保您的所有图像都响应式作为基准。
最后，大多数图像都适合包含在响应式站点中，尽管可扩展性应该是一个因素。 例如，如果您包含一张包含大量文字的图片，则可能难以在移动设备上阅读。 在这种情况下，您最好选择不同的图像，或者提供一种独立于图像阅读文本的方式。
响应式菜单
关于响应式菜单的创建，有两种主要的思想流派：
- 制作适用于所有尺寸的菜单。
- 创建两个菜单：一个用于大屏幕，一个用于小屏幕体验。 一次只会显示一个，具体取决于所使用的屏幕尺寸。
一刀切的方法最适合较小的菜单，因为为移动可读性优化 CSS 只需要一些简单的调整。 在这种情况下，无论设备大小如何，菜单始终对用户可见。
但是，如果菜单太大而无法在移动设备上轻松缩小，您可能需要第二个专用于较小屏幕的版本。 在这种情况下，大菜单仅在大屏幕上可见，而移动菜单图标则出现在小屏幕上。
这种方法的一个典型例子是汉堡包菜单图标，当点击它时，它会将完整的移动菜单滑入视图。 您还可以使用 WordPress 的各种插件来帮助您创建响应式菜单。 让我们看看三个选项。
1.优步菜单
您可以尝试的一个选项是 UberMenu。 只需 25 美元，您就可以获得未来的更新和六个月的支持。 UberMenu 可以帮助您创建完全响应、触摸友好的菜单。 不幸的是，除非您的主题是特定于 UberMenu 的，否则您可能必须进行一些手动更改才能使您的主题正常工作。
2. Max Mega 菜单
另一个选择是 Max Mega Menu 插件。 此工具在 WordPress 插件目录中有一个免费选项，可与您现有的菜单一起使用，将它们转换为“大型”菜单：
免费版还具有许多移动菜单功能，例如对触摸屏的原生支持。 要访问更多字体和移动切换选项，您需要查看三个定价层之一。 该插件的高级版起价为每年 29 美元，多站点许可的价格最高为每年 99 美元。
3.响应式菜单
另一个评价良好且流行的插件是响应式菜单插件，您可以查看它以使菜单对移动设备友好。 该解决方案有超过 150 个不同的自定义选项，所有选项都在一个易于使用的界面中。
您可以从插件设置页面灵活地更改菜单的几乎每个方面。 但是，如果您正在寻找动画和更多字体，则必须查看响应式菜单插件升级。
该插件的免费版本可能会带来您需要的功能，因为选项列表非常广泛。 如果升级，您可以获得 29 美元的单站点许可证，或 99 美元的无限制许可证。 插件费用是一次性费用，您将获得终身免费更新。
响应表
默认情况下，表格占用与其内容一样多的空间（或更多）。 这可能会导致超宽的表格破坏移动布局。
不幸的是，当缩小以适应移动页面的宽度时，充满内容的表格变得难以阅读。 响应式设计并不仅仅是将数据压缩到一个小屏幕上。 相反，它是关于使一切都对用户友好，而不管设备如何。
对于快速而肮脏的解决方案，您可以使用此 CSS 代码段为您的表格添加基本的响应能力：
table {
width: 100%;
border-collapse: collapse;
}
但是，您不必就此打住。 除非您有小表，否则我们建议根据它呈现的内容类型优化每个表。 根据表格中的数据，您可以选择多种响应选项以获得最佳可读性。
但是，如果您正在寻找响应式表格的插件解决方案，那么您很幸运！ 有多种选择，但我们将特别推荐三种。
1. 平板按压
首先，TablePress 插件是一个流行、维护良好且评价很高的选项。 您将能够使用短代码创建和嵌入漂亮的表格。 然而，为了实现真正的响应式表格，您需要安装 TablePress 扩展。 虽然这些也是免费的，但建议您向开发人员捐款。
2. WP 表生成器
如果您正在寻找五星级的拖放式表格构建器选项，WP Table Builder 可能适合您。 一个有点新但很受欢迎的插件，它的拖放界面使您可以轻松地为您的网站创建响应式表格。
这也是一个完全免费的插件。 这个选项唯一真正的缺点是它目前只有五个数据选项。 您在某种程度上受限于文本、图像、按钮、列表和星级。
3.wpDataTables
我们推荐检查的第三个插件是 wpDataTables。 使用此工具，您可以从现有的 Excel、CSV、PHP 或其他数据快速创建表格和图表。 这意味着您可以获取大量数据集并在您的网站上访问它们。
该插件还支持 Gutenberg，一旦您在插件设置中对其进行了自定义，就可以轻而易举地将表格添加到您网站的页面和帖子中。 但是，您会受到此插件的免费版本的限制。
例如，除非升级，否则您将无法制作基于 MSQL 查询的表格或从 Google 电子表格中提取信息。 高级版的基本定价层起价为每年 59 美元，开发包的最高价为每年 249 美元。
添加多语言功能
随着 WordPress 在世界范围内的采用率持续上升，它引发了对多语言功能的日益增长的需求，它允许根据用户的位置将网站翻译成当地语言。
这种类型的功能对于在多个国家/地区拥有客户的企业来说意义重大，而使用 WordPress，将其添加到您的网站并不像您想象的那么具有挑战性。 事实上，它可以通过安装 Weglot 等插件来实现，它可以让您在几分钟内让您的网站成为多语种——无需代码。
Weglot 还与所有 WordPress 主题和插件兼容，这意味着它适用于您最终使用的任何主题，并且不会导致您的其他插件出现问题。 当添加到 WP Engine 的高级 WordPress 主题之一时，Weglot 可帮助网站所有者构建一个 SEO 友好的移动响应网站，可以用任何语言访问。
查看本指南以了解更多信息，并访问 WP Engine 以了解我们的不同计划以及我们的 WordPress 数字体验平台附带的其他特性和功能。
SEO 的移动响应能力
简而言之，适合移动设备的网站会在自然搜索结果中受到 Google 的奖励。 2015 年至 2016 年间，排名算法进行了多次更新以支持响应式网站。 值得注意的是，由于速度对移动用户的用户友好性起着巨大的作用，这也有助于提高搜索引擎排名。
当然，快速加载的响应式网站依靠一流的托管才能取得成功。 当您选择 WP Engine 等优质托管公司时（我们提供标准的 PHP 7 和更高级别计划的免费内容交付网络），您会发现加载时间更快，操作更流畅。
使用 WP Engine 进行响应式构建
在我们依赖移动的世界中，致力于响应式网站应该是一个优先事项。 有很多东西需要跟踪，但在 WP Engine，我们可以帮助您找到最好的 WordPress 开发人员资源和适用于移动用户的高响应主题。
此外，我们为您的网站提供多种计划和解决方案。 我们将帮助您在我们的数字体验平台上进行响应式构建，您不必担心因为屏幕尺寸而失去访客！