Shortcodes Ultimate を使ってヘッダーのスライドショーの作り方【ワードプレスプラグイン】

更新日:

このホームページはWordPressの無料テーマ、「STINGER PLUS2」を使用しています。
トップページのスライドショーはShortcodes Ultimateというプラグインを使います。

①[プラグイン > 新規追加] からShortcodes Ultimateをインストールします。インストールしたら[有効化] をクリックします。

②[外観 > ウィジェット] より[Shortcodes Ultimate> ヘッダー画像エリアウイジェット] を選び③[追加] をクリックしてください。

④ヘッダー画像エリアウイジェットよりタイトルはShortcodes Ultimateのままでいいです。[ショートコードを挿入]をクリック

⑤上記画面より[Image carousel] をクリック。

次から設定していきます。

★画像サイズは1920x420pxの画像を用意し、メディアライブラリにアップロードをしておくと左右幅いっぱいに配置されることになり、後の設定がラクになります。

★[メディア > ライブラリ] を選択してスライドショーで使用する画像を選びスライドリンクよりページのリンクを入力しておくと、画像ボタンになります。

⑥画像ソースを選択よりメディアライブラリーを選択します。

以下設定です。たくさんありますが初期設定のままでいいです。

制限
20のまま
Slides Style
デフォルト
Controls Style
ライト

画像の切り抜き
Do not crop images

カラム
1
Adaptive
はい
間隔
はい
配置
中央

Max Width
none

Captions
いいえ
Arrows (Left / Right)
はい
Dots (Pagination)
はい

リンク先
Custom link(added in media editor)

リンクターゲット
同じタブで開く

自動再生
5

Transition Speed

Images Size (Quality)
Large

Outline On Focus
はい
Random Order
いいえ

別の CSS クラス
空欄のまま

設定が決まったら、[ライブビュー]でどのようにスライドショーが動くかを確認してください。
⑦問題なければ[ショートコードを挿入] ボタンを押すと、ショートコードが生成されます。
※ショートコードについては何もしなくてOKです。

忘れずに[完了] ボタンで保存します。

[外観 > カスタマイズ] を選択して、トップ画面にスライドショーができているかを確認してみましょう。

 

画像リンクも貼れて、便利で使える無料ワードプレスプラグインです。

ご意見、ご要望がございましたらお問い合わせフォームよりお問い合わせください。

 

著作権や肖像権に関して問題がありましたら御連絡をお願いします。
著作権所有者様からの警告及び修正・撤去のご連絡があった場合には、迅速に対処または削除致します。

 

nend広告


-stinger+2, ワードプレスプラグイン

Copyright© sevence graphic , 2024 All Rights Reserved Powered by STINGER.