スライダーDEMO
[easingsliderlite]

Easing Slider Lite

このスライダーは、レスポンシブテーマでも利用可能なスライダープラグインです。
コアの最新機能を取り入れた（プラグインのカスタマイズはカスタマイザーに対応しておりプリビューしながら、設定を変更する事が出来ます）

意欲的なプラグインで、さらに高機能な有料版も存在しするようです。

WordPressver3.5.2でプラグインの動作確認のメモです。

Downloads

プラグインオプションページ

edit slideshow

画像の選択は、コアの画像選択ダイアログから自由に選択が出来ます。
- 画像のランダム表示設定
スライダーサイズ設定
- レスポンシブ設定
コンテンツの切り替え（Transitions）
- 切り替えのエフェクトeffect( slide,fade )
- 切り替え時間（Duration）
コンテンツ切り替え矢印（Next Previus Arrows）
- 表示非表示（show hide）
- マウスホバー効果（hover effect）
- 表示場所（position (inside, outside )）
ページネーションアイコン（Pagenation icon）
- 表示非表示（show hide）
- マウスホバー効果（hover effect）
- 表示場所position(inside,outside,bottom(left,right,center),top(left,right,center)
Automatic Playback

Customize

カスタマイズは、コアのテーマカスタマイザーから、アイコンイメージの変更や枠線ドロップシャドーなどの設定が行えます。

コンテンツの切り替え矢印画像の変更（Next Previus image and size.）
ページネーション画像の変更（pagenation image and size.）
スライダーの枠線と色設定（border color border width.）
スライダードロップシャドー画像設定（drop shadow image.）

Settings

画像リサイズ設定（Image Resizing）
htmlソースでのスクリプトポジション設定（Output JS position）
htmlソースでのCSSポジション設定（Output CSS position）
設定のリセット（Reset options）

スライダーの表示

header.phpの表示したい場所に、以下のコードを記述する

<?php 	
if ( function_exists( "easingsliderlite" ) ) { 
	easingsliderlite(); 	
} 
?>

または、投稿本文にショートコードを記述します。

［easingsliderlite］

※括弧は、半角に置き換えてください

カスタマイズのヒント

カスタマイズを試みます

画像を差し替える

以下のスクリプトは、functions.phpに記述する事で、スライダーの1枚目の画像を、指定した画像に置き換えます。

フィルタを使用する事で、このページでは、この画像にスイッチするとか、特定のページでは、特別なスライドショーを提供するといった事が出来ると思います。

add_filter( 'option_easingsliderlite_slideshow', 'my_change_image' );

function my_change_image( $content ){

	$content->slides[0]->url= 'http://www.example.com/images/example.jpg';

	return $content;
}

hoverしたらスライドショーを停止

スライダーに、マウスがhoverしたら、スライドショーが停止する

theme/functions.php

<?php 	
	add_action('wp_head','my_hover_stop' );
 	function my_hover_stop(){ 
?>
<script type="text/javascript">// < ![CDATA[

			jQuery(document).ready(function($) {

				$('.easingsliderlite').hover(
					function() {
						$('.easingsliderlite').data('easingsliderlite').endPlayback();
					},
					function() {
						$('.easingsliderlite').data('easingsliderlite').startPlayback();
					}
				);

			});

// ]]></script>
< ?php 	
	} 
?>

上記のコードは、動作確認用のコードサンプルすので、ご了解ください.(tested WordPress3.5.2)

テストコードなので、例えば上のjQueryを使ったコードの場合は、wp_enqueue_script等で処理していただいたほうがいいです。

付録

Easing Slider Lite

Homepage: http://easingslider.com
Contributors: MatthewRuddy
Tags: slideshow, slider, slides, slide, gallery, images, image, responsive, mobile, jquery, javascript, featured, content
Requires at least: 3.5
Tested up to: 3.6
Stable tag: 2.1.2

Easing Slider “Lite” is an easy to use slideshow plugin. Simple and lightweight, built with native WordPress functionality.

easingsliderlite.php: if ( apply_filters( 'easingsliderlite_legacy_functionality', __return_true() ) )

easingsliderlite.php: add_action( 'admin_menu', array( $this, 'do_actions' ) );

easingsliderlite.php: do_action_ref_array( 'easingsliderlite', array( $this ) );

easingsliderlite.php: do_action_ref_array( 'easingsliderlite_network_activate', array( $this ) );

easingsliderlite.php: do_action_ref_array( 'easingsliderlite_network_uninstall', array( $this ) );

easingsliderlite.php: do_action_ref_array( 'easingsliderlite_activate', array( $this ) );

easingsliderlite.php: do_action_ref_array( 'easingsliderlite_uninstall', array( $this ) );

easingsliderlite.php: return apply_filters( 'easingsliderlite_slideshow_defaults', $object );

easingsliderlite.php: return apply_filters( 'easingsliderlite_customizer_defaults', $object );

easingsliderlite.php: $capabilities= apply_filters( 'easingsliderlite_capabilities', $capabilities );

easingsliderlite.php: public function do_actions() {

easingsliderlite.php: do_action( "{$_GET['page']}_actions", $_GET['page'] );

easingsliderlite.php: $ext= ( apply_filters( 'easingsliderlite_debug_styles', __return_false() )=== true ) ? '.css' : '.min.css';

easingsliderlite.php: $ext= ( apply_filters( 'easingsliderlite_debug_scripts', __return_false() ) ) ? '.js' : '.min.js';

easingsliderlite.php: do_action( 'easingsliderlite_enqueue_admin_styles' );

easingsliderlite.php: do_action( 'easingsliderlite_enqueue_admin_scripts' );

includes\Slideshow.php: do_action( 'easingsliderlite_enqueue_slideshow_styles' );

includes\Slideshow.php: do_action( 'easingsliderlite_enqueue_slideshow_scripts' );

includes\Upgrade.php: do_action( 'easingsliderlite_upgrades', EasingSliderLite::$version, $version );

includes\Widget.php: $title= apply_filters( 'widgets_title', $instance['title'] );

templates\customizer.php: < ?php if ( !apply_filters( 'easingsliderlite_disable_shadow', __return_false() ) ) : ?>

templates\editsettings.php: do_action( 'easingsliderlite_settings_before', $s, $_GET['page'] );

templates\editsettings.php: do_action( 'easingsliderlite_settings_after', $s, $_GET['page'] );

templates\editslideshow-sidebar.php: < ?php if ( !apply_filters( 'easingsliderlite_hide_advert', __return_false() ) ) : ?>

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_manage_slides_buttons', $s ); ?>

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_manage_slides_metabox', $s ); ?>

templates\editslideshow-sidebar.php: ...class="widgets-holder-wrap" < ?php if ( (bool) apply_filters( 'easingsliderlite_hide_dimensions_metabox',...

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_dimensions_metabox', $s ); ?>

templates\editslideshow-sidebar.php: ...class="widgets-holder-wrap closed" < ?php if ( apply_filters( 'easingsliderlite_hide_transitions_metabox',...

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_transitions_metabox', $s ); ?>

templates\editslideshow-sidebar.php: ...class="widgets-holder-wrap closed" < ?php if ( apply_filters( 'easingsliderlite_hide_arrows_metabox',...

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_arrows_metabox', $s ); ?>

templates\editslideshow-sidebar.php: ...class="widgets-holder-wrap closed" < ?php if ( apply_filters( 'easingsliderlite_hide_pagination_metabox',...

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_pagination_metabox', $s ); ?>

templates\editslideshow-sidebar.php: ...class="widgets-holder-wrap closed" < ?php if ( apply_filters( 'easingsliderlite_hide_playback_metabox',...

templates\editslideshow-sidebar.php: < ?php do_action( 'easingsliderlite_playback_metabox', $s ); ?>

templates\editslideshow-welcome.php: do_action( 'easingsliderlite_welcome_panel_before' );

templates\editslideshow-welcome.php: do_action( 'easingsliderlite_welcome_panel_after' );

templates\slideshow.php: $slideshow_styles= apply_filters( 'easingsliderlite_slideshow_styles', $slideshow_styles, $s );

templates\slideshow.php: $viewport_styles= apply_filters( 'easingsliderlite_viewport_styles', $viewport_styles, $s );

templates\slideshow.php: $container_styles= apply_filters( 'easingsliderlite_container_styles', $container_styles, $s );

templates\slideshow.php: $slide_styles= apply_filters( 'easingsliderlite_slide_styles', $slide_styles, $slide, $s );

templates\slideshow.php: < ?php else : do_action( 'easingsliderlite_arrows', $s, $c ); endif; ?>

templates\slideshow.php: < ?php else : do_action( 'easingsliderlite_pagination', $s, $c ); endif; ?>

templates\slideshow.php: < ?php if ( current_user_can( 'easingsliderlite_edit_slideshow' ) && apply_filters( 'easingsliderlite_edit_slideshow_icon', __return_true() ) ) : ?>

templates\slideshow.php: if ( !apply_filters( 'easingsliderlite_disable_shadow', __return_false() ) ) :

templates\slideshow.php: do_action( 'easingsliderlite_shadow', $s, $c );

スライドショーデータ

それぞれの設定データの取得方法

 /** Get the slideshow */
 $slideshow= $s= EasingSliderLite::get_instance()->validate( get_option( 'easingsliderlite_slideshow' ) );

 /** Get customizations */
 $customizations= $c= json_decode( get_option( 'easingsliderlite_customizations' ) );

 /** Get plugin settings */
 $settings= get_option( 'easingsliderlite_settings' );

アクティブ化

 /**
 * Activation hook
 *
 * @since 2.0
 */
 public function activate() {

 /** Do plugin version check */
 if ( !$this->version_check() )
return;

 /** Add "wp_options" table options */
 add_option( 'easingsliderlite_version', self::$version );
 add_option( 'easingsliderlite_slideshow', $this->slideshow_defaults() );
 add_option( 'easingsliderlite_customizations', json_encode( $this->customization_defaults() ) );
 add_option( 'easingsliderlite_settings',
array(
 'resizing'=> false,
 'load_styles'=> 'header',
 'load_scripts'=> 'header'
)
 );
 add_option( 'easingsliderlite_major_upgrade', 0 );
 add_option( 'easingsliderlite_disable_welcome_panel', 0 );

 /** Add user capabilities */
 $this->manage_capabilities( 'add' );

 /** Trigger hooks */
 do_action_ref_array( 'easingsliderlite_activate', array( $this ) );

 }

memo:トランジッション/スライドで　画像の2枚目以降が表示できない。Fadeだと問題なく使える。

WordPress Snippet

スライダーの設置　Easing Slider Lite

Easing Slider Lite

Downloads

プラグインオプションページ

edit slideshow

Customize

Settings

スライダーの表示

カスタマイズのヒント

画像を差し替える

hoverしたらスライドショーを停止

付録

Easing Slider Lite

スライドショーデータ