젯팩의 페이지 넘김 없는 무한 스크롤 커스터마이징

현재 사용하는 테마에서는 젯팩(jetpack)을 이용해 페이지 넘김 없이 포스트를 불러오고 있습니다. 스크롤에 따라 자동으로 다음 페이지를 로딩해주기 때문에 컨텐츠를 노출하기 쉬운 장점이 있죠. 이번 페이지 에서는 무한 스크롤 및 풋터 영역을 커스터마이징 하는 방법에 대해 알아보겠습니다.

젯팩 무한 스크롤 설정 활성화

젯팩의 무한 스크롤을 사용하기 위해서 가장 먼저 무한 스크롤 기능을 활성화 해야겠죠.
infinite-scroll-activation

활성화가 되면 설정을 눌러서 원하는 설정을 아래와 같이 합니다.
infinite-scroll-setting

위에서 무한 스크롤을 비활성화하면 읽기 설정에서 페이지당 보여줄 글 수만큼 더보기 버튼(이전글)이 아래와 같이 생성됩니다.
infinite-scroll-load-more-btn

젯팩 무한 스크롤에서는 자동 포스트 로딩 뿐만 아니라 해당 포스트의 페이지 넘버링도 자동으로 해주기 때문에 위의 옵션에서 구글 애널리틱스를 활성화 하면 페이지 추적이 가능합니다.

젯팩 무한 스크롤 페이지당 포스트 갯수 설정

무한 스크롤은 기본 7개의 포스트를 자동으로 불러옵니다. 하지만 이는 여러분의 서버 파워, 웹사이트 디자인, 또는 로딩 속도에 맞게 커스터마이징이 가능합니다. 아래의 코드를 테마 functions.php 파일에 추가하세요.

위의 코드에서 posts_per_page에 3개의 포스트 숫자를 지정하면 기본 7개에서 3개로 자동 로딩 포스트 숫자가 변경됩니다.

그 이외 다른 기본 설정은 아래의 jetpack/modules/infinite-scroll/infinity.php 코드를 참고하세요.

젯팩 무한 스크롤 풋터

스크롤을 하다보면 화면 아래에 풋터가 보입니다.
infinite-scroll-footer

하지만 내가 원하는 풋터 내용이 아닐 수 있죠. 이런 경우에는 풋터 영역을 커스터마이징 해야합니다. 풋터 오른쪽 영역의 크래딧 부분만 수정을 원한다면 아래의 코드를 functions.php 파일에 추가하면 됩니다.

풋터 왼쪽 영역은 젯팩 원본 파일에서 필터가 적용되지 않기 때문에 callback 함수를 이용해야합니다. 이를 위해서는 위에서 설명한 기본 설정에서 footer_callback 옵션을 추가 설정해야합니다. 이렇게 callback 함수를 설정하면 위에서 add_filter를 사용해 크래딧을 변경하는 작업을 따로 할 필요 없이 아래 hwangc_infinite_footer_cb 함수에서 변경할 수 있습니다.

위의 코드에서 변경하기 원하는 코드 영역 주석 부분을 원하는 것으로 수정해보세요.

마치며

이전에는 젯팩을 거의 사용하지 않았는데 테마를 만들고 최소한의 플러그인을 사용하려다 보니 젯팩의 매력적인 기능들이 눈에 들어오네요. 젯팩은 워드프레스 창시자가 설립한 회사인 automattic에서 제공하는 플러그인으로 신뢰도가 높습니다. 무한 스크롤과 커스터마이징 풋터가 필요하신 분들은 위의 포스트를 참고하여 적용해보시기 바랍니다. 그럼 오늘도 즐거운 블로깅 하세요.

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“젯팩의 페이지 넘김 없는 무한 스크롤 커스터마이징”에 대한 5개의 생각

  1. 황C 님 안녕하세요!^^ 저도 젯팩을 설치하고 싶은데 에러 메시지가 뜨면서 연결이 안 됩니다. 도움이 필요합니다. 가능하시다면 조언 좀 부탁드릴게요.

    에러메시지는 아래와 같습니다.
    cURL error 6: Couldn’t resolve host ‘jetpack.wordpress.com’

    블로그 주소입니다.
    http://www.weekdays.kr/

      1. 호스팅 업체(닷홈)에서도 모른다고 하네요. ㅠㅠ 알려주신 링크를 타고 가봤으나 이 문제는 제가 손댈 수 있는 영역은 아닌 것 같습니다. ㅠㅠ 알려주셔서 감사드립니다.

  2. 무한 스크롤링 정말 편하긴 해요. 그런데 몇몇 똥컴(제 컴퓨터 포함 ㅜㅜ) 같은경우에는 Tumblr 대시보드에서 무한 스크롤링 하다가 브라우저가 멈추는 현상이 발생되기도 하더라구요. 특히 동영상이 많은 내용을 연속해서 불러오면 ㅎㄷㄷ 정말 꼭 필요한 페이지에서만 사용 가능하도록 해야 겠어요.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.