【STINGER PLUS②】スクロールした時にナビゲーションを固定する方法

作成日 2016/08/14

更新日 2018/03/28

- WEBデザイナー

Ads by Google

こんにちは！Tamakoです。

今回はSTINGER PLUSのカスタマイズ第２弾！

画面をスクロールした時にナビゲーションを固定する方法を紹介します。(PC版のみ）

文章が長文になった時とか便利です。

DEMOはこちら
※旦那さんにDEMO作ってといったら、かなりぶっ飛んだサイトになりました（汗

あと今回も管理画面から簡単に設定ができる子テーマを用意しました。

１番下までにいくと、ダウンロードリンクがあります。

1 【STINGER PLUS】スクロールした時にナビゲーションを固定する場合の作業手順
2 管理メニューから操作できるように設定する
3 管理画面から変更できる子テーマを用意しました
4 スクロールした時にナビゲーションを固定する方法・まとめ

【STINGER PLUS】スクロールした時にナビゲーションを固定する場合の作業手順

「スクロールによりメニューが見えなくなるタイミングでCSSを効かせる」方法で実現します。
これにはPHP、jQuery、CSSを使います。

※jQueryは事前にライブラリを読み込んでおく必要がありますが、
STINGER PLUSではhead部分で読み込む設定になっていますので設定不要です。

１．グローバルメニューへcssを効かせるIDを指定する。
２．cssを効かせるためにjavascriptを<head></head>の間に記載する。
３．メニューを固定するcssをstyle.cssへ記載する。

１．グローバルメニューへcssを効かせるIDを指定する。

グローバルメニューにID「#nav_fixed_tmk 」を追加してstyleを効かせます。
「st-header-menu.php」で設定されているため、下記の箇所へcontainer_idを追加してIDを記載します。

$defaults = array(
'container' => 'nav',
'container_class' => 'smanone clearfix',
'container_id' => 'nav_fixed_tmk',
'theme_location' => 'primary-menu',
);

$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」
子テーマで運用する場合は親テーマから、この３つのファイルをコピペしておく必要があります。

２．cssを効かせるためにjavascriptを<head></head>の間に記載する。

下記コードを<head></head>の間に記載します。
わからない場合は</head>の直前に記載するとよいです。

<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>

$(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に修正しました。（ににこさんありがとうございます）

３．メニューを固定するcssをstyle.cssへ記載する。

モバイル・タブレットの場合はハンバーガーメニューとなるためPCサイズの箇所へ追記をします。
わからない場合は下記のソースをstyle.cssの最後に追記してください。

@media print, screen and (min-width: 960px) {
.fixedbox {
width:1046px;
position:fixed;
top:0px;
z-index:999;
}

@media print, screen and (min-width: 960px) {

.fixedbox {

width:1046px;

position:fixed;

top:0px;

z-index:999;

}

管理メニューから操作できるように設定する

通常は１～３の手順でメニューが固定される設定になりますが、管理画面でメニューを追加できるように、function.phpへ記載するソースを作成しました。

ただこの場合はjavascriptの部分をst-headmenu-tmk.jsというファイルで別ファイルを作成して、そのファイルをjsフォルダへ配置してやる必要があります。

■function.phpへ追記するコード

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' );

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>';

}

<h1>Tmkの設定管理画面</h1>

<p>STINGER PLUS+ ver20160612 の追加設定</p>

<h2>ヘッダーメニューを常に表示するように固定する</h2>

<?php submit_button(); ?>

</form

</div>

<?php

}

function tmk_kanris () {

add_menu_page(

'tmk管理',

'manage_options',

'tmk_kanri',

'tmk_kanri'

);

}

add_action ( 'admin_menu', 'tmk_kanris' );

■header.phpの<head></head>の間に記載するコード

管理画面でヘッダーメニューを固定するにチェックを入れたらjsが読み込まれるようになります。

<?php if(get_option('head_menu') == 1){ ?>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/st-headmenu-tmk.js"></script>
<?php } ?>

<?php if(get_option('head_menu') == 1){ ?>

<?php } ?>

管理画面から変更できる子テーマを用意しました

javascriptとかちょっと面倒な人のために、「STINGER PLUS+」の子テーマにコードを加えた、派生の子テーマを用意いたしました。

stingerplus-child-tmk

※必ずバックアップを取っていて自己責任でお願いします。

（機能としては上記のソースコードを記載しているものと同じなのですが、管理しやすいように別ファイルにして読み込む形をとっています。その為、上記とは多少コードが違います。）

stingerplus-child-tmkの導入方法は「stingerplus-child-tmkの導入方法」を参考にしてくださいね。

スクロールした時にナビゲーションを固定する方法・まとめ

使う人いるのかなぁ～と思ったりもするのですが、せっかくなので公開してみました。

「STINGER PLUSのこういうカスタマイズが知りたい！」などご要望がありましたら、教えてください。

積極的に書いてみたいと思います。

それにしてもやっぱすごいな、STINGER！

Ads by Google