不装外挂就把Superfish选单加到WordPress中

这几天ㄚ琪在看工作达人的选单时就觉得很不顺眼，那个揪家人四加一游珠江三角洲的“三角洲”就这样跟泰马星打架了，之前知道是我的布景主题里有superfish.js跟superfish.css，但是没有多研究，后来实在是看不过去了，只好探索一下这个档案，才发现了Superfish是Suckerfish-样式选单的jQuery加强型外挂。我查到范例中有这样的说明：

Important note: Unless you really need the submenus to have a max-width, this plugin is no longer needed. The CSS that comes with v1.6.0+ includes a couple of lines that emulate this behaviour.

[adsense][/adsense]

大意是说除非你真的要设定子选单最大的宽度，这个Supersubs外挂已经不再需要，现在Superfish V1.6.0+以后的CSS版本有很多行程式可以模拟这个范例的行为。看来是只要我更新版本就行了，好的，更新完之后，工作达人的选单长这样：

多了背景色，还有揪家人四加一游珠江三角洲不会跟泰马星，但是泰马星却跟勇闯韩国并列，很酷的排列方式，朋友喜欢这样的改变吗？欢迎来信留言。

如果你的部落格还没用这样的选单，来，ㄚ琪不藏私来教你。

首先确定你有权限可以修改你的布景主题，之后安照下列步骤操作：

1. 上传Superfish档案到你的WordPress的布景主题中
2. Enqueue JavaScript程式码
3. 将选单的类别或id挂到Superfish
4. 修改选单的CSS

步骤一：上传Superfish档案到你的WordPress的布景主题中

1. 从Superfish网站下载完整的Superfish压缩档 ，解压缩到硬碟中。
2. 在你的布景主题资料夹中，建立一个新资料夹叫做 js ，假如原来没有才这样做，如果有的话就跳过此步骤。
3. 复制在/superfish-master/dist/js的档案hoverIntent.js、 superfish.js 跟 supersubs.js 到 js 资料夹中，在我的经验中hoverIntent.js 跟 supersubs.js，已经不需要了，你可以试试只放 superfish.js看看。

步骤二：Enqueue JavaScript程式码

1. 开启你的布景主题的 functions.php 档案。
2. 寻找使用wp_enqueue_script这个函式来载入布景主题的CSS 档案且/或 Javascript 档案的部份。
3. 在这个部份里面，enqueue这三个JavaScript档案像这样，当然如果你只想用superfish.js而已，就弄一航就好了。
   1 2 3 4

   // Loads the Superfish CSS and JavaScript. wp_enqueue_script( ‘hoverintent’, get_template_directory_uri() . ‘/js/hoverintent.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘supersubs’, get_template_directory_uri() . ‘/js/supersubs.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘superfish’, get_template_directory_uri() . ‘/js/superfish.js’, array(), ‘20150311’ );

   注意： ‘20150311’ 只是日期而已，并不重要，可以参阅简体版的wp_enqueue_script有更多的说明。

步骤三：将选单的类别或id挂到Superfish

接下来的步骤要看你要采用下面的方案A在你的布景主题的主要选单中使用自家的css，还是要使用方案B采用Superfish 一齐随付的css档，如果你喜欢自己的选单样式就选方案A，但如果你的布景主题没有下拉选单的样式或是你喜欢有新的局面就选方案B吧，这里有一些Superfish选单范例。

不管是哪种方案，你需要建立一个可以设定 SuperFish组态的JavaScript档案，这个档案定义你的选单行为，参阅这页有更多关于Superfish选单的选项。

