WordPress/WooCommerce에 무한 스크롤을 추가하는 방법

사이트에 무한 스크롤을 구현하고 싶지만 방법을 모르십니까? 당신은 바로 이곳에 왔습니다! 이 기사에서는 WordPress 사이트 및 WooCommerce 스토어에 무한 스크롤을 추가하는 방법을 보여줍니다.

자세히 알아보기 전에 먼저 페이지 매김과 무한 스크롤의 차이점을 이해합시다.

페이지 매김과 무한 스크롤의 차이점

페이지 매김 은 콘텐츠를 페이지 세트로 나누는 것을 기반으로 하는 탐색 시스템이며, 각 페이지에는 고정된 수의 항목이 포함되어 있습니다. 페이지 사이를 탐색하려면 페이지 번호 또는 이전/다음을 클릭해야 하며 브라우저는 해당 특정 페이지로 이동합니다.

페이지 매김의 가장 일반적인 예는 Google 검색 결과입니다. Google에서 무언가를 검색하면 여러 페이지로 나누어진 관련 결과 목록이 반환됩니다. 검색 페이지 하단으로 스크롤하면 각 페이지를 가리키는 번호가 매겨진 링크 목록이 표시됩니다. 거기에서 아무 번호나 클릭하면 해당 페이지로 이동할 수 있습니다.

반면에 무한 스크롤 은 탐색에 대해 다른 접근 방식을 취합니다. 콘텐츠를 페이지 세트로 나누는 대신 AJAX 를 사용하여 단일 페이지에 모든 콘텐츠를 표시합니다. 처음에는 적은 수의 항목이 표시되지만 사용자가 계속 아래로 스크롤하면 더 많은 콘텐츠가 자동으로 로드됩니다. 무한 스크롤의 개념은 사용자가 스크롤하는 양에 관계없이 항상 일부 콘텐츠를 볼 수 있다는 것입니다.

무한 스크롤의 가장 좋은 예는 Facebook, Instagram, Twitter 등과 같은 소셜 미디어 사이트입니다. 피드를 탐색할 때 피드가 끝나지 않고 항상 표시되는 것을 볼 수 있습니다. 계속 아래로 스크롤하는 한 피드는 더 많은 게시물을 로드합니다. 이것이 무한 스크롤이 작동하는 방식입니다.

페이지 매김과 무한 스크롤은 모두 오늘날 매우 일반적이지만 더 좋은 방법은 없습니다. 둘 다 장단점이 있으므로 다른 시나리오에 더 적합합니다. 요구 사항 및 조건에 따라 다른 것보다 선호할 수 있습니다.

이것은 WordPress에 무한 스크롤을 추가하는 것이 언제 의미가 있는지에 대한 질문으로 이어집니다. 페이지 매김보다 적절한 경우는 언제입니까? 한번 봅시다.

무한 스크롤은 언제 사용합니까?

탐색의 기본 방법으로 무한 스크롤 또는 페이지 매김을 사용하는 것은 순전히 주관적입니다. 여기에는 옳고 그름이 없으며 전적으로 귀하의 필요와 취향에 달려 있습니다. 그러나 두 가지 방법 모두 널리 사용되기 때문에 방문자는 특정 항목에 익숙하고 사이트에 따라 특정 동작을 기대합니다. 그렇기 때문에 올바른 내비게이션 시스템을 선택하면 큰 이점을 얻을 수 있습니다.

이제 어느 것이 당신에게 적합합니까? 이는 크게 귀하의 요구 사항에 따라 다르므로 귀하만이 귀하의 상황을 더 잘 분석하고 각각의 장단점을 비교하여 결정을 내릴 수 있습니다.

예를 들어 수천 개의 제품이 포함된 전자 상거래 사이트는 페이지 매김을 사용하는 것이 좋습니다. 이렇게 하면 방대한 인벤토리를 끝없이 스크롤하는 대신 페이지 사이를 더 쉽게 탐색할 수 있습니다. 예를 들어, 세계에서 가장 큰 전자 상거래 플랫폼인 Amazon은 탐색 목적으로 페이지 매김을 사용합니다.

반대로 매장에 카테고리로 구성된 상대적으로 적은 수의 제품이 있는 경우 무한 스크롤이 좋은 옵션이 될 수 있습니다. 각 카테고리에는 더 적은 수의 항목이 있기 때문에 쇼핑객이 제품을 찾는 데 큰 어려움이 없을 것입니다. 작은 페이지 번호를 클릭하는 것보다 스크롤이 쉽고 원활하기 때문에 모바일 사용자에게도 더 편안할 수 있습니다.

반면에 블로그 페이지는 무한 스크롤을 통해 더 많은 이점을 얻을 수 있습니다. 무한 스크롤을 사용하면 게시물이 계속 자동으로 로드되므로 사용자는 더 많은 콘텐츠를 검색하기 위해 추가 단계를 수행할 필요가 없습니다. 이것은 사용자의 참여를 유지하고 결과적으로 사이트에 더 오래 머무를 것입니다.

다음은 결정을 내리기 위해 고려해야 할 몇 가지 예일 뿐입니다. 앞서 언급했듯이 옳고 그른 선택은 없으며 특정 상황에 가장 적합한 것을 선택하기만 하면 됩니다.

무한 스크롤에 관심이 있는 분들을 위해 장단점을 간단히 살펴보겠습니다.

무한 스크롤의 이점

첫째, 무한 스크롤은 AJAX를 사용하여 동일한 페이지의 모든 콘텐츠를 로드함으로써 사용자 경험을 향상하므로 사용자는 페이지 사이를 탐색하고 매번 다시 로드될 때까지 기다릴 필요가 없습니다.

마찬가지로, 무한 스크롤은 사용자 참여를 높이고 방문자가 웹 사이트에서 더 많은 시간을 보내도록 만드는 경향이 있습니다. 무한 스크롤을 사용하면 사용자가 스크롤할 때 콘텐츠가 계속 자동으로 로드되어 사용자의 관심을 불러일으키고 사이트에 계속 머물게 하는 흥미로운 콘텐츠를 계속해서 제공합니다.

더 나은 사용자 경험과 더 많은 참여도 이탈률을 줄이는 데 도움이 됩니다. 검색 엔진은 이를 좋은 콘텐츠의 표시로 간주하여 사이트의 SEO를 개선하는 데 도움이 됩니다.

또한 모바일 사용자는 일반적으로 무한 스크롤을 선호합니다. 터치 스크린 장치에서 아래로 스크롤하는 것이 작은 페이지 번호를 클릭하는 것보다 훨씬 쉽고 직관적입니다. 또한 사용자가 페이지가 매번 다시 로드될 때까지 기다릴 필요가 없기 때문에 검색 속도가 빨라집니다.

이것이 무한 스크롤의 주요 장점이지만 몇 가지 단점이 있습니다. 무한 스크롤의 불편한 점을 살펴보자.

무한 스크롤의 단점

수천 개의 제품이 있는 상점이나 수많은 게시물이 있는 사이트가 있는 경우 무한 스크롤로 탐색이 어려울 수 있습니다. 방문자가 목록 맨 아래에 있는 제품이나 게시물에 관심이 있는 경우 특히 그렇습니다. 찾는 데 상당히 많은 스크롤이 필요할 수 있으며, 이는 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

또한 무한 스크롤을 사용하면 사이트 바닥글에 접근할 수 없게 될 수 있습니다. 일반적으로 웹사이트의 바닥글에는 유용한 정보와 링크가 포함되어 있습니다. 연결할 수 없는 경우 사용자는 해당 정보를 볼 수 없으며 중요한 세부 정보를 놓칠 수 있습니다.

게다가 무한 스크롤은 콘텐츠가 같은 페이지에 계속 로드되기 때문에 많은 메모리를 소모합니다. 최악의 경우 메모리 소모가 발생하고 서버가 다운될 수도 있습니다. 따라서 무한 스크롤을 사용하려면 관리 호스팅을 사용하여 메모리 소진을 방지해야 합니다.

그것이 장점과 단점의 전부입니다. 이제 WordPress 사이트에서 무한 스크롤을 구현하는 방법을 살펴보겠습니다.

WordPress에 무한 스크롤을 추가하는 방법

사이트에서 무한 스크롤을 구현하는 가장 쉬운 방법은 전용 플러그인을 사용하는 것입니다. 사용할 수 있는 도구는 많지만 이 자습서에서는 Darren Cooney 가 개발한 AJAX Load More 를 사용합니다. 이것은 WooCommerce 상점과 WordPress 사이트에 무한 스크롤을 추가할 수 있는 프리미엄 도구입니다.

AJAX 로드 추가 플러그인 설치 및 구성

먼저 플러그인을 설치해야 합니다. WP 관리 대시보드 로 이동하여 플러그인 > 새로 추가로 이동합니다. AJAX Load More 를 검색하고 지금 설치 버튼을 누릅니다. 플러그인이 설치되면 활성화 를 누르십시오.

그런 다음 왼쪽 열의 AJAX 추가 로드 > 설정 으로 이동하여 플러그인을 구성합니다. 여기에서 기본 매개변수를 지정할 수 있습니다. 기본 컨테이너 유형, 컨테이너 클래스, 버튼/로딩 스타일 등을 설정할 수 있습니다.

이제 도구를 설치하고 구성했으므로 WordPress 또는 WooCommerce 사이트에 무한 스크롤을 추가할 차례입니다.

WooCommerce에 무한 스크롤 추가

이 섹션에서는 WooCommerce 스토어에 무한 스크롤 기능을 추가합니다. WordPress에서 구현하는 프로세스는 매우 유사하며 아래에 설명되어 있습니다. WordPress에 무한 스크롤을 포함시키려면 이 부분을 건너뛰고 WordPress 게시물/블로그 페이지에 무한 스크롤 추가 섹션으로 이동하면 됩니다.

1단계: 반복 레이아웃 템플릿 만들기

템플릿은 제품이 프런트 엔드에 표시되는 방식을 정의합니다. 반복 레이아웃 템플릿 은 모든 제품을 반복하고 저장된 템플릿에 따라 제품을 표시합니다. 이 플러그인은 리피터 템플릿을 사용하여 제품을 표시하므로 먼저 만들어야 합니다. WP 관리 대시보드에서 AJAX 추가 로드 > 리피터 템플릿으로 이동합니다.

WooCommerce 쇼핑 페이지에 무한 스크롤을 추가하는 데 관심이 있으므로 기본 반복 레이아웃 템플릿을 WooCommerce 템플릿으로 교체해야 합니다. WooCommerce와 호환되는 대부분의 테마는 기본 content-product.php 파일을 사용하여 제품을 표시합니다. 기본 리피터 템플릿을 다음 템플릿으로 교체하기만 하면 됩니다.

 <?php wc_get_template_part( '콘텐츠', '제품' ); ?>

또는 content-product.php 템플릿의 전체 코드를 복사하여 repeater 템플릿 섹션에 붙여넣을 수 있습니다. 관리자 제어판 이나 FileZilla 와 같은 FTP 클라이언트를 사용하여 content-product.php 템플릿에 액세스할 수 있습니다. 템플릿은 wp-content\plugins\woocommerce\templates 에 있습니다. 완료했으면 저장 을 눌러 리피터 템플릿을 저장합니다.

참고: 이 템플릿이 작동하지 않으면 테마가 content-product.php 템플릿의 수정된 형식을 사용하고 있는지 확인해야 할 수 있습니다.

이제 repeater 템플릿을 만들었으므로 다음 단계로 이동하겠습니다.

2단계: 단축 코드 작성

관리 대시보드에서 AJAX 추가 로드 > Shortcode Builder 로 이동하여 단축 코드를 생성합니다. 여기에서 표시 설정과 쿼리 매개변수를 조정할 수 있으며, 각 매개변수는 단축코드에 매개변수를 추가합니다. 나중에 제품을 표시하려면 이 단축 코드가 필요하기 때문에 이것은 중요한 단계입니다.

단축 코드와 사용 방법에 익숙하지 않다면 이 가이드를 살펴보세요.

화면 설정

디스플레이 설정 섹션에는 상점의 프런트 엔드에 물건을 표시하는 방법을 변경하기 위해 설정할 수 있는 많은 옵션이 있습니다. 버튼/로딩의 스타일을 더 로드 버튼이나 로딩 아이콘으로 지정할 수 있습니다. 스크롤 옵션을 활성화하면 사용자가 아래로 스크롤할 때 제품이 자동으로 로드됩니다. 반면에 스크롤 옵션을 비활성화하면 사용자가 더 많은 제품을 로드하려면 추가 로드 버튼을 눌러야 합니다.

쿼리 매개변수

쿼리 매개변수 섹션에서 AJAX 요청당 로드할 게시물 수를 설정하고 표시하려는 게시물 유형(게시물, 미디어, 랜딩 페이지 등)을 선택하는 등의 작업을 수행할 수 있습니다. 매개변수 작업을 마치면 맨 오른쪽에 있는 단축 코드 출력 섹션에서 생성된 단축 코드를 찾을 수 있습니다. 나중에 사용할 수 있으므로 해당 단축 코드를 복사합니다.

기본적으로 Post Type 섹션에는 WooCommerce에 대한 옵션이 없으므로 woocommerce 매개변수를 추가하고 post_type 매개변수를 수동으로 제거해야 합니다. 이렇게 하려면 단축 코드에 woocommerce = “true” 를 추가하고 post_type = “post” 매개변수를 제거하기만 하면 됩니다.

woocommerce 매개변수를 true로 설정하면 플러그인이 자동으로 관련 제품 매개변수를 고려하여 제품을 표시합니다. 단축 코드는 다음과 같아야 합니다.

 [ ajax_load_more woocommerce="true" container_type="div" posts_per_page="4" ]

이제 최종 단축 코드를 얻었으므로 이를 사용하여 WooCommerce/WordPress 사이트에 무한 스크롤을 추가해 보겠습니다.

3단계: Archive-Products.php에 단축 코드 추가

archive-product.php 파일은 쇼핑 페이지에 WooCommerce 제품을 표시하는 데 사용되는 템플릿입니다. 제품이 AJAX Load More 플러그인에 의해 로드되도록 템플릿에 단축 코드를 배치합니다.

단축 코드를 추가하기 전에 archive-product.php 파일의 복사본을 만들어 wp-content\themes\your-theme(eg, astra)\woocommerce 디렉터리에 저장해야 합니다. woocommerce 디렉토리가 없으면 생성하십시오. 원본 archive-product.php 템플릿은 wp-content\plugins\woocommerce\templates 에 있습니다. 관리자 제어판이나 FTP 클라이언트를 통해 이러한 변경을 수행할 수 있습니다.

archive-product.php 파일을 테마의 루트 디렉토리에 배치하면 원래 템플릿 설정이 무시됩니다. 이는 archive-product.php 파일을 테마 디렉토리에 배치함으로써 WooCommerce가 더 높은 우선순위를 부여한다는 것을 의미합니다. 파일이 테마 디렉토리에 있는 경우 파일을 읽고 플러그인 디렉토리의 원본 파일을 읽지 않습니다.

더욱이 이것은 원래 파일이 플러그인 디렉토리에 여전히 존재하기 때문에 안전한 절차이므로 복제 파일에 문제가 있는 경우 해당 파일을 삭제하고 플러그인 디렉토리에 원본 파일을 계속 유지할 수 있습니다.

이제 텍스트 편집기를 사용하여 최근에 복사한 템플릿 파일을 엽니다. if(wc_get_loop_prop('total')){ } 와 같은 조건문을 찾으십시오. 아래 스크린샷을 참조하세요.

전체 조건문을 선택하고 다음 코드로 바꿉니다.

 // 아카이브-제품.php
if ( wc_get_loop_prop( '총' ) ) {
   echo do_shortcode('[ajax_load_more woocommerce="true" container_type="div" posts_per_page="4"]');
}

단축 코드를 단축 코드로 바꾸는 것을 잊지 마십시오. 그런 다음 파일을 저장합니다. 그런 다음 프런트 엔드로 이동하여 쇼핑 페이지로 이동한 다음 아래로 스크롤합니다. 짜잔! 무한 스크롤이 작동하는 것을 볼 수 있습니다.

