先日記事にした
【WordPress】STINGER8にスティッキーヘッダーを実装する方法！（header.php編集ver.)
こちらに記載したheader.phpを編集する方法は、
WordPressで初期に設定されているjQueryがきかなくなるので、
何かと不具合が出てくるかもしれません。
今回は、WordPressで推奨されている自作jQuery実装の方法で、
functions.phpを編集する方法です。
こちらであれば、WordPressにおいて初期設定されているjQueryを生かしたまま、
自作のjQueryを追加できます。
お好みの方を参考にしていただければと思います。
6月10日現在、プラグインのhead cleanerを有効にしていると、
自作のjQueryが使用できないので、
自作のjQueryを使用する場合は、head cleanerを無効にしてください。
head cleanerを使いたい場合は、header.phpを編集する以下の記事の方法をご利用ください。
【WordPress】STINGER8にスティッキーヘッダーを実装する方法！（header.php編集ver.)
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
スティッキーヘッダーとは？
縦長のサイト等で、下にスクロールを続けると、
ヘッダーナビが見えなくなるので、
ヘッダーのナビを使って別のページに行こうとした場合に、
ページの一番上までまたスクロールしなければなりませんよね？
スティッキーヘッダーの場合は、
ヘッダーナビが見えなくなるまで下にスクロールをしても、
ヘッダーナビが常に表示されています。
ヘッダーやメニューが付いてくるような感じです。
そのため、一番上までスクロールをする必要がなくなるため、
使い方によっては便利なものとなります。
今回はそのスティッキーヘッダーをjQueryを使って、
実装していきます。
function.phpを編集する
自作のjQueryを導入するための準備として、
functions.phpを編集します。
functions.phpは少しでも間違えた編集をすると、
エラーとなり、サイトそのものが見れなくなるほど、
繊細なファイルなので、必ずバックアップを取ることをお勧めします。
そしてカスタマイズになりますので、
子テーマを使用しましょう。
ちなみにこの方法ではheader.phpの<head></head>タグの間にscript等を追記しません。
functions.phpに以下のコードを追記します。
if ( !function_exists( 'st_enqueue_scripts' ) ) {
function my_script() {
wp_enqueue_script('jquery');
wp_enqueue_script('sticky',get_stylesheet_directory_uri() . '/js/sticky.js',array('jquery'));
}
}
add_action('wp_enqueue_scripts','my_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」というファイルをテキストエディタなどで作成します。
そのファイルに以下のコードを追記してください。
jQuery(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");
});
これで完成です。
こちらでスティッキーヘッダーが実装されたと思います。
みなさんはうまくできたでしょうか？
うまくできた、できなかったなど、
コメントいただけると嬉しいです！
P.S.
6月10日現在、プラグインのhead cleanerを有効にしていると、
自作のjQueryが使用できないので、
自作のjQueryが使用する場合は、head cleanerを無効にしてください。
head cleanerを使いたい場合は、header.phpを編集する以下の記事の方法をご利用ください。
【WordPress】STINGER8にスティッキーヘッダーを実装する方法！（header.php編集ver.)
コピペも良いですが・・・
カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ！
私が使用したおすすめの本はこちらです。
Stinger8のカスタマイズ記事まとめはこちら！↓
https://plu-plu.net/%e3%80%90wordpress%e3%80%91stinger8%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%be%e3%81%a8%e3%82%81/
コメント
スティッキーヘッダーの実装がうまくできません。
「sticky.js」のファイルを作成したらどこに格納すれば良いのかご教示ください。
naoki さん
コメントありがとうございます。
sticky.jsのファイル格納場所ですが、
header.phpやfunctions.php等のファイルがある階層に、
「js」というフォルダを作成し、そちらのフォルダに格納してください。
wp-content>theme>stinger8-child>js>sticky.js
上記のような感じです。