워드프레스 REST API , Underscore . js 자바 스크립트 템플 릿 , 코멘트 Ajax Load More – 스니 핏 제이 
 워드프레스 REST API , Underscore . js 자바 스크립트 템플 릿 , 코멘트 Ajax Load More 
 워드프레스 REST API , 자바 스크립트 템플 릿 으로 구성 한 지난 과정 의 이미지 포스트 ‘ 더 보 기 ’ 에 이어 이번 에 는 코멘트 ‘ 더 보 기 ’ 를 구성 합니다 . 포스트 ‘ 더 보 기 ’ 와 구성 방식 은 같 습니다 . 현재 예제 에 는 구성 과정 에서 확인 할 수 있 는 코멘트 데이터 가 없 으므로 일정 코멘트 를 코드 로 한꺼번에 등록 합니다 . 
 코멘트 등록 함수 로 코멘트 등록 
 먼저 , 관리 페이지 코멘트 ( 토론 ) 설정 페이지 에 접근 하 여 다음 그림 처럼 설정 하 고 저장 합니다 . 
 ‘ 항상 나 에게 이메일 보내 기 ’ 항목 을 선택 해제 한 것 은 이어지 는 코멘트 등록 시 워드프레스 의 메일 함수 를 실행 하 지 않 기 위한 것 입니다 . 예 제 는 실 운용 사이트 가 아니 므로 코멘트 등록 후 에 설정 을 변경 하 지 않 고 그대로 두 면 됩니다 . 
 편집기 에 연습장 파일 이 없 다면 열 어 다음 코드 를 추가 하 고 저장 합니다 . 기존 코드 는 모두 지우 세요 . 
 제목 ‘ 달나라 여행 ’ 이미지 포스트 아이디 를 구하 여 해당 포스트 에 27 개 의 임의 코멘트 를 등록 하 는 코드 입니다 . 코드 의 wp _ new _ comment 함수 는 wp _ insert _ comment 함수 호출 전 에 코멘트 데이터 유효 성 을 검사 하 므로 기억 해 두 면 좋 습니다 . 
 사이트 에서 연습장 페이지 에 접근 하 거나 접근 한 상태 라면 페이지 를 한 번 새로 고쳐 ‘ 끝 ’ 글자 가 나올 때 까지 기다립니다 . 코멘트 등록 에 1 초 미만 의 시간 이 소요 됩니다 . 다시 , 편집기 의 연습장 파일 에 추가 한 위 의 코드 를 지우 고 저장 합니다 . 
 제목 ‘ 달나라 여행 ’ 이미지 포스트 페이지 에 접근 하 여 코멘트 목록 을 확인 하 면 , 다음 그림 처럼 7 개 의 코멘트 와 코멘트 내비게이션 을 볼 수 있 습니다 . 코멘트 내용 에 번호 를 추가 한 것 은 이번 장 에서 구성 할 ‘ 더 보 기 ’ 결과 를 쉽 게 확인 하 기 위함입니다 . 이번 장 이 끝날 때 까지 ‘ 싱글 포스트 페이지 ’ 는 제목 ‘ 달나라 여행 ’ 싱글 이미지 포스트 페이지 를 말 합니다 . 
 조금 전 , 한 페이지 에 10 개 씩 가장 최근 에 등록 한 코멘트 를 먼저 출력 하 도록 설정 했 습니다 . 그러나 , 그림 처럼 최근 코멘트 가 먼저 출력 되 지만 , 7 개 만 나옵니다 . ‘ 이전 댓글 ’ 내비게이션 버튼 을 클릭 하 면 10 개 가 나옵니다 . 원 하 는 것 은 첫 페이지 부터 10 개 씩 출력 하 는 것 인데 지금 의 워드프레스 기준 에서 는 불 가능 합니다 . 
 이런 현상 은 워드프레스 기본 사항 으로 오류 가 아닙니다 . 다른 코멘트 출력 기준 의 조합 으로 코멘트 출력 결과 를 확인 하 면 어떤 때 는 첫 페이지 에 10 개 씩 나오 지만 , 한 페이지 내 출력 순서 가 달라지 기 도 합니다 . 지금 구성 하 는 코멘트 ‘ 더 보 기 ’ 는 출력 순서 및 개수 , 페이지 번호 기준 이 므로 이 부분 이 중요 하 지만 , 해결 방법 을 찾 는 것 보다 는 다른 방법 을 사용 하 는 것 이 현명 합니다 . 
 워드프레스 REST API 코멘트 엔드 포인트 
 다음 목록 의 코멘트 엔드 포인트 만 알 고 있 으면 예제 구성 에 충분 합니다 . 숫자 ‘ 357 ’ 은 제목 ‘ 달나라 여행 ’ 포스트 의 숫자 아이디 이 며 , 필자 와 다를 수 있 습니다 . 
 localhost / wp - json / wp / v 2 / comments 
 예제 는 post , attachment , pic _ album 포스트 타입 의 싱글 포스트 에 코멘트 ‘ 더 보 기 ’ 를 구성 하 며 , 싱글 포스트 이 므로 위 의 목록 두 번 째 엔드 포인트 를 사용 합니다 . 사용 하 는 싱글 코멘트 REST API 응답 데이터 목록 은 다음 과 같 습니다 . 따로 안내 하 지 않 으므로 브라우저 나 POSTMAN 애플리케이션 에서 위 의 두 번 째 엔드 포인트 응답 데이터 를 확인 해 보 세요 . 
 id / / 코멘트 ID 
 author / / 코멘트 등록 자 ID 
 author _ name / / 코멘트 등록 자 이름 
 author _ avatar _ urls [ 48 ] / / 크기 48 아바타 이미지 URL 
 link / / 코멘트 링크 URL 
 date / / 코멘트 등록 날짜 
 date _ gmt / / 코멘트 등록 날짜 GMT 
 content . rendered / / 코멘트 내용 
 코멘트 테마 템플 릿 수정 
 이번 장 에서 는 다음 의 파일 을 편집 합니다 . 모두 편집기 로 엽 니다 . 
 편집기 의 comments . php 파일 대략 46 번 에서 61 번 줄 은 다음 과 같 습니다 . 
 다음 코드 로 대체 하 고 저장 한 후 에 comments . php 파일 은 닫 습니다 . 
 <? php if ( get _ comment _ pages _ count ( ) > 1 ) : ? > 
 싱글 포스트 페이지 를 새로 고쳐 버튼 을 확인 합니다 . 
 코멘트 엔드 포인트 를 위한 로컬 자바 스크립트 변수 
 편집기 의 enqueue - script . php 파일 대략 150 번 에서 155 번 줄 의 코드 는 다음 과 같 습니다 . 
 다음 코드 로 변경 하 고 저장 후 enqueue - script . php 파일 은 닫 습니다 . 
 3 가지 포스트 타입 의 싱글 페이지 를 조건 으로 로컬 자바 스크립트 변수 와 데이터 를 생성 한 것 입니다 . 싱글 포스트 페이지 를 새로 고쳐 사이트 소스 에 로컬 자바 스크립트 데이터 를 확인 해 보 세요 . 
 Underscore . js 자바 스크립트 코멘트 템플 릿 추가 
 편집기 의 header - footer . php 파일 대략 29 번 줄 에 다음 자바 스크립트 코멘트 템플 릿 코드 를 추가 하 고 저장 합니다 . 
 / / 싱글 포스트 코멘트 템플 릿 , comment - archive 
 코멘트 템플 릿 코드 는 싱글 포스트 코멘트 하나 의 출력 Html 소스 를 기준 으로 작성 한 것 입니다 . 싱글 포스트 페이지 를 새로 고쳐 템플 릿 소스 추가 를 확인 해 보 세요 . 아직 코멘트 는 출력 되 지 않 습니다 . 
 코멘트 REST API 요청 
 편집기 의 pics . js 파일 대략 51 번 줄 부터 다음 코드 가 있 습니다 . 
 위 의 코드 아래 에 다음 코드 를 이어서 추가 합니다 . 
 // single - 코멘트 
 다시 , 38 번 줄 다음 첫 번 째 코드 다음 에 다음 두 번 째 코드 를 추가 하 고 저장 합니다 . 
 사이트 의 싱글 포스트 페이지 를 새로 고치 고 , ‘ 더 보 기 ’ 버튼 을 한 번 클릭 합니다 . 
 위 의 그림 은 현재 상태 에서 ‘ 더 보 기 ’ 버튼 을 한 번 클릭 했 을 때 의 결과 로 , 37 번 이 아닌 27 번 코멘트 부터 10 개 가 출력 됩니다 . 남 은 코멘트 개수 도 7 개 입니다 . 엔드 포인트 페이지 번호 를 ‘ 2 ’ 로 지정 한 결과 이 므로 올바른 결과 입니다 . 버튼 을 한 번 더 클릭 하 여 버튼 을 제거 하 세요 . 
 가장 최근 의 코멘트 10 개 는 싱글 포스트 페이지 와 함께 출력 하 기 위해 다음 1 번 줄 비활성 코드 를 찾 아 3 번 줄 부터 10 번 줄 의 코드 를 추가 하 고 저장 합니다 . 편집기 의 pics . js 파일 은 이제 닫 아도 됩니다 . 
 / / 싱글 이미지 포스트 의 코멘트 기본 출력 
 사이트 싱글 포스트 페이지 를 새로 고쳐 코멘트 출력 을 확인 하 고 , ‘ 더 보 기 ’ 버튼 이 사라질 때 까지 클릭 하 여 코멘트 가 순차 적 으로 나오 는지 확인 하 세요 . 
 지금 의 코멘트 출력 에서 관리 페이지 코멘트 ( 토론 ) 설정 에 영향 을 받 는 것 은 한 페이지 출력 개수 ‘ 10 ’ 옵션 데이터 이 며 , 워드프레스 REST API 응답 기준 의 코멘트 출력 으로 변경 하 였 기 에 최근 또는 과거 순 의 설정 변경 에 따른 변화 는 없 습니다 . 관리 페이지 에서 출력 개수 를 변경 하 여 싱글 포스트 페이지 의 코멘트 출력 결과 를 확인 해 보 세요 . 
 워드프레스 의 Underscore . js 자바 스크립트 템플 릿 데이터 
 워드프레스 는 wp . template 함수 로 Underscore . js 형식 의 자바 스크립트 템플 릿 을 호출 하 는데 , 템플 릿 문법 은 Mustache 템플 릿 엔진 의 문법 을 일부 차용 합니다 . 예 로 , 포스트 와 코멘트 ‘ 더 보 기 ’ 에서 자바 스크립트 템플 릿 의 REST API 응답 데이터 를 다음 처럼 표기 하 여 정의 한 때 가 있 습니다 . 
 편집기 의 header - footer . php 파일 대략 46 번 줄 코멘트 내용 출력 템플 릿 코드 를 다음 처럼 변경 하 여 싱글 포스트 페이지 에서 코멘트 내용 을 확인 해 보 세요 . 그 결과 로 전 ∙ 후 의 설명 을 대신 합니다 . 
 // header - footer . php 파일 대략 46 번 줄 
 다시 코드 를 원래 의 상태 로 변경 하 고 저장 합니다 . 
 존재 하 는 REST API 응답 필드 수정 
 사이트 싱글 포스트 의 코멘트 등록 일 시간 포맷 은 다음 그림 과 같 습니다 . 
 브라우저 에서 응답 을 확인 해도 마찬가지 입니다 . 
 사이트 에 출력 하 는 date 필드 포맷 을 변경 해 봅니다 . 편집기 의 rest - api . php 파일 대략 79 번 줄 에 다음 콜백 함수 를 추가 합니다 . 
 /* 콜백 , get _ comment _ date _ locale */ 
 34 번 줄 에 다음 코드 를 추가 하 고 저장 합니다 . 
 register _ rest _ field ( ' comment ', ' date ', array ( 
 싱글 포스트 페이지 를 새로 고쳐 코멘트 등록 일 포맷 을 확인 해 보 세요 . 지난 과정 의 meta 필드 에서 이미 알아본 때 가 있 습니다 . 
 편집기 에 열린 모든 파일 을 닫 고 , 다음 링크 의 이번 장 완성 파일 을 받 아 압축 을 푼 후 테마 루트 에 덮어쓰 세요 . 
 50 장 완성 파일 
 » 워드프레스 REST API , Underscore . js 자바 스크립트 템플 릿 , 코멘트 Ajax Load More 
 JinnPosted on 2018 / 03 / 08 2018 / 03 / 15 Categories 연재 , 워드프레스 , 장 Tags Ajax Load More , REST API 엔드 포인트 , Underscore . js 라이브러리 , 워드프레스 Infinite Scroll , 워드프레스 REST API , 워드프레스 REST API register _ rest _ field 함수 , 워드프레스 REST API 응답 의 메타 데이터 , 자바 스크립트 템플 릿 , 코멘트 더 보 기 
 Previous Previous post : 워드프레스 REST API , Underscore . js 자바 스크립트 템플 릿 , 포스트 Ajax Load More 
 Next Next post : 워드프레스 REST API 인증 과 제한 및 제어