헤더 이미지를 슬라이드 쇼 형식으로 표시하기

헤더 이미지에 동작을 추가해서 특성 이미지의 효과를 높인다. 사용자정의 헤더의 기능으로 업로드한 복수의 헤더 이미지를 슬라이드 쇼 형식으로 자동 교체되도록 표시한다. 이때 슬라이드 쇼는 jQuery를 이용한다.

->POINT

  • 사용자 정의 헤더에서 업로드한 이미지의 데이터를 취득: get_uploaded_header_images()
  1. 사용자정의 헤더에서 업로드한 이미지 이용하기
    헤더 이미지에 동작을 추가해서 표시한다. 모든 헤더 이미지를 슬라이드 쇼 형식으로 표시한다. 업로드된 이미지는 [외모]-[헤더]에서 사용자정의 헤더의 설정화면을 열고 ‘업로드된 이미지들’ 항목에서 확인한다.
  2. 슬라이드 쇼를 위한 준비사항
    슬라이드 쇼는 복수의 이미지를 크로스 페이드(cross fade)로 처리하기 위해 ‘Cross Slide’라는 jQuery를 이용한다. 이미지의 슬라이드 쇼를 작성하는 것이라면 워드프레스의 플러그인을 이용하면 되지만 여기에서는 사용자정의 헤더에서 업로드된 이미지를 표시하기 위해 jQuery의 스크립트를 사용한다.
    CrossSlide의 홈페이지에 접속해서 ‘Download minified’로부터 ‘jquery.cross-slide.min.js’를 다운로드한다. 다운로드한 파일은 [sample] 테마 폴더로 업로드한다.
  3. jQuery 설정 출력하기
    라이브러리 설정 추가하기에서 jQuery 설정을 출력하도록 지정했기 때문에 여기에서는 추가로 CrossSlide의 설정을 출력하도록 지정한다. functions.php 파일을 열고 wp_enqueue_script()를 추가해서 jquery.cross-slide.min.js의 URL을 지정한다. URL은 get_bloginfo(‘template_url’)로 테마 폴더의 URL을 출력해서 지정한다.
    functions.php

    //jQuery 설정을 출력
    add_action(‘wp_head’, ‘myScript’, 1);
    function myScript() {
    wp_enqueue_script(‘jquery’);

    wp_enqueue_script(‘jquery.cross-slide.min.js’, get_bloginfo(‘template_url’) . ‘/jquery.cross-slide.min.js’);

    }

  4. 헤더 이미지의 표시 영역 준비하기
    슬라이드 쇼 형식으로 표시하는 헤더 이미지의 ㅣ표시 영역을 준비한다. header.php를 열고 헤더 이미지의 출력을 지정하는 <div id=”image”>~</div>를 삭제하고 <div id=”slideshow”></div>로 수정한다. 이 단계에서는 <div> 안에 아무것도 입력하지 않기 때문에 헤더 이미지가 표시되지 않는다.
    header.php
    변경전

    <?php if(!is_single()): ?>
    <?php if(get_header_image()): ?>

    <div id=”image”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></div>

    <?php endif; ?>
    <?php endif; ?>
    </div>

    변경후

    <?php if(!is_single()): ?>
    <?php if(get_header_image()): ?>

    <div id=”slideshow”></div>

    <?php endif; ?>
    <?php endif; ?>
    </div>

  5. 표시 영역의 크기 지정하기
    위에서 준비한 표시 영역의 크기를 지정한다. 여기에서는 헤더 이미지와 같ㅇㄴ 900×228픽셀로 지정한다.
  6. 헤더 이미지의 URL 출력하기
    업로드된 헤더 이미지의 URL을 출력한다. 업로드된 모드 헤더 이미지에 관한 데이터를 get_uploaded_header_image()로 취득해서 $headers에 대입한다. <?php foreach (): ?>~<?php endforeach; ?>로 $headers로부터 이미지의 데이터를 추출해서 <?php echo $value[‘url’]; ?>로 URL을 출력한다.
    header.php

    (생략)
    <?php if(!is_single()): ?>
    <?php if(get_header_image()): ?>

    <?php $headers = get_uploaded_header_images(); ?>
    <?php foreach ($headers as $key => $value): ?>
    <?php echo $value[‘url’]; ?>
    <?php endforeach; ?>

    <div id=”slideshow”></div>
    <?php endif; ?>
    <?php endif; ?>
    </div>

  7. 슬라이드 쇼 형식으로 지정하기
    CrossSlide를 이용해서 슬라이드 쇼 형식으로 이미지를 표시하기 위한 설정
    <script>

    $(function() {
    $(‘#slideshow’).crossSlide({
    sleep: 2,
    fade: 1
    }, [
    { src: ‘picture1.jpg’ },
    { src: ‘picture2.jpg’ },
    { src: ‘picture3.jpg’ },
    { src: ‘picture4.jpg’ },
    ])
    });
    </script>

    출력한 URL 이미지를 슬라이드 쇼 형식으로 표시한다. CrossSilde 홈페이지의 ‘How to use’에 게재되어 있는 슬라이드 쇼 형식으로 표시하기 위한 스크립트 설정을 복사해서 <div id=”slideshow”></div> 위에 추가한다.
    설정을 추가할 때 이미지의 URL을 지정하는 부분을 위 과정의 소스에 추가한 후, 헤더 이미지의 URL을 {src:’~’} 형식으로 출력하도록 지정한다.
    출력한 소스를 확인하면 4개의 헤더 이미지의 URL이 {src:’~’} 형식으로 출력되고 있는 것을 알 수 있다. 그러나 일반적으로 웹사이트인 경우 이 단계에서 슬라이드 쇼가 표시되지만 워드프레스에서 제작한 사이트에서는 아무것도 표시되지 않는다.
    header.php

    <?php if(!is_single()): ?>
    <?php if(get_header_image()): ?>

    <script>
    $(function() {
    $(‘#slideshow’).crossSlide({
    sleep: 2,
    fade: 1
    }, [

    <?php $headers = get_uploaded_header_images(); ?>
    <?php foreach ($headers as $key => $value): ?>
    { src: ‘<?php echo $value[‘url’]; ?>’ },
    <?php endforeach; ?>
    ])
    });
    </script>

    <div id=”slideshow”></div>
    <?php endif; ?>
    <?php endif; ?>
    </div>

  8. 슬라이드 쇼 확인하기
    워드프레스에서는 jQuery와 다른 라이브러리가 충돌하지 않도록 하기 위해 ‘$’를 사용하지 않는다. 따라서 ‘$’를 ‘jQuery’로 수정하면 슬라이드 쇼가 표시된다.
    header.php

    <?php if(!is_single()): ?>
    <?php if(get_header_image()): ?>

    <script>
    jQuery(function() {
    jQuery(‘#slideshow’).crossSlide({
    sleep: 2,
    fade: 1
    }, [

    <?php $headers = get_uploaded_header_images(); ?>
    <?php foreach ($headers as $key => $value): ?>
    { src: ‘<?php echo $value[‘url’]; ?>’ },
    <?php endforeach; ?>
    ])
    });
    </script>

    <div id=”slideshow”></div>
    <?php endif; ?>
    <?php endif; ?>
    </div>

출처: 바꾸면서 배우는 워드프레스 디자인

“헤더 이미지를 슬라이드 쇼 형식으로 표시하기”에 대한 한개의 댓글

답글 남기기