WordPressテーマの「Simplicity」で表示されるPCヘッダーの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた

以前、「Simplicity」のPCヘッダーをスクロールで固定表示/非表示する方法をご紹介いたしました。

WordPressテーマの「Simplicity」で表示されるPCのヘッダーを、スクロールで固定表示/非表示するようにしてみた
以前「Simplicity」の固定表示されるモバイルメニューを、スクロールで非表示する方法をご紹介いたしました。 今回はPCのヘッダー...

今回はそれらの動きを、ボタンで切り替えられるようにしてみたのでご紹介いたします。

js

下記のjsを「slide-header.js」などとして、「Simplicity」の子テーマにアップロードします。

解説

上記「ヘッダースライド切替え」部分のコードは、svgアイコンがクリックされた時にヘッダーの状態を変えるための「slide-header」クラスをbodyに付与しています。また、同時にアイコンのカラーが変わる「on」クラスも付与しています。「jQuery.cookie」でそれらを保持するようにしています。

「ヘッダースライド」の部分は以前ご紹介した時と同じコードなので、割愛します。

footer-insert.php

子テーマの「footer-insert.php」に下記の記述をします。

「!is_mobile」により、PCにのみ「slide-header.js」が読み込まれます。

sns-pages.php

ヘッダーの状態を切り替えるsvgアイコンを、ヘッダー内に表示されるSNSアイコングループに表示させるために、Simplicityテーマ下の「sns-pages.php」にあるul内に下記の記述をしました。

「!is_mobile」により、PCにのみがスライドヘッダー用のsvgアイコン表示されます。

アイコンは「矢印アイコン 上6 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト」のアイコンを利用しています。svgはcssにスタイルを移したりしているのでオリジナルの記述とは異なっています。

css

style.css

子テーマの「style.css」に下記のスタイルを記述をしました。

解説1

「.slide-header」から始まっているスタイルが、ボタンがクリックされた時にヘッダーの状態を変更するスタイルです。

解説2

「.arrow-svg」にsvgアイコンに記述されていた、スタイル属性をcssに記述しています。「cursor: pointer;」は新規に追加しています。「.arrow-svg.on」でボタンがクリックされた時に色を濃くしています。「.arrow-svg:hover」はカーソルがボタンに乗ったときの疑似クラスです。「,(コンマ)」で「.arrow-svg.on」と同じスタイルにしています。

解説3

「.sns-group li.icon-arrow」の「display: none;」で記事内に表示されるsvgアイコンを非表示にしています。

mobile.css

子テーマの「mobile.css」に下記のスタイルを記述しました。

「style.css」で記述したスタイルはモバイルの方にも影響があるので、打ち消す記述をします。

確認

通常時とボタンをクリックした時のヘッダーの状態を確認します。

画像を押下すると動画が表示されます。
Simplicityヘッダーをカスタム
ボタンをクリックした時にヘッダーの状態が変わる

ボタンをクリックした後、上スクロールでヘッダーが固定表示されていることがわかります。

まとめ

  • ヘッダーの状態を切り替えるjsを作り、子テーマにアップロードして読み込ませる。
  • ヘッダーやボタンの状態表示や、不要な要素を非表示にするスタイルを子テーマの「style.css」に記述する。
  • モバイルの方にも影響があるので、打ち消す記述を子テーマの「mobile.css」に記述する。
  • 変更する既存のテンプレートは「simplicity2」テーマ下にある「sns-pages.php」のみ。

記事を読んでいる時に上スクロールとはいえ、ヘッダーがチラチラすると気になる人がいるのではないかと思い、今回の機能を実装しました。

今回も前回と同様、ヘッダーとメニューの役割について再考させられた実装でした。

CSSの当たり具合など、気になる点があるので様子を見て行きたいと思います。

スポンサーリンク

シェアする

フォローする

WordPressテーマの「Simplicity」で表示されるPCヘッダーの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!