スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方

ページを読もうとスクロールしたら、メニューが付いてくるサイトなどをよく見かけます。

LIGとかもそうですね。(2015年9月時点)

こういった追従式グローバルメニューを手軽に実装することができるClingifyを使ってみました。

そしたら拍子抜けするぐらいに簡単に実装できたので、そのWordpressでの実装方法などを紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Clingifyとは

Clingify - a jQuery plugin to make stuff sticky (Demo)

Clingifyは、手軽に固定ヘッダーや、固定メニューなどを実装することができるjQueryプラグインです。

Clingify設定後、対象となるHTML要素を過ぎてスクロールした場合、Clingifyは要素のCSSクラスを切り替えて、ブラウザ画面上でピン留めしたように表示してくれます。

実際に、このページでもWordpressのグローバルメニューが上部に固定されて表示されているかと思います。(※このページのみの実装です)。

こういったことを、ほとんどファイルの呼び出しと、数行のコードで実装することができます。

Clingify使用の主な手順

ClingifyをWordpressで利用するのは、とても簡単で、主に以下の手順を行えば実装することができます。

  1. Clingifyのダウンロード&設置
  2. ヘッダーでClingify用のCSSを読み込む
  3. フッターでjsファイルを読み込んで実行コードを書く

今回は、Wordpressの「グローバルメニューを画面上部に固定する方法」を例に利用方法を紹介したいと思います。

Clingifyのダウンロード&設置

まずは、theroux/clingify · GitHubからClingifyファイルをダウンロードします。

Clingify zipファイルのダウンロード

ダウンロードした、「clingify-master.zip」ファイルを解凍して中にある以下のファイルを

  • clingify.css
  • jquery.clingify.js

WordPressテーマ(子テーマ)内に以下のように設置します。

  • テーマフォルダ/css/clingify.css
  • テーマフォルダ/js/jquery.clingify.js

ヘッダーでClingify用のCSSを読み込む

次に、Clingifyで利用するCSSをヘッダーで読み込みます。

テーマの<head></head>内に以下のように記入してください。

上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。

フッターでjsファイルを読み込んで実行コードを書く

あとはフッターの、</body>タグ手前あたりに以下のように記入します。

上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。

jQueryを利用していないテーマでは、jQueryを読み込む必要があります。

「jQuery(‘#navi’).clingify();」部分の「#navi」は、当サイトのグローバルナビのCSSセレクタなので、セレクタの指定は、サイトに合わせて行う必要があります。

動作確認

これで以下のようにフッターまでスクロールしても、上部で固定されるグローバルナビを手軽に作成することができました。

Clingifyの動作確認

Clingifyはデフォルト設定でも十分便利なんですが、様々なオプションも用意されているので、動作もある程度制御できるようになっています。

Clingifyのオプション

まとめ

HTML要素を固定表示する実装は、僕の中では結構面倒くさいイメージだったんですが、Clingifyを使うことで、かなり簡略化できそうです。

僕も実際使ってみて、びっくりするほど簡単でした。

今回は、グローバルナビで使用しましたが、サイドバーの「スクロール追従エリア」等の実装もClingifyを使えば簡単にできそうです。

『スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方』へのコメント

  1. 名前:2001Y 投稿日:2016/01/22(金) 18:50:12 ID:ce9179c0e

    マウスオーバーで下にメニューを出すのは何を使ってますか?

  2. わいひら 名前:わいひら 投稿日:2016/01/22(金) 18:59:07 ID:c95d07977

    WordPressのグローバルメニューのサブメニューのことをおっしゃっておられるのであれば、Wordpressの管理画面から「外観→メニュー」の設定から行うことができます。
    以下に詳しく書かれています。
    WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する | Webデザインとグラフィックの総合情報サイト – MdN Design Interactive –

    「Wordpress カスタムメニュー」などで検索するといろいろ出てくるかと思います。