複数のスライドバナーを簡単に設置できるプラグイン「Easing Slider」

前にスライドバナーを設置できるプラグインとして「Easing Slider “Lite”」をご紹介しましたが、今は提供されておらず、代わりに進化した「Easing Slider」が使えるようになりました。

「Easing Slider “Lite”」との大きな違い

home1-1440x550

「Easing Slider “Lite”」と「Easing Slider」の違いは大きくふたつあります。

ひとつは複数のスライダーを設定できるということ。

s-27

これってかなり使い勝手があるんですよね。例えば、トップページにスライダー①を設置して投稿ページにはスライダー②を設置。さらにサイドバーにもスライダー③を設置することも可能なんです。

ふたつめはショートコードで設置可能ということ。

s-21

複数のスライダーごとに個別のショートコードが作られるので、それを使って自由にスライダーを設置することができます。ウィジェットでも選択制で作った複数のスライダーから選べるのでとてもとても便利なプラグインです。

「Easing Slider」の導入方法

まず、WordPress管理画面の「プラグイン」⇒「新規追加」で「Easing Slider」を検索します。

s-01

「Easing Slider」が表示されます。「いますぐインストール」をクリックします。

s-02

「プラグインを有効化」をクリックします。

s-03

プラグインが有効になるとメニューに「Sliders」が追加されます。
「Add New」をクリックして新しいスライダーの設定をしましょう。

s-04

Add New Slider画面が開きます。スライダーの名前を記入し「Add Sliders」をクリックします。

s-05

スライダーの画像をアップロードしましょう。

s-06

アップロードしたファイルにチェックが入っていることを確認して「Insert into Slider」をクリック。

s-07

1枚目のスライダー画像の設置が完了です。
2枚目、3枚目も同様の手順で追加することができます。

s-08

追加する画像を選択して「Insert into Slider」をクリックしましょう。

s-09

次にバナーにリンクを設置する方法を説明しましょう。バナーにマウスオーバーするとアイコンが表示されます。ペンのアイコンをクリックします。

s-10

右に「LINK SETINGS」が開きます。「Custom URL」を選択します。

s-11

リンク先URLを記入しましょう。

s-12

別窓で開く場合は「” target=”_blank”」を追記しましょう。

s-13

最後に右下の「更新」をクリックします。

s-14

次にスライダーのエフェクト、ページ送りボタン等の設定について説明します。

s-15

「Dimensions」設定画面の説明をします。

バナーサイズやレスポンシブ対応にするかの設定が出来ます。
※レスポンシブ選択は必ずチェックを入れておきましょう。

s-08

次に「Transitions」の設定をしていきます。
動きの種類や切り替えのスピードの設定が出来ます。

s-09

次に「Next & Previous Arrows」の設定をしていきます。
バナーの両端に矢印を設置するか、また表示する位置を設定することが出来ます。

s-10

続いて、「Pagination Icons」の設定をしましょう。
ページの送りボタンを設置するか、送りボタンの設置の位置を設定できます。

s-11

次は、「Automatic Playback」の設定です。
スライドの手動・自動・画像変換のスピードの設定が可能です。

s-12

設定が完了したら「Update」をクリックしましょう。

s-23

その他にメニューの「Customize」で細かい設定ができます。

s-24

ページ送りの矢印等のカスタマイズができますが、特に必要はありません。

s-25

以上で設定は完了です。

「Easing Slider」の設置方法

設定したスライダーはメニューの「All Sliders」で確認することができます。

s-26

「Easing Slider」の設置はウィジェットによる設置と
ショートコードによる設置のふたつの方法があります。

s-27

  「Easing Slider」ウィジェットによる設置

ウィジェットに「Slider」が追加されます。

s-17

ヘッダーバナーに「Slider」を設置してみましょう。設定したスライダー一覧が表示されるので設置するスライダーを選択しましょう。

s-18

はい。ヘッダーエリアにスライダーが設置されました。

s-19

  「Easing Slider」ショートコードによる設置

次にショートコードによる設置方法を説明します。「All Sliders」で一覧が表示されます。
各スライダーの右にショートコードが表示されます。

s-20

設置するスライダーのショートコードをコピーして、記事に設置してみましょう。

s-21

はい。記事にスライダーを設置することができました。

s-22

Easing Sliderは複数設置可能です
Easing Sliderは複数のスライダーを設定できるのが最大の魅力です。ヘッダーへ。あるいはサイドバーにもスライダーを設置できます。レスポンシブ対応もうれしいですね。

この記事が気に入ったら
いいね ! しよう

当ブログはWordPressテンプレート「ALPHA」を使用しています

使いたいプラグインがきっと見つかる!カテゴリー別プラグイン

コメントを残す

CAPTCHA