如何使用 Mobilook 添加 WordPress 的移动视图

您是否曾经想在开发过程中通过移动设备查看您的网站? 如果是这样,您会很高兴知道您可以使用 Mobilook 插件。 有了它,您可以模拟您的网站在各种流行的屏幕尺寸(包括智能手机和平板电脑)上的外观。

这是一个有用的工具,可以帮助您判断网站的移动端。 自从谷歌开始移动优先索引以来,这已经成为一个强制性的问题。 本质上,谷歌会首先索引你网站的移动版本,因此如果它不好,你的排名就会下降。

今天,我将演示如何使用 Mobilook 执行适合移动设备的测试。

为什么移动用户很重要

截至 2021 年 5 月,移动用户占 55.31% 的互联网流量. 而且它一直在逐年增长。 因此,移动用户是大多数网站所有者最重要的用户群。

并且由于谷歌移动优先索引计划,网站开发人员不能忽视它。

Google 会进行一项测试,以确定您的网站是否适合移动设备使用,如果通过了,您就可以开始使用了。 因此,即使你有一个很棒的桌面网站,你也可能会因为糟糕的移动版本而削弱你的排名。 但搜索引擎只是关注的一半。

您还必须考虑移动访问者本身。

让我们面对现实吧,2021 年没有响应的移动网站是不可接受的。 事实上,你今天真的必须不遗余力地制作一个反应迟钝的网站。 这包括难以点击的按钮、太大而无法查看的图像以及难以忍受的缓慢加载时间。

糟糕的移动体验将确保客户在移动设备或桌面设备上避开您的网站。

如何使用 Mobilook 创建网站的移动视图

第 1 步:安装 Mobilook

移动浏览器 是 Google DEVTOOL 的扩展,可让您检查您的页面在最流行的设备上的响应速度。 它设置简单,并且在发现问题方面非常有效。 还值得注意的是插件的 Pro 版本。

有了它,您实际上可以运行 Google 移动优化器测试,它可以让您准确查看 Google 如何查看页面。 它会告诉您他们是否认为该页面适合移动设备。 查看您的网站是否达标非常有用。

首先单击插件并选择左侧管理面板上的添加新选项。

添新

在可用的搜索框中搜索 Mobilook。

移动浏览器

找到 Mobilook 插件并点击“立即安装”按钮并激活插件以供使用。

现在安装

第 2 步:与 Mobilook 连接

激活后,系统会询问您是否希望 Mobilook 开始优化您的响应页面。 建议单击“允许并继续”按钮。 但是,您可以暂时跳过此操作,稍后再执行,因为本教程将假定您已授予权限。

允许

然后,您必须检查与您的管理员帐户关联的电子邮件,然后单击验证链接。

验证链接

这将带您回到 WordPress,您将看到激活过程已完成。 您现在可以使用该插件了。

第 3 步:配置设置

在左侧管理面板上,单击设置并选择 Mobilook 选项。

设置

该插件的免费版本允许您启用或禁用某些功能。 其中包括三星 Galaxy S9 格式、iPhone 6/7/8 格式、Google Pixel 2 格式和 Facebook 调试器。 默认情况下,所有这些都已启用并建议保持启用状态。

要关闭它,只需单击“启用”按钮即可禁用它们。

启用

您可以在下面打开和关闭几个 PRO 功能,但只有升级后才能使用它们。 本教程将只处理免费版本。

第 4 步:WordPress 中的移动视图

完成设置后,是时候最终在 WordPress 中使用移动视图了。 这可以直接从任何帖子或页面上的编辑器访问。

转到 WordPress 中的任何帖子或页面,然后向下滚动到 Mobilook 部分。

Mobilook 部分

在顶部,您可以选择在哪个设备上查看您的帖子或页面。 在此旁边,您可以查看屏幕的尺寸。

笔记: 在免费版本中,只有前三个选项可用。

选择设备

单击“旋转”按钮可在纵向(垂直)或横向(水平)视图之间切换。

旋转

在本节的底部,您将找到进一步帮助您识别移动问题的工具。 其中包括 Facebook Debugger、Linkedin Debugger、Google Mobile-Friendly Tool 和 Viewport Opt(移动 SEO)。

只有 Facebook 调试器工具是免费的。 它允许您识别与 Facebook 上的博客文章预览相关的任何问题。 如果您经常使用 Facebook 分享帖子,这是一个有用的工具。

恭喜您安装并学习使用 Mobilook 插件。

替代工具

许多 WordPress 开发人员可能不喜欢为此目的使用插件。 幸运的是,有很多免费工具可供考虑使用。

这里有一些最好的:

Chrome 开发者工具

Chrome 开发者工具

Chrome 开发者工具 是您应该利用的另一个很棒的免费资源。 有了它,您可以模拟任何网站在移动设备上的样子。 您甚至可以通过将光标配置为更大的圆形(如手指)来模拟使用网站。

因此,您不仅可以查看您的网站,还可以测试它的运行方式。 而且您不受设备的限制。 相反,您可以手动将尺寸输入到工具中。

因此,您实际上可以使用此响应式网站测试器测试任何设备的可视尺寸。

谷歌移动友好测试

谷歌移动友好

尽管 谷歌移动友好测试 不会为您提供网站的完整移动视图,但它确实会告诉您一些对成功至关重要的事情。 这就是 Google 对您网站的看法。

它会告诉您该页面是否适合移动设备。 如果不是,Google 的工具将提供原因说明。

是的,这与 Mobilook 专业版中包含的测试相同。 它本身就是一个免费工具,为开发提供了很大的优势。

我不能只使用自己的智能手机吗?

绝对地! 事实上,这是一个很好的测试。

但是,并非每部智能手机的尺寸都相同。 在一台设备上进行测试的最大问题之一是开发人员倾向于只考虑该选项。 相反,您需要考虑所有可能的屏幕尺寸。

虽然平板电脑构成了最小的流量,但值得注意的是,它们比智能手机大得多,同时也有各种尺寸。 因此,在面向更多受众进行开发时,单个智能手机并没有太大帮助。

响应式设计是唯一的选择

有一些好消息,默认情况下,WordPress 中的几乎所有内容都是响应式的。 因此,无论如何,您的网站在任何设备上都应该看起来很棒。

测试很重要的原因是有些插件不是原生响应的。 虽然它们现在很少见,但它们存在,它们会削弱你的排名。 还有一些自定义选项有助于改善移动体验。

例如,WordPress 中最常见的一种方法是禁用移动设备上的侧边栏。 屏幕不够大,不足以保证每个页面上都存在侧边栏。

您觉得 Mobilook 使用起来有多容易? 您认为 WordPress 应该默认内置移动视图吗?

查看  如何在 WordPress 中删除不需要的访问的 Banhammer

类似文章