WordPress에서 단계별로 슬라이더를 만드는 방법

게시 됨: 2022-05-24

WordPress 설치의 슬라이더는 매우 기능적입니다. 온라인 상점을 운영 중이거나 사용자의 관심을 끌어야 하는 경우 추가해야 합니다. WordPress에서 슬라이더를 만들고 싶습니까? 이 기사에서는 코드 한 줄도 건드리지 않고 WordPress에서 슬라이더를 만드는 방법을 보여줍니다!

슬라이더란?

WordPress에서 슬라이더는 사용자를 사용자 정의 페이지로 리디렉션하는 상호 작용 가능한 미디어 또는 링크입니다. 추가 효과 없이 사용자의 관심을 끌 수 있는 가장 좋은 방법 중 하나입니다. 슬라이더는 여러 미디어를 표시하는 데 사용할 수 있으며 대부분의 웹사이트와 상점에 적합합니다. 또한 WordPress 설치에 슬라이더를 추가하면 완전히 제어할 수 있습니다.

슬라이더의 크기, 색상, 배경색 및 내용을 수정할 수 있습니다. 웹사이트 방문자의 관점에서 확인하면 슬라이더가 상점 관리자가 제공해야 하는 것을 빠르게 알려줍니다. 한편, 매장 관리자 입장에서 확인하면 하나의 구텐베르그 블록을 통해 여러 상품을 홍보할 수 있다.

이렇게 하면 관리자가 프로모션에 필요한 공간을 줄이고 페이지에 너무 많은 위젯이나 블록을 추가하지 않고도 사용 가능한 최대 공간을 활용하는 데 도움이 됩니다.

WordPress에 슬라이더를 추가하는 이유는 무엇입니까?

웹사이트 방문자의 관심을 매력적이고 반응적인 이미지로 끌어야 하는 경우 WordPress 웹사이트에 슬라이더를 추가하는 것이 좋습니다. 여러 유형의 슬라이더를 사용할 수 있습니다. 예를 들어, 어떤 사람들은 최근 게시물을 표시하는 데 사용하고 어떤 사람들은 비디오를 표시하고 다른 사람들은 사용자 정의 갤러리를 표시합니다. 슬라이더의 가장 좋은 점은 사용자 정의가 가능하고 쉽게 관리할 수 있다는 것입니다.

또한 전자 상거래 상점은 슬라이더를 사용하여 특별 할인 제안이나 곧 출시될 제품을 표시할 수도 있습니다. 따라서 가시성과 참여도를 높이려면 슬라이더가 적합한 매체입니다.

WordPress에서 슬라이더를 만드는 방법?

WordPress에서 슬라이더를 만드는 방법에는 세 가지가 있습니다.

  • 워드프레스 플러그인을 사용하여
  • Divi 빌더와 함께
  • 테마 옵션을 통해

여기에서 모든 방법을 보여드리겠습니다. 따라서 요구 사항에 따라 선호하는 것을 선택할 수 있습니다. 그래서 더 이상 고민하지 않고 주제로 들어가겠습니다.

플러그인을 사용하여 WordPress에서 슬라이더 만들기

이 섹션에서는 WordPress 플러그인을 사용하여 슬라이더를 만드는 방법을 보여줍니다. 인터넷에서 최고의 WordPress 슬라이더 플러그인을 확인하면 여러 가지 무료, 프리미엄 및 프리미엄 옵션이 제공됩니다. 이 튜토리얼에서는 Soliloquy를 사용할 것입니다. 괜찮은 기능과 통합을 갖춘 프리미엄 WordPress 플러그인입니다.

따라서 가장 먼저 해야 할 일은 WordPress 백엔드에 로그인하고 새 플러그인 추가 영역으로 이동하는 것입니다. 거기서 Soliloquy lite를 검색하세요. 플러그인을 찾으면 웹 사이트에 설치하고 활성화하십시오.

WordPress에서 슬라이더 만들기 - 독백 설치

라이트 버전 플러그인을 사용하기 때문에 인증을 할 필요가 없습니다. 플러그인을 활성화하면 관리자 패널 왼쪽에 플러그인 설정이 표시됩니다.

WordPress에서 슬라이더 만들기 - 독백 설정

새 슬라이더를 생성해야 하는 경우 새로 추가 버튼을 클릭합니다.

WordPress에서 슬라이더 만들기 - 새 슬라이더 추가

곧 그들은 슬라이더 만들기 마법사를 보여줄 것입니다.

WordPress에서 슬라이더 만들기 - 독백 슬라이더

