WordPressのテーマ「Lightning」のトップページスライドショーは横スライドです。横スライドも良いけれど、ちょっとサイトの種類によってはイメージと違う場合があるかと思います。

そんな時は、「 SiteOrigin Widgets 」を使ってフェードタイプのスライドショーを設置してみましょう!

SiteOrigin Widgetsプラグインを導入しよう!

ダッシュボード⇒プラグイン⇒新規追加から右側にある検索窓に「 SiteOrigin Widgets 」っと入力。

そして、下記と同じプラグインを今すぐインストール有効化をクリック。

機能の設定

続いて、どの機能を使うかを設定していきます。

ダッシュボード⇒プラグイン⇒SiteOrigin Widgets をクリック。


アクティブな機能がこちら(カラーになっているとアクティブになっている証拠)

私がよく使う機能は、ボタンImageImage Slider(画像のスライド)です。


追加が必要な機能があれば、こちらからActiveに切り替えてください。

こちらはお好みでActiveにしてください。

ウィジェットを見てみよう!

ダッシュボード⇒外観⇒ウィジェットをクリック。

そうすると利用できるウィジェットに先ほどActiveにしたものが追加されています。

これで、トップページやサイドバーなどに導入することができるようになりました。

フェードタイプのスライドショーを設置

ダッシュボード⇒外観⇒ウィジェットをクリック。

利用できるウィジェットから SiteOrigin Slider を選び、設置したい場所にウィジェットを追加します。


ウィジェットを追加したところで、SiteOrigin Slider の設定をします。

Add をクリックすると、スライドショーの項目が追加されます。


Frame 右のプルダウンをクリックし、Choose Media をクリック

画像にリンクを貼りたい場合は、Destination URL にリンク先URLを入れてください。

繰り返し、必要なスライド枚数に応じて、Addから繰り返し設定してください。


続いて、動きの設定です。

一度、下記の設定で行ってみてください。

Animation speed でアニメーションのスピードを調整してください。
(数字を増やすと遅くなり、減らすと早くなります)

Timeout で各画像の表示の時間を調整します。
(数字を増やすと遅くなり、減らすと早くなります)

その他は特に設定不要です。

最後に保存を押したら完成です。

[aside type=”warning”]スライドショーの画像は、全て同じ大きさの画像にしてください[/aside]

設定は以上になります。

参考事例

https://nanaeco7.com/

http://bikozo.com/