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でもきちんと表示されるようです。