WordPress 게시물/블로그 페이지에 무한 스크롤 추가

WordPress 게시물/블로그 페이지에 무한 스크롤을 추가하는 것은 WooCommerce와 유사한 절차를 따르지만 몇 가지 차이점이 있습니다. WordPress에서 무한 스크롤을 단계별로 구현하는 방법을 살펴보겠습니다.

1단계: 반복 레이아웃 템플릿 만들기

블로그 페이지의 경우 content-blog.php 템플릿을 반복 템플릿으로 사용합니다. 관리자 제어판 또는 FTP 클라이언트를 통해 사이트 디렉토리로 이동하고 wp-content\themes\your-theme(eg, astra)\template-parts 이동합니다. 거기에서 content-blog.php 템플릿을 찾을 수 있습니다.

템플릿 파일에서 코드를 복사하여 플러그인의 반복 레이아웃 템플릿 섹션에 붙여넣습니다. 그런 다음 반복 레이아웃 템플릿을 저장 합니다.

2단계: 단축 코드 작성

이제 단축 코드를 생성해야 합니다. 이를 위해 WP Admin 대시보드 로 이동하여 AJAX 추가 로드 > Shortcode Builder로 이동합니다. 디스플레이 설정과 쿼리 매개변수를 선택하여 단축 코드를 생성하고 만족스러우면 단축 코드를 복사합니다.

3단계: 블로그 페이지에 단축 코드 추가

아직 블로그 페이지가 없으면 새 페이지를 만들고 블로그 라고 합니다. 페이지를 편집하는 동안 왼쪽 상단 모서리에 있는 " +" 아이콘을 클릭하면 대화 상자가 나타납니다. 단축 코드 블록을 검색하고 선택하여 페이지에 추가합니다.

이제 이전 단계에서 복사한 단축 코드를 단축 코드 블록에 붙여넣고 페이지를 업데이트합니다.

브라보! WordPress 블로그 페이지에 무한 스크롤을 추가했습니다. 다른 게시물이나 페이지에 추가하는 과정은 완전히 동일합니다.

결론

대체로 무한 스크롤을 사용하면 탐색을 개선하고 사이트에서 사용자에게 더 나은 경험을 제공하는 좋은 솔루션이 될 수 있습니다. 사용자 경험이 모든 유형의 비즈니스에서 핵심이라는 것은 비밀이 아닙니다. 사용자 참여도를 높이고 결과적으로 방문자가 사이트에 더 오래 머물고 더 자주 방문하며 전환 가능성을 높입니다.

무한 스크롤을 사용하면 사용자가 페이지 끝에 도달하면 콘텐츠가 자동으로 로드됩니다. 이렇게 하면 사용자는 여러 페이지를 탐색하지 않고도 더 가치 있는 콘텐츠를 찾을 수 있습니다. 또한 무한 스크롤은 모바일 장치에서 탐색을 더 편안하게 만들고 탐색 프로세스를 가속화합니다.

그러나 무한 스크롤에는 연결할 수 없는 바닥글 또는 메모리 고갈과 같은 몇 가지 단점도 있습니다. 따라서 사이트에 무한 스크롤을 구현할지 여부를 결정하기 전에 장단점을 저울질해야 합니다. 옳고 그른 선택은 없으며 모두 비즈니스 요구 사항에 달려 있습니다.

이 기사에서는 AJAX Load More 플러그인을 사용하여 WordPress 및 WooCommerce에 무한 스크롤을 추가하는 방법을 설명했습니다. 이 프로세스는 몇 분 밖에 걸리지 않으며 무료이며 사이트의 사용자 경험을 개선하는 데 도움이 될 수 있습니다.

사이트에 무한 스크롤을 추가하는 더 많은 도구를 보려면 사용할 수 있는 더 많은 플러그인이 포함된 이 게시물을 확인하세요.

웹사이트나 상점에서 무한 스크롤을 사용해 본 적이 있습니까? 당신의 경험은 어땠나요? 아래 의견에 알려주십시오!