Lightning Pro BS4 対応版のサイドバーの設定について提案

このトピックには1件の返信、2人の参加者があり、最後にVektor,Incにより5年、 2ヶ月前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿

2019年8月24日 1:37 PM #19288

DRILL LANCER

モデレーター

Lightning Pro BS4 対応版の Origin II ではサイドバーの左右変更の設定が効きません。
本来なら inc/template-tag.php の lightning_get_the_class_name で定義されるはずが未定義であることが原因だと思われます。

そこで、この関数の案をここに書かせていただきます。

function lightning_get_the_class_name( $position = '' ) {
	$skin_info = Lightning_Design_Manager::get_current_skin();
	if ( empty( $skin_info['bootstrap'] ) ) {
		if ( isset( $options['sidebar_position'] ) && $options['sidebar_position'] === 'left' ) {
			$class_names = array(
				'header'          => 'navbar siteHeader',
				'nav_menu_header' => 'nav gMenu',
				'mainSection'     => 'col-md-8 col-md-push-3 col-md-offset-1 mainSection',
				'sideSection'     => 'col-md-3 col-md-pull-9 subSection sideSection',
				// 'footerMenu_nav'  => 'nav',
			);
		}
		else {
			$class_names = array(
				'header'          => 'navbar siteHeader',
				'nav_menu_header' => 'nav gMenu',
				'mainSection'     => 'col-md-8 mainSection',
				'sideSection'     => 'col-md-3 col-md-offset-1 subSection sideSection',
				// 'footerMenu_nav'  => 'nav',
			);
		}
	} elseif ( $skin_info['bootstrap'] === 'bs4' ) {
		if ( isset( $options['sidebar_position'] ) && $options['sidebar_position'] === 'left' ) {
			$class_names = array(
				'header'          => 'siteHeader',
				'nav_menu_header' => 'gMenu vk-menu-acc',
				'mainSection'     => 'col-lg-8 order-lg-2 mainSection ',
				'sideSection'     => 'col-lg-4 order-lg-1 subSection sideSection',
				// 'footerMenu_nav'  => 'nav footerMenu_nav',
			);
		}
		else {
			$class_names = array(
				'header'          => 'siteHeader',
				'nav_menu_header' => 'gMenu vk-menu-acc',
				'mainSection'     => 'col-lg-8 mainSection ',
				'sideSection'     => 'col-lg-4 subSection sideSection',
				// 'footerMenu_nav'  => 'nav footerMenu_nav',
			);
		}
	}
	if ( empty( $class_names[ $position ] ) ) {
		$return = '';
	} else {
		$return = esc_attr( $class_names[ $position ] );
	}
	return $return;
}

BS3 の横並びは float で処理されていますが、BS4 の横並びは flex で処理されています。
つまり、inc/customize/customize-design.php にある下記コードでは制御不能になります。

if ( isset( $options['sidebar_position'] ) && $options['sidebar_position'] === 'left' ) {
		$dynamic_css .= '@media (min-width: 992px) { .siteContent .subSection { float:left;margin-left:0; } .siteContent .mainSection { float:right; } }';
	}

BS3 のカラムの並び替えには push, pull が採用されており、
https://cccabinet.jpn.org/bootstrap3/css.php#grid-column-ordering
BS4 のカラムの並び替えには order が採用されています。
https://cccabinet.jpn.org/bootstrap4/layout/grid#order-classes

それを使用することで BS3 と BS4 を柔軟に対応できると思います。

2019年9月6日 1:12 PM #19978