スライド・アイキャッチ設定が豊富なテーマ『SunRain』のカスタマイズと、テーマで使用されているjQuery FractionSlider について

前回紹介した画像をアニメーションさせられるスライダー機能内蔵のwordpressテーマ『SunRain』のカスタマイズについての記事です。

icons-photo02

このテーマのスライダーにはjQuery の FractionSlider が使用されています。
FractionSliderについて理解を深めると、スライダーのカスタマイズもスムーズに行きますよ!

画像を個々に動かしたい!

トランジション等、動きをつけたい!

スライダを派手に!FLASHみたいに!

FractionSlider自体も使ったことはありませんでしたが、色々な動きが出せるみたいで面白いですね。

FractionSliderについて

紹介記事は下記です。

コリスさん
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fractionslider.html

配布元:
FractionSlider 0.9.9.9
サイトリンク:
http://jacksbox.de/stuff/jquery-fractionslider/

Slide options 及び Element options

画像をどんな風にアニメーションさせるか?
という設定を行うことができます。

http://jacksbox.de/stuff/jquery-fractionslider/element-option-reference/

jQueryのイージングについて

data-ease-in / data-ease-out

例えばバウンスBounceという名前だと要素がボヨンボヨンと跳ねる感じですね。
イージングの種類は下記を参考に色々変更してみて試してみましょう。

http://jqueryui.com/easing/

実際にSunRainのどこで使われてるの?

では、実際にテーマのどこでどんな風に使われているのかを確認してみます。

front-page.php

front-page.phpの中に、スライダーの要素があります。

<?php 
echo '
<div class="slide">
<img src="'. get_template_directory_uri() . '/images/waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left">
<img src="'. esc_url(of_get_option('slide-image2', get_template_directory_uri() . '/images/cloud.png')).'"  data-position="50,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">
<img src="'. esc_url(of_get_option('slide-image3', get_template_directory_uri() . '/images/powered-by.png')).'" data-position="120,120" data-in="right" data-step="2" data-out="right" >
<img src="'. esc_url(of_get_option('slide-image4', get_template_directory_uri() . '/images/logo-back.png')).'" data-position="175,80" data-in="bottom" data-step="3" data-out="bottom" >
<img src="'. esc_url(of_get_option('slide-image5', get_template_directory_uri() . '/images/logo-small.png')).'" data-position="185,105" data-in="fade" data-step="4" data-out="fade"  >
<img src="'. esc_url(of_get_option('slide-image1', get_template_directory_uri() . '/images/victory.png')).'" data-position="10,550" data-delay="500" data-in="left" data-step="0" data-out="right">
</div>
<div class="slide">
<img src="'. get_template_directory_uri() . '/images/box2.png" width="361" height="354" data-position="-152,142" data-in="left" data-delay="200" data-out="right">
<img src="'. get_template_directory_uri() . '/images/box1.png" width="422" height="454" data-position="138,-152" data-in="bottomRight" data-delay="200">
<img src="'. get_template_directory_uri() . '/images/waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left">
<p class="slide-text1" data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">'. esc_html(of_get_option('slide-text1', 'WordPress')) .'</p>
<p class="slide-text2" data-position="90,30" data-in="left" data-step="2" data-delay="500" >'. esc_html(of_get_option('slide-text2', 'Most Userd CMS')) .'</p>		
<p class="slide-text3" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">'. esc_html(of_get_option('slide-text3', 'Ultimate Freedom')) .'</p>
<p class="slide-text4" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500">'. esc_html(of_get_option('slide-text4', 'World Leading')) .'</p>	
<p class="slide-text5" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="8000">'. esc_html(of_get_option('slide-text5', 'Free to Use')) .'</p>			
<img src="'. esc_url(of_get_option('slide-image4', get_template_directory_uri() . '/images/logo-back.png')).'" data-position="215,30" data-in="bottom" data-step="3" data-out="bottom" >
<img src="'. esc_url(of_get_option('slide-image5', get_template_directory_uri() . '/images/logo-small.png')).'" data-position="225,55" data-in="fade" data-step="4" data-out="fade"  >
<img src="'. esc_url(of_get_option('slide-image6', get_template_directory_uri() . '/images/success.png')).'" data-position="10,600" data-in="fade" data-delay="500" data-out="bottomRight">
</div>
'; ?>

slideクラスのdivで区切られて、2枚のスライドがあります。
なのでdivを丸っと消せばスライドが1枚になりますし、中の要素imgやpを削除すればスライダ内の要素を消すこともできます。
phpでSunRainの管理画面からアップした画像やテキストが呼び出されているのが確認できます。

data-in data-out data-position

例えば、この部分。

<img src="'. get_template_directory_uri() . '/images/waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left">
data-in="left"

data-inで画像のトランジションがどこから始まるか

data-position="240,17"

data-positionで要素の位置(inした後の終着点)
起点は0,0で確認してみるとスライダの左上起点ですね。(240,17だと上から240,左から17)

data-out="left"

data-outで画像のトランジションがどこにoutするか

