WordPress のヘッダーを固定してスクロール時に消す方法

2020 6/05
WordPress のヘッダーを固定してスクロール時に消す方法

ヘッダーとはサイトの一番上に表示されるサイト名やメニューのこと

自分のサイト名が書いてあるヘッダーを出しておくことで、サイト名が認知されやすくなります。

ただ、ヘッダーを固定してしまうとスマホで表示する場合はヘッダーがスマホの上の方を占有してしまうので読者の利便性を損ねてしまう可能性が高いことも確かです。

なので、スマホで表示した時に下にスクロールしたときにはヘッダーを自動で隠すようにして、上に戻るスクロールをしたときにまた自動的にヘッダーを表示するようにするのが最適解なのではないかと思います。

この記事では WordPressのテーマファイル内の3つのファイルを編集して、スクロールに合わせてヘッダーを自動表示する方法を紹介します。

こんな感じになります。

ヘッダー固定

functions.php という重要なファイルを編集するため、間違えると一瞬ブログの表示が真っ白になりますのでご注意ください。(編集前に戻せば直ります)

動作確認をしたテーマ

  • Affinger 5
  • SANGO (+PORIPU)

PORIPUではヘッダー固定機能が付いています。自動で隠れたりはしないのですが文字が小さくなるのでこれでも十分だと思います。

クリックできる目次

ヘッダーを表示させるまでの手順

FTPやSFTPで接続できる環境が必要です。Windows、MacともにFilezillaやCyberduckなどのソフトを利用すると良いと思います。

FTPで接続

FTPで接続したら、小テーマのフォルダへ移動します。

JavaScriptファイルを追加

ローカルで「header-fix.js」というファイルを作成して編集します。

header-fix.js

$(function() {
  var $win = $(window),
      $header = $('header'),
      headerHeight = $header.outerHeight(),
      startPos = 0;

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > startPos && value > headerHeight ) {
      $header.css('top', '-' + headerHeight + 'px');
    } else {
      $header.css('top', '0');
    }
    startPos = value;
  });
});

header-fix.js」 を 子テーマ内にアップロードします。

子テーマのfunctions.phpを編集

functions.php をエディタで開いて、一番下にコードを追加します。

サイトが真っ白になってしまったら入力したコードを消して保存し直しましょう。

functions.php

//ヘッダー上部固定 スクロール対応
wp_enqueue_script( 'sng-js', 
get_stylesheet_directory_uri() . '/fix-header.js', 
array(), '', true );

JavaScriptファイルを追加

子テーマ内のstyle.css に以下のコードを追記します。

スマホで表示したとき(横幅767px以下)のみヘッダーを自動で表示非表示させるようにしています。(コードを変更することでPCにも対応可)

style.css

/*--------------------------------------
スマホヘッダー固定 スクロール対応
--------------------------------------*/
@media only screen and (max-width: 767px) {/*スマホのみ*/
  .header {
    position: fixed;/*ヘッダー固定*/
    top: 0;
    left: 0;
    width:100%;
    transition: .3s;
  }
/*ヘッダーの高さだけコンテンツを下げる*/
#container{
padding-top:62px;/*ヘッダーの高さにあわせて調整*/
}

/*目次から見出しへ飛ぶリンクのズレを修正*/
h2 span, h3 span {
padding-top: 62px;/*ヘッダーの高さにあわせて調整*/
margin-top: -62px;/*ヘッダーの高さにあわせて調整(マイナスは消さない)*/
}
}

ConoHa WING

おすすめの国内最速級レンタルサーバー

月760円〜

初めてでも安心。ブログ移転もしやすい「WordPressかんたん移行」

参考にさせていただいたサイト

カスタマイズでJavaScriptを利用する方法

【SANGO/ストークカスタマイズ】スマホのヘッダーメニューを固定する方法

【jQuery】下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

サーバーの魅力に取りつかれ、誰にでも分かりやすいサーバー紹介サイトを目指して日夜勉強中。ブログを作りたい人を応援します。

クリックできる目次
閉じる