WordPressのヘッダーを固定したままスクロール出来るようにするまでのお話

WordPressで作られたサイトでスクロール時、ページ上部にヘッダーを固定したかったのですが、結構苦戦しながらなんとか解決した話。

よくある無料テーマでは対応していない

最低限のレスポンシブデザインはサポートしてくれているものの
（手軽に構築するために外観エディターを使用しています）
Header stickyは対応してくれていませんでした。

プラグインを導入

カスタムCSSで出来ることだろうけど、
明示的にわかるようにプラグインを導入することにしました。
セレクターで指定して固定してくれる最低限あればいいかなということで

Sticky Menu & Sticky Header

要素を指定するだけではダメだった。

正確にはヘッダー要素だとページの幅全体にはなっていないので、
見た目が非常に悪い。
そこでいくつか工夫をすることにした。

外観エディターでヘッダー要素に工夫

ヘッダー要素のサブメニューからグループ化を選択

グループをラッパーとして扱うようにする

コンテント幅を使用するインナーブロックをオフにする

これでグループ化している要素は横幅全体になる

高度な設定→追加CSSクラスに"header-wrapper"を追加

クラス名にしていすることで、プラグインから指定出来るようにする

プラグイン側に固定する要素を".header-wrapper"と入力

これでページ上部にヘッダー要素が固定されるようになった。

※グループ化したことでブロック要素のpaddingが入ってるので修正

selector {
  margin:0;
  padding-top:0;
  padding-bottom:0;
}

header-wrapperを指定したグループブロックの
Custom CSSに上記を記載することで内側の要素は中央寄せのまま、
余計な上部下部のスペースをなくすことが出来る。

これで見た目的にも違和感が無いメニュー表示ができるはず。

以上。