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

2022年5月17日

集中モード

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

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

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

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

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

こんな感じになります。

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

動作確認をしたテーマ

Affinger 5
SANGO (+PORIPU)

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

SWELLはこちらで紹介してます。

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

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

FTPで接続

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

JavaScriptファイルを追加

ローカルで「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 をエディタで開いて、一番下にコードを追加します。

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

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

JavaScriptファイルを追加

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

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

/*--------------------------------------
スマホヘッダー固定 スクロール対応
--------------------------------------*/
@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