前にスライドバナーを設置できるプラグインとして「Easing Slider “Lite”」をご紹介しましたが、今は提供されておらず、代わりに進化した「Easing Slider」が使えるようになりました。
目次
「Easing Slider “Lite”」との大きな違い
「Easing Slider “Lite”」と「Easing Slider」の違いは大きくふたつあります。
ひとつは複数のスライダーを設定できるということ。
これってかなり使い勝手があるんですよね。例えば、トップページにスライダー①を設置して投稿ページにはスライダー②を設置。さらにサイドバーにもスライダー③を設置することも可能なんです。
ふたつめはショートコードで設置可能ということ。
複数のスライダーごとに個別のショートコードが作られるので、それを使って自由にスライダーを設置することができます。ウィジェットでも選択制で作った複数のスライダーから選べるのでとてもとても便利なプラグインです。
「Easing Slider」の導入方法
まず、WordPress管理画面の「プラグイン」⇒「新規追加」で「Easing Slider」を検索します。
「Easing Slider」が表示されます。「いますぐインストール」をクリックします。
「プラグインを有効化」をクリックします。
プラグインが有効になるとメニューに「Sliders」が追加されます。
「Add New」をクリックして新しいスライダーの設定をしましょう。
Add New Slider画面が開きます。スライダーの名前を記入し「Add Sliders」をクリックします。
スライダーの画像をアップロードしましょう。
アップロードしたファイルにチェックが入っていることを確認して「Insert into Slider」をクリック。
１枚目のスライダー画像の設置が完了です。
2枚目、３枚目も同様の手順で追加することができます。
追加する画像を選択して「Insert into Slider」をクリックしましょう。
次にバナーにリンクを設置する方法を説明しましょう。バナーにマウスオーバーするとアイコンが表示されます。ペンのアイコンをクリックします。
右に「LINK SETINGS」が開きます。「Custom URL」を選択します。
リンク先URLを記入しましょう。
別窓で開く場合は「” target=”_blank”」を追記しましょう。
最後に右下の「更新」をクリックします。
次にスライダーのエフェクト、ページ送りボタン等の設定について説明します。
「Dimensions」設定画面の説明をします。
バナーサイズやレスポンシブ対応にするかの設定が出来ます。
※レスポンシブ選択は必ずチェックを入れておきましょう。
次に「Transitions」の設定をしていきます。
動きの種類や切り替えのスピードの設定が出来ます。
次に「Next & Previous Arrows」の設定をしていきます。
バナーの両端に矢印を設置するか、また表示する位置を設定することが出来ます。
続いて、「Pagination Icons」の設定をしましょう。
ページの送りボタンを設置するか、送りボタンの設置の位置を設定できます。
次は、「Automatic Playback」の設定です。
スライドの手動・自動・画像変換のスピードの設定が可能です。
設定が完了したら「Update」をクリックしましょう。
その他にメニューの「Customize」で細かい設定ができます。
ページ送りの矢印等のカスタマイズができますが、特に必要はありません。
以上で設定は完了です。
「Easing Slider」の設置方法
設定したスライダーはメニューの「All Sliders」で確認することができます。
「Easing Slider」の設置はウィジェットによる設置と
ショートコードによる設置のふたつの方法があります。
「Easing Slider」ウィジェットによる設置
ウィジェットに「Slider」が追加されます。
ヘッダーバナーに「Slider」を設置してみましょう。設定したスライダー一覧が表示されるので設置するスライダーを選択しましょう。
はい。ヘッダーエリアにスライダーが設置されました。
「Easing Slider」ショートコードによる設置
次にショートコードによる設置方法を説明します。「All Sliders」で一覧が表示されます。
各スライダーの右にショートコードが表示されます。
設置するスライダーのショートコードをコピーして、記事に設置してみましょう。
はい。記事にスライダーを設置することができました。
