wordpressでカスタムフィールドに入力した画像をbgSwitcherで切り替える

タイトル通り、bgswitcher+wordpress
まずはbgswitcherを設置。
配布元はこちら →http://rewish.jp/blog/releases/jquery_bg_switcher
ちなみに配布元の設置方法が若干違う?という罠があったり。
header.phpに以下の記述を追加します。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bgSwitcher.js"></script>
<script type="text/javascript">
<?php
	$index_banner = array ();
	for($i = 1; $i < 5; $i++){
		$index_img = get_post_meta($post->ID,'index_main' . $i, true);
		if($index_img){
			array_push($index_banner, '"' . wp_get_attachment_url($index_img) . '"');
		}
	}
	$index_banners = implode(",", $index_banner);
?>
jQuery(function($) {
	$(".index_banner").bgswitcher({
		images: [<?php echo $index_banners; ?>]
	});
});
</script>

1行目、bgswitcher.jsへのリンク。これより上でjqueryの読み込みは完了してるものという前提です。
4行目以降。トップページに追加したカスタムフィールドindex_main1〜index_main4の読み込み。URLに直した(wp_get_attachment_url($index_img))部分を配列$index_bannerに押し込んでいきます。
で、配列の中身を11行目implodeでカンマ区切りのテキストに直す。
それを最終的には15行目、背景画像の指定のところで出力するという形です。
Advanced Custom Fieldのアドオンでひとつのカスタムフィールドに対して複数の画像などを設定できるようですが、有料だったので。
HTML部分は

<div class="index_banner">
 <p>テストテキスト</p>
</div>

で、クラス:index_bannerの背景となります。

※bgSwitcher追記
ボックス背景のプロパティーに関して、background-position:left centerとかだとIE9の時にうまく配置されない。
background-position: 0% 50%だと、IE10でもIE9でもFFでもきちんと表示されるようです。