17713433920 info@mac163.com
wordpress动态

您是否要创建可移动的响应式WordPress菜单？在许多网站上，移动用户已经超过了台式机用户。添加移动响应菜单使用户更容易浏览您的网站。在本文中，我们将向您展示如何轻松创建可用于移动设备的响应式WordPress菜单。

这是一个深入的教程。我们将为初学者展示插件方法（无编码），并为更高级的用户展示编码方法。

在本教程结束时，您将学习如何创建幻灯片式移动菜单，下拉式移动菜单和切换式移动菜单。

如何创建支持移动设备的wordpress菜单
如何创建支持移动设备的wordpress菜单

准备？让我们开始吧。

方法1：使用插件在WordPress中添加响应菜单

这种方法比较简单，建议初学者使用，因为它不需要自定义编码。

通过这种方法，我们将创建一个在移动屏幕上滑出的汉堡菜单。

您需要做的第一件事是安装并激活响应菜单插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，插件将在您的WordPress管理栏中添加一个名为“响应菜单”的新菜单项。单击它会将您带到插件的设置页面。

首先，您需要输入屏幕的宽度，此时插件将开始显示响应菜单。默认值为800px，适用于大多数网站。

之后，您需要选择要用于响应式菜单的菜单。如果尚未创建菜单，则可以通过访问外观»菜单来创建菜单。有关详细说明，请参见有关如何在WordPress中添加导航菜单的指南。

屏幕上的最后一个选项是为当前的非响应菜单提供CSS类。这将允许插件在较小的屏幕上隐藏您的无响应菜单。

不要忘记单击“更新选项”按钮来存储您的设置。

现在，您可以访问您的网站并调整浏览器屏幕的大小，以查看响应式菜单的作用。

响应菜单插件带有许多其他选项，可让您更改响应菜单的行为和外观。您可以在插件的设置页面上浏览这些选项，并根据需要进行调整。

方法2：使用插件添加下拉选择菜单

添加响应菜单的另一种方法是添加下拉选择菜单。此方法不需要任何编码技能，因此建议初学者使用。

您需要做的第一件事是安装并激活“ 响应式选择菜单”插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问外观»响应选择来配置插件设置。

您需要向下滚动到“激活主题位置”部分。默认情况下，该插件在所有主题位置均处于激活状态。您可以通过有选择地为特定主题位置打开它来更改它。

不要忘记单击“保存所有设置”按钮来存储您的更改。

现在，您可以访问您的网站并调整浏览器屏幕的大小，以查看正在响应的选择菜单。

方法3：创建具有切换效果的移动友好响应菜单

在移动屏幕上显示菜单的最常用方法之一是使用切换效果。

此方法要求您向WordPress文件添加自定义代码。如果您以前从未这样做过，请查看我们的有关在WordPress中从网络粘贴代码片段的指南。

首先，您需要打开一个文本编辑器（如记事本）并粘贴此代码。

( function() {    var nav = document.getElementById( 'site-navigation' ), button, menu;    if ( ! nav ) {        return;    }
    button = nav.getElementsByTagName( 'button' )[0];    menu   = nav.getElementsByTagName( 'ul' )[0];    if ( ! button ) {        return;    }
    // Hide button if menu is missing or empty.    if ( ! menu || ! menu.childNodes.length ) {        button.style.display = 'none';        return;    }
    button.onclick = function() {        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {            menu.className = 'nav-menu';        }
        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {            button.className = button.className.replace( ' toggled-on', '' );            menu.className = menu.className.replace( ' toggled-on', '' );        } else {            button.className += ' toggled-on';            menu.className += ' toggled-on';        }    };} )(jQuery);

现在，您需要将此文件另存为navigation.js在桌面上。

接下来，您需要打开FTP客户端以将此文件上传到/wp-content/themes/your-theme-dir/js/WordPress网站上的文件夹。

将您的主题目录替换为当前主题的目录。如果您的主题目录没有js文件夹，则需要创建它。

上传JavaScript文件后，下一步是确保您的WordPress网站加载了此JavaScript。您将需要在主题的functions.php文件中添加以下代码。

wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

现在，我们需要将导航菜单添加到我们的WordPress主题中。通常，导航菜单会添加到主题header.php文件中。

<nav id="site-navigation" class="main-navigation" role="navigation">            <button class="menu-toggle">Menu</button>            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?></nav>

我们假设您的主题定义的主题位置称为主要位置。如果不是，请使用WordPress主题定义的主题位置。

最后一步是添加CSS，以便我们的菜单使用正确的CSS类进行切换，以便在移动设备上查看时起作用。

