WP홈페이지 제작 - 이미지 슬라이드 넣기

대부분의 홈페이지에 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행의 최근 포스트 위에 이미지 슬라이더가 동작하는 것을 볼 수 있습니다.