如何在WordPress主题中添加幻灯片面板菜单

Recently one of our users asked us how they can replace their navigation menu with a jQuery slide panel menu? Slide panel menu can be used to greatly improve the user experience on mobile sites. In this article we will show you how to add a slide panel menu in WordPress themes.

最近，我们的一位用户问我们如何用jQuery滑动面板菜单替换其导航菜单？ 滑动面板菜单可用于极大地改善移动网站上的用户体验。 在本文中，我们将向您展示如何在WordPress主题中添加幻灯片面板菜单。

Note: This is an intermediate level tutorial and requires sufficient HTML and CSS knowledge.

注意：这是中级教程，需要足够HTML和CSS知识。

用WordPress中的滑动面板菜单替换默认菜单 (Replacing Default Menu With a Slide Panel Menu in WordPress)

The goal here is to show a slide panel menu to users on smaller screens while keeping our theme’s default menu so that the users on laptops and desktops can see the full menu. Before we get started, it is important to know that there are many different WordPress themes, and you will have to deal with a little CSS later on.

这里的目标是在较小的屏幕上向用户显示幻灯片面板菜单，同时保留我们主题的默认菜单，以便笔记本电脑和台式机上的用户可以看到完整菜单。 在开始之前，重要的是要知道有很多不同的WordPress主题 ，稍后您将不得不处理一些CSS。

First thing you need to do is open a plain text editor on your computer, like Notepad, and create a new file. Copy and paste this code:

您需要做的第一件事是在计算机上打开纯文本编辑器(例如记事本)，然后创建一个新文件。 复制并粘贴以下代码：

(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);

Replace example.com with your own domain name, and also replace your-theme with your actual theme directory. Save this file as slidepanel.js on your desktop. This code uses jQuery to toggle a slide panel menu. It also animates the toggle effect.

用您自己的域名替换example.com ，并用您实际的主题目录替换your-theme 。 将此文件另存为slidepanel.js在您的桌面上。 此代码使用jQuery切换幻灯片面板菜单。 它还会设置切换效果的动画。

Open an FTP client like Filezilla and connect to your website. Next, go to your theme directory and if it has a js folder then open it. If your theme directory does not have a js folder, then you need to create one and upload slidepanel.js file into the js folder.

打开FTP客户端(如Filezilla)并连接到您的网站。 接下来，转到您的主题目录，如果它有一个js文件夹，则将其打开。 如果您的主题目录没有js文件夹，那么您需要创建一个并将slidepanel.js文件上传到js文件夹。

The next step is designing or finding a menu icon. Most commonly used menu icon is the one with three lines. You can create one using Photoshop or find one of the many existing images from google. For this tutorial we are using a 27x23px menu icon. Once you have created or found your menu icon, rename it to menu.png and upload it to the images folder in your theme directory.

下一步是设计或查找菜单图标。 最常用的菜单图标是带有三行的菜单图标。 您可以使用Photoshop创建图片，也可以从Google找到许多现有图片之一。 在本教程中，我们使用27x23px菜单图标。 创建或找到菜单图标后，将其重命名为menu.png并将其上传到主题目录中的images文件夹。

The next step is to enqueue javascript file for slide panel in WordPress. Basically just copy and paste this code in your theme’s functions.php file.

下一步是将WordPress 文件放入WordPress幻灯片面板。 基本上，只需将此代码复制并粘贴到主题的functions.php文件中。

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

Now that everything is setup, you need to modify your theme’s default menu. Usually, most themes display navigation menus in theme’s header.php file. Open header.php file and find the line similar to this one:

现在已经完成所有设置，您需要修改主题的默认菜单。 通常，大多数主题在主题的header.php文件中显示导航菜单。 打开header.php文件，找到与这一行相似的行：

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

The goal here is to wrap your theme’s navigation menu with the HTML code to display your slide panel menu on smaller screens. We are going to wrap it in a <div id="toggle"> and <div id="popout">. Like this:

此处的目标是用HTML代码包装主题的导航菜单，以在较小的屏幕上显示幻灯片面板菜单。 我们将其包装在<div id="toggle">和<div id="popout"> 。 像这样：

<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>

Replace example.com with your own domain name and your-theme with your theme directory. Save your changes.

将example.com替换为您自己的域名，将您的主题替换为主题目录。 保存您的更改。

The last step is to use CSS to hide the menu icon for users with larger screens and display it to users with smaller screens. We also need to adjust the position of the menu icon and the appearance of the slide panel. Copy and paste this CSS to your theme’s stylesheet.

最后一步是使用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%;
}
} 

Remember that your theme’s navigation menu could be using different CSS classes, and they may conflict with this CSS style. However, you can troubleshoot these issues by using the Chrome Inspector tool to find out which css classes are conflicting within your stylesheet. Play around with the CSS to match your style and needs.

请记住，主题的导航菜单可能使用了不同CSS类，并且它们可能与此CSS样式冲突。 但是，您可以使用Chrome Inspector工具查找哪些CSS类在样式表中发生冲突，从而解决这些问题。 使用CSS来满足您的样式和需求。

We hope this tutorial helped you add a slide panel menu in WordPress using jQuery. For feedback and questions please leave a comment below and don’t forget to follow us on Google+

我们希望本教程可以帮助您使用jQuery在WordPress中添加幻灯片面板菜单。 有关反馈和问题，请在下面发表评论，不要忘记在Google+上关注我们

翻译自: https://www.wpbeginner.com/wp-themes/add-slide-panel-menu-wordpress-themes/