간단한 워드프레스 코멘트 폼 수정

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

예제는 언더스코어 베이스 테마를 생성하여 스타일과 템플릿 파일을 추가하고 편집하여 지금까지 구성해왔는데, 아직 다듬지 않은 한 가지는 코멘트 템플릿입니다. 워드프레스는 다른 구성 요소와 마찬가지로 코멘트의 폼, 목록, 페이지 내비게이션의 출력과 코멘트 기능까지도 사용자가 변경할 수 있도록 다양한 API를 제공합니다.

그러나, 예제에서는 간단하게 사이트에 출력하는 코멘트 폼 스타일과 일부 텍스트 출력 변경 정도만 진행합니다. 코멘트 폼도 내용을 입력하는 필드의 스타일만 변경합니다. 우선, 연습장 파일에 기존 코드를 지우고 다음 코드를 추가 및 저장하여 사이트 연습장 페이지를 새로 고칩니다.

/* 설정 > 토론 - '가입하여 로그인한 사용자만 댓글을 남길 수 있습니다' */
update_option( 'comment_registration', '' ); // 로그인 전 댓글 허용
//update_option( 'comment_registration', 0 ); // 위와 같음
// update_option( 'comment_registration', 1 ); // 로그인 사용자만 댓글 허용

위의 코드 2, 3번 줄은 관리자 관리페이지 토론 설정에서 ‘로그인 사용자만 댓글을 남길 수 있다’는 항목의 선택을 해제하는 것으로, 옵션 필드의 값을 직접 업데이트하여 변경하는 것입니다.

코멘트 폼과 텍스트

다음 그림은 로그인 전 코멘트 폼과 출력 텍스트로 이름, 이메일, 웹사이트 필드는 예제에서 편집하지 않고 내용 입력 필드와 텍스트만 변경합니다.

로그인 전 코멘트 폼

다음 그림은 로그인 후 코멘트 폼입니다. 텍스트를 모두 제거할 것입니다.

로그인 후 코멘트 폼

워드프레스 코멘트 구성 요소와 변경 기본 흐름

워드프레스 코멘트 출력 및 다양한 기능을 편집하려면 코멘트를 등록하고 출력하는 상위 템플릿 파일을 먼저 파악하여 코멘트 템플릿 파일을 찾는 과정이 필요합니다. 보통 싱글 포스트 템플릿 파일부터 시작하면 됩니다.

코멘트 템플릿 파일을 확인한 후 폼, 목록, 내비게이션 등 각 요소에 해당하는 함수의 제공 설정을 파악합니다. 다시, 각 함수의 제공 인수에서 직접 설정을 변경하거나 콜백 함수를 추가로 정의하여 별개로 정의하여 호출하면 됩니다.

편집기로 테마 루트에 있는 다음 파일을 엽니다.

  • single.php
  • comments.php

코멘트 폼과 목록 출력 위치에 코멘트 템플릿 추가

편집기에 연 single.php 파일 27번 줄에서 29번 줄은 다음과 같습니다.

if ( comments_open() || get_comments_number() ) :
    comments_template();
endif;

1번 줄 comments_open 함수로 싱글 포스트에서 코멘트 등록이 가능할 때 2번 줄 함수로 코멘트 템플릿을 불러옵니다. 1번 줄의 get_comments_number 함수 조건은 코멘트 등록이 처음에는 가능했지만, 일정 기간이 지나면 코멘트 등록이 불가능하도록 설정한 때도 있는데, 그때 등록한 코멘트가 있다면 코멘트 템플릿을 가져와 코멘트 목록을 출력하기 위한 것입니다. 보통 코멘트 템플릿은 등록 폼과 목록이 함께 정의되어 있습니다.

코멘트 템플릿 요청 함수, comments_template

위의 코드 2번 줄 comments_template 함수는 코멘트 템플릿을 지정하는 함수로 함수에 특정 파일을 정의하지 않으면 기본으로 ‘comments.php’ 파일을 가져옵니다. 예제의 테마는 이 파일을 사용하고 있습니다.

기본 코멘트 템플릿, comments.php

편집기에 열린 comments.php 파일은 워드프레스 기본 코멘트 템플릿 파일로 다음은 주요 함수와 함께 글자로 풀어서 일부를 나열한 것입니다.

<div id="comments" class="comments-area">
    <?php
    if ( have_comments() ) : ?>
    
        // 제목 (코멘트 개수 및 포스트 제목 포함)

        // 코멘트 페이지 내비게이션, the_comments_navigation()

        // 코멘트 목록, wp_list_comments()

        // 코멘트 페이지 내비게이션, the_comments_navigation()

        // 코멘트 등록이 중지된 때 출력할 메시지

    endif;

    // 코멘트 내용 입력, 이름, 이메일, 웹사이트 등의 입력 필드와 안내 메시지 출력 내용 등의 코멘트 폼 전체의 실제 출력 함수. comment_form()
    ?>
</div><!-- #comments -->

위의 코드처럼 코멘트 템플릿 파일에는 코멘트 목록, 코멘트 등록 폼, 내비게이션 등이 함께 정의되어 있습니다. 예제에서는 일부를 제거하고, 등록 폼 위치를 변경하는 정도로 편집할 것입니다.

코멘트 목록, wp_list_comments

코멘트 템플릿 파일의 코멘트 목록 출력 wp_list_comments 함수에서 원하는 목록으로 출력 방향을 정의할 수 있습니다. 예제에서는 아바타 이미지의 사이즈를 추가합니다. 해당 함수에 관한 상세 내용은 코덱스를 참고하세요.

코멘트 폼 출력, comment_form

코멘트 폼 출력에 관한 실제 구성 요소로 코멘트 폼 필드, 로그인 전후의 텍스트, 버튼 텍스트 등을 모두 설정할 수 있습니다. 코멘트에 사용할 커스텀 필드를 포함하여 확장할 수 있는 다양한 요소를 정의할 수 있습니다.

코멘트 내비게이션

예제의 코멘트 템플릿 파일에는 다음 1번 함수를 사용하고 있지만, 2번과 3번 줄 함수를 함께 사용하여 내비게이션 출력을 정의할 수도 있습니다.

the_comments_navigation
previous_comments_link
next_comments_link

워드프레스 코멘트를 사용자의 의도로 구성할 때 앞의 흐름을 기본으로 염두에 두면 좋지만, 고정의 방식은 아닙니다. 일반적인 폼을 만들고 폼 데이터를 저장할 때 해당 포스트의 코멘트로 등록할 수도 있습니다.

코멘트 템플릿 변경

완성 파일을 올려 달라진 코멘트 폼을 확인하는 것으로 정리합니다. 연습장 파일을 제외하고 편집기에 열린 모든 파일을 닫은 후 다음 링크의 압축 파일을 풀어 테마 루트에 덮어씁니다. 그리고 다시 편집기로 엽니다.

comment_form

편집기로 다시 연 comments.php 파일 26번 줄에서 39번 줄은 다음과 같습니다.

$comment_field = '<p class="comment-form-comment"><textarea id="comment" name="comment" rows="3" maxlength="200" aria-required="true" required="required" placeholder="간결하게 입력하세요. (최대 200자)"></textarea></p>';
$comments_args = array(
    //'fields' => $fields, // 이메일, 이름, 웹사이트의 기본 필드
    'comment_field' => $comment_field, // 코멘트 내용 필드
    'logged_in_as' => '',
    'comment_notes_before' => '',
    'comment_notes_after' => '',
    'title_reply' => '',
    'title_reply_to' => '',
    'title_reply_before' => '',
    'title_reply_after' => '',
    'label_submit' => '댓글 남기기',
);
comment_form( $comments_args );

코멘트 내용 입력 필드와 코멘트 폼 전체의 출력 텍스트를 설정한 것입니다. 5번 줄에서 12번 줄의 출력 텍스트를 직접 입력하여 사이트에서 출력 결과를 확인하면 쉽게 알 수 있습니다.

비활성화한 3번 줄로 이름, 이메일 등의 기본 필드를 정의할 수 있으며 이때는 추가 변수를 정의해야 합니다. 코멘트 폼에 관련한 다음 코덱스 링크를 방문하면 세부 정보를 얻을 수 있으므로 예제에서 더는 안내하지 않습니다.

Function Reference/comment_form

wp_list_comments

파일 48번 줄에서 53번 줄은 코멘트 목록을 출력하는 것으로 다음과 같습니다.

wp_list_comments( array(
    'type' => 'comment',
    'style' => 'ol',
    'avatar_size' => 48,
    'short_ping' => false,
) );

4번 줄에서 코멘트 목록에 출력하는 아바타 사이즈를 추가 지정한 것으로 더 많은 설정 정보는 다음의 코덱스 링크를 참고하면 됩니다.

Function Reference/wp_list_comments

코멘트 메타 데이터

포스트 메타 데이터와 마찬가지로 코멘트도 메타 데이터를 사용할 수 있으며, 코멘트 폼에 메타 데이터 등록을 위한 필드 출력과 저장도 간단합니다. 다음의 코덱스 링크를 방문하세요.

Function Reference/add_comment_meta

사이트에서 로그인 전∙후 코멘트 폼의 변경을 확인하고, 임의의 코멘트 몇 개를 등록하여 목록 출력을 확인하세요. 그리고, 연습장 파일에 다음 코드 3번 줄을 활성화하고 나머지 코드는 비활성화하여 로그인 회원만 코멘트 등록 가능하도록 변경합니다.

//update_option( 'comment_registration', '' ); // 로그인 전 댓글 허용
//update_option( 'comment_registration', 0 ); // 위와 같음
update_option( 'comment_registration', 1 ); // 로그인 사용자만 댓글 허용

앞에서 살펴본 워드프레스 코멘트 폼 및 목록에 관한 내용은 큰 흐름의 내용이므로 더 많은 정보는 코덱스를 통해 직접 경험하여 학습하기 바랍니다.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

» 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어