前回のナビゲーションの装飾に続き、今回はsuperfishというjQueryプラグインを設定してみましょう。
superfishとは
MITライセンスのjQueryプラグインになります。主にドロップダウンのメニューを用いる場合に利用されます。
Superfish – Suckerfish on ‘roids
こちらの公式ページにも記載がありますが、superfishの利点は以下のようなところでしょう。
- タッチデバイスのサポート
- ディレイ処理
- アニメーション
- キーボードアクセシビリティ
他にもポイントはありますが、これらが利用する主な目的となっているかと思います。
（この先導入していくのでダウンロードしておきましょう）
superfishを導入する
まずは上の公式サイトよりダウンロードしてきましょう。次にファイルを解凍しdist > jsフォルダ内にsuperfish.min.jsというファイルがあるので、こちらをテーマフォルダ内のjsフォルダにコピーしておきましょう。
functions.phpにて外部ファイルの読み込み設定
こちらやこちらでも触っているので詳しくは過去記事をご覧いただきたいですが、外部スクリプトを読み込む場合には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'
});
});
こちらの画像を見ていただくと分かりやすいのですが、ナビゲーション本体はul.nav-menuになります。ですので、superfish-settings.jsでもその部分をターゲットにして記述しています。
オプションの記述に関してはこちらを参照してください。英語ですが難しい内容ではないので分かりやすいと思います。
そして、この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にもなります。色々と細かくオプションや数値を試して、最適と思える設定を見つけてみてください。
