カスタムヘッダーの画像を複数登録して、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」の5番目の引数の値を「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に記述した方が良いです。
コメントを残す