隐藏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
步骤4
现在我们去选择想要隐藏的小部件,并输入我们之前做的类名称:hide_on_mobile到小部件顶部的“CSS Classes”框中。
这个类框是用之前安装的ZigWidgetClass插件创建的,并且在所有小部件上可用。确保点击小部件上的“保存”。
就这样!
该小部件将不再在移动设备上显示。
如果您想要更高级的查询标准设备的媒体查询,您可以为不同的设备创建其他类名称。例如,使用上面的类,我们创建的小部件仍然会显示在Ipad上,但也许你不想让小部件显示在任何小于桌面或笔记本电脑上。可以很简单地使用额外的类名称和媒体查询。