現在、案件で、無料日本語wordpressテーマの中で最高峰とも名高いStinger5をカスタマイズしているのですが、カスタムヘッダーで登録した複数のヘッダー画像を使ってカルーセルスライダーにしてみました。
そんなに難しくないので、「コピペでいけるからさ」ぐらいの気持ちで実装してみてください。
今回は「Stinger5を使っている場合」ということで進めていくので問題はないと思いますが、functions.phpにカスタムヘッダーを設定できるようにする記述が無いと話になりませんので、「Stingerじゃないけど見てるよ」という方はfunctions.phpに以下の記述があるかをご確認ください。
1 2 | //こんなかんじの add_theme_support( ‘custom-header’); |
関数リファレンス/add theme support – WordPress Codex 日本語版
スライダーに使うjQueryプラグイン「bxSlider」
レスポンシブ対応の最強スライダープラグイン「bxSlider」を使います。
bxSliderの動作デモはこちら。
レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。
レスポンシブル。
Stinger5でスライダーを実装する部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div id=“gazou”> <?php if(get_header_image()): ?> <ul id=“headimg” class=“bxslider”> <?php $headers = get_uploaded_header_images(); foreach($headers as $header){ //カスタムヘッダーのalt取得 $alt = get_post_meta( get_custom_header()–>attachment_id, ‘_wp_attachment_image_alt’, true ); ?> <li> <img src=“<?php echo $header[url]; ?>” alt=“<?php echo $alt; ?>” width=“<?php echo HEADER_IMAGE_WIDTH; ?>” height=“<?php echo HEADER_IMAGE_HEIGHT; ?>” /> </li> <?php } ?> </ul> <?php endif; ?> </div> |
Stingerシリーズには、だいたいこんな感じのカスタムヘッダーを出力するところがあると思います。
当ブログはStinger3を使用していますが、同様の構造のHTMLがあったような気がします。「id=”gazou”」を探してみてくださいね。
headimgの箇所は若干HTMLを変更し、リスト表示にしているのでご注意を。
しかしそのような変更を加えなくてdivの羅列などでも実装はできます。ただ、HTML的にはliとかfigureで書くほうが好ましいような気はします。
なにをやっているか？
get_upload_header_images
カスタムヘッダーとしてUPされた複数の画像を配列で取得しています。
foreachでループさせて各要素の持つ値からURLを出力しましょう。
1 | <img src=“<?php echo $header[url]; ?>” |
[url]に、カスタムヘッダーのURLが格納されています。
get_uploaded_header_images:WordPress私的マニュアル
HEADER_IMAGE_WIDTH; HEDAER_IMAGE_HEIGHT;
ここでカスタムヘッダーの幅と高さを取得、表示しています。僕としてはget_custom_header()を使う方を推奨しますが、元の形式を崩さないことを優先したかったのでそのまま進めました。
ちなみにget_custom_header()でカスタムヘッダーの高さを幅を出力する場合は
1 | width=“<?php get_custom_header()->width; ?>” height=“<?php get_custom_header()->height ?>” |
となります。
カスタムヘッダーのaltの取得
せっかくなのでalt=””も指定しておきましょう。
1 | get_post_meta( get_custom_header()–>attachment_id, ‘_wp_attachment_image_alt’, true ); |
get_post_meta
1 | <?php $meta_values = get_post_meta($post_id, $key, $single); ?> |
$post_id
データを取得したい投稿のID。
$key
取得したい値のキー名の文字列。
$single
trueにセットした場合、文字列として単一の結果を返します。falseまたは値をセットしなかった場合、関数はカスタムフィールドの配列を返します。
関数リファレンス/get post meta – WordPress Codex 日本語版
WordPress › フォーラム » カスタムヘッダー画像のalt取得
僕も知らなかったのですが、カスタムフィールドを取得するget_post_metaの引数にattachment_idと「wp_attachment_image_alt」を指定することでカスタムヘッダーのaltが取得できるんですね！
BxSliderの設定
bxSliderからは以下の2ファイルを読みこませましょう。
1 2 | <link rel=“stylesheet” type=“text/css” href=“<?php bloginfo(‘template_directory’); ?>/パス/jquery.bxslider.css” > <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/パス/jquery.bxslider.js”></script> |
スライダーに変わったエフェクトを付けたいなら更に「jquery.easing.1.3.js」というファイルを探して読ませてください。エフェクトの指定に関してはこちらの「easing」の項目をご参照ください。
jsファイルに以下のように記述するだけで完成！
1 2 3 4 5 6 7 8 9 | jQuery(document).ready(function(){////////bxSlider jQuery(‘#headimg’).bxSlider({ auto : true , //自動でスライドするか？ speed : 500 , //スライドの速度 pause : 2000 , //スライドごとの停止時間 controls : false //スライドのコントローラー }); }); |
以上で、カスタムヘッダーのカルーセルスライダー化は完了です。とってもかんたん！
実は、Stinger5でこのようにカルーセルスライダーを実装していくと、IE8でスライダーが表示されないというトラブルが起こる時があります。
それの対処法に関しては別の記事で書こうと思います！
でわ！