当涉及到下拉菜单时，我一直是SuperFish的忠实粉丝。SuperFish jQuery插件不仅超级易于使用和自定义，而且一切都已提供给您，因此您几乎只需要复制代码并将其粘贴到您的设计中即可。

将SuperFish添加到WordPress实际上是一个非常简单的任务，但是对于刚开始的人来说可能会有点困难，否则您可能会以错误的方式进行操作（例如在header.php文件中调用脚本）。因此，以下文章将引导您完成将下拉菜单添加到主题的所有步骤。

步骤1：下载SuperFish插件

第一步是只需访问SuperFish下载页面并下载代码。我建议只下载包含所需内容的.ZIP文件。还有一个Github页面，我建议您添加书签，以防万一您需要任何其他帮助或js脚本有任何问题，可以将其张贴在那儿。

步骤2：将SuperFish CSS和JS添加到主题文件夹

接下来，您将要从zip文件夹中提取内容，并将其上载到您正在处理的主题的文件夹中。

• 将superfish.css的内容复制到您的style.css中
• 将superfish-navbar.css文件的内容复制到主题的style.css文件中–这将为其提供样式，您可以在以后进行编辑
• 将superfish.js和supersubs.jps文件拖到您的主题中-我更喜欢将它们放在名为“ js”的文件夹中

步骤3：启动SuperFish脚本

现在，您已经将所有CSS和JS添加到主题中，您将需要调用JS并启动脚本。首先，我将向您展示如何在functions.php文件中正确调用脚本。最后，我将为您提供应该在header.php中启动脚本的代码。

添加到Functions.php文件中以使脚本入队

// Load superfish scripts
function myprefix_load_superfish_scripts() {

	// load jquery if it isn't
	wp_enqueue_script( 'jquery' );


	// SuperFish Scripts
	wp_enqueue_script( 'superfish', get_template_directory_uri() . '/js/superfish.js' );
	wp_enqueue_script( 'supersubs', get_template_directory_uri() . '/js/supersubs.js' );

}
add_action( 'wp_enqueue_scripts', 'myprefix_load_superfish_scripts' );

注意，我们正在使用get_template_directory_uri（）链接到您的父主题。如果您使用的是子主题，请确保将其更改为get_stylesheet_directory_uri（），它指向您的子主题。

添加以下代码以启动SuperFish脚本

您可以将以下代码添加到functions.php文件中，该文件将通过在结束body标记之前的页面脚注中添加javascript来启动superFish脚本。或者，您当然可以将javascript放在它自己的文件中，并通过上一个函数加载它。

function myprefix_start_superfish() { ?>
	
	<script type="text/javascript">
		jQuery( function( $ ) {
			$( document ).ready( function() {
				$('ul.sf-menu').supersubs( {
					minWidth   : 16, // minimum width of sub-menus in em units
					maxWidth   : 40, // maximum width of sub-menus in em units
					extraWidth : 1   // extra width can ensure lines don't sometimes turn over
				} ).superfish();
			} );
		} );
	</script>

<?php }
add_action( 'wp_footer', 'myprefix_start_superfish' );

步骤4：将sf-menu类添加到WP_Nav_Menu函数

现在，您要做的就是将“ sf-menu ”类添加到导航ul中。这是用于将菜单转换为SuperFish下拉菜单的类。如果您以前在主题中有一个导航栏，则将要删除所有样式，只保留菜单中的php代码（因为您已在步骤2中添加了下拉菜单所需的所有样式）。

在主题标题中的某个位置，或者如果您无法在标题中找到它，请使用任何用于修改主题代码的文本编辑器快速搜索主题文件，并为要更改的菜单找到“ wp_nav_menu”功能。找到后，只需编辑（或添加（如果不存在的话））“ menu_class”参数，使其包含sf-menu类，例如以下示例：

wp_nav_menu( array(
	'theme_location' => 'primary',
	'sort_column'    => 'menu_order',
	'menu_class'     => 'sf-menu',
	'fallback_cb'    => 'default_menu'
) );

现在，如果您是从头开始制作主题，但尚未定义任何菜单区域并将其添加到站点，并且不确定如何操作，请查看WordPress Codex中的以下2个有用的文档页面：

• 注册导航菜单
• wp_nav_menu

---

---

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