如何阻止小工具在移动站点上显示？

时间：2012-10-12 作者：paradroid

在我的主站点上，我使用了侧栏中的搜索小部件。

然而，我使用的移动主题(minileven) 已经在其菜单栏中内置了搜索框。由于小部件的原因，这将导致侧栏中出现第二个搜索框（显示在帖子内容之后）。

如何阻止搜索小部件出现在移动站点上？

这是的代码sidebar.php 从移动主题：

<?php
/**
 * The Sidebar containing the main widget area.
 *
 * @package Minileven
 */
?>
        <?php if ( is_active_sidebar( \'sidebar-1\' ) ) : ?>
                <div id="secondary" class="widget-area" role="complementary">
                        <?php dynamic_sidebar( \'sidebar-1\' ); ?>
                </div><!-- #secondary .widget-area -->
        <?php endif; ?>

或者，最好不要使用搜索侧栏小部件，将搜索框硬编码到主站点主题中？WordPress主题经常这样做吗？（我计划公开发布我制作的WordPress主题）。

5 个回复

最合适的回答,由SO网友:Phantasmix 整理而成

添加类。使用属性隐藏display: none; - 仅为移动视口指定，不在桌面样式中指定，根据需要将类分配给您的小部件或整个侧栏

SO网友:Johannes Pille

向移动设备/平板电脑/小屏幕上要隐藏的元素添加类：

<?php if ( is_active_sidebar( \'sidebar-1\' ) ) : ?>
    <div id="secondary" class="widget-area mobile-hide" role="complementary">
    <?php dynamic_sidebar( \'sidebar-1\' ); ?>
        </div><!-- #secondary .widget-area -->
<?php endif; ?>

然后使用主题样式表中的媒体查询来隐藏它们：

/* change screen width to your liking */
@media handheld, only screen and (max-width: 799px) {
    .mobile-hide {
        display: none;
        visibility: hidden;
    }
}

顺便提一下，这个问题是WPSE材料的边缘问题，在SO处可能会被问得更好，因为它可能已经被回答了很多次：）

SO网友:kaiser

最简单的是使用WordPress内置的API函数：

向…问好wp_is_mobile()!

// Example
if (
    ! wp_is_mobile()
    AND is_active_sidebar( \'sidebar-1\' ) 
) :
    ?>
    <div id="secondary" class="widget-area" role="complementary">
        <?php dynamic_sidebar( \'sidebar-1\' ); ?>
    </div><!-- #secondary .widget-area -->
    <?php
endif;

SO网友:Jeffrey Carandang

最明显的答案是使用WordPress插件。你可以查看我的这个插件：Widget Options for WordPress 在存储库中免费提供：https://wordpress.org/plugins/widget-options/ 并且可以在移动设备和其他设备上轻松隐藏小部件。您可以查看下面的屏幕截图，了解它是如何集成的。

或者，您可以使用自定义CSS。只需确保您知道小部件ID，并在您的样式中添加类似的内容。css

@media(max-width:480px){
    .widget#text-12 {
        display:none;
    }
}

SO网友:Aram Sahradyan

您需要检查客户端发送的头，例如USER\\u AGENT

<?php
$iphone = strpos($_SERVER[\'HTTP_USER_AGENT\'],"iPhone");
$android = strpos($_SERVER[\'HTTP_USER_AGENT\'],"Android");
$palmpre = strpos($_SERVER[\'HTTP_USER_AGENT\'],"webOS");
$berry = strpos($_SERVER[\'HTTP_USER_AGENT\'],"BlackBerry");
$ipod = strpos($_SERVER[\'HTTP_USER_AGENT\'],"iPod");

$mobile = false;

if ($iphone || $android || $palmpre || $ipod || $berry == true) 
{ 
   $mobile = true;
}
?>

然后只需在IF条件中添加$mobile，如

<?php if ( is_active_sidebar( \'sidebar-1\' ) && $mobile == false) : ?>
   <div id="secondary" class="widget-area" role="complementary">
      <?php dynamic_sidebar( \'sidebar-1\' ); ?>
   </div><!-- #secondary .widget-area -->
<?php endif; ?>

希望这有帮助

结束

小码农CODE

如何阻止小工具在移动站点上显示？

相关推荐

如何/在哪里填充全局变量$wp_REGISTERED_WIDGETS？