【WordPress】Lightningのトップページコンテンツエリア下部にウィジェットエリアを作成する【LightningG2/G3対応】

テーマLightningを作成した公式が、LightningG3用ウィジェットエリアのトップページコンテンツエリア上部を作成するためのコードを発表しています。

トップページコンテンツエリア上部はLightningG3で廃止されたウィジェットです。LightningG2で愛用していた人も多いのではないでしょうか。

今回はこちらを応用してトップページコンテンツエリア下部を作成します。LightningG2とLightningG3のそれぞれで使えるコードを紹介します。

世代の確認方法

外観からカスタマイズを選択します。

Lightning機能設定を選択します。

世代設定を確認します。Generation2はG2を、Generation3はG3を表しています。

Generation2は旧世代です。2021年5月までにLightningテーマを使用している方はLightningG2である可能性が高いです。

2021年5月以降にLightningテーマを使用した方はLightningG3である可能性が高いです。

世代を確認したのでさっそくコードを紹介します。

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

LightningG3でのウィジェットエリアの場所はこちらです。

上部のウィジェットエリアの追加方法は公式で発表されていますので省略します。下部のウィジェットエリアを今回は作ります。

こちらのコードはLightningG3専用です。すべてコピーしてfunctions.phpに貼り付けます。

/*-------------------------------------------*/
/*Lightning G3 でトップページコンテンツエリア下部にウィジェットエリアを設定する */
/*-------------------------------------------*/
function my_lightning_widgets_init_home_bottom() {
	register_sidebar(
		array(
			'name'          => __( 'トップページコンテンツエリア下部', 'lightning' ),
			'id'            => 'home-content-bottom-widget-area',
			'before_widget' => '<div class="widget %2$s" id="%1$s">',
			'after_widget'  => '</div>',
			'before_title'  => '<h2>',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'my_lightning_widgets_init_home_bottom' );

function my_lightning_widgets_add_home_bottom() {
	if ( is_front_page() ) {
		if ( is_active_sidebar( 'home-content-bottom-widget-area' ) ) {
			dynamic_sidebar( 'home-content-bottom-widget-area' );
		}
	}
}
add_action( 'lightning_main_section_append', 'my_lightning_widgets_add_home_bottom' );

公式で紹介されたコードに少し手を加えてウィジェットエリアを作成しました。

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

続いて、LightningG2に対応したトップページコンテンツエリア下部もご紹介します。LightningG2でのウィジェットエリアの場所はこちらです。

LightningG2ではすでにトップページコンテンツエリア上部のウィジェットエリアが存在しています。ですのでLightningG2で使えるトップページコンテンツエリア下部のコードのみを紹介します。

こちらのコードはLightningG2専用です。すべてコピーしてfunctions.phpに貼り付けます。

/*-------------------------------------------*/
/*Lightning G2 でトップページコンテンツエリア下部にウィジェットエリアを設定する */
/*-------------------------------------------*/
function my_lightning_widgets_init_home_bottom() {
	register_sidebar(
		array(
			'name'          => __( 'トップページコンテンツエリア下部', 'lightning' ),
			'id'            => 'home-content-bottom-widget-area',
			'before_widget' => '<div class="widget %2$s" id="%1$s">',
			'after_widget'  => '</div>',
			'before_title'  => '<h2>',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'my_lightning_widgets_init_home_bottom' );

function my_lightning_widgets_add_home_bottom() {
	if ( is_front_page() ) {
		if ( is_active_sidebar( 'home-content-bottom-widget-area' ) ) {
			dynamic_sidebar( 'home-content-bottom-widget-area' );
		}
	}
}
add_action( 'lightning_mainSection_append', 'my_lightning_widgets_add_home_bottom' );

コード自体は同じでLightningのフックの名前が世代で変わっています。

使い方

外観からウィジェットを選択すると、トップページコンテンツエリア下部のウィジェットエリアができています。ここに必要なパーツを配置しましょう。

まとめ

トップページコンテンツエリア下部が欲しいと思ったので作りました。もともとトップページコンテンツエリア上部にしかウィジェットエリアがなかったので、あまり需要はないかもしれません。

functions.phpに追加していても損はないかなと思います。