移动友好网站的7个WordPress技巧


没有什么比拥有一个美观的桌面网站和一个无法正常运行的移动网站更糟糕的了。

大多数设计修复都很简单,但是如果您希望访问者留在自己的位置,则需要注意

本文将重点介绍七个适合移动设备访问的网站问题并针对这些问题进行修复。

  • 所做的更改未显示在移动设备上
  • 不友好的导航
  • 响应式布局 突然停止工作
  • 图像加载时间过长
  • 最重要的内容并不明显
  • 信息太多
  • 小屏幕数据
  • 移动友好型网站更新未显示

    您刚刚花了很多时间更新您的网站。它们在您的桌面上看起来不错,但无法显示在您的移动设备上。

    最常见的原因之一是缓存。您的移动浏览器可能显示的是您先前下载的旧版网站。另一个原因可能是您的网站保留了页面的旧版本,而不显示更改。

    如果这是问题所在,则需要清除缓存以下载修订版。诸如WP超级缓存W3总缓存WP最快的缓存 之类的缓存插件可以帮助解决此问题。

    <!-
    In_content_1全部:[300x250] / dfp:[640x360]
    ->

    下面是四个步骤,可帮助您刷新网站缓存和浏览器,以使新版本显示在适合移动设备的网站上。

    1. 在您的浏览器上多次刷新浏览器台式机和移动设备。
    2. 在不同的移动设备上测试您的网站。
    3. 使用缓存插件清除您的网站。
    4. 请与您的托管公司联系,以查看是否您的服务器上还有另一个缓存系统需要清除。
    5. 不友好的导航

      创建导航菜单可能很困难在移动设备上效果很好。如果您的网站导航中包含许多项和子菜单,那么在较小的屏幕上挤压所有内容就更加棘手。

      例如,如果您的网站导航中只有三到四个项,则看起来应该不错在移动。但是,如果您有更多的项目和子菜单,它们将相互叠加并显得拥挤。

      以下是为移动友好型网站解决此问题的几种方法:

      • 将导航转变为移动设备的下拉菜单。
      • 将导航菜单显示为块元素,使其垂直显示。
      • 使用菜单图标切换以占用更少的空间。
      • 使用jQuery创建移动导航菜单。
      • 使用“汉堡包”菜单(许多主题都包含在其中,或者您可以 使用插件 。)
      • 响应式布局突然停止工作

        如果您的移动设备友好网站突然停止工作,可能是由于您网站上的插件所致。

        安装新插件或对现有插件进行更新可能会与其他插件发生冲突,从而影响您的响应式布局。

        首先一次停用每个插件,看看是否是原因。不要一次全部停用它们,否则您将不知道哪个插件可能是罪魁祸首。

        <图类=“ lazy aligncenter”>

        代码更改是另一个可能的原因。如果您意外或有意修改了任何代码,请还原原始代码库,然后查看您的响应式网站是否再次开始工作。

        在检查网站的移动响应性时,应始终在移动设备上对其进行测试。

        有时,在调整桌面上的浏览器窗口大小时,它似乎可以工作,但在移动设备上无法正确显示。

        如果HTML标头文件中缺少一行代码,则它会破坏响应式设计。缺少这一行代码会导致您的移动设备假定您正在查看的网站是一个完整的网站。

        呈现的网站将是视口的大小(即用户可见的网页)。

        要修复您的移动友好型网站,请将以下代码行添加到标题部分:

        <元名称=”视口” content =“ width = device-width”>

        <图类=“ lazy aligncenter”>

        有时,更新主题时,此代码可能会消失。

        图像加载时间过长

        优化图像和缩小图像文件大小 很有意义。未优化的大图像可能会降低网页的加载速度。

        WordPress 4.4及更高版本会自动在您的服务器上提供图像的最小版本。

        如果您已经在运行最新版本的WordPress。 ,但您的网站加载速度仍然不够快,您可以:

        • 安装诸如 伪影优化,压缩和延迟加载 之类的插件来调整大小和优化图像
        • 在将图像上传到您的网站之前,请使用压缩和优化工具,例如小小PNG压缩JPEG在线图像优化器
        • 最重要的内容不是很明显

          某些网站加载了很多不必要的内容,以在桌面上打开时会填补空白。

          <在不了解移动用户的情况下开发的网站通常属于此类。这些网站需要花费更多的时间和带宽来加载。

          如果这些页面不是为移动设备设计的,那么如果不进行大量滚动浏览,部分内容可能不会出现在移动设备上。

          在大多数情况下,网页上的元素在计算机上的显示方式与在移动设备上的外观完全不同。

          例如,带有三列的定价页面会同时显示它们

          <图class =“ lazy aligncenter”>

          但是在移动设备上,由于屏幕尺寸较小,因此这些列相互堆叠。这种行为是可以预期的。

          请确保您的定价表在网页上位于顶部位置,以便在移动设备上查看时会首先出现。如果您的桌子上有很多文字,移动用户将不得不向下滚动才能看到它,而可能不会。

          为获得最佳的移动用户体验,请将最关键的内容放在顶部页面的如果用户需要滚动很多滚动才能查看您的内容,则可能不会。

          信息太多

          具有复杂用户站点的网站界面元素(例如表格,多步表单和高级搜索功能)可能会产生差劲的移动用户体验。

          这些元素包含过多的信息,可能会挤满移动屏幕并干扰用户查找信息他们想要的。

          一种方法是从移动用户中删除或隐藏一些内容。但是,对于想要访问这些元素的访问者来说,这不是理想的解决方案。

          为避免此问题,请尽可能优化您的移动友好型网站。另外,在关注网站的核心结构时,请删除所有不必要的元素。

          小屏幕数据

          可以创建具有许多行和列的复杂表在小型移动屏幕上查看时会出现问题。最好的解决方法是使用响应表。

           WP响应表 这样的插件可以使此操作轻松实现。

          与上面的定价表一样,在移动设备上查看时,这些列将堆叠到适合较小的屏幕。

          <图class =“ lazy aligncenter”>

          在移动设备上显示数据的其他方法包括:

          • 创建一个没有网格布局的较小的表格,以避免水平滚动。
          • 将表格的侧面翻转到
          • 将较大的表替换为链接到完整版本的较小的表。
          • 将表转换为饼图。
          • 随着移动设备使用量呈指数级增长,必须通过移动友好版本来优化商务网站。通过执行上述步骤,可以在不牺牲功能的情况下增强用户体验。

            您还应该始终监视站点的性能,并在必要时进行调整以提高性能和用户体验。

            相关文章:


            14.10.2019