[WordPress General] カスタムヘッダーを利用してスライドショー画像を入れ替えできるようにする
トップページに設置したスライドショーの画像入れ替えについて、カスタムヘッダーを利用した方法が便利でした。
[markdown]
こちらで勉強させて頂きました。
> * [WordPressテーマの作り方 » bxSliderを使ってWPカスタムヘッダー画像をスライドショー表示する](http://wordpress.hitsuji.me/add-slideshow-of-custom-header-images-using-bxslider-on-wordpress/)
以下のような jQuery スライダーを利用する際に参考になります。
> * [bxSlider: レスポンシブコンテントスライダー | deadwood](https://www.d-wood.com/blog/2014/05/30_6280.html)
> * [Supersized: フルスクリーンスライドショー | deadwood](https://www.d-wood.com/blog/2014/05/29_6272.html)
## テーマのカスタムヘッダーを有効にする
管理画面からカスタムヘッダーを登録できるよう、テーマの functions.php で有効化します。
“`php:functions.php
$custom_header_defaults = array(
‘default-image’ => get_template_directory_uri().’/img/frontpage_slide.jpg’,
‘width’ => 1200,
‘height’ => 800,
‘header-text’ => false, //画像にテキストをかぶせるか
);
add_theme_support( ‘custom-header’, $custom_header_defaults );
“`
ちなみに、この2つの使い分けが良く理解できていません。
> * [テンプレートタグ/get bloginfo – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_bloginfo)
> * [関数リファレンス/get template directory uri – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_directory_uri)
追記（2015/01/06）
> * [_s（underscores）を読む | deadwood](https://www.d-wood.com/blog/2014/10/28_7106.html#URL)
> * [スターターテーマ _s を使ってWordPressのテーマをつくる（ファイルパスとブログ情報編） | Gatespace’s Blog](http://gatespace.jp/2013/02/22/underscores04/#sec3)
## ヘッダー画像を管理画面から登録する
管理画面（ダッシュボード）をリロードすると「外観 ＞ ヘッダー」が有効になっています。
利用したい画像を選択して、アップロードします。
ちなみに画像を削除したい場合は、「メディア ＞ ライブラリ」から。
バージョン 4.0 であれば、Unattached 扱いで登録されていました。
## 必要な出力を生成する function を作成する
カスタムヘッダーに登録した画像をスライドショー用に出力する function を作成します。
今回は [Supersized](http://buildinternet.com/project/supersized/) 用の文字列を生成します。
“`php:functions.php
function frontpage_slides() {
$header_images = get_uploaded_header_images();
if ($header_images) {
$str = NULL;
foreach ($header_images as $key => $value) {
$str .= ‘{image: “‘ . $value[‘url’] . ‘”},’;
}
$data = rtrim($str, ‘,’);
} else {
$data = ‘{image: “‘ . get_template_directory_uri() . ‘/img/frontpage_slide.jpg”}’;
}
return $data;
}
“`
`get_uploaded_header_images()` で登録した画像の配列を取得できるのですね。
[WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/Main_Page) で見つけられなかったけれどもこちらに載っていました。
> * [WordPress › Custom_Image_Header::get_uploaded_header_images() | Method | WordPress Developer Resources](https://developer.wordpress.org/reference/classes/custom_image_header/get_uploaded_header_images/)
今回は footer.php にスクリプトを書いてしまったので、表示したい箇所で呼び出します。
“`php:footer.php
“`
## 補遺
こちらでは bxSlider を例に確認できました。
> * [WordPressテーマの作り方 » bxSliderを使ってWPカスタムヘッダー画像をスライドショー表示する](http://wordpress.hitsuji.me/add-slideshow-of-custom-header-images-using-bxslider-on-wordpress/)
「#5 bxSliderとその実行スクリプトをWordPressで読み込むコードを書く」に記述があったのですが、どうも配布するようなテーマやプラグインでは、JavaScript を functions.php に登録して呼び出すような処理をしないといけないよう。
[/markdown]