슬라이더의 이름을 지정하고 이미지를 업로더에 드롭하기만 하면 됩니다.

이미지를 업로드하면 슬라이더 섹션에서 이미지를 볼 수 있습니다.

슬라이더 섹션

거기에서 이미지를 재정렬하거나 삭제할 수 있습니다. 구성 섹션 에서 사용 가능한 사용자 지정 옵션을 볼 수 있습니다.

구성

플러그인은 일부 기본 구성 옵션과 값을 슬라이더에 자동으로 추가합니다. 그러나 완전히 제어할 수 있으며 원하는 방식으로 슬라이더를 편집할 수 있습니다. 슬라이더를 수정한 후에는 게시할 수 있습니다.

게시 슬라이더

슬라이더 설정의 오른쪽에는 슬라이더를 표시하는 데 사용할 수 있는 단축 코드와 WordPress 기능 스니펫이 표시됩니다.

슬라이더 단축 코드

단축 코드는 모든 페이지에 슬라이더를 표시해야 할 때 가장 좋은 옵션입니다. 거기에서 단축 코드를 복사하여 페이지에 붙여넣기만 하면 됩니다. 반면에 스니펫을 사용하여 템플릿에 슬라이더를 표시합니다. 테마의 PHP 파일 안에 스니펫을 붙여넣을 수 있습니다.

이 경우 단축 코드를 새 페이지에 붙여넣습니다. 그런 다음 단축 코드를 붙여넣은 후 페이지를 업데이트합니다.

슬라이더 샷코드 붙여넣기

프론트 엔드에서 페이지를 확인하면 라이브 액션을 볼 수 있습니다.

슬라이더 생성

슬라이더는 구성에 따라 다른 미디어를 표시합니다. 사용자는 프런트 엔드에서 수동으로 이미지를 전환할 수도 있습니다. 슬라이더를 편집해야 하는 경우 독백 설정으로 이동하여 편집해야 하는 슬라이더를 열고 구성 옵션이나 값을 수정합니다.

라이트 버전은 최소한의 기능으로 제공되므로 더 많은 고유한 기능과 추가 기능이 필요한 경우 프리미엄 도구 사용을 고려해야 합니다.

다른 WordPress 슬라이더 플러그인을 시도해야 하는 경우 최고의 플러그인 목록이 있습니다.

  • 스마트 슬라이더
  • 레이어 슬라이더
  • SeedProd
  • 슬라이더 혁명
  • 무엇이든 슬라이드

시도할 수 있는 보다 안정적인 슬라이더 플러그인을 보려면 이 기사를 확인하십시오.

이것이 Soliloquy로 슬라이더를 만드는 방법입니다. 라이브 웹사이트에서 테스트할 필요가 없다면 로컬에서 하나의 WordPress 설치를 호스팅해야 합니다.

Divi Builder를 사용하여 WordPress에서 슬라이더 만들기

Divi 빌더는 강력한 WordPress 페이지 빌더 플러그인입니다. WordPress 웹 사이트에서 슬라이더를 만드는 데 사용할 수 있습니다. 그러나 끌어서 놓기 편집기를 사용하기 때문에 사용자 정의 페이지와 디자인을 만드는 것은 케이크워크가 될 것입니다. 또한 플러그인은 대부분의 WordPress 테마와도 호환됩니다. 따라서 어떤 테마를 사용하든 상관 없습니다. Divi 빌더가 당신을 덮었습니다.

이 섹션에서는 Divi 빌더로 슬라이더를 만드는 방법을 보여줍니다. 먼저 우아한 테마로 이동하여 Divi Builder 구독을 구매해야 합니다. 완료되면 WordPress 웹 사이트에서 Divi 빌더를 설치하고 활성화하십시오.

WordPress에서 슬라이더 만들기 - divi 빌더 플러그인 설치

그런 다음 플러그인 설정으로 이동하여 활성화 후 라이선스를 확인합니다.

WordPress에서 슬라이더 만들기 - 빌더 옵션

이제 페이지로 이동(또는 생성)하고 Divi 빌더를 사용하여 편집합니다.

WordPress에서 슬라이더 만들기 - divi 빌더 사용

곧 Divi 비주얼 편집기로 리디렉션됩니다.

WordPress에서 슬라이더 만들기 - 비주얼 빌더

거기에서 당신은 할 수 있습니다

  • 템플릿을 처음부터 빌드
  • 미리 만들어진 템플릿 선택
  • 기존 페이지 복제

