尘风 菜单

固定连接:

如何隐藏WordPress小部件在移动设备

分类:WordPress
发表评论 • 999 次围观

隐藏WordPress小部件

之前,我们写了关于如何隐藏WordPress小部件在特定页面。现在要告诉大家如何在移动设备上隐藏WordPress小部件。如果你真的想要一个很好的用户体验给网站读者,那么在此强烈建议花些时间真正看看你网站的移动布局,很可能是非常混乱。你现在可以轻松地解决这个问题,通过下面的教程可以做到隐藏任何WordPress小部件在任何设备中!

示例:我的网站上有两个通讯小工具,一个在侧边栏,一个在页脚。这很没有必要在移动设备上显示它们,在这样的小型设备上,如果你的站点打开速度较慢,或者读者在网络信号不强的环境下半天打不开你的网站,这可能会很容易流失读者继续等待的心。

所以我选择隐藏页脚小部件。

步骤1

首先你需要安装一个名为ZigWidgetClass的免费WordPress插件。(有一个替代的插件Widget CSS Classes,这个教程也应该与它有关,但是这个插件最近好像buggy了,所以在这里推荐本站当前使用的)。

步骤2

现在我们需要为class添加一些自定义CSS,此过程需要使用媒体查询。我建议在您的主题的自定义CSS面板中添加自定义CSS。如果你所使用的主题没有此功能,则可以使用这个免费的插件:Custom CSS Manager

现在,将以下代码添加到主题自定义CSS中:

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}

这样就会自动隐藏小部件在480px及以下分辨率的任何屏幕上。

注意上面命名的类名称:hide_on_mobile

步骤3

如何隐藏移动设备上的WordPress小部件

步骤4

现在我们去选择想要隐藏的小部件,并输入我们之前做的类名称:hide_on_mobile到小部件顶部的“CSS Classes”框中。

这个类框是用之前安装的ZigWidgetClass插件创建的,并且在所有小部件上可用。确保点击小部件上的“保存”。

如何隐藏移动设备上的WordPress小部件

就是这样!

该小部件将不再在移动设备上显示。

如果您想要更高级的查询标准设备的媒体查询,您可以为不同的设备创建其他类名称。例如,使用上面的类,我们创建的小部件仍然会显示在Ipad上,但也许你不想让小部件显示在任何小于桌面或笔记本电脑上。可以很简单地使用额外的类名称和媒体查询。

来源:How to Hide WordPress Widgets on Mobile Devices

  • 文明上网,礼貌发言!可使用HTML代码/超链接。