워드프레스 슬라이더 플러그인 - Meta Slider

워드프레스에는 다양한 슬라이더 플러그인이 있습니다. 그 중에서 레볼루션 슬라이더(Revolution Slider)는 대표적인 유료 슬라이더로 타임라인 기능을 제공하여 슬라이드를 역동적으로 만들 수 있습니다.

워드프레스 슬라이더 플러그인 - Meta Slider

하지만 대부분의 경우 이렇게 복잡한 슬라이더는 필요하지 않다고 생각합니다. 개인적으로는 슬라이드를 최소화하는 것이 가장 좋다는 생각을 가지고 있습니다. 이 사이트에도 테스트 목적으로 삽입한 슬라이드 외에는 슬라이드를 사용하고 있지 않습니다. 간단한 슬라이드를 사용하고자 하는 경우 Metaslider를 추천합니다.

워드프레스 메타 슬라이더

이 글을 처음 작성할 당시에 비해 MetaSlider의 기능이 향상되고 현재 60만개가 넘는 사이트에 설치되어 사용되고 있습니다. 심플한 슬라이더를 원하는 경우 무료 버전을 사용하면 무난할 것 같습니다. 포스트, 페이지, 우커머스 상품을 비롯한 포스트 커스텀 타입 글들을 포스트로 표시하고 싶은 경우나 고급 기능을 원하는 경우 유료 버전을 고려할 수 있습니다.

Metaslider의 경우 지난 번에 테스트할 때에는 매우 단순한 기능만 제공한 것 같은데, 다시 설치해보니 캡션 기능과 페이지 연결 기능이 있네요. 이 플러그인을 설치하면 관리자 페이지에 "Meta Slider"라는 메뉴가 추가됩니다. New Slider에서 "Add Slide"를 클릭하여 이미지 파일들을 추가할 수 있습니다.

Metaslider- Add slide

이미지 파일들을 추가하면 다음과 같이 Caption과 URL을 추가할 수 있습니다.

Add Slides in Metaslider

오른쪽 패널에 설정을 지정할 수 있는 패널이 있습니다.

Metaslider - Basic Settings

그리고 그 아래에 있는 "Advanced Settings(고급 설정)"을 클릭하면 보다 자세한 설정을 지정할 수 있습니다.

Metaslider - Advanced Settings

설정을 마쳤으면 저장을 누르고 맨 아래 "Usage"의 "Shortcode"의 숏코드를 복사하여 원하는 곳에 추가할 수 있습니다.

Metaslider - shortcode

숏코드를 사용하는 방법은 "외모" -> "위젯"에서 원하는 위젯 영역에 "텍스트 위젯"을 추가하고 위의 "Shortcode"를 붙여넣기 하면 됩니다.

Adding shortcode to Widget

적절한 위젯 영역이 없으면 위젯 영역을 만들 수 있습니다.

위젯 영역을 만드는 방법은 어려울 것 같지만 그리 어렵지 않습니다. WordPress Codex 페이지를 참고로 하여, 먼저 함수 파일(functions.php)에 위젯 영역을 함수 형태로 등록하고("How to Register a Widget Area" 부분), 위젯 영역 코드를 적당한 테마 파일에 추가합니다("How to display new Widget Areas" 부분). 어떤 파일에 추가할 것인가는 어디에 배치할 것인가에 따라 달라집니다. 추가할 위치에 따라 header.php 파일일 수도 있고 index.php 파일이 될 수도 있을 것입니다.

저는 헤더 바로 아래에 새로운 위젯 영역을 추가하고 위의 Metaslider 숏코드를 텍스트 위젯에 붙여넣기 하여 삽입했습니다. 그럼 실제 작동을 볼까요?

Metaslider in action

이것으로도 괜찮지만, 캡션 부분이 조금 마음에 들지 않네요. 캡션 부분의 레이아웃을 조정하기 위해 다음과 같은 코드를 스타일시트 파일에 추가했습니다.

.metaslider .caption-wrap {

    background: #4BC3AE!important;
    line-height: 1.7em!important;
}

.metaslider .caption-wrap .caption {
font-size: 24px!important;
}

