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

Question

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

.mobile #widget{ display: none; }

但事实是，#widget不起作用，我不知道怎么可能摆脱这样的小部件。如果我错了，请纠正我。

Answer 1

如果没有看到任何代码或网址，就无法告诉您应该使用哪些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. */
}

基本上用简单的英语说的是：“如果设备的视口是480px或更低，请包含此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/。您可以查看下面的屏幕截图。谢谢！