ヘッダー画像をMeta Sliderでスライダーにする

wordpressプラグインのMeta SliderをTwenty Elevenテーマにインストール

• Meta Slider操作画面でスライドしたい画像を複数枚登録
• Slide種類を選ぶ（Flex,Responsive,Nivo,Coinから選ぶ）今回はCoinが一番きれいに動くように見えたのでこちらを採用しました。
• その他にも細かい設定ができるので必要に応じて指定します。
• saveするとショートコードが生成されます。
• header.phpの元々のheader画像の替わりにショートコードを起きます。
• ショートコードをheader.phpの元のheader画像の場所に格納します。
• 位置は
  のすぐ下です。

削除するデフォルトのヘッダー

<?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 ?>

新たに追加するMeta Sliderのショートコード

<?php echo do_shortcode("[metaslider id=1165]"); ?>

Meta Sliderのナビゲーションボタンを消した後の余白

以前のバージョンではスタイルシートのcssの指定で消す必要がありましたが、今回のバージョンアップでナビゲーションを非表示にしただけで、それが表示されていた余白部分も表示されないようになりました。

デモサンプル