【WordPress】STINGER8にスティッキーヘッダーを実装する方法!(header.php編集ver.)

Stinger8

ようやく最近jQueryを勉強し始めたぷるぷるです。
今回は勉強ついでにスティッキーヘッダーを実装してみたいと思います。

今回の方法はWordPressに設定されているjQueryをいったん解除する方法です。
そのため、場合によっては不具合が発生するおそれがあるため、
自己責任でお願いします。

WordPressに設定されているjQueryを解除しないで、
WordPressが推奨しているjQueryを解除しない方法を知りたい方は、
以下の記事をご覧ください。
【WordPress】STINGER8にスティッキーヘッダーを実装する方法!(functions.php編集ver.)
なおこちらの方法は、、
head cleanerのプラグインを使用している場合、
使用できません。

そのため、head cleanerを無効にするか、
当記事のheader.phpを編集する方法をご利用ください。

スポンサーリンク

スティッキーヘッダーとは?

縦長のサイト等で、下にスクロールを続けると、
ヘッダーナビが見えなくなるので、
ヘッダーのナビを使って別のページに行こうとした場合に、
ページの一番上までまたスクロールしなければなりませんよね?

スティッキーヘッダーの場合は、
ヘッダーナビが見えなくなるまで下にスクロールをしても、
ヘッダーナビが常に表示されています。
ヘッダーやメニューが付いてくるような感じです。

そのため、一番上までスクロールをする必要がなくなるため、
使い方によっては便利なものとなります。
今回はそのスティッキーヘッダーをjQueryを使って、
実装していきます。

jQueryを使えるようにする!

スティッキーヘッダーを実装するためには、
jqueryを使用する必要があります。

WordPressの場合は、
標準でjQueryが使用できるようになっているのですが、
WordPress独自の設定がされているため、
自作のjQueryを追加した場合、エラーを起こすか、
読み込まないので、まずは独自の設定を解除します。
カスタマイズをしていきますので、
子テーマを使用しましょう。

WordPress独自の設定を解除する

WordPress独自の設定を解除する場合は、
以下のコードを「header.php」の<head></head>の間に追加します。

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressの独自設定の解除-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

これで、自作のjqueryを読み込むようになりました。

注意が必要です

今までは、独自の設定により読み込まれていた「javascript」のファイルが、
今のコードを入れたことにより読み込まれなくなりました。
この状態を放置してしまうと、
「アコーディオンメニュー」を開くことができなくなります。

そのため、先ほど追加したコードの下に以下のコードを追記します。
(必ず先ほどのコードの後に追記してください)
なお【自分のドメイン名】の箇所には、サイトのドメイン名を入力してください。

<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8/js/base.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8/js/html5shiv.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8/js/scroll.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8-child/js/sticky.js"></script>

これで準備完了です。

ちなみに先ほどの一連のコードは、
以下の様になっていれば問題ありません。

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressの独自設定の解除-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8/js/base.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8/js/html5shiv.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8/js/scroll.js"></script>
<script type="text/javascript" src="http://自分のドメイン名/wp-content/themes/stinger8-child/js/sticky.js"></script>

スティッキーヘッダーの設定

今回は「サイト名+ナビゲーションバー」のスティッキーヘッダーを実装します。
編集するファイルは、
①header.php
②style.css
③sticky.js(今回新たに作成します)
以上の3つです。

header.php

header.phpでは、<header></header>をコピーし、
</header>の下にペーストします。

これにより同じヘッダーが上下に2つ並ぶようになります。
また、上下に並んでいる下のヘッダーに<div class=”sticky”></div>を追記します。
追記する箇所はちょうど<header>の次に<divid=“sticky”>を、
</header>の前に</div>です。
(以下の行番でいうと、44と83です)

これが終わるとheader.phpの下部は以下の様になります。

<header>
						<div id="headbox-bg">
							<div class="clearfix" id="headbox">
								<?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>
									<div id="header-l">
									<!-- ロゴ又はブログ名 -->
									<p class="sitename">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
									 <img src="https://plu-plu.net/wp-content/uploads/2017/06/p-4.png">
										</a>
									</p>
									<!-- ロゴ又はブログ名ここまで -->
									<!-- キャプション -->
									<?php if ( is_front_page() ) { ?>
										<h1 class="descr">
											<?php bloginfo( 'description' ); ?>
										</h1>
									<?php } else { ?>
										<p class="descr">
											<?php bloginfo( 'description' ); ?>
										</p>
									<?php } ?>
									</div><!-- /#header-l -->

							</div><!-- /#headbox-bg -->
						</div><!-- /#headbox clearfix -->

						<div id="gazou-wide">
<!--カスタムヘッダーメニュー削除-->	<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>
							<?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?>
							<div id="st-headerbox">
								<div id="st-header">
									<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
								</div>
							</div>
							<?php endif;?>

						</div>
						<!-- /gazou -->

					</header>

<header>
	<div id="sticky">
						<div id="headbox-bg">
							<div class="clearfix" id="headbox">
								<?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>
									<div id="header-l">
									<!-- ロゴ又はブログ名 -->
									<p class="sitename">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
									 <img src="https://plu-plu.net/wp-content/uploads/2017/06/p-4.png">
										</a>
									</p>
									<!-- ロゴ又はブログ名ここまで -->
									<!-- キャプション -->
									<?php if ( is_front_page() ) { ?>
										<h1 class="descr">
											<?php bloginfo( 'description' ); ?>
										</h1>
									<?php } else { ?>
										<p class="descr">
											<?php bloginfo( 'description' ); ?>
										</p>
									<?php } ?>
									</div><!-- /#header-l -->

							</div><!-- /#headbox-bg -->
						</div><!-- /#headbox clearfix -->

						<div id="gazou-wide">
