WordPressでヘッダーを入れ替えたい時に使用する「custom-header」でスライダーを使用する。
カスタムヘッダーを定義する
functions.php
$custom_header_params = array( 'default-image' => get_bloginfo('template_url').'/images/sp1.png', // 画像が無いときの標準画像 'width' => 1080, // 横幅 'height' => 450, // 縦幅 'header-text' => false, // テキスト(タイトル)の重ね合わせ ); add_theme_support('custom-header', $custom_header_params);
これでヘッダー画像が使用できるようになる。
ヘッダーを1枚だけ表示するには、テンプレートに
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
これで1枚だけ表示される
次に、スライダー用にアップしたヘッダーを全て出力するには、テンプレートに
<div class="slider nivoSlider"> <?php $headers = get_uploaded_header_images(); ?> <?php foreach ( $headers as $header ) : ?> <img src="<?php echo esc_url($header['url']);?>" width="<?php echo $header['width'];?>" height="<?php echo $header['height'];?>" alt="" title="#caption1"/> <?php endforeach; ?> </div> <div id="caption1" class="nivo-html-caption"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/sp0.png" width="1080" height="450"/></div> </div>
foreachで全部取得する。順番はアップロードした順になる。
今回は、nivosliderを使用しているので、その形式に合わせて出力する。
参考:WordPressテーマの作り方 » カスタムヘッダーを設置する
参考:カスタムヘッダーの画像をすべて取得してスライダーにしたい | データベースに接続できません
日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)