/* Navigation Menu */.main-navigation {    margin-top: 24px;    margin-top: 1.714285714rem;    text-align: center;}.main-navigation li {    margin-top: 24px;    margin-top: 1.714285714rem;    font-size: 12px;    font-size: 0.857142857rem;    line-height: 1.42857143;}.main-navigation a {    color: #5e5e5e;}.main-navigation a:hover,.main-navigation a:focus {    color: #21759b;}.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {    display: none;}
.main-navigation ul.nav-menu.toggled-on,.menu-toggle {    display: inline-block;}
// CSS to use on mobile devices
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,    .main-navigation div.nav-menu > ul {        border-bottom: 1px solid #ededed;        border-top: 1px solid #ededed;        display: inline-block !important;        text-align: left;        width: 100%;    }    .main-navigation ul {        margin: 0;        text-indent: 0;    }    .main-navigation li a,    .main-navigation li {        display: inline-block;        text-decoration: none;    }    .main-navigation li a {        border-bottom: 0;        color: #6a6a6a;        line-height: 3.692307692;        text-transform: uppercase;        white-space: nowrap;    }    .main-navigation li a:hover,    .main-navigation li a:focus {        color: #000;    }    .main-navigation li {        margin: 0 40px 0 0;        margin: 0 2.857142857rem 0 0;        position: relative;    }    .main-navigation li ul {        margin: 0;        padding: 0;        position: absolute;        top: 100%;        z-index: 1;        height: 1px;        width: 1px;        overflow: hidden;        clip: rect(1px, 1px, 1px, 1px);    }    .main-navigation li ul ul {        top: 0;        left: 100%;    }    .main-navigation ul li:hover > ul,    .main-navigation ul li:focus > ul,    .main-navigation .focus > ul {        border-left: 0;        clip: inherit;        overflow: inherit;        height: inherit;        width: inherit;    }    .main-navigation li ul li a {        background: #efefef;        border-bottom: 1px solid #ededed;        display: block;        font-size: 11px;        font-size: 0.785714286rem;        line-height: 2.181818182;        padding: 8px 10px;        padding: 0.571428571rem 0.714285714rem;        width: 180px;        width: 12.85714286rem;        white-space: normal;    }    .main-navigation li ul li a:hover,    .main-navigation li ul li a:focus {        background: #e3e3e3;        color: #444;    }    .main-navigation .current-menu-item > a,    .main-navigation .current-menu-ancestor > a,    .main-navigation .current_page_item > a,    .main-navigation .current_page_ancestor > a {        color: #636363;        font-weight: bold;    }    .menu-toggle {        display: none;    }         }

现在，您可以访问您的网站并调整浏览器屏幕的大小，以查看正在使用的响应式切换菜单。

故障排除：根据您的WordPress主题，您可能需要调整CSS。使用检查元素工具来找出与主题冲突的CSS。

方法4：在WordPress中添加一个滑入式移动菜单

添加移动菜单的另一种常用技术是使用滑入式面板菜单（如方法1所示）。

方法4要求您将代码添加到WordPress主题文件中，但这只是实现方法1相同结果的另一种方式。

首先，您需要打开一个纯文本编辑器（如记事本），并将以下代码添加到空白文本文件中。

(function($) {$('#toggle').toggle(     function() {        $('#popout').animate({ left: 0 }, 'slow', function() {            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');        });    },     function() {        $('#popout').animate({ left: -250 }, 'slow', function() {            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');        });    });})(jQuery);

不要忘记用您自己的域名和your-theme实际主题目录替换example.com 。将此文件另存为slidepanel.js您的桌面。

现在，您将需要一个用作菜单图标的图像。最常使用汉堡图标作为菜单图标。您会从不同的网站上找到大量此类图像。我们将使用Google Material Icons库中的菜单图标。

找到要使用的图像后，将其另存为menu.png。

接下来，您需要打开FTP客户端客户端并将slidepanel.js文件上传到/wp-content/your-theme/js/文件夹。

如果您的主题目录没有JS文件夹，那么您需要创建tit，然后上传文件。

之后，您需要将menu.png文件上传到/wp-content/themes/your-theme/images/文件夹。

文件上传后，我们需要确保您的主题加载了刚添加的JavaScript文件。我们将通过排队JavaScript文件来实现此目的。

将此代码添加到主题的 functions.php文件中。

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

现在，我们需要在主题的header.php文件中添加实际代码，以显示导航菜单。您应该查找类似于以下代码：

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

您想用HTML代码包装现有的导航菜单，以在较小的屏幕上显示幻灯片面板菜单。

<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div><div id="popout"><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?></div>

请注意，主题的导航菜单仍然存在。我们只是将其包装在触发触发面板菜单的HTML周围。

最后一步是添加CSS以在较大的屏幕上隐藏菜单图像图标。您还需要调整菜单图标的位置。

这是一个示例CSS，您可以将其用作起点：

@media screen and (min-width: 769px) { #toggle {display:none;}
}
@media screen and (max-width: 768px) { #popout {position: fixed;height: 100%;width: 250px;background: rgb(25, 25, 25);background: rgba(25, 25, 25, .9);color: white;top: 0px;left: -250px;overflow:auto;}

#toggle {float: right;position: fixed;top: 60px;right: 45px;width: 28px;height: 24px;
}
.nav-menu li { border-bottom:1px solid #eee; padding:20px;width:100%;}
.nav-menu li:hover { background:#CCC;}
.nav-menu li a { color:#FFF;text-decoration:none;width:100%;}}

根据您的WordPress主题，您可能需要调整CSS以避免冲突。

微信二维码

微信扫描二维码联系我们！
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答：WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等！

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部