wordpressのカスタムヘッダーの画像をスライドショーにする方法

カスタムヘッダーの画像を複数登録して、jQueryプラグインを使ってスライドショーを実装します。こうすることによりテーマのソースファイルを編集しないでスライドショーの画像を変更できます。

スライドショーのjQueryのプラグインは、「flex slider」を使用します。他のプラグインでも同じようにスライドショーを実装できます。

1.functions.phpの編集

functions.phpにカスタムヘッダーを有効にするのと、jQueryプラグインを読み込む関数を追加します。

add_theme_support('custom-header');

function load_flexslider_scripts() {
	if (!is_admin()) {
		wp_enqueue_style('flexslider', esc_url(get_template_directory_uri() . '/css/flexslider.css'), array(), '2.6');
		wp_enqueue_script('flexslider', esc_url(get_template_directory_uri() . '/js/jquery.flexslider-min.js'), array(), '2.6', true);
	}
}
add_action('wp_enqueue_scripts', 'load_flexslider_scripts');

jQueryプラグインによっては</body>タグの前に読み込む場合があります。その時は関数「wp_enqueue_script」の５番目の引数の値を「true」にすると、</body>タグの前に読み込むことができます。

2.jQueryプラグインの初期化

初期化はファイルにして、上の追加する関数「load_flexslider_scripts」に記述しても良いですが、今回は、ベタにheader.phpに記述しました。

<script type="text/javascript" charset="utf-8">
	jQuery(window).load(function() {
		jQuery('.flexslider').flexslider();
	});
</script>
</head>

プラグインの読み込みと同じようにプラグインによっては</body>タグの前に初期化する場合があります。その時はfooter.phpの方に記述してください。

3.カスタムヘッダーの画像を読み込み

関数「get_uploaded_header_images」でカスタムヘッダーの画像の配列を取得し、foreachで配列から必要な画像のアドレスを取得して、imgタグを作成します。

<?php $header_images = get_uploaded_header_images();
if ($header_images) {
	echo '<div class="flexslider">';
		echo '<ul class="slides">';
			foreach ($header_images as $header_image) {
				echo '<li><img src="' . $header_image['url'] . '" /></li>';
			}
		echo '</ul>';
	echo '</div>';
} ?>

上のソースをheader.phpに記述すると全てのページでスライドショーが表示されますので、特定のページだけ表示するようにif文を書くか、index.phpまたはfront-page.phpに記述した方が良いです。

4.スライドショーの画像を追加

「外観」＞「カスタマイズ」＞「ヘッダー画像」に移動して、スライドショーに使用する画像を追加していきます。追加が終わったらサイトを表示してスライドショーが動いていることを確認します。