1. HOME > 
  2. ブログ・お知らせ > 
  3. WordPress > 
  4. WPで管理画面から更新できるスライドショープラグイン『Meteor Slides』

ライラックミモザのブログ・お知らせ

2013年2月4日

WPで管理画面から更新できるスライドショープラグイン『Meteor Slides』

WordPressのスライドショープラグインは、たくさんありますが、私は英語が得意ではないので、いざスライドショーを実装しなくてはならなくなったとき、プラグインの選定に悩まされたりします。
そんななかで、最近、私の要望の大半を満たしてくれるプラグイン「Meteor Slides」を見つけたので、今までトップページのスライドショーに使用していたプラグイン「WP-cycle」を変更しました。

スライドショープラグインの(個人的な)要件

・管理画面から更新できる(+日本語化されている)
・スライド画像のアップロードは、パス入力ではなく、メディア(アップロード)を使用する
・画像のリンク先および画像のalt属性を(管理画面から)指定できる
・スライドナビゲーションを表示できる
・実際の表示で、スライドの上にマウスをおいたとき、スライドが止まる

Meteor Slides

上記の要件を満たしてくれるのが、「Meteor Slides」です。
投稿ページのインターフェースに似ており、例えば、スライド画像のアップロードは「アイキャッチ画像」の機能、スライドのタイトルは「投稿のタイトル」を利用しているので、直感的に使いやすいです。

日本語化について

Meteor Slidesは、インストールしただけでは、日本語化されていないので、プラグイン本体の言語翻訳ファイル名をリネームする必要があります。
/wp-content/plugins/meteor-slides/languages/
上記ディレクトリ内にある「meteor-slides-ja_JA.mo」ファイルを「meteor-slides-ja.mo」というファイル名に変更します。
こちらの記事「『Meteor Slides』プラグインの日本語化」を参考にさせていただきました。ありがとうございます。

各種設定

管理画面のスライド>設定から、各種設定ができます。
MeteorSlides設定スライド数は、スライドさせる画像の数を入力するか、ブランクのままでも動作します。
また、スライドショーナビゲーションでページ送りを選択した場合、サイトにあわせたページ送り用の画像をあてられるので、便利です。

おまけ

スライドが1枚でも正常に表示させる

Meteor Slidesは、スライド用の画像を1枚しか登録していない場合、きちんと表示されません。スライドショーなので、あたりまえといえばあたりまえなのかもしれませんが、若干不便なので、プラグインファイルをいじりました。
/wp-content/plugins/meteor-slides/includes/
上記ディレクトリ内にある「meteor-slideshow.php」ファイルを、エディタで開き、下記の変更前107〜139行目の記述を、変更後の記述にまるごと書き換えます。

変更前

<div class="meteor-clip">

<?php // Loop which loads the slideshow

while ( $meteor_loop->have_posts() ) : $meteor_loop->the_post(); ?>

<?php // Use first slide image as shim to scale slideshow

if ( $meteor_count == 1 ) {

$meteor_shim = wp_get_attachment_image_src( get_post_thumbnail_id(), 'featured-slide');

echo '<img style="visibility: hidden;" class="meteor-shim" src="' . $meteor_shim[0] . '" alt="" />';

} ?>

<div class="mslide mslide-<?php echo $meteor_count; ?>">

<?php // Adds slide image with Slide URL link

if ( get_post_meta( $post->ID, "slide_url_value", $single = true ) != "" ): ?>

<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?></a>

<?php // Adds slide image without Slide URL link

else: ?>

<?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?>

<?php endif; ?>

</div><!-- .mslide -->

変更後

<div class="meteor-clip">
<?php // Loop which loads the slideshow
while ( $meteor_loop->have_posts() ) : $meteor_loop->the_post(); ?>

<?php if ( $meteor_loop->post_count > 1 ) : ?>
<?php // Use first slide image as shim to scale slideshow
if ( $meteor_count == 1 ) {
$meteor_shim = wp_get_attachment_image_src( get_post_thumbnail_id(), 'featured-slide');
echo '<img style="visibility: hidden;" class="meteor-shim" src="' . $meteor_shim[0] . '" alt="" />';
} ?>
<div class="mslide mslide-<?php echo $meteor_count; ?>">
<?php // Adds slide image with Slide URL link
if ( get_post_meta( $post->ID, "slide_url_value", $single = true ) != "" ): ?>
<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?></a>
<?php // Adds slide image without Slide URL link
else: ?>
<?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?>
<?php endif; ?>
</div><!-- .mslide -->

<?php else : ?>
<div class="mslide mslide-<?php echo $meteor_count; ?>" style="display:block;">
<?php // Adds slide image with Slide URL link
if ( get_post_meta( $post->ID, "slide_url_value", $single = true ) != "" ): ?>
<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?></a>
<?php // Adds slide image without Slide URL link
else: ?>
<?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?>
<?php endif; ?>
</div><!-- .mslide -->
<?php endif; ?>

書き換えた内容は、「スライドが1枚だったら、〜する」という条件文を足しています。
ただ、私もPHPはまだ勉強中であることと、プラグイン本体のファイルをいじるため、プラグインのアップデートの際は注意が必要になることから、この箇所については参考としてとどめていただくか、あくまでも自己責任でお願いいたします。

最初にも書きましたが、スライドショーのプラグインは、ほんとうにたくさんあって、使い勝手も一長一短です。私自身、今までいくつかのプラグインを使用しましたが、この「Meteor Slides」はおすすめだと思います。

ブログ・お知らせトップへ