워드프레스에서 Ajax Load More로 포스트 자동 무한로딩 구현하기

많은 워드프레스 블로거들이 “다음 페이지로 넘어가기” 버튼 대신, 사용자가 아래로 스크롤할 때 자동으로 게시글이 로딩되는 무한 스크롤 기능을 선호합니다. 특히 Elementor를 이용해 블로그나 콘텐츠 페이지를 제작하고 있다면, 이런 기능을 손쉽게 구현할 수 있는 방법이 있습니다. 이 글에서는 Ajax Load More 플러그인을 활용해 Elementor 기반 사이트에 무한 스크롤 기능을 추가하는 과정을 자세히 설명합니다. 추가로, HTML 위젯이나 Shortcode 위젯을 이용한 삽입 방식, Elementor Pro 사용자라면 활용할 수 있는 Loop Grid 설정 팁까지 함께 다루니, 처음 시도하는 분들도 쉽게 따라할 수 있습니다.

위 그림은 ‘Html 위젯’의 “Above Content  “에 제시된 코드를 넣었더니 그림처럼 무한스크롤이 진행되었음(Ajax Load More 플러그인)

HTML 위젯에 올리는 경우 :

[ajax_load_more post_type=”post” posts_per_page=”6″]

Shortcut에 올리는 경우 : 

[ajax_load_more post_type=”post” posts_per_page=”6″]

두 방식 모두 같은 결과를 보여주며, HTML 위젯은 더 복잡한 JavaScript/CSS 삽입도 가능한 차이가 있습니다.

© 2023 나의 웹 페이지

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다