如何阻止手机主题继承桌面导航菜单？

时间：2014-07-29 作者：speedypancake

更新**********我有一个可行的解决方案，虽然不太理想。

使用内置移动导航按钮的Genesis沙盒子主题，我可以将其设置为使用主导航菜单，这样就可以最小化桌面。

然后我添加了响应菜单插件，它允许我为源代码选择自定义移动菜单。然后，我隐藏了用于桌面的插件，并隐藏了用于手机的Genesis菜单按钮。

将离开几天，然后选择谁获得50分-感谢大家的贡献。。。

试图构建我的网站的移动版本。

2个主题，1个用于桌面，另一个仅用于移动访问者（使用“任何移动主题插件”的移动访问者会自动选择移动主题）。

我已经为wp admin/menu-desktop menu和mobile menu中的每个主题创建了自定义菜单。

激活桌面主题后，我选择桌面菜单作为主要导航。移动主题激活后，我将主导航设置为“移动”菜单。

问题是我必须激活桌面主题才能正常运行。移动访问者确实可以看到其他移动主题，但导航始终遵循桌面主导航的设置。

如何阻止这种情况发生，并强制移动主题始终/仅使用移动导航？

5 个回复

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

经过5天的谷歌搜索、反复试验和无数插件，我终于找到了一个适合我的解决方案。

我又回到了使用桌面和移动访问者的共同主题，但每个人都有自己的自定义菜单。这对我来说很容易，因为我正在试验Genesis框架，他们的“沙盒”儿童主题内置了最小化/移动导航功能。因此，我只需将主选项和移动选项设置为桌面菜单。

为了满足移动访客的需要，我安装了优秀的“响应菜单”插件：https://wordpress.org/plugins/responsive-menu/ 这使您可以选择为其源选择不同的自定义菜单，因此我将其设置为我的移动菜单。

添加响应插件意味着我最终显示了2个导航菜单，因此我使用了一些条件CSS来隐藏桌面上的响应菜单，并隐藏手机的Genesis菜单。

<?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>

单击菜单是响应菜单的div。如果需要，可以通过安装mobble插件更准确地定位“wp\\u is\\u mobile”功能。

我甚至为手机访问者添加了一个页面重定向，将他们带到我编辑的主页：

function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( \'/mobile-home\' ); 
    exit;
    }
}
add_action( \'template_redirect\', \'so16165211_mobile_home_redirect\' );

所以你有了它！这是我刚才可以接受的解决方案。理想情况下，我可以为移动访问者提供选择移动或桌面体验的选项，但这似乎需要设置cookie，这很可能是另一天的问题。

再次感谢所有花时间回应的人，尤其是那些认为有两个不同主题不是最好的方法的人。

SO网友:Pieter Goosen

我确实认为，为移动用户创建单独主题的日子早已过去。通过适当的规划和布局，您可以在台式机、笔记本电脑、平板电脑和移动设备上使用一个主题

我会用一种完全不同的方式来解决这个问题。

首先，我会以这样一种方式创建我的主题，它会根据所需的屏幕大小做出响应，就像正常情况一样。例如，请参见捆绑主题，特别是从2012年开始

使用wp_is_mobile() Conditional标签用于加载仅针对移动电话的功能。我还会为我的移动功能创建一个单独的功能文件，以保持它们的有序性。实例

if(wp_is_mobile()) {
   //DO SOMETHING FOR MOBILE
}else{
  //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
}

仅为您的移动样式创建一个sperate样式表，然后使用wp_is_mobile() 条件标记。只要记住为您的操作添加优先级，这样无论何时加载此样式表，它都会最后加载。

对于菜单，我还将查看捆绑主题。我喜欢214菜单和它的反应。所有这些都是由简单的js从内部函数处理的。js。你可以利用这一点，并在你自己的主题中加以调整。我从未与genesis合作过，所以我不知道他们使用的是什么挂钩。

还有一个好主意this tutorial 来自wpmudev。org，它基本上集成了Alberto Valero的用于jQuery的Sidr插件。我在我的214个儿童主题中的一个中使用了它，效果很好。

这些只是您可以考虑的几个备选方案。我希望这些能帮助你解决问题

SO网友:Brad Dalton

创建2个菜单。一个用于在手机上显示，另一个作为台式机的默认设置。在标题中添加此代码。或者可以在函数文件中使用挂钩。

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( \'theme_location\' => \'mobile-menu\' ) );
} else {
     wp_nav_menu( array( \'theme_location\' => \'desktop-menu\' ) );
}
?>

或者，您可以创建2个自定义菜单并使用以下代码：

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( \'menu\' => \'mobile-menu\' ) );
} else {
     wp_nav_menu( array( \'menu\' => \'desktop-menu\' ) );
}
?>

或者您可以有条件地切换主题：

add_filter( \'stylesheet\', \'wpsites_change_themes\' );
add_filter( \'template\',   \'wpsites_change_themes\' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = \'my-mobile-theme\';
    return $theme;
}

SO网友:The Maniac

有两个主题像你描述的那样运行是很奇怪的，但我想我们可以解决这个问题。

在这两个主题中，无论您的菜单打印在哪里（可能header.php) 您需要一些这样的代码来选择正确的菜单，然后将其打印出来：

$desktop_theme_name = \'Desktop Theme Name\'; // Replace this with the name of the desktop theme
$mobile_theme_name = \'Mobile Theme Name\'; // Replace this with the name of the mobile theme

// Get the current theme\'s information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        \'menu\' => \'Desktop Menu\', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        \'menu\' => \'Mobile Menu\', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}

希望有帮助，祝你好运！

SO网友:Jordan

0down Votei如果有人仍在观看此线程，我已经为此挣扎了一段时间，这些都不起作用。。。我可以用CSS来做！

基本上，在手机和桌面上创建一个包含所有所需项目的巨型菜单。然后，在各自的菜单项上添加类：“hide mobile”和“hide desktop”。

使用此CSS：

@media (min-width: 980px){ .hide-desktop{ display: none !important; } } @media (max-width: 980px){ .hide-mobile{ display: none !important; } }

结束

小码农CODE

如何阻止手机主题继承桌面导航菜单？

相关推荐

我如何利用WP Mobile检测插件中的条件？