ページをスクロールしたらグローバルメニュがー追ってくる、つまり、グローバルメニューが消えずにスクールしても表示されたままになっているWEBサイトをよく見かけます。
WordPressでの実装方法を記載しておきます。
jQuery「Clingify」を入れてみましょう
１、下記URLへアクセス
http://theroux.github.io/clingify/
２、
赤枠をクリックしてgithubへ
【clone or download】をクリックして【download zip】を【クリック】
clingify.css
jquery.clingify.js
を
/wp/wp-content/themes/テーマ/js/jquery.clingify.js
/wp/wp-content/themes/テーマ/css/clingify.css
にアップロード
親テーマのheader.phpの<head>～</head>内に
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/clingify.css” />
を記載
親テーマのfooter.phpの</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_template_directory_uri(); ?>/js/jquery.clingify.js”></script>
<script type=“text/javascript”>
jQuery(function() {
jQuery(‘#globalnavigation’).clingify();
});
</script>
を記載
ただし、「#globalnavigation」は、
header.phpのグローバルナビゲーションの「id」に置き換える必要があります。
例えば
<header id=”masthead” >
だと上記の
jQuery(‘#globalnavigation’).clingify();
は
jQuery(‘#masthead’).clingify();
になります。
コメントを残す