1. 建立一个新的文字档，存在你的布景主题的 js 资料夹中，档名应该是 superfishconfig.js。
2. 贴上下面的程式码 superfishconfig.js：
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   jQuery(function($){     $(document).ready(function(){ // superFish        $(‘ul.nav-menu’).supersubs({ animation: {opacity:‘show’},   // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open animationOut: {opacity:‘hide’},   // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed speedOut: ‘fast’, delay: 200 })     .superfish({ animation: {height:‘show’},   // slide-down effect without fade-in animationOut: {height:‘hide’},   // slide-down effect without fade-in cssArrows: false,               // set to false if you want to remove the CSS-based arrow triangles delay: 200               // 1.2 second delay on mouseout }); // call supersubs first, then superfish      }); });

3. 存档
4. Enqueue这个档案到你的functions.php 中加到其他的Superfish Javascripts程式码后。
   1 2 3 4 5

   // Loads the Superfish CSS and JavaScript. wp_enqueue_script( ‘hoverintent’, get_template_directory_uri() . ‘/js/hoverintent.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘supersubs’, get_template_directory_uri() . ‘/js/supersubs.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘superfish’, get_template_directory_uri() . ‘/js/superfish.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘superfish-config’, get_template_directory_uri() . ‘/js/superfishconfig.js’, array(), ‘20150311’ );

方案 A – 你想要使用自己的选单样式

1. 使用html的检验器像是Firebug或是浏览器内建的开发人员工具，来决定你想要使用e Superfish 的ul类别事什么，不用管ID。
   这看起来像这样：
   1	<ul id=“menu-your-menu-name” class=“the-menu-class” >

   在Twenty Twelve布景主题中是这样：

   1	<ul id=“menu-main” class=“nav-menu”>

   注意类别的名称。

2. 在 superfishconfig.js 中改变  $(‘ul.nav-menu’).supersubs({  为你的选单类别，如果你使用Twenty Twelve 就像这样。
   将 $(‘ul.nav-menu’).supersubs({改成   $(‘ul.the-menu-class’).supersubs({.
   再说一次，只有使用Twenty Twelve才是这样改，请它的请举一反三。

方案 B – 你喜欢用Superfish附赠的样式来开始

1. 开启你的 header.php 档。
2. 寻找挂住主要选单的函式，有点像这样的函式：
   1	<?php wp_nav_menu( array( ‘theme_location’ => ‘main-menu’ ) ); ?>

3. 你会使用到WordPress的函式叫做‘menu_class’ 来给予Superfish 的选单类别叫 sf-menu。
   在 ‘theme_location’ => ‘main-menu’后增加 ‘menu_class’ => ‘sf-menu’。
   就像这样：
   1	<?php wp_nav_menu( array( ‘theme_location’ => ‘main-menu’, ‘menu_class’ => ‘sf-menu’ ) ); ?>

   不要忘记逗号，如果‘menu_class’ => ‘the-menu-class’已经有了，就确定改成 ‘sf-menu’ 。

4. 将superfishconfig.js 的  $(‘ul.nav-menu’).supersubs({  改成 $(‘ul.sf-menu’).supersubs({
5. 如果你还没有css的资料夹，就件一个吧。
6. 将 /superfish-master/dist/css 的superfish.css 复制到 css 资料夹中。
7. 最后，你需要 enqueue superfish.css 在你的functions.php 档案中，就在上面的enqueued Superfish Javascripts程式码前加下面的程式码：
   1	wp_enqueue_style( ‘superfish-styles’, get_template_directory_uri() . ‘/css/superfish.css’ );

   现在看起来就像这样：

   1 2 3 4 5 6

   // Loads the Superfish CSS and JavaScript. wp_enqueue_style( ‘superfish-styles’, get_template_directory_uri() . ‘/css/superfish.css’ ); wp_enqueue_script( ‘hoverintent’, get_template_directory_uri() . ‘/js/hoverintent.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘supersubs’, get_template_directory_uri() . ‘/js/supersubs.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘superfish’, get_template_directory_uri() . ‘/js/superfish.js’, array(), ‘20150311’ ); wp_enqueue_script( ‘superfish-config’, get_template_directory_uri() . ‘/js/superfishconfig.js’, array(), ‘20150311’ );

   可以参阅wp_enqueue_style有更多英文资讯。

步骤 四： 修改选单的CSS

现在你可以修改CSS档案或是Superfish 附的CSS档来让你的选单更炫～