ワードプレスにスライダーを簡単に導入してみよう!

スポンサーリンク

簡単にスライド広告を挿入したい!
任意サイズのスライドショーを挿入してサイトをおしゃれにしたい!

そんな時に便利なのが、「Easing Slider」ですよね。

簡単、便利、オシャレ。
そんなスライダーが作れます♪

という事で今回は「Easing Slider」のお話!

 

スポンサーリンク

Easing Sliderをインストール

EasingSliderを検索インストール

まずはプラグインを追加画面でEasing Sliderを検索して、インストール。

EasingSliderをインストール

インストールが完了したらプラグインを有効化

ダッシュボードにSlierが表示される

ダッシュボード一覧にSlidersが表示されましたので、クリックしましょう。

AddNewで画像やリンクを挿入

Add Newをクリックする事で新規スライダーが作る画面に移動します。

スライダー名と画像挿入とランダム

Name:スライダー名を入力
Randomize the slide order:スライダー画像の順番がランダムになります。
Add Sliders:スライダー画像のアップロード&選択画面が表示されます。

 

Add Slidersをクリックすると、

画像をアップロード&挿入画面

のような画面が表示されます。

スライドさせたい画像をドロップ&ドロップでアップロードしたり、スライドさせたい画像を選択したりしましょう!

ここでスライドさせたい画像を選んだら、Insert into Sliderをクリックします。

 

これでスライドする画像が選ばれました。

スライド画像にリンクを張る

画像をスライドさせたいだけなら、画像を選択するだけで十分ですが、画像にリンクを張りたい場合は画像内にあるペンマークをクリックしましょう。

画像にリンクを張る

画像編集画面が現れて、右上のLINK SETTINGSでURLを挿入する事ができます。(デフォルトではNoneになってます。)

カスタムURLを選んでURL挿入

Custom URLを選択するとURL入力欄が現れますから、任意のURLを挿入しましょう。

URL入力欄の下にチェックを入れると、別ウィンドウでURL先が開くように設定できます。

設定が終わったら右下のUpdateをクリック

 

以上を何度か繰り返してスライドしたい画像の設定を行います。

スライドしたい画像を選択したらPu

スライドしたい画像を何枚か選んで設定が終わったら、右にあるPublishをクリックしましょう。

 

スライドショーの細かな設定

スライドショーではいくつかの細かな設定ができます。

Dimensions

画像のサイズなどを選択できます

Wideth:表示させる画像の横幅
Height:表示させる画像の縦幅
Make 100% full width:表示させる場所の幅いっぱいに画像を表示させます。
+Show Advanced images:以下2つのメニューが表示されます。
Crop & Resize images:指定したサイズになるように画像をリサイズします。
Enable Adaptive Height:スライドショーで表示される画像の高さを画像のサイズごとに変えます。

Transitions

Transitions

Effect:スライドの効果を選べます。
Duration:効果のタイミングをミリ秒単位で設定できます。

Preloading

Preloading
ロード時間を短縮させます。

Next & Previous Arrows

矢印の表示非表示
Arrows:スライド矢印のEnable(表示)Disable(非表示)の選択ができます。
On Hover:マウスオンの時のみ矢印を表示するならTrue 常に表示するならFalse
Position:画像内(inside)か画像外(Outside)が選べます。

Pagination Icons

ポジションアイコンズ
Pagination:画像下のページネイションの表示(Enable)非表示(Disable)が選べます。
On Hover:マウスオン時のみページネイションを表示するならTrue 常に表示するならFalse
Position:ページネイションの表示位置を画像内外、右中左、上下から選べます。

Automatic Playback

スライドショーの自動再生を設定
Playback:自動再生の有効(Enable)無効(Disable)が選べます。
Pause Duration:ミリ秒単位でスライドショーの停止時間を設定できます。

 

出来上がったスライドショーをウィジェットや記事内に表示してみよう!

スライドショーが出来上がると、Slidersの画面からスライドショーのショートコードやphpコードがコピー出来るようになります。
ショートコードで挿入しよう

コピーしたショートコードを記事内に貼り付けてみると、

このように表示されるようになります↑

 

ウィジェットの場合

ウィジェットの場合、いちいちショートコードを挿入する必要はありません♪

ウィジェット一覧の中にSlider

ウィジェットパーツ一覧の中にSliderがあるので、

Sliderを表示したい場所をえらぶ

Sliderを追加したい場所を選んで、ウィジェットを追加をクリックするとSliderが追加されています。

ウィジェット内ですラダーを選択

あとは表示させたい項目を選択して保存をクリックするだけです。

ブログランキングに参加しています。

共感できればクリックお願いしますm(_ _)m

コメントを残す

*