WordPress個別サポート

Lightningのスライドショーは簡単に設定できて便利ですが画像は横からスライドする仕組みです。画像がフェードイン・フェードアウトするフェード系にしたい場合、このスライドショーをカスタマイズするより、別のスライドショープラグインでフェード系のスライドショーを作成した方が早いかもしれません。以下、Lightningにフェードのスライドショーを組み込む方法を紹介します。仕上がりイメージは次のようになります。

この記事はLightningバージョン6.3.0で検証しています。

スポンサーリンク

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

新たなスライドショーを組み込むため、現状のLightning組み込みのスライドショーを非表示にします。その場合、スライドショーのメニューで画像を全て削除すれば大丈夫ですが、「やっぱり元に戻そう」が面倒です。

後で戻す可能性も考えて一時的に非表示にできれば便利です。そんなときはfront-page.phpの3行目あたりにある「get_template_part( 'module_slide' );」の部分をコメントにすれば大丈夫です。この部分でLightningのスライドショーを表示しています。

<?php get_template_part( 'module_slide' ); ?>

「get_template_part」の前に「//」を付加してコメントにします。

<?php //get_template_part( 'module_slide' ); ?>
front-page.phpは子テーマで編集するのが理想です。

これでスライドショーが表示されなくなります。

スライドショーが非表示に

スライドショーが非表示に

コメントを解除(//を削除)すれば元のスライドショーが表示されるようになります。

フェード系のスライドショーを追加する

任意のスライドショープラグインをインストールしてフェード系のスライドショーを作成します。

ここではMetaSliderプラグインを使いますが他のスライドショープラグインでも考え方は同じです。

MetaSliderプラグインのインストール

MetaSliderプラグインのインストール

MetaSliderでスライドショーを作成します。

スライドショーを作成

スライドショーを作成

スライドショーの効果をフェードにしておきます。

効果を「フェード」に

効果を「フェード」に

スライドショーを保存して、テンプレートに入力するショートコードをコピーします。

テンプレート用のショートコードをコピー

テンプレート用のショートコードをコピー

「テンプレートに入力するショートコード」とは一般的にPHPのコードでdo_shortcode関数が使われています。

テンプレートにショートコードだけを入力してもうまくいかないので注意してください。

WordPressでショートコードがそのまま表示されてしまうとき

このコードをfront-page.phpにペーストします。場所はLightning組み込みのスライドショーを非表示にした直後あたりです。

新たなスライドショーのショートコードをペースト

新たなスライドショーのショートコードをペースト

新たなスライドショーが表示されるようになります。

フェード系のスライドショーが表示される

フェード系のスライドショーが表示される

ここまでできれば、フェード系でもワイプ系でも自由にスライドショーを設定できると思います。

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
いろいろ質問できる対面サポートまたは作業代行を依頼できるメールサポートで対応します。ご都合に合わせて気軽にご相談ください。
現在までの対応件数:1806件
WordPress個別サポート
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク