habakiriテーマのslideshowをカスタマイズ

Tweet

Pocket

habakiri slideshowをカスタマイズ
slideshowには、slickを使っている。

slick – the last carousel you

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

ここを見ると、slideshowを色々カスタマイズできることがわかる。habakiriでは、このスライドショー用のjsを
/inc/class.slider.php
内で設定しているので、それを編集する。子テーマの場合は、このファイルを同じ階層で設置する。
ここで、

		jQuery( function( $ ) {
			$( '.habakiri-slider__list' ).slick( {
				arrows: true,
				adaptiveHeight: true,
				autoplay: <?php echo esc_js( ( Habakiri::get( 'slider_option_interval' ) ) ? 'true' : 'false' ); ?>,
				autoplaySpeed: <?php echo esc_js( Habakiri::get( 'slider_option_interval' ) ); ?>,
				speed: <?php echo esc_js( Habakiri::get( 'slider_option_speed' ) ); ?>,
				fade: <?php echo esc_js( ( Habakiri::get( 'slider_option_effect' ) === 'fade' ) ? 'true' : 'false' ); ?>,
				nextArrow: '<span class="habakiri-slider__arrow habakiri-slider__arrow--next genericon genericon-collapse"></span>',
				prevArrow: '<span class="habakiri-slider__arrow habakiri-slider__arrow--prev genericon genericon-collapse"></span>'
			} );
		} );

の内容を、例に倣って設定すれば、所望するスライドショーが作れる。
 
表示箇所の変更
slideshowモジュールは

get_template_part( 'modules/slider' );

で呼び出されているので、表示したい箇所を変更したりする場合は、これを挿入する箇所や条件を調整する。