워드프레스에서 페이지나 글이 길면 페이지 나눔을 통해 여러 페이지로 분할할 수 있습니다. 긴 글을 적절히 분할하면 사용자들이 내용을 더 쉽게 읽고, 사이트 체류 시간이 늘어날 수 있으며, 한 번에 불러오는 콘텐츠 양이 줄어들어 각 페이지의 로딩 속도가 빨라질 수 있습니다.
블록 에디터나 클래식 에디터를 사용하는 경우 페이지 나눔 블록 또는 태그를 사용하여 페이지를 분할할 수 있습니다. 그러면 엘리멘터나 WPBakery 페이지 빌더 등으로 만든 페이지도 여러 페이지로 나눌 수 있을까요?
워드프레스에서 긴 글을 여러 페이지로 나누기
워드프레스 기본 편집기인 블록 에디터를 사용하는 경우 페이지 나눔(Page Break) 블록으로 긴 글을 여러 개의 하위 페이지(예: /페이지-제목/, /페이지-제목/2/, /페이지-제목/3/ 등)로 자동 분할할 수 있습니다. 클래식 에디터(고전 편집기)에서도 페이지 나눔 기능이 제공됩니다.
각 하위 페이지는 고유한 URL을 가지며, 사용자는 페이지 하단의 페이지 번호(페이지네이션)를 클릭하여 이동할 수 있습니다.
블록 에디터에서 페이지 나눔 블록을 삽입하려면 "/페이지"를 검색하여 페이지 나눔 블록을 선택할 수 있습니다(키보드 단축키 참조).
클래식 에디터를 사용하는 경우에는 비주얼 모드에서 Alt + Shift + P를 누르거나 텍스트 모드에서 <--nextpage--> 태그를 추가하여 페이지를 분할할 수 있습니다.
SEO를 위해 각 하위 페이지에 충분한 본문과 고유한 소제목을 포함해, 얇은 콘텐츠로 인식되지 않도록 하는 것이 좋습니다.
블록 에디터나 클래식 에디터에서 페이지를 분할하는 방법에 대한 자세한 내용을 다음 글에서 확인할 수 있습니다.
엘리멘터로 만든 페이지를 여러 개의 하위 페이지로 나누는 방법
블록 에디터나 클래식 에디터에서는 페이지 나눔 블록이나 nextpage 태그를 사용하여 긴 콘텐츠를 여러 개의 하위 페이지로 분할할 수 있습니다.
그러면 엘리멘터(Elementor)나 WPBakery Page Builder와 같은 페이지 빌더로 만든 페이지도 분할할 수 있을까요?
결론은 해당 페이지 빌더에서 페이지 나눔 기능을 제공하지 않는 경우 워드프레스에서 제공하는 nextpage 태그를 사용하여 여러 개의 작은 페이지로 나눌 수 없습니다.
실제로 엘리멘터에서 HTML 위젯과 텍스트 위젯을 추가하고 <--nextpage--> 태그를 입력해 보았지만 작동하지 않았습니다.
nextpage 태그를 입력하면 "Unexpected End of file. Expected DOCTYPE" 에러가 표시됩니다. 기본적으로 nexpage 태그는 the_content() 함수를 사용할 때에만 작동하지만, Elementor는 the_content() 필터를 사용하지 않고 자체 렌더링 방식을 사용하기 때문에 Elementor 내에서는 이 태그가 무의미한 "주석 태그"로 간주될 뿐만 아니라, HTML 문맥상 잘못 해석될 수 있어 이런 에러가 발생하는 것으로 보입니다.
또한, 다음과 같은 숏코드를 만들어서 테스트해 보았지만 마찬가지로 작동하지 않았습니다.
function custom_pagebreak_shortcode() {
return '<!--nextpage-->';
}
add_shortcode('pagebreak', 'custom_pagebreak_shortcode');엘리멘터 페이지를 나누는 대안
엘리멘터나 WPBakery 등 빌더에서는 페이지 분할 기능이 제공되지 않고 nextpage 태그를 렌더링하지 않지만, 다음 두 가지 방법을 대안으로 고려할 수 있습니다.
수동으로 여러 개의 하위 페이지로 나누기
하나의 긴 페이지를 여러 개의 엘리멘터(Elementor) 페이지로 나누어 각각의 페이지로 만드는 것을 고려할 수 있습니다.
- 예: example.com/page-1, example.com/page-2, example.com/page-3
각 페이지 하단에 "이전 페이지" 및 "다음 페이지" 버튼을 추가하거나 이전/다음 페이지 텍스트 링크를 추가할 수 있습니다.
저는 워드프레스 시작하기 글이 너무 길어서 3개의 하위 페이지로 분할했습니다.
맨 아래의 페이지네이션은 워드프레스 페이지 나눔 블록의 자체 기능이고, "→ 기본적인 워드프레스 사용법" 링크는 텍스트로 추가한 것입니다.
위와 비슷한 형식으로 엘리멘터로 만든 각 페이지 하단에 페이지 번호를 추가하거나 "이전 페이지/다음 페이지" 링크를 추가하는 것을 고려할 수 있습니다.
엘리멘터는 코딩 지식이 없어도 수월하게 괜찮은 디자인으로 페이지 번호를 추가하거나 이전/다음 링크를 넣을 수 있습니다.
이 방법을 이용하면 여러 개의 페이지를 만들고 하단에 페이지 이동 링크를 추가하는 것이 번거롭게 여겨질 수 있지만, 각 페이지에 대해 SEO 최적화가 가능하다는 장점이 있습니다.
탭(Tabs) 위젯 사용하기
엘리멘터의 탭(Tabs) 위젯을 사용하여 탭으로 각각의 콘텐츠를 분리하는 것을 고려할 수 있습니다.
탭 기능을 사용하면 입력 가능한 콘텐츠 유형이 제한되어 있습니다. 복잡한 콘텐츠를 각 탭에 넣으려는 경우, 다음 글을 참고하여 각 탭의 내용을 템플릿으로 만들어서 숏코드로 탭에 입력할 수 있습니다.
이 방법은 실제 페이지 분할이 아니라, 한 페이지 내에서 콘텐츠를 구분하며, SEO 측면에서는 분리된 페이지로 인식되지 않습니다.
그리고 콘텐츠를 탭으로 나누는 방식은 시각적으로는 "분할"처럼 보이지만, 실제로는 모든 콘텐츠가 한 페이지에 로딩되기 때문에 페이지 로딩 속도 개선에는 효과가 거의 없습니다.
👉 상기의 "수동으로 여러 개의 하위 페이지로 나누기"에서 설명했듯이 수동으로 여러 개의 페이지를 작성한 다음, 상단에 버튼이나 HTML을 사용하여 탭 효과를 낼 수도 있습니다.
마치며
엘리멘터에서는 페이지 나눔 기능이 제공되지 않으므로 긴 페이지를 여러 개로 나누고 싶은 경우 수동으로 각각의 페이지를 만들어서 상단에 버튼이나 HTML로 탭(Tab) 모양을 구현하면 페이지 속도가 개선되고 개별 페이지에 대하여 효과적으로 SEO 설정이 가능하므로 SEO에도 긍정적으로 작용할 것입니다.
댓글 남기기