トップページのコンテンツエリア

[asahi]

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

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

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

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

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

[DRILL LANCER]

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

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

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

• 「トップページコンテンツエリア左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-8・col-sm-4で指定しています。
この部分の8と4を合計が12になるように調整してみてください。

[asahi]

RICK 様

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

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

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

asahi

[投稿者]

投稿