スライダーの設置 Easing Slider Lite

  • スライダー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だと問題なく使える。

[emulsion_relate_posts]