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

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily create a mobile-ready responsive WordPress menu.

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

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

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

By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu.

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

Ready? Let’s get started.

准备？ 让我们开始吧。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

方法1：使用插件在WordPress中添加响应菜单 (Method 1: Add a Responsive Menu in WordPress Using a Plugin)

This method is easier and recommended for beginners as it requires no custom coding.

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

In this method, we will be creating a hamburger menu that slides out on mobile screen.

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

First thing you need to do is install and activate Responsive Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, the plugin will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

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

First you need to enter the width of screen at which point the plugin will start showing responsive menu. The default value is 800px which should work for most websites.

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

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

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

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

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

Don’t forget to click on the ‘Update Options’ button to store your settings.

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

You can now visit your website and resize your browser screen to see the responsive menu in action.

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

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

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

方法2：使用插件添加下拉选择菜单 (Method 2: Add a Drop Down Select Menu Using a Plugin)

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

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

First thing you need to do is install and activate the Responsive Select Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

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

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

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

Don’t forget to click on the save all settings button to store your changes.

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

You can now visit your website and resize browser screen to see responsive select menu in action.

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

方法3：创建具有切换效果的移动友好响应菜单 (Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect)

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

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

This method requires you to add custom code to your WordPress files. If you haven’t done this before, then take a look at our guide on pasting snippets from web in WordPress.

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

First you need to open a text editor like notepad and paste this code.

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

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

Now you need to save this file as navigation.js on your desktop.

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

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

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

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

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

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

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

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

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.

现在，我们需要将导航菜单添加到我们的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>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

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

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.

最后一步是添加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;
	}
	
	}

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

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

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

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

方法4：在WordPress中添加一个滑入式移动菜单 (Method 4: Add a Slide-In Mobile Menu in WordPress)

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

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

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

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

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

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

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

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

不要忘了自己的域名，并example.com换成your-theme与实际的主题目录。 将此文件另存为slidepanel.js到您的桌面。

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

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

Once you find an image that you want to use, save it as menu.png.

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

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

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

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

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

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

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

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

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

Add this code to your theme’s functions.php file.

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

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

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

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

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

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

您想用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>

Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu.

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

Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

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

Here is a sample CSS that you can use as an starting point:

这是一个示例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%;
}
} 

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

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

Here is how it looked on our demo website:

这是在我们的演示网站上的外观：

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to add a fullscreen responsive menu in WordPress

我们希望本文能帮助您学习如何创建可用于移动设备的响应式WordPress菜单。 您可能还想看一下我们如何在WordPress中添加全屏响应式菜单的指南

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-create-a-mobile-ready-responsive-wordpress-menu/