---
title: "_s(underscores)にsuperfishを設定する"
canonical_url: "https://olein-design.com/blog/setting-superfish-on-underscores"
language: "ja"
date_published: "2014-12-18T13:01:28+09:00"
date_modified: "2014-12-18T13:01:28+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "underscores"
---

# _s(underscores)にsuperfishを設定する

[前回のナビゲーションの装飾](https://olein-design.com/wordpress/css-custom-for-navigation)に続き、今回は**superfish**というjQueryプラグインを設定してみましょう。 ## superfishとは

 MITライセンスのjQueryプラグインになります。主にドロップダウンのメニューを用いる場合に利用されます。 [Superfish - Suckerfish on 'roids](http://users.tpg.com.au/j_birch/plugins/superfish/)[!\[\](http://b.hatena.ne.jp/entry/image/http://users.tpg.com.au/j_birch/plugins/superfish/)](http://b.hatena.ne.jp/entry/http://users.tpg.com.au/j_birch/plugins/superfish/)

 こちらの公式ページにも記載がありますが、superfishの利点は以下のようなところでしょう。 - タッチデバイスのサポート
- ディレイ処理
- アニメーション
- **キーボードアクセシビリティ**

 他にもポイントはありますが、これらが利用する主な目的となっているかと思います。 （この先導入していくのでダウンロードしておきましょう） ## superfishを導入する

 まずは上の公式サイトよりダウンロードしてきましょう。次にファイルを解凍し`dist > js`フォルダ内に`superfish.min.js`というファイルがあるので、こちらをテーマフォルダ内の`js`フォルダにコピーしておきましょう。 ### functions.phpにて外部ファイルの読み込み設定

 [こちら](https://olein-design.com/wordpress/underscores-set-to-2-column-layout)や[こちら](https://olein-design.com/wordpress/fontawesome-on-underscores)でも触っているので詳しくは過去記事をご覧いただきたいですが、外部スクリプトを読み込む場合にはfunctions.phpより読み込み設定を行います。 ```

wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
```

 こちらは`js/navigation.js`を読み込んでいます。これに習って記述していきましょう。 ```

wp_enqueue_script( 'olein-superfish', get_template_directory_uri() . '/js/superfish.min.js', array('jquery'), '20141217', true );
```

 このような記述になると思います。8桁の数字の部分はバージョンナンバーなので日付にしています。また、その後の`true`はフッターでスクリプトを読み込む場合に書きます。ちなみに`false`にするとヘッダーで読み込みます。 ### superfish用設定ファイルを作る

 `js`フォルダ内に新しくjsファイルを作ります。ファイル名はなんでもいいんですが、ここでは`superfish-settings.js`としておきます。そして、このように記述しておきます。 ```

jQuery(document).ready(function($){
  var sf = $('ul.nav-menu');
  sf.superfish(
      delay: 200,
      speed: 'fast'
  });
});
```

 ![underscores_layout_frame_navigation](https://olein-design.com/wp-content/uploads/2014/12/underscores_layout_frame_navigation.jpg) こちらの画像を見ていただくと分かりやすいのですが、ナビゲーション本体は`ul.nav-menu`になります。ですので、`superfish-settings.js`でもその部分をターゲットにして記述しています。 オプションの記述に関してはこちらを参照してください。英語ですが難しい内容ではないので分かりやすいと思います。 [Superfish - Menu Options](http://users.tpg.com.au/j_birch/plugins/superfish/options/)[!\[\](http://b.hatena.ne.jp/entry/image/http://users.tpg.com.au/j_birch/plugins/superfish/options/)](http://b.hatena.ne.jp/entry/http://users.tpg.com.au/j_birch/plugins/superfish/options/)

 そして、この`superfish-settings.js`もfunctions.phpから読み込むように設定しておきます。先ほど記述した読み込み用コードの下にこちらを書き加えます。 ```

wp_enqueue_script( 'olein-superfish-settings', get_template_directory_uri() . '/js/superfish-settings.js', array('olein-superfish'), '20141217', true );
```

 ## まとめ

 これで_s(underscores)へのsuperfish導入は完了したかと思います。ちょっとしたことですが、アニメーションやディレイを組み込むことによって心地よいUIになることもありますし、やりすぎるとユーザーにそっぽ向かれるUIにもなります。色々と細かくオプションや数値を試して、最適と思える設定を見つけてみてください。