【Simplicity】スクロール追従型のグローバルメニューを簡単に実装する方法。

記事タイトルとURLをコピーする

WordPressテーマ「Simplicity 2」にスクロール追従型のグローバルメニューを実装しました。

スクロール追従型というのは名前の通り、ページを上下へスクロールしても画面上部に固定表示され続けるメニューのことです。色々な有名サイトでもよく見かけますよね。

やり方は色々とありますが、Clingifyを利用したらかなり簡単にカスタマイズできました。

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

スポンサーリンク

実装環境と必要なもの

clingify01212

  • 実装環境:Simplicity ver2.3.0
  • 必要なもの:FTPクライアント

※事前のバックアップを忘れずに。
※カスタマイズは自己責任でお願いします。

今回はWordPressテーマ「Simplicity(シンプリシティー)」を例に、スクロール追従型のグローバルメニュー実装する方法を説明します。

Clingifyのファイルアップロードや子テーマファイルへの追記が必要となるため、FTPクライアントも必要です。

スポンサーリンク

スクロール追従型グローバルメニュー実装方法

Clingifyを使ってスクロール追従型グローバルメニューを実装するまでの流れは以下の通り。

  1. Clingifyをダウンロード
  2. 必要となるファイルを子テーマフォルダへアップロード
  3. 子テーマファイルを修正。ClingifyのCSSとjsファイルを読み込み、実行コードを書く

それでは順に説明します。

Clingifyをダウンロード

まずはGitHub – theroux/clingifyにてClingifyをダウンロードします。

clingify01211

clingify-master.zipファイルがダウンロードされるので、その後解凍してください。この中にある以下のファイルを使います。

  • clingify.css
  • jquery.clingify.js

テーマファイルへアップロード

ダウンロードしたClingify内の「clingify.css」と「jquery.clingify.js」をFTPクライアントを使ってアップロードします。

アップロード先は親テーマ内でもokなんですが、念のため子テーマを利用しておきましょう。WordPressの子テーマフォルダ内に「css」「js」というフォルダを用意してください。

具体的には以下のようにフォルダを用意します。

  • 〜/public_html/wp-content/themes/simplicity2-child/css
  • 〜/public_html/wp-content/themes/simplicity2-child/js

「css」「js」というフォルダを用意したら、その中へ先程ダウンロードした「clingify.css」と「jquery.clingify.js」をアップロード。

clingify01213

clingify01214

FTPクライアントを使ってファイルをそれぞれアップロードしたら、続いてコードを記入していきます。

子テーマへコード追記

Clingifyを利用するためアップロードしたファイルを読み込みします。コード追記もやはり子テーマ内で行いましょう。

CSSを読み込む

アップロードした「clingify.css」を読み込みするため、以下のコードを<head>〜</head>内に記入します。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/clingify.css" />

具体的には、Simplicityの「header.php」を子テーマフォルダへコピペし、その中の</head>手前辺りに記入するといいでしょう。

jsを読み込み、実行コードを書く

続いて「jquery.clingify.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>

具体的には、Simplicityの「footer.php」を子テーマフォルダへコピペし、最下部</body>手前に記入するといいでしょう。

以上でカスタマイズ完了です!

実装完了

Clingifyで実装したSimplicityのスクロール追従型グローバルメニューがこちら。

clingify012155

このように画面をスクロールしてもグローバルメニューが追従表示されるようになりました。

あとはお好みで、グローバルメニューのカラーや透明度などCSSを調整していけばバッチリです!ちなみに上の画像は以下のように指定しています。

#navi {
    background-color: rgba(255,255,255,0.85);
}

ちなみに僕は、Simplicityをグローバルメニューをモバイル向けでも表示させています。

IMG_4336

スマホだとこんな感じに表示されています。

スポンサーリンク

まとめ

Clingifyを利用してSimplicityへスクロール追従型グローバルメニューを表示させてみましたが、とても簡単に実装することができました。

ダウンロードサイトが英語表記のため、そこで嫌になってしまう人もいるかもしれませんが、ダウンロードだけですし決して難しくありません。

サイトへの実装もコピペなど簡単な作業で完了しますので、気になっていた方はお試しください!ただし何度か書きましたが、ファイルのアップロードやコードの追記などは、すべてSimplicity子テーマフォルダ内にて行うことをおすすめします。

Simplicity 2のカスタマイズならあわせて読みたい
【Simplicity】「トップへ戻る」を丸いボタンへ!CSSで大きさ・色・形を変更する方法。
【Simplicity】トップページなどのエントリーカード全体をリンク化しました。

2 COMMENTS

匿名希望

大変わかりやすい解説ありがとうございます。
同じようにやらせていただいたのですが、サイトに変化は現れませんでした。
何か他に気をつけるべきことなどはあったでしょうか。
アドバイス頂戴したいです。

返信する
RoughLog

匿名希望 様

記載の通り、フォルダ作成→ファイルアップロード→コード追記と進めて頂ければ問題ないと思いますが、全て子テーマ上でカスタマイズしていますでしょうか?

もし親テーマ上でカスタマイズするなら、css・jsファイルともに「get_stylesheet_directory_uri()」の部分を、「get_template_directory_uri()」へ変更しお試しください。

返信する

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください