'이미지슬라이더'에 해당되는 글 2건

Meta Slider

http://wordpress.org/plugins/ml-slider/

메타슬라이더. 무료버전이지만 내부에 4가지 종류의 슬라이더를 제공하고 있습니다.

4개 중에서 개인적으로는 Nivo Slider 를 주로 사용하는데 가로, 세로 풀사이즈를 잘 지원해서라고나 할까요?

대부분의 홈페이지에 jQuery 등으로 제작된 이미지 슬라이더가 들어가 있습니다. 홈페이지를 대표하거나 설명할 수 있는 멋진 이미지들을 볼 수 있고, 링크를 통해 해당 컨텐츠로 이동도 할 수 있습니다. 여러 뛰어난 성능의 무료 이미지 슬라이드 플러그인들이 있는데 여기서는 "Meta Slider"를 설치해 보겠습니다. 무료 버전으로도 일반적인 홈페이지라면 무리없이 사용할 수 있습니다.

Meta Slider

http://wordpress.org/plugins/ml-slider/

슬라이더를 설치하고 활성화 한 후 관리자 페이지 아래쪽에 보면 Meta Slider 메뉴가 생긴 것을 확인할 수 있습니다. [+] 버튼을 클릭하여 새로운 슬라이드쇼를 추가하고, 이름을 Home Slider 로 합니다. 그리고 [Add Slide] 버튼을 클릭하여 이미지를 업로드하거나 불러옵니다.

슬라이더용 이미지를 하나하나 추가하고, 우측의 셋팅에서 "Nivo Slider"를 선택하고 Width, Height 값을 지워서 빈칸으로 만듭니다. 빈칸으로 만들면 자동으로 화면에 꽉 채워서 보여줍니다. 
참고로 슬라이더에 등록할 이미지의 가로:세로 비율은 가로는 길고 세로는 짧게. 즉, 와이드(wide)한 비율이 보기 좋습니다. 저는 2.35:1(영화 스크린 비율)로 했습니다. 
모든 설정을 다 마치면 [Save] 버튼을 클릭하고 하단에 있는 Usage 항목에서 Template Include 탭을 클릭하여 아래에 생성되는 php 코드를 복사합니다.

테마 편집기에서 "home.php"를 열고 <section class="row"> 위에 다음의 코드를 넣고 저장합니다.

      <div class="imageslider">
        <?php echo do_shortcode("[metaslider id=38]"); ?>
      <⁄div><!-- .imageslider -->

홈페이지를 확인하면 3열 2행의 최근 포스트 위에 이미지 슬라이더가 동작하는 것을 볼 수 있습니다.