17713433920 info@mac163.com
如何在WordPress中添加SuperFish下拉菜单
如何在WordPress中添加SuperFish下拉菜单

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

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

步骤1:下载SuperFish插件

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

下载SuperFish插件
下载SuperFish插件

步骤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个有用的文档页面:


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


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

关闭搜索
购物车
回到顶部