如何将移动优先,性能导向的WordPress主题整合在一起[第2部分]

如何将移动优先,性能导向的WordPress主题整合在一起[第2部分]

如何将移动优先,性能导向的WordPress主题整合在一起[第2部分]
СОДЕРЖАНИЕ
02 июня 2020

如果您向下滚动以查看此处存储的是什么,您可能想知道1-5点发生了什么.


嗯,对了,要找到答案,您应该看看这个迷你系列的第一部分.

简而言之,我们在这里为您提供有关 如何为WordPress构建高性能的移动主题. 乍一看似乎不像,但实际上挑战比大多数人想象的要大.

毕竟,人们普遍认为,您只需要使主题具有响应性,当然,它是针对移动设备进行优化的,对吧?好吧,不完全是。因此,事不宜迟,让我们回到正题.

对于第1部分,请参见此处:如何将移动优先,性能导向的WordPress主题整合在一起[第1部分]

6.为所有移动浏览器设计

令人惊讶的是,一段HTML代码根据其所运行的网络浏览器的行为而异。这适用于移动和台式计算机。但是对于移动设备来说可能更多,因为我们有数百种不同的设备和屏幕规格需要处理.

因此,在处理主题时,请务必记住以下几点:

  • 在进行过程中在所有主要浏览器上测试您的工作-尽早进行此操作将使故障排除变得更加容易,而不是在已经完成整个主题后就开始进行浏览器测试,
  • 尽可能多地使用设备,并查看主题在设备上的行为(如果可能,尝试使用不同的屏幕尺寸,分辨率和比率).

7.用户体验很重要

在移动设备上,人们与网站的互动方式与在桌面设备上的互动方式截然不同.

这听起来很基础,但让我举一个简单的例子。当某人在其台式机上寻找披萨店时,他们可能会对他们正在结帐的餐厅的许多细节感兴趣。例如,菜单,图库,联系方式等内容.

但是,如果他们通过移动设备访问同一网站,则可能只关心一件事-如何到达该地点以及拨打多少电话进行预订.

归结为,当您为移动设备构建主题时,该设计应使网站所有者能够将更多注意力放在对移动访问者至关重要的特定元素上.

最简单的方法是通过精心设计的小部件区域,这些小部件区域显示在主页上,并保留在屏幕可见区域的顶部(也就是使其保持在折叠上方)。.

在移动设备上时,人们几乎没有时间去寻找所需的信息。这就是为什么良好的移动设计应能有效地使此信息可访问的原因.

8.少即是多

越少越多的概念就可以轻松地应用于主题开发中的大多数场景,而当涉及到移动主题时,这意味着出色主题与一般主题之间的区别.

这是您可以事半功倍实现的目标:

  • 为品牌元素留出空间. 很明显,网站徽标的空间很重要。但是,它仍然不如实际内容重要,因此请确保不要让徽标占据折叠上方的大部分空间.
  • 介绍可访问的菜单。菜单一直是手机上的问题。一方面,网站需要菜单。但是另一方面,即使是简短的菜单(只有四个菜单项)也可以轻松在大多数移动设备上用完两行文本,从而将内容推到页面的下方。解决此问题的方法如下: (1)如果菜单适合单行文本,则正常显示;(2)如果菜单不适合,则将其下拉.
  • 摆脱不重要的菜单。我敢说,大多数情况下,页脚菜单不会给移动访问者带来任何价值。在桌面设备上,它可以作为一种万能菜单,访问者可以在其中找到所有其他页面的链接,但是在移动设备上,几乎没有人会使用它的原因。考虑在手机上查看主题时完全摆脱它.
  • 小心其他网站功能。在新的WordPress主题中引入自定义功能时,存在无数种可能性。您可以实现图像滑块,社交媒体集成,自定义画廊等功能。但是你应该吗?尽管这些功能创意很棒,但它们可能给移动用户带来一些问题。如果要确保您的主题在大多数平台上都能正常运行,请使用本机 wp_is_mobile() 功能。它将使您能够区分移动访问者和桌面访问者,因此您可以简化前者的界面以避免任何问题.

9.仅加载必要的文件

如今,人们可以通过各种各样的移动设备访问网络,因此,不可避免地,其中一些设备将非常过时,并且将无法支持现代网络功能。因此,您应始终检查执行给定功能所需的库或模块.

最好的方法之一就是通过类似的解决方案 现代化. 简而言之,它是一个JavaScript库,可检测用户浏览器中的HTML5和CSS3功能。它允许您根据默认情况下是否在浏览器中包含给定功能来编写条件代码。然后,如果有需要,可以导入所需的库.

现代性

但是Modernizr并不是所有解决方案。以下是一些其他需要牢记的准则:

  • 通常,请记住不要导入对于主题功能绝对不是必需的库。库和外部脚本越多,最终站点的加载时间就越长(尤其是在移动设备上).
  • 始终尝试在HTML结构的末尾而不是在开头加载JavaScript文件.
  • 尝试 减少DOM元素的数量 您的HTML结构使用.
  • 分别为每个页面加载CSS文件和JavaScript。例如,如果您只有一个特定页面上需要一个CSS文件,请在条件语句中使用is_page()函数并将样式仅排入该页面.

10.在测试服务器上执行速度测试

在开发的开始阶段拥有本地测试服务器就足够了,但是您将很快需要引入更高级的测试设置.

事实是,您将无法确定主题的优化程度,除非将其安装在少数测试环境中并查看其在现实生活中的效果.

在保持较低成本的同时,您可以通过在两个廉价的共享托管帐户上安装主题来实现此目的(因为大多数最终用户可能仍会使用这些主题)。然后,您可以使用以下工具运行各种测试:

  • PageSpeed见解. 由Google构建的工具。它将为您提供有关移动和台式机性能的良好数据,以及有关如何使性能更好的一些技巧.
  • Pingdom网站速度测试. 该工具将为您提供加载站点所需的各个脚本/文件需要多长时间的完整明细.
  • 幽灵实验室. 非常方便的工具,可同时针对Web和移动设备进行同步浏览器测试.
  • Mobitest的移动性能测试. 使您可以在实际的移动设备上而不只是在通用的模拟移动环境中测试站点.
  • 浏览器堆栈. 使您可以即时访问每种流行的移动和桌面浏览器的每个版本。有了这个工具,您不必担心在过时的浏览器中主题会是什么样子,只需单击几下即可生成屏幕截图.

页面速度

总结了我们的10个步骤指南,以构建移动优先,性能导向的WordPress主题。希望您能从中获得一些不错的主意,并帮助您将下一个主题变成真正的性能怪兽!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector