워드프레스에서 무한 스크롤 페이지 넘기기

대부분의 웹사이트에는 여러 항목들을 한 곳에 모아 보여주는 목록 페이지가 있습니다. 그리고 이런 목록 페이지들은 한 페이지에 표시하는 목록의 양이 늘어나면 대개 한 페이지에 모두 표시하기 보다는 몇 개씩 적당히 항목을 나눠 표시하는 페이지네이션(pagination)를 사용하는 게 일반적입니다. 전통적으로 웹사이트 UI에서 이런 페이지네이션은 페이지 번호를 부여하여 1페이지, 2페이지 하는 식으로 사용자가 페이지 번호를 클릭하여 넘기도록 하는 방식을 사용해 왔지만 근래(?)에는 이런 저런 이유로 문서를 스크롤하면 자동으로 다음 페이지가 표시되는 이른바 ‘무한 스크롤(Infinite Scroll)’ 방식도 종종 사용되곤 합니다. 이 글에서는 워드프레스 사이트에 무한 스크롤 방식의 페이지네이션을 추가하는 방법을 간단하게 소개합니다.

워드프레스에 무한스크롤 추가하기

워드프레스 사이트에 무한 스크롤 페이지네이션을 추가하는 방법은 여러 가지가 있습니다.

• 무한 스크롤 기능을 제공하는 테마: 워드프레스 테마들 중에는 테마 자체에서 무한 스크롤 기능을 제공하는 테마들이 더러 있습니다.
• 직접 구현하기: 자바스크립트와 CSS를 사용하여 워드프레스 테마를 수정하면 약간의 작업만으로 별로 어렵지 않게 직접 무한 스크롤 기능을 추가해 넣을 수 있습니다.
• 플러그인 방식: 워드프레스에 무한 스크롤을 추가해주는 플러그인을 사용하는 방법입니다. 그 이름만으로도 알 수 있는 Infinite-Scroll 플러그인이 대표적이지만 이것 말고도 여러 플러그인들이 있습니다. 이들 플러그인 중에는 Infinte-Scroll 같은 범용 플러그인도 있고 특정 테마만을 위한 플러그인들도 있습니다.

여기서는 플러그인 방식의 하나인 Jetpack 플러그인 속에서 제공하는 무한 스크롤 기능을 사용하여 워드프레스 사이트에 무한 스크롤 페이지네이션을 추가하는 방법을 다룹니다.

Jetpack 무한 스크롤

알다시피 Jetpack은 워드프레스 개발사인 Automattic에서 제공하는 워드프레스 기능 확장 플러그인으로 다양한 기능을 한 곳에 모아 제공하는 일종의 올인원(all-in-one) 플러그인입니다. Jetpack에는 무한 스크롤 기능도 포함되어 있기 때문에 Jetpack만 설치되어 있다면 바로 활성화시켜 사용할 수 있습니다.

그림. Jetpack 무한 스크롤 활성화

그런 다음, 테마의 functions.php 파일 속에 다음과 같이 간단하게 infinite-scroll 기능을 사용하기 위한 설정을 추가하면 됩니다.

add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
) );

만약 워드프레스 사이트의 테마로 Twenty Twelve부터 Twenty Eleven에 이르는 워드프레스 기본 테마 중 하나를 사용하고 있다면 굳이 위의 작업을 해 줄 필요도 없습니다. Jetpack 속에는 이미 워드프레스 기본 테마를 위한 무한 스크롤 지원이 들어 있기 때문에, 무한 스크롤 기능을 활성화시키는 것만으로 모든 게 완료되기 때문입니다.

굳이 워드프레스 기본 테마가 아니더라도 테마 중에는 Jetpack의 infinte-scroll 기능을 지원하는 테마들이 많이 있습니다. 내 테마에서 Jetpack의 무한 스크롤 기능이 활성화되었는지를 확인하려면 “설정 > 읽기” 메뉴로 가서 “Infinite Scroll Behavior” 옵션이 있는지 확인하면 됩니다. 참고로 이 옵션이 체크되면 스크롤이 자동으로 생기는 그야말로 “무한 스크롤” 방식으로 작동하고, 체크되지 않으면 “더보기” 버튼을 눌러야 항목이 추가되는 이른바 “More 버튼” 방식으로 동작합니다.

그림. Jetpack 무한 스크롤 설정

무한 스크롤 설정 수정하기

별 다른 이유가 없다면 여기까지가 끝입니다. Jetpack 무한 스크롤 기능을 활성화 시키고 “설정 > 읽기” 메뉴에서 “Infinite Scroll Behavior” 체크박스가 체크되었다면 이미 내 워드프레스 사이트에 무한 스크롤 기능이 작동하는 것을 확인할 수 있을 것입니다.

그런데 경우에 따라서는 약간의 수정이 필요할 때도 있습니다. 예를 들어 업데이트되는 콘텐츠 항목의 표시 방법을 변경한다거나 한번에 추가되는 페이지의 개수를 변경하는 경우 등입니다. 이럴 때도 역시 Jetpack의 infinite-scroll 에서 제공하는 옵션들을 사용하면 간단하게 페이지네이션의 모양새를 내 니즈에 맞게 조정할 수 있습니다.

예를 들어 한번에 읽어 출력하는 페이지 항목의 개수를 조정하려면 앞서의 add_theme_support 함수에 posts_per_page 값을 추가하면 되고 footer 표시를 변경하려면 footer 값을 조정하면 되는 식입니다.

add_theme_support( 'infinite-scroll', array(
'container' => 'primary-content',
'footer'    => false, // no new footer
'posts_per_page' => 5
) );

마찬가지로 표시되는 UI의 레이아웃이나 디자인을 변경하려면 Jetpack에서 기본으로 제공하는 무한 스크롤 관련 CSS 스타일을 찾아 그 스타일을 내 니즈에 맞게 변경하면 됩니다. 예를 들어 Jetpack에서 기본으로 제공하는 로딩 아이콘(spinner)의 디자인을 좀 더 세련(?)되게 변경하려면 다음과 같이 스타일을 약간 수정할 수도 있을 것입니다. 여기서는 Spinners라는 SASS 믹스인(mixin)을 적용하였지만, 여러분은 여러분 구미에 맞는 솔루션으로 적용하면 됩니다.

.infinite-loader {
  text-indent: 0; 
  text-align: center;
  .spinner {
@include spinner(2em, border-width 12px);
  }
}

더 자세한 내용은 Jetpack Infinite Scroll 문서를 참조하거나 Jetpack 소스코드를 참조하면 됩니다. 🙂