[WordPress]カスタムヘッダー画像でスライダーを使用する

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テーマの作り方 » カスタムヘッダーを設置する
参考:カスタムヘッダーの画像をすべて取得してスライダーにしたい | データベースに接続できません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)