が指定できる感じですね。
ただ、inがleft outがleftで
『右から出てきて左に消える』でしたね。左右については解釈の違いがあるかもしれませんね。
leftだと『左から』じゃなくて『左に向かって』だとか。

また、in out にはfadeも指定できるので、スライドじゃなくてぼやっと出現させたい(消したい)ときはこちらを指定しましょう。

data-ease-in data-ease-out

data-ease-in data-ease-outでイージングアニメーションを追加できます。
これは上記
http://jqueryui.com/easing/
に色々乗ってるので試してみて下さい。

data-step

これも色々試してみましたが、
・step無しだと全部一気に出て来る
・1,2,3と指定すると1が終わったら2、2が終わったら3・・・と順番を指定できる
・2が複数あったら2が全部出て来る
という感じですかね。

コレが終わってからコレを出したい!なんて時に使うオプションだと思います。

data-delayで時間差を作ることもできますが、それだと全部に時間を微調整しながら入れないといけないので、data-stepを使った方がやり易そうです。

data-special

data-specialは「cycle」サイクルだけを指定することができます。

通常、スライドの中にあるアニメーションは
data-inで出現し、stepやdelayで時間差を設け、各positionに配置され、全部が揃ったら一気にoutします。たぶん。

ただ、このcycleがある場合は話が別。

<p class="slide-text1" data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">'. esc_html(of_get_option('slide-text1', 'WordPress')) .'</p>
<p class="slide-text2" data-position="90,30" data-in="left" data-step="2" data-delay="500" >'. esc_html(of_get_option('slide-text2', 'Most Userd CMS')) .'</p>		
<p class="slide-text3" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">'. esc_html(of_get_option('slide-text3', 'Ultimate Freedom')) .'</p>
<p class="slide-text4" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500">'. esc_html(of_get_option('slide-text4', 'World Leading')) .'</p>	
<p class="slide-text5" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="8000">'. esc_html(of_get_option('slide-text5', 'Free to Use')) .'</p>

SunRain管理画面で設定できるテキスト3~5にはstep と specialが併用されています。

通常は全部が出てきてから一気に消えるアニメーションですが、
data-specialにcycleが指定されて居ると、
前の要素が終わったら次を出すということができます。

つまり、任意の画像を他の画像より先にoutできる・・・ということですね。たぶん。

まとめ

SunRainのコードを元に、色々変更したりして検証してみました。
レスポンシブにも対応しているので安心です。
上記はその中で僕が確認した動作をまとめたものです。
もし解釈に違いがあったらすみません!!

確実に言えるのは使いこなせばFlashみたいなアニメーションを実現させられるということですね。
派手な見せ方がしたい!という要望があったら導入を検討するのも良いと思います!

そういえばSunRainについての記事でした。

せっかくなのでテーマSunRainの他の部分についても触れておきます。

アイキャッチの設定について

theme-sunrain_07

SunRain管理画面から指定できるこのアイキャッチとテキストですが、
4つで良いんだけど・・・
と思っても、画像やテキストを消しただけでは空白要素が出力されます。

ちょっと残念。
theme_sunrain

テーマファイルはfeatured-box.phpとなります。

<?php 
foreach (range(1, 5) as $fboxn) { ?>
<span class="featured-box"> 
<img class="box-image" src="<?php echo esc_url(of_get_option('featured-image' . $fboxn, get_template_directory_uri() . '/images/featured-image' . $fboxn . '.png')) ?>"/>
<h3><?php echo esc_html(of_get_option('featured-title' . $fboxn, 'SunRain Theme for Small Business')); ?></h3>
<div class="content-ver-sep"></div><br />
<p><?php echo esc_html(of_get_option('featured-description' . $fboxn , 'The Color changing options of SunRain will give the WordPress Driven Site an attractive look. SunRain is super elegant and Professional Responsive Theme which will create the business widely expressed.')); ?></p>
</span>
<?php }  ?>

foreach分で1~5まで出力されるようになっています。
減らしたい時は5を4や3にすればOKです。

foreach (range(1, 4) as $fboxn) 

6以上に増やしても、もちろん管理画面から画像がアップできるようになるわけではないので注意が必要です。
簡易的にやるならば、
foreach分が終了したところに

<?php 
foreach (range(1, 5) as $fboxn) { ?>
//中略
<?php }  ?>
<!-- 6つ目以降の要素 -->
<span class="featured-box"> 
<img class="box-image" src="画像URLを指定">
<h3>静的に増やすタイトル</h3>
<div class="content-ver-sep"></div><br>
<p>静的に増やす説明文</p>
</span>

というやり方があります。

管理画面で6つ目以降を追加できるようにするにはもっとコアな部分に触れなければいけなそうなので今回はやりませんでした。
(自分にできるのか分かりませんが笑)

再度まとめ

SunRainをなんとなく使ってみることにしましたが、jQuery FractionSliderについても勉強になりました。
TOPページをランディングページっぽく派手に見せたいよ!という要望に充分応えられそうです。

コメントをどうぞ

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)