【STINGER PLUS②】スクロールした時にナビゲーションを固定する方法
作成日
更新日 2018/03/28
Ads by Google
こんにちは!Tamakoです。
今回はSTINGER PLUSのカスタマイズ第2弾!
画面をスクロールした時にナビゲーションを固定する方法を紹介します。(PC版のみ)
文章が長文になった時とか便利です。
DEMOはこちら
※旦那さんにDEMO作ってといったら、かなりぶっ飛んだサイトになりました(汗
あと今回も管理画面から簡単に設定ができる子テーマを用意しました。
1番下までにいくと、ダウンロードリンクがあります。
目次
【STINGER PLUS】スクロールした時にナビゲーションを固定する場合の作業手順
「スクロールによりメニューが見えなくなるタイミングでCSSを効かせる」方法で実現します。
これにはPHP、jQuery、CSSを使います。
※jQueryは事前にライブラリを読み込んでおく必要がありますが、
STINGER PLUSではhead部分で読み込む設定になっていますので設定不要です。
1.グローバルメニューへcssを効かせるIDを指定する。
2.cssを効かせるためにjavascriptを<head></head>の間に記載する。
3.メニューを固定するcssをstyle.cssへ記載する。
1.グローバルメニューへcssを効かせるIDを指定する。
グローバルメニューにID「#nav_fixed_tmk 」を追加してstyleを効かせます。
「st-header-menu.php」で設定されているため、下記の箇所へcontainer_idを追加してIDを記載します。
1 2 3 4 5 6 |
$defaults = array( 'container' => 'nav', 'container_class' => 'smanone clearfix', 'container_id' => 'nav_fixed_tmk', 'theme_location' => 'primary-menu', ); |
※「st-header-menu.php」はソースコードが記載されている箇所なのですが、header.phpがst-header-image.phpを読み込み、st-header-image.phpがst-header-menu.phpを読み込んでいます。
「header.php → st-header-image.php → st-header-menu.php」
子テーマで運用する場合は親テーマから、この3つのファイルをコピペしておく必要があります。
2.cssを効かせるためにjavascriptを<head></head>の間に記載する。
下記コードを<head></head>の間に記載します。
わからない場合は</head>の直前に記載するとよいです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(function(){ var box = $("#nav_fixed_tmk"); var adminbox = $("#wpadminbar").outerHeight(true); var boxTop = box.offset().top; var boxHeight = box.outerHeight(true); $(window).scroll(function () { if($(window).scrollTop() >= boxTop - adminbox) { box.addClass("fixedbox "); box.css('margin-top', adminbox ); $("body").css('margin-top', boxHeight ); } else { box.removeClass("fixedbox "); box.css('margin-top', '0' ); $("body").css('margin-top', '0' ); } }); }); </script> |
※ご指摘があり9/7に修正しました。(ににこさんありがとうございます)
3.メニューを固定するcssをstyle.cssへ記載する。
モバイル・タブレットの場合はハンバーガーメニューとなるためPCサイズの箇所へ追記をします。
わからない場合は下記のソースをstyle.cssの最後に追記してください。
1 2 3 4 5 6 7 |
@media print, screen and (min-width: 960px) { .fixedbox { width:1046px; position:fixed; top:0px; z-index:999; } |
管理メニューから操作できるように設定する
通常は1~3の手順でメニューが固定される設定になりますが、管理画面でメニューを追加できるように、function.phpへ記載するソースを作成しました。
ただこの場合はjavascriptの部分をst-headmenu-tmk.jsというファイルで別ファイルを作成して、そのファイルをjsフォルダへ配置してやる必要があります。
■function.phpへ追記するコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
function tmk_kanri() { // データを登録 $tmk_head_menu = isset($_POST['head_menu']) ? 1 : 0; update_option('head_menu', $tmk_head_menu); // 更新完了を通知 if (isset($_POST['head_menu'])) { echo '<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible"> <p><strong>設定を保存しました。</strong></p></div>'; } ?> <div class="wrapper"> <h1>Tmkの設定管理画面</h1> <p>STINGER PLUS+ ver20160612 の追加設定</p> <form method="post" action=""> <h2>ヘッダーメニューを常に表示するように固定する</h2> <label><input name="head_menu" type="checkbox" value="1" <?php checked(1,get_option('head_menu')); ?> >固定する</label> <?php submit_button(); ?> </form </div> <?php } function tmk_kanris () { add_menu_page( 'tmk管理', 'tmk管理', 'manage_options', 'tmk_kanri', 'tmk_kanri' ); } add_action ( 'admin_menu', 'tmk_kanris' ); |
■header.phpの<head></head>の間に記載するコード
管理画面でヘッダーメニューを固定するにチェックを入れたらjsが読み込まれるようになります。
1 2 3 |
<?php if(get_option('head_menu') == 1){ ?> <script src="<?php bloginfo('stylesheet_directory'); ?>/js/st-headmenu-tmk.js"></script> <?php } ?> |
管理画面から変更できる子テーマを用意しました
javascriptとかちょっと面倒な人のために、「STINGER PLUS+」の子テーマにコードを加えた、派生の子テーマを用意いたしました。
※必ずバックアップを取っていて自己責任でお願いします。
(機能としては上記のソースコードを記載しているものと同じなのですが、管理しやすいように別ファイルにして読み込む形をとっています。その為、上記とは多少コードが違います。)
stingerplus-child-tmkの導入方法は「stingerplus-child-tmkの導入方法」を参考にしてくださいね。
スクロールした時にナビゲーションを固定する方法・まとめ
使う人いるのかなぁ~と思ったりもするのですが、せっかくなので公開してみました。
「STINGER PLUSのこういうカスタマイズが知りたい!」などご要望がありましたら、教えてください。
積極的に書いてみたいと思います。
それにしてもやっぱすごいな、STINGER!
Ads by Google