롤링 베너 추가 방법

탑 바 영역에 롤링이 되는 베너를 추가하는 방법은 무엇일까요?

[ 방법 ]

세로 스크롤이 가능한 jQuery plugin -> Slick Slider 를 이용 베너 컨텐츠를 스크롤 되도록 하기.

(※ Slick Slider는 여러 테마에서 캐러젤이나 슬라이드 되는 구조에 사용하고 있음)

[ 과정 ]

1. 롤링이 되는 html 엘리먼트들 추가

<div class="slick-roll">
    <div>your content 1</div>
    <div>your content 2</div>
    <div>your content 3</div>
</div>

2. html 구조를 slider 기능이 추가된 구조로 변경 (slick slider가 작동)

(※ 현 테마에는 플러그인이 내장돼있지 않아서, 플러그인을 테마에 추가하여 적용)

/**
 * Slick Slider plugin js, css 파일 연결 
 */
add_action('wp_enqueue_scripts', 'slick_slider_enqueue'); 
function slick_slider_enqueue() {    
    // 워드프레스에 파일 위치 말해주기
    wp_register_style( 'slick_css', get_stylesheet_directory_uri() . '/_custom_addons/slickslider/slick.css', array(), '1.8.1');  
  wp_register_style( 'slick_theme_css', get_stylesheet_directory_uri() . '/_custom_addons/slickslider/slick-theme.css', array(), '1.8.1');  
    wp_register_script( 'slick_script', get_stylesheet_directory_uri() . '/_custom_addons/slickslider/slick.min.js', array('jquery'), '1.8.1', true);  // true = 푸터에서 적용
    // 실제 사용 여부 결정   
    if (is_single(104)) {
    wp_enqueue_style( 'slick_css' );    
    wp_enqueue_style( 'slick_theme_css' ); 
    wp_enqueue_script( 'slick_script' );
  }
}

/**
 * Add scripts to wp_footer()
 */
function custom_slickslider_script() {  
    if (is_single(104)) {      ?>   
        <script type="text/javascript">        
            (function($) {             				
        $(document).ready(function(){
          $('.slick-roll').slick({
          vertical: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true,
          arrows: false, 
          swipe:false,
          pauseOnHover:false,
          });
        });				
            })( jQuery );                 
        </script>
<?php        
    }    
}
add_action( 'wp_footer', 'custom_slickslider_script', 99 );


/**
 * Add style to wp_head()
 */
add_action( 'wp_head', function () { 
  if (is_single(104)) {      ?>   
    <style>
      .slick-vertical .slick-slide { text-align:center; padding:10px; }
      .slick-vertical .slick-slide:nth-child(3n) { background: red; }	
      .slick-vertical .slick-slide:nth-child(3n+1) { background: yellow; }
      .slick-vertical .slick-slide:nth-child(3n+2) { background: blue; }
    </style>
<?php } } );

[ 적용 모습 ]