VWSとは フォーラム Lightning [ 解決済 ] トップページのコンテンツエリア

[ 解決済 ] トップページのコンテンツエリア

タグ: 

このトピックには2件の返信が含まれ、2人の参加者がいます。3 日、 19 時間前 asahi さんが最後の更新を行いました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #17358

    asahi
    参加者

    トップページは、1カラム(no-sidebar)で表示されるようにしていますが、
    一部、2カラムで表示したい部分があります。

    まず、スライドショーの下にウィジェット「トップページコンテンツエリア」を利用し、
    別の固定ページが表示されるようにしています。ここは、1カラムで表示され問題ありません。

    次に、ウィジェット「トップページコンテンツエリア左」「トップページコンテンツエリア右」を使い、2カラム表示されるようにして、左に新着情報、右にカテゴリーやお問い合わせ先バナーなどが表示されるようにしたいと思います。

    2カラムで表示されるまでは問題ないのですが、左幅を広く、右幅を狭くしたいのです。
    要素をみると、左右どちらも「.col-sm-6」で「width: 50%;」が適用されており、
    均等幅になっています。
    左右の幅を調整する場合は、どのように設定したらよいでしょうか。

    よろしくお願いいたします。

    #17376

    RICK
    参加者
    • 「トップページコンテンツエリア左」
    • 「トップページコンテンツエリア右」

    上記の2つのウィジェットエリアは少し干渉し辛い部分で定義されているため、
    (親テーマを直接書き換えるのは将来的に考えても非推奨&解除されにくい書き方をしているため)
    新たにウィジェットエリアを開設することで対応してみました。

    下記コードを子テーマの functions.php に記述すると、
    新たに下記2つのウィジェットエリアが追加されるのでそちらを使用してみてください。

    • 「トップページコンテンツエリア左2」
    • 「トップページコンテンツエリア右2」
    /**
     * Define Widget Areas for asahi
     */
    function asahi_widgets_init() {
    
    	register_sidebar(
    		array(
    			'name'          => __( 'Home content top after left', 'lightning-pro' ) . '2',
    			'id'            => 'home-content-top-after-left-widget-area-kai',
    			'before_widget' => '<div class="widget %2$s" id="%1$s">',
    			'after_widget'  => '</div>',
    			'before_title'  => '<h2 class="mainSection-title">',
    			'after_title'   => '</h2>',
    		)
    	);
    	register_sidebar(
    		array(
    			'name'          => __( 'Home content top after right', 'lightning-pro' ) . '2',
    			'id'            => 'home-content-top-after-right-widget-area-kai',
    			'before_widget' => '<div class="widget %2$s" id="%1$s">',
    			'after_widget'  => '</div>',
    			'before_title'  => '<h2 class="mainSection-title">',
    			'after_title'   => '</h2>',
    		)
    	);
    }
    add_action( 'widgets_init', 'asahi_widgets_init', 100 );
    
    /**
     * Place Widget Areas for asahi
     */
    function asahi_add_widget_area() {
    	if (
    		is_active_sidebar( 'home-content-top-after-left-widget-area-kai' ) ||
    		is_active_sidebar( 'home-content-top-after-right-widget-area-kai' )
    	) :
    		echo '<div class="row">';
    		if ( is_active_sidebar( 'home-content-top-after-left-widget-area-kai' ) ) :
    			echo '<div class="col-sm-8">';
    			dynamic_sidebar( 'home-content-top-after-left-widget-area-kai' );
    			echo '</div>';
    		endif;
    		if ( is_active_sidebar( 'home-content-top-after-right-widget-area-kai' ) ) :
    			echo '<div class="col-sm-4">';
    			dynamic_sidebar( 'home-content-top-after-right-widget-area-kai' );
    			echo '</div>';
    		endif;
    		echo '</div>';
    	endif;
    }
    add_action( 'lightning_home_content_top_widget_area_after', 'asahi_add_widget_area' );

    幅の割合はasahi_add_widget_area内のcol-sm-8col-sm-4で指定しています。
    この部分の84を合計が12になるように調整してみてください。

    #17456

    asahi
    参加者

    RICK 様

    ご回答ありがとうございました。
    また御礼が遅くなり大変申し訳ございません。

    早速試してみたところ、無事希望通りの幅を実現することができました。
    新たにウィジェットを開設して・・・大変勉強になりました。

    本当にありがとうございました。

    asahi

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

このトピックに返信するにはログインが必要です。