「Easing Slider」の使い方

α(ALPHA)のデモサイトで、いいなぁと思ったスライダー。

α(ALPHA)テーマの機能なのかと勘違いしてしまっていたけれど、
「Easing Slider」というプラグインの機能でした。。。

そんな「Easing Slider」。
最初はちょっとよくわからないところもあったけれど、
一度使ってみると簡単だと思えるようになりました。

 

以下使い方。


いつものように、プラグインの新規追加からプラグインをインストールしたら、
左のサイドバーに「Sliders」というのが追加されるので、それを選択。

左サイドバーの「Sliders」の2こ下の「Add New」もしくは、メインページの上部にある同名のボタンをクリック。

Easing Slider waytouse3

ここでスライダー名をName欄に入力してもいいが、とりあえず後で。
「Add slides」を選択。

Easing Slider waytouse3

ファイルを用意していなかった場合は、ここでファイルをアップロード。

Easing Slider waytouse4

ファイルをアップロードしたら、「Insert into Slider」を選択。

Easing Slider waytouse5

画像の順番を変えたい場合は、画像にマウスオーバーすると鉛筆と×のようなマークが表れて、ドラッグ&ドロップで移動できるようになるので、移動する。

順番を直してName欄にスライダーにつける名前を入力したら、「Publish」ボタンをクリック。

Easing Slider waytouse7

Easing Slider waytouse8

Publishの下のところに赤字で「Move to Trash」と表示されたぐらいで、画面は特に変わらないので、「?」と思いますが、これで作成成功です。

ここでもう一度左スライドバーの「Sliders」、もしくはその下の「All Sliders」をクリックすると、

Easing Slider waytous9

新しく項目が追加されているはずです。

Easing Slider waytouse10

項目の右の部分を見てみると、

「Shortcode」とPHP用の「Template Function」が発行されているので、
これをコピーして、スライダーを表示させたいところに埋め込みます。

 

本文に埋め込みたい場合は、投稿ページに表示されている「Add Slider」をクリック。

Easing Slider waytouse11

すると、下のような画面が表示されます。

Easing Slider waytouse12

リスト部分を選択すると、先程作成したスライダーのショートコードが選択できるので、
それを選択。

Easing Slider waytouse13

「Insert Slider」ボタンをクリックします。

Easing Slider waytouse14

投稿画面上は、[easingslider id="○○"]のような文字が表示されるだけですが、
プレビューで見てみると…

下のようなスライダー表示ができました。

 


 

WordPressってプラグインで簡単に色んなことができて楽しくなりますね♪