php - 在移动设备上隐藏 Wordpress 小部件

Question

我在使用广告时遇到了问题 - 我已将它们放在小部件中，现在该网站的移动版本很糟糕 - 广告对于手机来说太大并且破坏了主题。我现在想出的是这样的：

.mobile #widget{ display: none; }

但问题是，#widget它不起作用，我不知道如何摆脱这样的小部件。如果我错了，请纠正我。

Answer 1

没有看到任何代码或 URL，就不可能告诉您应该使用什么 CSS。但是，我的建议是根本不要使用 CSS，如果用户在移动设备上，就不要将侧边栏写入页面。

我不知道您使用什么来检测移动设备，但这是我过去使用的。不理想，但它在紧要关头完成了这项工作。

在functions.php中，添加：

function mobile_detected($agents)
{
    $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
    foreach($agents as $agent)
    {
        if(strpos($userAgent,strtolower($agent)) !== false)
            return true;
    }
    return false;
}

在您调用侧边栏的主题中：

<?php
$devices = array(
"iphone", "ipod", "ipad",
"android", "windows ce", "windows phone os",
"blackberry", "palm", "symbian", "series60"
);
if(!mobile_detected($devices))
    dynamic_sidebar('Your Sidebar');
?>

Answer 2

您写的内容并没有多大意义，因为您正在编写 CSS，就好像存在这种情况一样：

<div class="mobile">
    <div id="widget">your ad</div>
</div>

这显然是不存在的。

您可以在此处查看主题如何使用来自您网站上的 CSS 文件的 @media 查询来定位移动设备：

http://nix-pix.co.uk/wp-content/themes/alyeska/assets/css/responsive.css

所以，它实际上非常简单——任何你想针对移动设备的自定义样式都可以简单地放在@media 查询中，如下所示：

@media(max-width:480px){
    /* All styles for mobile devices go here. */
}

基本上用简单的英语说的是：“如果设备的视口为 480 像素或更小，请包含此 CSS”——这正在迅速成为针对移动设备的最现代和最流行的方式之一，因为现在有这么多。许多人认为尝试使用 javascript 或带有 PHP 的用户代理来专门针对 iPhone 或 Android 手机等是一种倒退的想法。在我看来，这些方法肯定有其目的，但并不是真正用于如此简单的事情。相反，我们使用 CSS @media 查询来定位不同的设备宽度。

好的，所以现在您要隐藏内容底部的广告区域。使用 Firebug 或 Google Chrome 的 Web 开发工具等工具检查它后，我们可以很快看到它包含在一个名为“main-bottom”的类中——

因为我们知道在 CSS 中当你引用一个类时，我们会在它前面加上一个句点，并且为了隐藏一个元素，我们可以使用display属性，我们现在将它放入我们的 @media 查询中。

@media(max-width:480px){
    .main-bottom {
        display:none;
    }
}

Answer 3

最简单的方法是使用Widget Options Plugin它可以隐藏移动设备和其他设备上的小部件。它在存储库中是免费的：https ://wordpress.org/plugins/widget-options/ 。您可以查看下面的屏幕截图。谢谢！