不裝外掛就把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.

大意是說除非你真的要設定子選單最大的寬度，這個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檔來讓你的選單更炫～

感謝你看到這裡，很快就可以離開了，但最好的獎勵行動就是按一下幫我分享或留言，感恩喔～