ページを読もうとスクロールしたら、メニューが付いてくるサイトなどをよく見かけます。
LIGとかもそうですね。（2015年9月時点）
こういった追従式グローバルメニューを手軽に実装することができるClingifyを使ってみました。
そしたら拍子抜けするぐらいに簡単に実装できたので、そのWordpressでの実装方法などを紹介したいと思います。
目次
Clingifyとは
Clingifyは、手軽に固定ヘッダーや、固定メニューなどを実装することができるjQueryプラグインです。
Clingify設定後、対象となるHTML要素を過ぎてスクロールした場合、Clingifyは要素のCSSクラスを切り替えて、ブラウザ画面上でピン留めしたように表示してくれます。
実際に、このページでもWordpressのグローバルメニューが上部に固定されて表示されているかと思います。（※このページのみの実装です）。
こういったことを、ほとんどファイルの呼び出しと、数行のコードで実装することができます。
Clingify使用の主な手順
ClingifyをWordpressで利用するのは、とても簡単で、主に以下の手順を行えば実装することができます。
- Clingifyのダウンロード＆設置
- ヘッダーでClingify用のCSSを読み込む
- フッターでjsファイルを読み込んで実行コードを書く
今回は、Wordpressの「グローバルメニューを画面上部に固定する方法」を例に利用方法を紹介したいと思います。
Clingifyのダウンロード＆設置
まずは、theroux/clingify · GitHubからClingifyファイルをダウンロードします。
ダウンロードした、「clingify-master.zip」ファイルを解凍して中にある以下のファイルを
- clingify.css
- jquery.clingify.js
WordPressテーマ（子テーマ）内に以下のように設置します。
- テーマフォルダ/css/clingify.css
- テーマフォルダ/js/jquery.clingify.js
ヘッダーでClingify用のCSSを読み込む
次に、Clingifyで利用するCSSをヘッダーで読み込みます。
テーマの<head></head>内に以下のように記入してください。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/clingify.css" />
上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。
フッターでjsファイルを読み込んで実行コードを書く
あとはフッターの、</body>タグ手前あたりに以下のように記入します。
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.clingify.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#navi').clingify();
});
</script>上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。
jQueryを利用していないテーマでは、jQueryを読み込む必要があります。
「jQuery(‘#navi’).clingify();」部分の「#navi」は、当サイトのグローバルナビのCSSセレクタなので、セレクタの指定は、サイトに合わせて行う必要があります。
動作確認
これで以下のようにフッターまでスクロールしても、上部で固定されるグローバルナビを手軽に作成することができました。
Clingifyはデフォルト設定でも十分便利なんですが、様々なオプションも用意されているので、動作もある程度制御できるようになっています。
まとめ
HTML要素を固定表示する実装は、僕の中では結構面倒くさいイメージだったんですが、Clingifyを使うことで、かなり簡略化できそうです。
僕も実際使ってみて、びっくりするほど簡単でした。
今回は、グローバルナビで使用しましたが、サイドバーの「スクロール追従エリア」等の実装もClingifyを使えば簡単にできそうです。
マウスオーバーで下にメニューを出すのは何を使ってますか？