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

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

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

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

  • Origin II のヘッダー固定を解除 ( 必須 )
  • Origin のヘッダー固定を復活 ( 必須 )
  • Origin のヘッダーの伸縮を復活 ( 任意 )
  • CSS での調整( 任意 )

上記のうち、上3つは 子テーマの functions.php で行い、残りの1つは子テーマの style.css で行います。

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

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

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

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

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

/**
 * Origin II で Origin のヘッダー固定仕様.
 */
function lightning_revive_origin_header_scroll_at_origin2() {
	// Origin II のヘッダー固定を解除 ( 必須 ).
	remove_filter( 'lightning_localize_options', 'lightning_origin2_add_js_option', 10, 1 );
	// Origin のヘッダー固定を復活 ( 必須 ).
	remove_filter( 'lightning_headfix_enable', 'lightning_origin2_headfix_disabel' );
	// Origin のヘッダー伸縮を復活 ( 任意 ).
	remove_filter( 'lightning_header_height_changer_enable', 'lightning_origin2_header_height_changer_disabel' );
}
add_action( 'init', 'lightning_revive_origin_header_scroll_at_origin2' );

子テーマの style.css に記述するコード

上記の functions.php で固定ヘッダーの動きの部分は Origin 仕様にすることができます。

しかし、Origin II ではデバイス幅が 992px 以上 1200px 以下のときに下記画像のようにヘッダーが2行になります。

上記が気にならない方はここで手を止めても構いませんが、そうでない方は子テーマの style.css に下記を追加しましょう。

/* Origin II の 992px ~ 1200px までのヘッダーのレイアウトを Origin っぽく*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	.siteHeader_logo {
	    width: auto;
	    float: left;
	}
	
	.gMenu_outer {
    	width: auto;
    	float: right;
	}

	.siteHeader_logo img {
	    margin: 0;
	}
}

まとめ

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

基本的には 子テーマの functions.php にコードを追記することでき、一部のデバイス幅のときのデザインが気になる場合は style.css にもコードを追記することで対処可能でした。

更新履歴

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

コメントを残す

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

CAPTCHA