如何在移动设备上隐藏WordPress小工具(初学者友好)

05/25/2024

你是否希望为手机用户隐藏特定的WordPress小工具?

小工具通常显示在网站的侧边栏或页脚上。有时,一个小工具在桌面电脑或笔记本上看起来不错,但在较小的移动设备上效果可能不佳。

在本文中,我们将向你展示如何在不编写任何代码的情况下,隐藏移动设备上的WordPress小工具。

为什么要在移动设备上隐藏WordPress小工具?

你的网站在全尺寸电脑屏幕上可能看起来很棒,但这并不一定意味着它在较小的屏幕上也会看起来很好。

即使当你查看你的WordPress站点的移动版本时,布局没有立即看起来很混乱,也一定要滚动到最底部查看。

在大多数响应式WordPress主题中,小工具会根据访问者的屏幕尺寸出现在不同的位置。通常,WordPress主题会将小工具移动到页面的最底部。

让我们看看一个例子。

下图显示了一个网站在桌面电脑上的外观。可以看到,搜索小工具出现在侧边栏的顶部。

然而,当在智能手机上查看时,那个侧边栏的小工具会出现在内容的下方。

这意味着访问者需要滚动到页面的最底部才能搜索你的博客文章、产品或其他内容。

更糟糕的是,有时这种行为会导致两个相同的小工具并排出现。

例如,许多WordPress博客所有者在侧边栏和页脚中都放置了联系信息小工具。如果这些小工具移动,移动访问者可能会看到相同的小工具并排出现。

话虽如此,让我们看看你如何能够轻松地在移动设备上隐藏一个WordPress小工具。

如何在移动设备上隐藏WordPress小工具

隐藏移动用户小工具最简单的方法是使用Widget Options插件。这个插件让你可以根据日期、用户角色、设备等显示不同的小工具。

首先,你需要安装并激活Widget Options插件。有关详细信息,请参阅我们关于如何安装WordPress插件的分步指南。

激活后,你需要进入WordPress仪表盘的外观 » 小工具页面。

在这个页面,你会看到你添加到你WordPress网站的所有小工具。

要编辑一个小工具,只需点击它的名字。

在小工具的设置中,你会看到一些新的部分,这些部分是由Widget Options插件添加的。

首先,点击小手机图标,并确保‘隐藏/显示’下拉菜单显示‘在选中的设备上隐藏’。

然后,简单地选中你希望隐藏小工具的每个设备。

你通常希望勾选‘平板电脑’和‘手机’旁边的框。

然后,点击‘保存’按钮来存储你的更改。

现在,用移动设备访问你的网站。小工具将不再出现在小工具区域。

如何在WordPress中制作小工具的移动版本

有时,你可能希望向移动访客显示一个版本的小工具,而向桌面用户显示另一个版本。

例如,你可能希望在桌面上显示你最近的五篇文章,但在移动设备上只显示三篇,以免屏幕显得过于混乱。

为此,你只需要在你的网站上添加两个单独的最近文章小工具。有关更多信息,请参阅我们关于如何添加WordPress小工具的分步指南。

然后,你可以配置一个小工具在桌面电脑上显示,另一个则在移动设备上显示。

首先,打开你想要向桌面用户显示的小工具。然后,点击小手机图标,并确保‘隐藏/显示’下拉菜单设置为‘在选中的设备上隐藏’。

之后,勾选‘平板电脑’和‘手机’旁边的框。

现在,这个小工具只会出现在使用桌面电脑的访问者面前。

接下来,你可以对这个小工具进行任何更改。例如,我们在‘显示文章数’框中输入‘5’。

完成后,不要忘记按‘保存’按钮保存你的设置。

之后,你可以制作第二个专门用于移动设备的小工具。

简单地重复上述相同的过程,但这次勾选‘桌面’旁边的框以在桌面设备上隐藏小工具。

现在,你可以对你的移动小工具进行任何更改。例如,你可能在‘显示文章数’框中输入‘3’。

像往常一样,完成后点击‘保存’按钮。现在你有了桌面版本和移动版本的同一个小工具。

我们希望本文能帮助你学习如何在移动设备上隐藏WordPress小工具。你可能还想查看我们的网站最有用的小工具列表,或者查看我们的指南,了解如何在特定页面上显示或隐藏小工具。

如果你喜欢这篇文章,欢迎订阅我们的YouTube频道获取WordPress视频教程。你也可以在Twitter和Facebook上找到我们。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>