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

VWSとは フォーラム バグ報告と提案 Lightning Pro BS4 対応版のサイドバーの設定について提案

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

  • このトピックには1件の返信、2人の参加者があり、最後にVektor,Incにより4年、 6ヶ月前に更新されました。
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • 投稿者
    投稿
  • #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 を柔軟に対応できると思います。

    #19978

    Vektor,Inc
    キーマスター

    > RICKさん

    いつも回答&ご提案ありがとうございます。RICKさんのご提案はBootstrap4を前提とした至極まっとうな手法で実際試したのですが、いろいろと試行錯誤・検証した結果別の方式を採用しました。その背景については下記に記載しました。

    【重要】Lightning 7.0 / Lightning Pro 2.0 での仕様について

2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。