wordpress　カスタムヘッダー　slickスライダー

2016年2月13日

■functions.php

$custom_header_defaults = array(
	'default-image' => get_bloginfo('template_url').'/img/img_custom_image.jpg',
	'width' => 1140,
	'height' => 400,
	'header-text' => false,	//画像上にテキスト
);
add_theme_support( 'custom-header', $custom_header_defaults );

■slide.php

<div id="mainvisual">
	<?php
		$custom_header_defaults = get_uploaded_header_images();
		if ($custom_header_defaults):
	?>
	<?php foreach ($custom_header_defaults as $key => $value): ?>
	<div>
		<img class="img-responsive" src="<?php echo $value['url']; ?>">
	</div>
	<?php endforeach; else: ?>
		<img class="img-responsive" src="<?php echo get_custom_header()->url; ?>" height="<?php get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="">
	<?php endif; ?>
</div>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css"/>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script>
$(function(){
	$('#mainvisual').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 2000,
		dots: true,
	});
});
</script>