WordPressテーマ「Simplicity」のメニュー(モバイル版も含む)をスクロールしてもついてくるようにスクロールに追従(固定)する方法を紹介します。
概要
このサイトで以前使用していたWordPressテーマ「Simplicity」でメニューを追従させる方法を紹介します。追従することでメニューリンクがクリックされやすくなり、直帰率の減少が期待できます。
設定の確認
WordPress管理画面のテーマ→カスタマイズより、次の設定にしてください。
- 「レイアウト(全体・リスト)」の「グローバルナビを表示」をONにする。
- 「レイアウト(全体・リスト)」の「モバイルメニュータイプ」を「アコーディオンツリー」にする。
- 「色」の「グローバルナビを横幅いっぱいにする」をONにする。必須ではありません。
![]() | ![]() | ![]() |
CSSの設定
style.cssに次の記述をします。小テーマの使用をおすすめします。
モバイル版メニューの「アコーディオンツリー」の配色はデフォルトテーマのグローバルナビゲーションに似たデザインにしています。4つ目の「.fixed
」はJavaScriptによる固定用に使用されます。
cssは「!important
」を付けないと有効になりません(後にデフォルトのモバイル版メニューのcssが読み込まれてしまいキャンセルされるため)。
.slicknav_menu{ background:transparent !important; } .slicknav_nav{ background-color: #f7f7f7 !important; border: 1px solid #ddd !important; } .slicknav_nav a{ color:#000000 !important; } .fixed{ position: fixed !important; top: 0 !important; width: 100% !important; z-index: 10000 !important; }
JavaScriptの設定
footer-insert.phpに次の記述をします。小テーマの使用をおすすめします。jQueryの読み込みが必須です(デフォルトでは読み込まれます)。
<script> jQuery(function($) { var nav=$('.slicknav_menu'),offset=nav.offset(),nav1=$('#navi'),offset1=nav1.offset(); $(window).scroll(function(){ if($(window).scrollTop()>offset.top)nav.addClass('fixed'); else nav.removeClass('fixed'); if($(window).scrollTop()>offset1.top)nav1.addClass('fixed'); else nav1.removeClass('fixed'); }); }); </script>
動作
PC版
スマホ版
閉じた状態
開いた状態
謝辞
JavaScriptとスタイルはこちらのサイトのものを参考にしました。ありがとうございます。
301 Moved Permanently
コメント