Pale II のヘッダー固定を Origin 風にする方法

この記事では、Lightning / Lightning Pro のスキンの一つである Pale II のヘッダーの固定を Origin 風にする方法について解説します。

このカスタマイズを施すと、下記画像のような状態でヘッダーが固定されます。

Pale II のヘッダー固定を Origin 風にするには?

今回やるべきことは下記の4つです。

  • 外観 → カスタマイズ → Lightning Skin Pale 設定 の背景色を設定 ( 必須 )
  • Pale II のヘッダー固定を解除 ( 必須 )
  • Origin のヘッダー固定を復活 ( 必須 )
  • Origin のヘッダーの伸縮を復活 ( 任意 )

外観 → カスタマイズ → Lightning Skin Pale 設定 の背景色の設定をしない場合、下記画像のように透明になって見にくくなります。

下3つは全て 子テーマの functions.php で行います。

Origin のヘッダー伸縮を ON にするとスクロール時にヘッダーがびろ~んと一瞬動きます。

Pale II のヘッダー固定を Origin 風にするコード

Pale II のヘッダー固定を Origin 風にするコードは下記のとおりです。

子テーマの functions.php に記述するコード

子テーマの functions.php には下記を記述します。

/**
 * Header Prefix Setting for Pale II
 */
function lightning_disable_pale2_header_prefix() {
	// Pale II のヘッダー固定を解除 ( 必須 ).
	remove_filter( 'lightning_localize_options', 'ltg_pale_add_js_option', 10, 1 );
	// Origin のヘッダー固定を復活 ( 必須 ).
	remove_filter( 'lightning_headfix_enable', 'ltg_pale_headfix_disabel' );
	// Origin のヘッダー伸縮を復活 ( 任意 ).
	remove_filter( 'lightning_header_height_changer_enable', 'ltg_pale_header_height_changer_disabel' );
}
add_action( 'init', 'lightning_disable_pale2_header_prefix' );

まとめ

この記事では Lightning / Lightning Pro のスキンの一つである Pale II のヘッダーの固定を Origin 風にする方法について解説しました。

子テーマの functions.php にコードを追記することで可能でした。

更新履歴

更新日時更新履歴
【更新1】2020/05/13ヘッダー固定の方法が変わったので記事を更新

Follow me!

投稿者プロフィール

DRILL LANCER
WEB 系の仕事で生計を立てることを目指して勉強中!!
VWS や WordPress のフォーラムではたまに回答者として訪問してます!!
関連記事
コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA