PR

【functions.php対応】テーマLightningのトップページにテーマ標準ではないスライド画像を表示する方法【LightningG2/G3対応】

カスタマイズ Lightningのスライド変更 カスタマイズ

Lightningテーマ標準機能のスライドショーをやめて、代わりにスライド用のプラグインをトップページのスライドショーにする方法です。

手順は以下です。

スライドショーを切り替えるための3STEP

では詳しく解説します。

Lightningの世代を確認する

現在使用しているLightningがLighitningG2かLighitningG3かわかる方は次の手順に進みます

わからない方は、サイドメニューの外観からカスタマイズを選択します。

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

Lightning機能設定

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

Generation 2(~ version 13.X)
Generation2の場合はLightningG2です
Generation 3
Generation3の場合はLightningG3です

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

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

標準のスライドショーを非表示にする

Step1と同じくサイドメニューの外観からカスタマイズを選択します。

Lightningトップページスライドショーを選択します。

LIghtningトップページスライドショー

LightningG2用のコードとLightningG3用のコードの2種類をそれぞれ紹介します!

スライドを非表示にします。G2とG3とで見た目が少し異なります。

LightningG2の場合のスライドを非表示にする
LightningG2の場合チェックを入れると非表示になる
LightningG3の場合のスライドを非表示にする
LightningG3の場合スライドを非表示にするを選択

変更後は公開をクリックして現在の状態を保存しておきましょう。

functions.phpにコードを記述する

世代によって使用できるフックが異なりますので、ご自身のサイトに適した方のコードをご使用ください。

それぞれfunctions.phpに記述します。

LightningG2用のトップページにスライドを表示させるコード

/*-------------------------------------------*/
/* ショートコードのスライドを表示させるLightningG2用 */
/*-------------------------------------------*/
function my_lightning_slider(){
	echo do_shortcode('[xo_slider id="63"]');
}
add_action( 'lightning_top_slide_before', 'my_lightning_slider' );

functions.phpに記述します。

こちらはプラグインXO Sliderを使用していますが、別のスライダープラグインでも代用可能です。別プラグインを使用する場合は5行目の

[xo_slider id="63"]

を指定のショートコードに変更してください。

LightningG3用のトップページにスライドを表示させるコード

/*-------------------------------------------*/
/* ショートコードのスライドを表示させるLightningG3用 */
/*-------------------------------------------*/
function my_lightning_slider() {
	if ( is_front_page() ) {
		echo do_shortcode('[xo_slider id="48"]');
	}
}
add_action( 'lightning_site_header_after', 'my_lightning_slider');

functions.phpに記述します。

こちらも同様にプラグインXO Sliderを使用しています。別プラグインを使用する場合は6行目の

[xo_slider id="48"]

を指定のショートコードに変更してください。

また、LightinigG3用のコードは5行目と7行目を削除すると全ページのトップにスライドが表示されます。

/*-------------------------------------------*/
/* プラグインmetasliderのスライドを表示させるLightningG3用 */
/*-------------------------------------------*/
function my_lightning_slider() {
	echo do_shortcode('[xo_slider id="48"]');
}
add_action( 'lightning_site_header_after', 'my_lightning_slider');

注意点

Lightning標準のスライドショーを非表示にする必要がありますので忘れずに設定しましょう。

コードはご自身のサイトにあった世代の方をご使用ください。

どちらのコードも同じ関数を使用していますので、両方をfunctions.phpに記述するとWordPressのエラーが出ます。

まとめ

世代によって使用できるフックが異なりますので、この機会にぜひご自身のLightningの世代がどちらなのかを把握しましょう。

新しく始めるならLightningG3がおすすめ♪

タイトルとURLをコピーしました