옵션은 전적으로 귀하에게 달려 있습니다. 이 경우 우리는 처음부터 시작할 것입니다. 행을 삽입하면 사용자 정의 모듈을 선택할 수 있는 옵션이 표시됩니다.

WordPress에서 슬라이더 만들기 - 사용자 정의 divi 모듈

거기에서 Slider 를 검색합니다.

슬라이더

다음과 같은 여러 슬라이더 옵션이 표시됩니다.

  • 포스트 슬라이더
  • 슬라이더
  • 비디오 슬라이더

필요한 것을 선택했으면 행에 추가하십시오. 이 경우 기본 슬라이더 를 사용합니다. 이미지 그룹이나 사용자 정의 텍스트를 표시해야 하는 경우 기본 슬라이더 모듈이 올바른 모듈입니다.

기본 슬라이더

모듈 구성 블록을 통해 슬라이더를 구성할 수 있습니다.

슬라이더 블록

여기에서 원하는 만큼 슬라이더를 추가할 수 있습니다. 텍스트, 링크 또는 이미지일 수 있습니다. 슬라이더를 수정했으면 모듈을 저장합니다.

모듈을 저장

이미지 슬라이더를 표시해야 하는 경우 미디어 추가 버튼을 사용하고 기존 슬라이더를 수정합니다.

미디어 추가

그게 다야

이런 식으로 Divi 빌더로 슬라이더를 만들 수 있습니다. 또한 우아한 테마는 어딘가에 갇힌 경우 연중무휴 24시간 지원을 제공하므로 문제를 신속하게 해결할 수 있습니다.

테마 옵션을 사용하여 WordPress에서 슬라이더 만들기

일부 프리미엄 WordPress 테마에는 내장 슬라이더 옵션도 있습니다. 따라서 테마에 이 기능이 있으면 타사 슬라이더 플러그인이나 사용자 정의 코드를 사용할 필요가 없습니다. 대신 테마 패널을 통해 WordPress 대시보드에서 바로 슬라이더를 만들 수 있습니다.

이 방법과 충돌하는 경우 테마의 공식 지원팀에 문의하세요. 또는 더 관련성 높은 가이드에 대한 설명서 섹션을 확인할 수도 있습니다.

보너스: WordPress에 Instagram 슬라이더 추가

Instagram은 아름다운 순간을 표시하는 훌륭한 매체입니다. Instagram에서 활발하게 활동하고 이미지를 공유하는 경우 전용 플러그인을 사용하여 이미지를 WordPress 설치로 쉽게 가져올 수 있습니다. 고맙게도 우리는 고급 기능을 갖춘 최첨단 도구를 만들었으며 Instagram Feed Gallery라고 합니다.

여기에서는 WordPress에 Instagram 슬라이더를 추가하는 방법을 보여줍니다.

먼저 Instagram Feed Gallery WordPress 플러그인을 가져와야 합니다. 구매를 완료하면 QuadLayers 계정에 로그인하여 프리미엄 플러그인 파일을 다운로드할 수 있습니다.

WordPress에서 슬라이더 만들기 - 인스타그램 피드 갤러리 다운로드

WordPress 웹사이트에 플러그인을 설치합니다.

WordPress에서 슬라이더 만들기 - 인스타그램 피드 갤러리 설치

플러그인을 활성화했으면 소셜 피드 갤러리를 설치하고 활성화해야 합니다. 버튼을 클릭하여 설치 및 활성화할 수 있습니다.

WordPress에서 슬라이더 만들기 - 소셜 피드 갤러리 활성화

다음으로 해야 할 일은 라이센스 키를 확인하는 것입니다. 소셜 피드 갤러리 설정 아래에 라이선스 확인 옵션이 표시됩니다.

WordPress에서 슬라이더 만들기 - 라이선스 확인

QuadLayers 계정에 로그인하여 라이선스 키를 받고 라이선스 섹션으로 이동합니다. 거기에서 사용 가능한 모든 라이센스 키를 볼 수 있습니다. 거기에서 키를 복사하십시오.

WordPress에서 슬라이더 만들기 - 갤러리 라이센스 피드

이제 등록된 이메일 주소로 라이선스 옵션에 붙여넣고 변경 사항 저장 을 클릭합니다.

WordPress에서 슬라이더 만들기 - 변경 사항 저장

이제 플러그인의 잠재력을 최대한 활용했습니다. 이제부터 사용자 정의 슬라이더를 만들고 표시할 수 있습니다. 그러나 먼저 계정 설정을 열고 거기에서 계정을 연결하십시오.

WordPress에서 슬라이더 만들기 - 계정

