웹사이트에 추가하는 방법

WordPress에 무한 스크롤을 추가하고 싶습니까?

무한 스크롤은 방문자가 페이지 맨 아래에 도달할 때마다 페이지가 자동으로 새 콘텐츠를 로드하도록 합니다. 이러한 방식으로 방문자의 참여를 유지하고 사이트의 이탈률을 줄일 수 있습니다.

WordPress 웹 사이트에 무한 스크롤을 추가하는 방법을 보여 드리겠습니다. 그러나 먼저, 우리는 당신이 그것에 대해 알아야 할 몇 가지 기본 사항을 다룰 것입니다. 이 게시물의 개요는 다음과 같습니다.

시작하자.

무한 스크롤을 사용하면 사용자가 새 페이지를 열기 위해 수동으로 링크를 클릭하도록 요구하지 않고 사용자가 아래로 스크롤할 때 사이트에 새 콘텐츠가 로드됩니다.

WordPress에서 일반적인 예는 페이지 매김과 같은 다른 기술에 의존하지 않고 방문자가 맨 아래에 도달하면 블로그 페이지에 새 게시물을 자동으로 로드하는 것입니다.

이 기술은 Facebook 및 Twitter와 같은 소셜 미디어 플랫폼에서 자주 사용되어 사용자에게 방해받지 않는 브라우징 경험을 제공합니다.

사이트에 무한 스크롤을 추가해야 합니까? 장점과 단점

사용자 참여 및 탐색 경험에 긍정적인 영향을 미칠 수 있지만 무한 스크롤은 모든 사람에게 적합하지 않습니다.

WordPress 웹사이트에서 이 기술을 구현해야 하는지 여부를 결정하기 위해 장단점을 살펴보겠습니다.

무한 스크롤 사용의 장점

사이트에서 무한 스크롤을 사용하면 다음과 같은 이점이 있습니다.

무한 스크롤 사용의 단점

사이트에서 무한 스크롤을 사용할 때의 단점은 다음과 같습니다.

• 콘텐츠가 매끄럽게 변경되고 현재 어떤 페이지에 있는지 알기가 어렵기 때문에 사이트를 탐색하는 것이 혼란스러울 수 있습니다.
• 콘텐츠, 특히 텍스트의 지속적인 표시는 일부 방문자에게 압도적 일 수 있으며 방문자는 귀하의 사이트를 떠나 경쟁 사이트를 찾을 수 있습니다.
• 사이트 바닥글 방문자가 절대 도달할 수 없기 때문에 중복됩니다.
• 빠른 스크롤은 웹 서버를 압도하여 사이트를 정지시키고 충돌 을 일으킬 수 있습니다.
• 무한 스크롤로 인해 웹사이트가 하나의 큰 페이지처럼 보일 수 있기 때문에 일부 도구는 페이지당 측정항목을 추적하기 어려울 수 있습니다.
• 또한 사이트가 하나의 연속 페이지로 표시되면 사이트의 SEO 및 검색 순위 에 부정적인 영향을 미칠 수 있습니다. 적절하게 구현된 무한 스크롤은 여전히 ​​각 페이지에 고유한 URL을 제공하여 이를 방지할 수 있습니다.

다음은 웹사이트에 무한 스크롤을 구현할 때의 장단점입니다. 이러한 점을 고려한 후에도 WordPress 사이트에 무한 스크롤을 추가하려면 계속 읽으십시오.

WordPress 사이트에 무한 스크롤을 추가하는 방법에는 두 가지가 있습니다.

1. 무한 스크롤을 지원하는 WordPress 테마 사용
2. 무한 스크롤 플러그인 사용

각 방법을 자세히 살펴보고 자신에게 맞는 방법을 구현할 수 있습니다.

그러나 시작하기 전에 전체 웹사이트를 백업하세요. 무한 스크롤을 구현하려면 테마를 변경하고 사이트에 새 플러그인을 설치해야 하기 때문입니다. 이러한 단계를 수행하는 데는 어느 정도의 위험이 수반되며 한 번의 실수로 인해 사이트가 손상될 수 있습니다. 이 경우 백업이 안전망이 되므로 백업을 수행하십시오.

1. WordPress 테마를 사용하여 무한 스크롤 추가(Neve)

Neve는 무한 스크롤 기능을 제공하는 몇 안 되는 무료 WordPress 테마 중 하나입니다. 블로그 목록 페이지(또는 다른 아카이브 페이지)에서만 무한 스크롤을 활성화하려는 경우 이상적인 솔루션입니다.

Neve를 사용하여 무한 스크롤을 활성화하는 것은 매우 쉽습니다.

WordPress 웹 사이트에 테마를 설치하고 활성화 합니다.

그런 다음 모양 → 사용자 정의 → 레이아웃 → 블로그/아카이브 로 이동합니다.

Ordering and Content 옵션까지 아래로 스크롤하고 Post Pagination 아래에서 Infinite Scroll 을 선택합니다.

게시 버튼을 눌러 설정을 저장합니다.

그러나 개별 게시물이나 페이지에서 무한 스크롤을 활성화하려면 플러그인을 사용해야 합니다. 즉, 누군가가 전체 단일 블로그 게시물 페이지를 열고 맨 아래로 스크롤하면 사이트에서 다른 전체 게시물을 로드하기를 원합니다.

다음 두 섹션에서는 플러그인을 사용하여 무한 스크롤을 구현하는 방법을 보여줍니다.

2. WordPress 무한 스크롤 플러그인 사용

웹 사이트에서 무한 스크롤을 활성화하는 데 도움이 되는 여러 플러그인이 있지만 가장 인기 있는 플러그인은 다음과 같습니다.

1. 무한 스크롤을 잡아라
2. YITH 무한 스크롤링
3. Ajax 더 로드

사용 방법을 보여주기 전에 각 플러그인을 간단히 살펴보겠습니다.

무한 스크롤을 잡아라

Catch Infinite Scroll은 사이트의 콘텐츠를 단일 페이지에 가로로 표시할 수 있는 간단하고 무료인 무한 스크롤 플러그인입니다.

스크롤하는 대신 클릭하도록 트리거를 변경하면 사이트에 더 로드 버튼이 추가됩니다.

사용자 정의가 가능하며 무엇보다도 로드 이미지와 색상, 글꼴 크기 및 추가 로드 버튼의 글꼴 패밀리를 변경할 수 있습니다.

무료 버전을 사용하면 웹사이트에서 무한 스크롤을 사용할 수 있습니다. 그러나 색상, 글꼴 모음 및 글꼴 크기를 변경하려면 연회비 $24.99에 프리미엄 버전을 구입해야 합니다.

무료 플러그인을 사용하려면 사이트에 플러그인을 설치하고 활성화하기 만 하면 됩니다.

WordPress 대시보드에서 Catch Infinite Scroll 로 이동하여 새 로드 이미지를 업로드하고 더 로드할 텍스트와 더 이상 표시할 콘텐츠가 없을 때 표시되는 텍스트를 변경할 수 있습니다.

YITH 무한 스크롤링

YITH Infinite Scrolling은 무료 플러그인이며 이전 플러그인과 마찬가지로 YITH Infinite Scrolling은 페이지 매김 유형(무한 스크롤 또는 추가 버튼 로드)을 선택하는 옵션도 제공합니다.

추가 로드 버튼 텍스트를 변경하고, 버튼에 추가 클래스를 추가하고, 새 콘텐츠를 로드하기 위해 애니메이션(페이드 인, 슬라이드 인 등)을 사용할 수도 있습니다.

자신의 이미지를 업로드할 수 있는 옵션과 함께 선택할 수 있는 로드 이미지가 많이 있습니다.

우리가 가장 좋아하는 두 가지 기능은 모바일 장치에서 무한 스크롤을 활성화 또는 비활성화하는 옵션과 새 항목이 로드될 때마다 페이지의 URL을 변경하는 옵션( SEO에 중요 )입니다.

플러그인의 무료 버전을 사용하면 다음 두 가지만 수행할 수 있습니다.

1. 사용자 정의 로딩 이미지를 업로드하십시오.
2. 게시물에서만 무한 스크롤을 활성화하십시오.

모든 아카이브 페이지에서 무한 스크롤을 활성화하고 플러그인의 모든 기능에 액세스하려면 연간 $59.99의 비용이 드는 프리미엄 버전의 플러그인이 필요합니다.

YITH 무한 스크롤을 사용하는 것은 매우 쉽습니다. 사이트에 무료 플러그인을 설치하고 활성화 하기만 하면 게시물을 무한 스크롤할 수 있습니다.

YITH → Infinite Scrolling 으로 이동하여 플러그인 구성을 사용자 정의할 수 있지만 기본 설정은 잘 작동합니다.

Ajax 더 로드

Ajax Load More는 AJAX 필터링, 반복 레이아웃 템플릿, 단축 코드 빌더, 사용자 정의 조회 등과 같은 옵션과 함께 무한 스크롤을 활성화할 수 있는 복잡한 플러그인입니다.

이전 플러그인에 비해 Ajax Load More는 설정하기가 조금 더 복잡합니다. 사용하기 위해 개발자가 될 필요는 없지만 초보자는 "쿼리 매개변수" 및 "리피터 템플릿"과 같은 용어를 처리해야 하므로 다른 플러그인을 계속 사용하고 싶을 수 있습니다.

그러나 추가된 복잡성의 이점은 사이트에서 무한 스크롤 동작을 구성 및 사용자 지정하기 위한 수많은 옵션을 얻을 수 있다는 것입니다.

따라서 게시물에서 페이지, 댓글 등에 이르기까지 사이트의 모든 것을 무한 스크롤할 수 있도록 하려면 이 옵션을 살펴보는 것이 좋습니다.

WordPress 무한 스크롤 시작하기

사이트를 개선하는 다른 방법에 대해서는 사용자 경험을 개선하기 위한 7가지 팁을 확인하세요.

이게 다야! WordPress 사이트에 무한 스크롤을 추가하는 방법에 대해 질문이 있으면 아래 의견에 알려주십시오.