워드프레스 댓글 폼 수정하는 방법

워드프레스 댓글 폼 마음에 드시나요?

저는 워드프레스를 하나씩 셋팅하면서 항상 댓글 영역을 볼 때마다 바꾸고 싶다는 생각이 들었습니다. 영어에다가 입력 칸이 많아서 사이트에 어울리지 않는 느낌이었습니다.

그래서 이번에 댓글 칸을 아래 결과물 처럼 수정해보았습니다.

훨씬 더 간결해 보이지 않나요? 이렇게 수정하는 방법이 궁금하시다면 이 글을 한번 읽어보시기 바랍니다. 복사 붙여넣기만 하면 할 수 있으니 천천히 따라해보세요.

시작하기 전에..

워드프레스 댓글 폼을 수정하는 방법을 찾아보면 플러그인을 설치를 통해서 간단히 수정하거나 테마 파일을 편집해서 수정하는 방법이 있습니다.

여기서는 테마 파일을 편집하는 방법으로 알려드릴 예정입니다. 원본 테마가 아닌 차일드 테마를 활용하여 댓글 폼을 수정할 것입니다.

따라서 차일드 테마 설치가 선행되어야 합니다. 차일드 테마가 무엇이고, 설치하는 방법이 궁금한 분들은 아래 글을 먼저 읽어보시기 바랍니다.

✅ 제너레이트프레스 차일드 테마 초간단 설치 방법

초보자 입장에서는 플러그인 설치가 더 간단한 방법일 것입니다.

그러나 플러그인을 많이 설치해서 사이트 속도가 느려지는 것을 원하지 않는 분들은 테마 파일 편집을 통해 수정하는 방법이 나을 수 있습니다.

제 환경은 아래와 같으니 참고하시기 바랍니다.

그럼 지금부터 댓글 폼을 수정하는 방법을 하나씩 알아보겠습니다.

워드프레스 댓글 폼 수정하는 방법

워드프레스 댓글 폼을 수정하는 방법은 매우 간단합니다. 차일드 테마에 있는 functions.php 파일에 앞으로 설명드리는 코드를 추가하기만 하면 됩니다.

PHP 코드를 모른다구요? 네 저도 잘 모릅니다. 그러나 복사 붙여넣기만 잘해도 같은 결과물을 만들어 낼 수 있으니 걱정하지 않아도 됩니다.

워드프레스 댓글 폼 수정 전후 비교

작업 전에 댓글 폼 수정 전후를 비교해서 보겠습니다.

수정 전에는 영어로 되어있고, 입력해야 할 칸도 많아서 댓글을 입력하고 싶은 마음이 잘 들지 않는것 같습니다.

수정 후에는 한글로 수정되고, 입력해야 할 칸 수도 줄어서 보기 한결 편해졌습니다. 이렇게 댓글 영역을 간소화하거나 한글로 바꾸고 싶다면 계속해서 읽어보시기 바랍니다.

PHP 코드 추가하기

1) 외모 > 테마 파일 편집기 > functions.php 파일을 클릭합니다.

여기에 변경하고 싶은 코드를 복사 붙여넣고 하단의 파일 업데이트만 누르면 댓글 폼이 바뀌는 것을 바로 확인할 수 있습니다.

2) 아래 코드를 복사 붙여넣기 하고 파일 업데이트 버튼을 누릅니다.

댓글 타이틀 문구

add_filter( 'generate_leave_comment', function () {
    return '댓글 남기기';
} );

맨 윗 부분의 ‘Leave a Comment’를 ‘댓글 남기기’로 수정하는 코드입니다. ‘작은쉼표’ 안에 단어는 원하는 단어로 수정할 수 있습니다.

댓글 입력 버튼 문구

add_filter( 'generate_post_comment',function () {
    return '댓글 등록';
} );

아래 버튼의 ‘Post Comment’를 ‘댓글 등록’으로 수정하는 코드입니다.

등록된 댓글 문구

add_filter( 'generate_comment_form_title', function() {
    return '다른 사람의 댓글';
} );

누군가 댓글을 달았을 때 ‘Comments of 글제목’ 이라고 나옵니다. 이때 글 제목이 길면 지저분해 보이는게 싫으신 분들은 ‘다른 사람의 댓글’ 이라고 수정할 수 있는 코드입니다.

이메일 / URL 칸

add_action( 'after_setup_theme', 'tu_add_comment_url_filter' );
	function tu_add_comment_url_filter() {
add_filter( 'comment_form_default_fields', 'tu_disable_comment_url', 20 );
}

function tu_disable_comment_url($fields) {
    unset($fields['url']);
    unset($fields['email']);
    return $fields;
}

기본적으로 워드프레스는 댓글 폼에 이름, 이메일, 웹사이트를 입력하는 칸이 있습니다. 그 중에서 이름을 제외하고 이메일, 웹사이트 URL 칸을 제거하는 코드입니다.

만약 이메일은 입력하도록 하고 싶다면 unset($fields['email']); 만 지우도록 합니다.

해당 칸을 제거하는 이유는 입력 칸이 많으면 방문자의 댓글 참여도가 떨어지기도 하고, URL 칸은 스팸이나 개인 사이트 홍보에 악용될 수 있기 때문입니다.

만약 이메일 입력을 받지 않으시려면 워드프레스 메뉴에서 설정 > 토론 > 기타 댓글 설정에서 ‘댓글 글쓴이는 이름과 이메일을 입력해야합니다’ 부분을 체크 해제합니다.