설정을 통해 계정 또는 비즈니스 계정을 연결할 수 있습니다.

WordPress에서 슬라이더 만들기 - 계정 연결

승인을 완료한 후 새 피드 생성을 시작할 수 있습니다.

WordPress에서 슬라이더 만들기 - 새 피드 만들기

다음 단계에서 피드를 사용자 지정할 수 있습니다. 다시 말하지만, 여러 옵션이 있으므로 원하는 방식으로 피드를 자유롭게 수정하십시오.

피드를 만든 후 플러그인은 고유한 단축 코드를 제공합니다.

인스타그램과 워드프레스 통합 - 피드 단축 코드 복사

그런 다음 Classic Editor 또는 Gutenberg 편집기로 이동하여 단축 코드를 붙여넣습니다.

페이지를 퍼블리싱하거나 업데이트한 후에는 프론트엔드에서 확인이 필요합니다. 거기에 슬라이더가 보일 것입니다.

WordPress 웹사이트에 Instagram 이미지를 슬라이더나 갤러리로 표시할 수 있습니다.

WordPress에서 지연 로딩을 활성화하는 방법은 무엇입니까?

WordPress 설치에 너무 많은 이미지를 추가하면 방문자는 페이지 로딩 시간이 약간 지연된다는 것을 알게 될 것입니다. 전자 상거래 상점 또는 이와 유사한 것을 실행할 때 느린 페이지를 사용하지 않는 것이 좋습니다. WordPress 캐싱 플러그인을 사용하면 대부분의 속도 및 최적화 문제를 해결할 수 있습니다. 그러나 이미지 제공을 최적화해야 하는 경우 지연 로드를 활성화해야 합니다.

일반적으로 사용자가 페이지에 방문하면 웹 서버는 전체 이미지와 콘텐츠를 로드하여 표시합니다. 페이지에 사진이 너무 많으면 시간이 걸립니다. 반면에 설치에서 지연 로딩을 활성화하면 WordPress는 사용자가 스크롤을 시작한 후에만 이미지를 로드합니다.

몇 초 안에 페이지를 로드하고 HTTP 요청을 줄일 수 있습니다. 그것은 좋은 기능이며 전 세계 수백만 블로거와 웹 사이트에서 사용됩니다.

그러나 이 섹션에서는 BJ Lazy Load를 사용하여 WordPress에서 지연 로드를 활성화하는 방법을 보여줍니다.

가장 먼저 해야 할 일은 WordPress 설치에 BJ Lazy Load를 설치하고 활성화하는 것입니다.

bj 지연 로드 설치

설치 후 WordPress 설정 아래에 플러그인 설정이 표시됩니다.

bj 지연 로드 설정

기본 설정은 표준 WordPress 설치에 매우 적합합니다.

bj 지연 로드 옵션

원하는 경우 옵션을 수정할 수 있습니다. 마지막으로 재구성 후 설정을 저장했는지 확인하십시오. 이 방법으로 WordPress 웹 사이트에서 Lazy Loading을 구성할 수 있습니다.

참고: 일부 WordPress 캐싱 플러그인에는 지연 로딩 기능이 내장되어 있습니다. 따라서 캐싱 플러그인이 이 기능을 지원하면 추가 도구나 서비스에 의존할 필요가 없습니다.

결론

위에서 볼 수 있듯이 WordPress 설치에서 슬라이더를 만드는 세 가지 방법이 있습니다.

  • 전용 슬라이더 플러그인 사용
  • Divi 빌더와 함께
  • 테마 옵션을 통해

쉬운 솔루션을 찾고 있다면 Soliloquy 또는 Divi 빌더 플러그인을 권장합니다. 고유한 기능과 통합이 제공됩니다. 반면에 테마가 내장 슬라이더를 지원하는 경우 테마 편집기를 사용할 수 있습니다. 이렇게 하면 WordPress 웹사이트에 설치된 플러그인 수를 줄일 수 있습니다.

슬라이더를 만든 후 더 나은 속도와 성능을 위해 웹 사이트를 최적화할 수 있도록 캐싱 플러그인을 올바르게 구성했는지 확인하십시오.

블로그에서 더 많은 기사를 확인하실 수 있습니다. 그러나 다음은 귀하에게 흥미로울 수 있는 엄선된 기사 중 일부입니다.

  • Divi 헤더를 고정/고정하는 방법(단계별 가이드)
  • WordPress 보안: 반드시 알아야 할 10가지 전술
  • WordPress에서 헬프 데스크를 설정하는 방법