スライド画像のプラグイン「Meteor Slides」を入れてみた

このブログはTwentyelevenの子テーマを使ってるのですが、Twentyelevenのヘッダ画像が固定なので、なんとなくおもしろくなくてスライドショーのプラグインを使ってみました。
いろいろあるようですが、今回試してみたのはMeteor Slides。
インストール方法など詳しい事は下記サイトを参考にしてみました。
簡単にカスタマイズ可能なスライドショーを作成できるWordPressプラグイン「Meteor Slides」

header.phpの以下の部分を書き換えます。

<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						// We need to figure out what the minimum width should be for our featured image.
						// This result would be the suggested width if the theme were to implement flexible widths.
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>

上記の部分を以下に。

<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>

フロントページにのみ表示したい場合は以下のように条件分岐すると良いでしょう。

<?php if(is_front_page()): ?>
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
<?php endif; ?>

フロントページのみ、かつ2ページ以降は表示させたくなかったので、このブログでは以下のように書いてます。

<?php if(is_home() && !is_paged()): ?>
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
<?php endif; ?>

条件分岐タグ – WordPress Codex

ちなみにスライドショーなんですが、画像の表示順はアップロードした時間が早いほうが後になるようです。
順番を変えたい時はアップ時刻を手動で変えるのが一番簡単ですかねえ。。

ちなみに下に表示されるボタンをRetina対応にしてみました。
ボタン画像はこちらからダウンロードしてください。

表示させるにはmeteor-slides.cssを以下のようにしてみるとよいと思います。

.meteor-slides .meteor-buttons a {
	background: url('../images/buttons2x.png') no-repeat bottom left;
	border: none;
	display: inline-block;
	/*float: left;*/
	width: 9px;
	height: 9px;
	margin: 0 2px;
	outline: none;
	text-indent: -9999px;
        background-size: 18px;
    transition: all 0 ease 0;
}
.meteor-buttons a:hover {
	background: url('../images/buttons2x.png') no-repeat bottom right;
        background-size: 18px;
}
.meteor-buttons a.activeSlide {
	background: url('../images/buttons2x.png') no-repeat bottom right;
        background-size: 18px;
}