ようやく最近jQueryを勉強し始めたぷるぷる（@pluplu2）です
今回は勉強ついでにスティッキーヘッダーを実装してみたいと思います。
今回の方法はWordPressに設定されているjQueryをいったん解除する方法です。
そのため、場合によっては不具合が発生するおそれがあるため、
自己責任でお願いします。
WordPressに設定されているjQueryを解除しないで、
WordPressが推奨しているjQueryを解除しない方法を知りたい方は、
以下の記事をご覧ください。
【WordPress】STINGER8にスティッキーヘッダーを実装する方法！（functions.php編集ver.)
なおこちらの方法は、、
head cleanerのプラグインを使用している場合、
使用できません。
そのため、head cleanerを無効にするか、
当記事のheader.phpを編集する方法をご利用ください。
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
スティッキーヘッダーとは？
縦長のサイト等で、下にスクロールを続けると、
ヘッダーナビが見えなくなるので、
ヘッダーのナビを使って別のページに行こうとした場合に、
ページの一番上までまたスクロールしなければなりませんよね？
スティッキーヘッダーの場合は、
ヘッダーナビが見えなくなるまで下にスクロールをしても、
ヘッダーナビが常に表示されています。
ヘッダーやメニューが付いてくるような感じです。
そのため、一番上までスクロールをする必要がなくなるため、
使い方によっては便利なものとなります。
今回はそのスティッキーヘッダーを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>の下にペーストします。
これにより同じヘッダーが上下に２つ並ぶようになります。
また、上下に並んでいる下のヘッダーに<div class=”sticky”></div>を追記します。
追記する箇所はちょうど<header>の次に<div id=“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を編集する方法をご利用ください。
コピペも良いですが・・・
カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ！
私が使用したおすすめの本はこちらです。
コメント