댓글 폼 안내문구

function placeholder_comment_form_field($fields) {
    $replace_comment = __('첫 댓글은 승인 이후에 게시되니 잠시만 기다려주세요. 본문과 무관하거나 욕설, 비방, 스팸, 광고는 삭제됩니다.', 'generatepress');
     
    $fields['comment_field'] = '<p class="comment-form-comment"><label for="comment">' . _x( '', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="40" rows="3" placeholder="'.$replace_comment.'" aria-required="true"></textarea></p>';
    
    return $fields;
 }
add_filter( 'comment_form_defaults', 'placeholder_comment_form_field', 20 );

댓글 폼 안에 ‘첫 댓글은 승인 이후에 게시되니 잠시만 기다려주세요. 본문과 무관하거나 욕설, 비방, 스팸, 광고는 삭제됩니다.’ 라는 안내 문구를 넣는 코드입니다.

본인 사이트에 어울리는 댓글 안내문구를 넣어보세요.

이름 칸 안내문구

add_filter( 'comment_form_default_fields', function($fields){

	$commenter = wp_get_current_commenter();
	$required = get_option( 'require_name_email' );

	$fields['author'] = sprintf(
		'<label for="author" class="screen-reader-text">%1$s</label><input placeholder="%1$s%3$s" id="author" name="author" type="text" value="%2$s" size="30" />',
		esc_html__( '닉네임', 'generatepress' ),
		esc_attr( $commenter['comment_author'] ),
		$required ? ' *' : ''
	);

	return $fields;

}, 20, 1 );

이름 칸 안에 ‘Name’을 ‘닉네임’으로 수정하는 코드입니다.

쿠키 동의 체크

add_filter( 'comment_form_default_fields', 'tu_comment_form_hide_cookies_consent' );
	function tu_comment_form_hide_cookies_consent( $fields ) {
	unset( $fields['cookies'] );
	return $fields;
}

‘다음 번 댓글 작성을 위해 이 브라우저에 이름, 이메일, 그리고 웹사이트를 저장합니다’ 라는 문구와 함께 체크박스를 제거하는 코드입니다.

CSS 코드 추가하기

테마 파일 편집기에서 style.css 파일을 클릭하고 아래 CSS 코드를 복사 붙여넣기합니다.

이름 칸 넓이

 .comment-form #author{
        width: 100%;
 }

CSS 코드를 추가하지 않으면 이름 칸 넓이가 댓글 폼보다 짧게 보여질 것 입니다. 이름 칸 넓이를 댓글 창과 간격을 동일하게 하고 싶다면 위의 CSS 코드를 적용하시기 바랍니다.

이름 칸, 이메일 칸 넓이 동일하게

@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }
}
.comment-form-cookies-consent{
	width: 100%
}

만약 이름과 이메일을 사용하면서 간격을 동일하게 맞추고 싶다면 위의 CSS 코드를 추가합니다. 또한 쿠키 동의 문구가 세로로 나오는 경우가 있습니다.

이때 .comment-form-cookies-consent{ width: 100% } 를 추가하면 가로로 정렬되어 보일 것입니다.

글 마치며…

오늘은 워드프레스 댓글 폼을 수정하는 방법에 대해서 알아봤습니다. 코드가 많아서 어렵게 느껴질 수 있지만 하나씩 따라하면 누구나 쉽게 수정할 수 있으니 기본 댓글 영역이 마음에 안드시는 분들은 도전해보시기 바랍니다.

6 thoughts on “워드프레스 댓글 폼 수정하는 방법”

  1. 댓글 폼 안내문구 코드를 올려주신 그대로 복사 붙여넣기해서 업데이트하면 저장이 되는데 문구 부분을 수정하고 업데이트 하면 왜 저장이 안될까요..?

    응답
    • 작은 따옴표 사이에 문구만 수정하셔야 되요. 작은 따옴표를 삭제하면 저장이 안됐던걸로 기억합니다. 전체 코드를 붙여넣고 문구 안에 내용만 수정해보세요^^

      응답
  2. 안녕하세요~ 좋은 정보들 너무 감사드립니다.

    저는 계속 하기와 같이 오류가 나는데요..
    혹시 해경 방안을 아실까요??ㅠ

    wp-content/themes/generatepress_child/functions.php 파일의 11 라인 오류로 인해 PHP 코드 변경 사항이 적용되지 않았습니다. 수정하고 다시 저장해 보세요.

    syntax error, unexpected token “return”

    응답
    • 저도 초보나 마찬가지라서 제가 겪지 않은 부분이라 해결 방법을 말씀드리기가 어렵네요. 동일하게 복사붙여넣고 저장하셨는지요? 그리고 차일드테마 처음 생성했을 때 기본적으로 맨위에 주석으로 적혀있는 문구는 그대로 두셔야 됩니다. 그거 삭제했을 때 어떤 오류가 있었던걸로 기억해요

      응답
      • 저도 라비님 글 따라하다가 실수로 주석 삭제했는데 오류가 생겼네요. 재접속하니 어찌어찌 정상으로 되긴 했는데, 찜찜해서 테마 재설치 했어요. 다른 분들 주의하셔요

        응답
        • 차일드테마 만들때 있는 기본적인 주석을 삭제했을 때 오류가 저만 뜬게 아니였군요. 이 글을 보는 다른 분들은 주석은 건들지 않고 적용하시길 바랍니다. 경험 공유해주셔서 감사합니다.

          응답

답글 남기기