(.metaslider 대신 #metaslider_container_552와 같이 특정 슬라이더 ID를 추가하면 개별 슬라이더별로 레이아웃을 조정할 수 있습니다. 워드프레스에서 CSS 코드를 추가하는 방법은 여기를 참고하시기 바랍니다.)

이제 적용된 슬라이더를 보면:

Metaslider in action with caption changed

처음보다는 약간 낫네요. CSS를 통해 색상과 글자 크기 등을 적절히 조정하여 레이아웃을 원하는 대로 수정할 수 있습니다.

단순한 워드프레스 슬라이더 플러그인이 필요하다면 Metaslider 정도도 충분할 것 같습니다. 이 슬라이더 플러그인은 7월말 현재 50만 회 이상 다운로드되었고 평가도 좋은 편입니다. 그리고 CSS를 통해 약간의 레이아웃 수정도 가능합니다. 더 많은 기능을 원한다면 Pro 버전도 이용할 수 있습니다. Pro 버전은 아래와 같은 추가 기능을 제공합니다.

Metaslider Pro

참고로 보다 동적인 슬라이드를 구현하려는 경우에는 Slider Revolution, LayerSlider, Master Slider 등을 고려해볼 수 있습니다. 이 세 플러그인 모두 플러그인 판매 사이트인 Codecanyon에서 베스트 셀링 플러그인으로 이름을 올리고 있는 인기 플러그인입니다. 특히 레볼루션 슬라이더는 이름 그대로 슬라이더 플러그인의 혁명이라 할 정도로 혁신적인 기능을 선보입니다. 하지만 레볼루션 슬라이더는 작년 초에 보안 문제 때문에 홍역을 치른 적이 있습니다. 그럼에도 불구하고 레볼루션 슬라이더는 많은 사용자들의 사랑을 받고 있습니다. 여러 가지 플러그인을 검토하여 요구 사항에 맞는 플러그인을 선택하면 좋을 듯 합니다.

참고


13개 댓글

  1. 안녕하세요 워드크레커님!
    저는 다른 슬라이더를 사용하고 있는 중이긴 한데요...
    질문이 있어서 혹시 답변 가능하시면 감사하겠습니다.

    slider pro 라는 플러그인으로 포스트 슬라이더를 모바일 버전에 배치해놨는데요.
    모바일에서 위아래로 스크롤할때 해당 슬라이더의 수평 스크롤은 안될수 있도록 자바스크립트를 어떻게 구현할수 있을까요?
    위아래 스크롤할때 슬라이더의 수평 스크롤까지 되버리니까 화면이 어지러워서요...

    1. 안녕하세요?

      댓글을 남겨주셔서 감사합니다.

      다음 글을 참고해보시겠어요?
      https://www.thewordcracker.com/miscellaneous/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B8%B0%EA%B8%B0%EC%97%90%EC%84%9C-%EC%88%98%ED%8F%89-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%97%86%EC%95%A0%EA%B8%B0/

      정확히 이것을 원하는시는지는 모르겠습니다.

      아니라면 플러그인 개발자에게 문의해보시겠어요? Slider Pro라는 이름으로 봐서 유료 플러그인 같네요. 유료 플러그인이라면 지원을 받을 수 있을 것입니다.

      1. 답글 감사합니다. 그런데 원하는게 저거는 아니네요ㅠ
        그 슬라이더를 스와이프 하는 동안 위아래 스크롤은 되지 않게 하는 것이 가능하냐는 질문이였습니다.
        아마 자바스크립트로 구현해야할거 같은데... 답답하기만 하네요.
        유료 플러그인인데 답변이 없네요ㅠㅠ

  2. 호스팅에서 2개 도매인 사용중인데
    각각따로 연결할수있나요
    예>
    test.homepage.com => aaa.co.kr
    test.homepage.com/sk => 한국.닷컴
    어떻게 해야지 되나요??

    1. 안녕하세요?

      문의주신 내용은 호스팅업체마다 조금씩 차이가 있기 때문에 정확한 답변을 드릴 수가 없습니다. 다만, 저는 Bluehost와 iPage, 그리고 cafe24를 현재 사용 중인데, Bluehost와 iPage의 경우 별 어려움 없이 도메인을 연결하는 것이 가능합니다. (현재 여러 개의 도메인을 연결하여 사용하고 있지만 도메인을 연결하는 것과 관련하여 문제가 된 적은 없습니다.)

      가령 iPage에서는 도메인 관련 설정에서 Pointer 메뉴에서 도메인을 원하는 곳으로 연결할 수 있습니다.
      http://iwordpower.com/2016/07/install-wp-and-link-domain-in-ipage/

      만약 해당 도메인들이 "도메인" 관련 메뉴에 표시되는 경우라면 어떤 식으로든 가능하지 않을까 생각됩니다. 도메인을 해당 호스팅업체를 통해 등록하면 곧바로 도메인 리스트에 표시될 것입니다. 외부 등록업체를 통해 등록한 경우에는 http://iwordpower.com/2016/12/how-to-register-a-domain-name-and-connect-it-to-hosting-agency/ 글을 참고해보시기 바랍니다.

      해 보시고 잘 안되는 경우에는 이용 중인 웹호스팅 업체에 문의하는 것이 가능 정확한 답변을 얻을 수 있는 방법입니다.

  3. 저도 굳이 슬라이더는 필요치 않다고 생각을 하는데 언어의 장벽 앞에서 뉴스페이퍼에 들어 있는 Slider Revolution 를 활성화 시키는 과정에서 이 플러그인을 또 구입을 해서..ㅜㅜ
    아직까지 활성화를 시키라고 뜨는데 어떻게 하는 것인지 모르겠어요..!

    1. 아마 문의하신 내용이 https://www.thewordcracker.com/forum/forums/topic/%EB%A5%B4%EC%A0%A0%EB%8B%A4-%ED%85%8C%EB%A7%88-%EB%B9%84%EC%A3%BC%EC%96%BC-%EC%BB%B4%ED%8F%AC%EC%A0%80-%EB%A0%88%EB%B3%BC%EB%A3%A8%EC%85%98-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-activate-%EB%AC%B8 글에 설명된 것과 관련이 있는 것 같네요.

      유료 테마에 포함된 유료 플러그인은 그대로 사용하셔야 합니다. 활성화(인증)를 시도하면 안 됩니다. 업데이트가 필요하면 테마 판매자에게 연락하여 새로운 버전을 보내줄 것을 요청할 수 있습니다. (보통은 잘 안 보내줄 것입니다. 자기들이 먼저 테마에서 제대로 호환되는지 테스트한 후에 테마를 업데이트할 때 포함시키는 방식입니다.)

  4. 안녕하세요. 좋은 정보 올려주셔서 감사합니다.
    저도 본문에 적혀 있는대로 메타 슬라이드를 헤더 바로 아래 적용하고 싶은데요.
    제가 개발적인 지식이 전혀 없다보니 알려주신 위젯 만드는 페이지에 들어가서 봤는데
    잘 이해가 되지 않습니다(header.php에 뭔가를 추가해야 한다는 것만 이해하였습니다).
    시간이 되신다면 추가 적인 설명을 부탁드려도 될까요?

    감사합니다.

    1. 안녕하세요?
      테마마다 상이하기 때문에 상세하게 설명하는 데 한계가 있습니다.
      https://avada.co.kr/wordpress/how-to-add-widget-sections-in-wordpress/ 글도 참고해보시기 바랍니다.

      링크된 글에 나와있듯이 아바다(https://www.thewordcracker.com/go/avada )와 같이 후크를 지원하는 테마의 경우 굳이 테마 소스 파일을 분석할 필요가 없이 간단히 구현이 가능할 수 있습니다.

      누구에게서 직접 레슨을 받지 않는 한 시행착오를 겪으면서 방법을 터득하는 것이 최선인 것 같습니다. 그런데 조금 하다 보면 감이 잡힐 것입니다. PHP에 대해서도 조금 익히시면 도움이 됩니다. 깊이 있게 할 필요는 없고 기본 문법 정도만 배워도 좋을 듯 합니다.

      1. 답변 주셔서 감사합니다.
        시도해 보고 되지 않는 부분이 생기면 다시 문의 드리도록 하겠습니다.

  5. 개인적으로 워드프레스 개발 프로젝트도 진행하시나요? 

    개발 프로젝트 진행하신다면... 약 1~2주 비용이 얼마나 들어갈까요? 
    1. 안녕하세요?
      개인 블로그를 방문해주셔서 감사합니다. 본업이 별도로 있기 때문에 프로젝트 작업은 수행하지 않습니다. 감사합니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.