<!--カスタムヘッダーメニュー削除-->	<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>
							<?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?>
							<div id="st-headerbox">
								<div id="st-header">
									<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
								</div>
							</div>
							<?php endif;?>

						</div>
						<!-- /gazou -->
</div>
					</header>
					<div id="content-w">

このように表示されます。

style.css

次にstyle.cssを編集します。
style.cssに次のコードを追記します。

#sticky{
	display:none;
	position: fixed;
	width:100%;
	top: 0px;
	z-index: 9999;
}

これで、見えなくなりました。

sticky.js

最後に「sticky.js」というファイルをテキストエディタなどで作成します。

そのファイルに以下のコードを追記してください。

$(function(){
//スティッキーヘッダー
var $window = $(window),
$content = $("#content"), //スティッキーヘッダーに切り替わる境目
$chenge = $("#sticky"), //表示されるスティッキーヘッダーのID
topContent = $content.offset().top;
 
var sticky = false;
 
 $window.on("scroll", function () {
      if ($window.scrollTop() > topContent) {
           if ( sticky === false ){
                $chenge.slideDown();
                sticky = true;
           }
      } else {
           if ( sticky === true ){
                $chenge.slideUp();
                sticky = false;
           }
      }
 });
 $window.trigger("scroll");
 
});

追記ができたら、この「sticky.js」のファイルを、
FTPソフト等で 、stinger8-childにある「js」フォルダにアップロードします。
ちなみにstinger8-childのjsフォルダには、
最初から「st-media-editor.js」というファイルがあります。
そのファイルと同じフォルダにアップロードしてください。

これで、スティッキーヘッダーが完成です。
いかがでしょうか?
うまくできましたか?

ちなみに当サイトの場合は、ヘッダー部分がでかすぎて、
コンテンツ部分を圧迫し、邪魔なので、
小さくするなどデザインの工夫が必要そうです。

スマホでスティッキーヘッダーを表示させない場合

スマホの場合、画面が小さいということもあり、
スティッキーヘッダーが邪魔な場合があると思います。

スマホでスティッキーヘッダーを表示させない場合は、
header.phpの<div id=”sticky”>を追記した<header></header>を、
以下のコードで挟みます。

<?php if(!wp_is_mobile()): ?>
<header>
<div id="sticky">
</div>
</header>
<?php endif; ?>

追記後は以下の様なコードになります。

<header>
						<div id="headbox-bg">
							<div class="clearfix" id="headbox">
								<?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>
									<div id="header-l">
									<!-- ロゴ又はブログ名 -->
									<p class="sitename">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
									 <img src="https://plu-plu.net/wp-content/uploads/2017/06/p-4.png">
										</a>
									</p>
									<!-- ロゴ又はブログ名ここまで -->
									<!-- キャプション -->
									<?php if ( is_front_page() ) { ?>
										<h1 class="descr">
											<?php bloginfo( 'description' ); ?>
										</h1>
									<?php } else { ?>
										<p class="descr">
											<?php bloginfo( 'description' ); ?>
										</p>
									<?php } ?>
									</div><!-- /#header-l -->

							</div><!-- /#headbox-bg -->
						</div><!-- /#headbox clearfix -->

						<div id="gazou-wide">
<!--カスタムヘッダーメニュー削除-->	<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>
							<?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?>
							<div id="st-headerbox">
								<div id="st-header">
									<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
								</div>
							</div>
							<?php endif;?>

						</div>
						<!-- /gazou -->

					</header>
<?php if(!wp_is_mobile()): ?>
<header>
	<div id="sticky">
						<div id="headbox-bg">
							<div class="clearfix" id="headbox">
								<?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>
									<div id="header-l">
									<!-- ロゴ又はブログ名 -->
									<p class="sitename">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
									 <img src="https://plu-plu.net/wp-content/uploads/2017/06/p-4.png">
										</a>
									</p>
									<!-- ロゴ又はブログ名ここまで -->
									<!-- キャプション -->
									<?php if ( is_front_page() ) { ?>
										<h1 class="descr">
											<?php bloginfo( 'description' ); ?>
										</h1>
									<?php } else { ?>
										<p class="descr">
											<?php bloginfo( 'description' ); ?>
										</p>
									<?php } ?>
									</div><!-- /#header-l -->

							</div><!-- /#headbox-bg -->
						</div><!-- /#headbox clearfix -->

						<div id="gazou-wide">
<!--カスタムヘッダーメニュー削除-->	<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>
							<?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?>
							<div id="st-headerbox">
								<div id="st-header">
									<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
								</div>
							</div>
							<?php endif;?>

						</div>
						<!-- /gazou -->
</div>
					</header>
<?php endif; ?>
					<div id="content-w">

これでスマホでは、スティッキーヘッダーが適用されないようになりました。

みなさんもスティッキーヘッダーができましたら、
うまくできた、できなかったなどコメントいただけると嬉しいでーす!

WordPressに設定されているjQueryを解除しないで、
WordPressが推奨しているjQueryを解除しない方法を知りたい方は、
以下の記事をご覧ください。
【WordPress】STINGER8にスティッキーヘッダーを実装する方法!(functions.php編集ver.)
なおこちらの方法は、、
head cleanerのプラグインを使用している場合、
使用できません。

そのため、head cleanerを無効にするか、
当記事のheader.phpを編集する方法をご利用ください。

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

コメント