참고: 인기 워드프레스 테마인 아바다X 테마, BE 테마가 39달러로 할인 중입니다.

다음 jQuery를 사용하여 “Load More”(더 보기) 버튼을 추가할 수 있습니다. 예를 들어, 전체 항목이 100개이고 초기에 10개(혹은 20개)가 표시되어 있고 “더 보기”를 클릭하면 10개씩 표시되도록 하고자 할 경우 등에 사용할 수 있습니다.

$(function(){
$("div").slice(0, 10).show(); // 최초 10개 선택
$("#load").click(function(e){ // Load More를 위한 클릭 이벤트e
e.preventDefault();
$("div:hidden").slice(0, 10).show(); // 숨김 설정된 다음 10개를 선택하여 표시
if($("div:hidden").length == 0){ // 숨겨진 DIV가 있는지 체크
alert("더 이상 항목이 없습니다"); // 더 이상 로드할 항목이 없는 경우 경고
}
});
});
// Source: http://stackoverflow.com/

이 코드를 워드프레스 플러그인인 KBoard 게시판에 적용해보았습니다. 여기에서 테스트해보실 수 있습니다. 기본적으로 5개 항목이 표시되어 있고 “더 보기”를 누르면 추가로 5개 항목이 로드됩니다.

참고:

워드프레스와 관련하여 문의사항이 있나요?

워드프레스 설치/제작/유지보수/문제해결이 필요한 경우 서비스(유료)를 요청하실 수 있습니다.

Service Request