GeneratePress 테마 댓글 섹션 레이아웃 변경하기

GeneratePress 테마의 댓글 섹션은 다른 테마와 비슷한 방법으로 커스텀이 가능합니다. 이 글에서는 이 블로그에 설치되어 있는 워드프레스 테마인 GeneratePress의 댓글 섹션을 변경하는 방법에 대해 간략히 설명하겠습니다.

GeneratePress 테마 댓글 섹션 레이아웃 변경하기

워드프레스 GeneratePress 테마 댓글 폼을 커스텀하는 몇 가지 방법에 대해 살펴보겠습니다.

댓글 입력 폼에서 이메일 필드와 웹사이트 필드 제거하기

댓글 입력 시 최소한의 정보를 입력하도록 하면 이론상 방문자들이 댓글을 달 가능성이 높아질 것입니다. 하지만 실제로는 큰 영향을 미치지 않는 것 같습니다. 댓글 폼을 간결하게 만들고 싶은 경우 댓글 양식에서 이메일 필드와 웹사이트 필드 제거를 고려해볼 수 있습니다.

GeneratePress 테마에서 이메일 필드를 없애기 위해서는 먼저 이메일 필드가 필수 필드로 설정된 것을 해제해야 합니다. 설정 > 토론에서 '댓글을 쓴 사람의 이름과 이메일을 꼭 남겨야 합니다' 옵션의 체크를 해제합니다.

그런 다음 FTP로 (웹호스팅) 서버에 접속하여 차일드 테마 내의 함수 파일(functions.php)에 다음 코드를 추가합니다.

// 이메일 필드와 웹사이트 필드 제거하기
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;
}

참고로 이 방법을 사용하면 방문자가 이름을 입력하지 않아도 댓글이 등록될 것입니다. 이를 방지하기 위해 다음 코드 스니펫을 테마 함수 파일에 추가하도록 합니다. (아래 코드는 GeneratePress 테마에서 테스트를 하지 않았지만 잘 작동할 것입니다.)

// 이름 필드를 필수로 만들기
// To make the Name field a required field
function require_comment_name($fields) {
 
if ($fields['comment_author'] == '')
wp_die('Error: please enter a valid name.');
 
return $fields;
}
add_filter('preprocess_comment', 'require_comment_name');

이름 입력란과 이메일 입력란을 한 라인에 표시되도록 하기

댓글의 이름 필드와 이메일 필드가 PC 화면에서 한 라인에 표시되도록 하고 싶은 경우 다음과 같은 코드 스니펫을 차일드 테마의 함수 파일에 추가하도록 합니다.

// GeneratePress 테마에서 이름 필드와 이메일 필드를 같은 라인에 표시되도록 하기
// To make the Name and email box appear on the same line
@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }

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

그러면 데스크톱에서 접속 시 이 블로그에서와 같이 댓글 섹션의 이름 (Name) 입력란과 이메일 (E-mail) 입력란이 같은 라인에 표시됩니다.

Name, E-mail, Website Placeholder 변경하기

댓글 입력란에 기본적으로 표시되는 Name, Email, Website 플레이스홀더 문구를 변경하고 싶은 경우 다음과 같은 코드 스니펫을 테마 함수 파일에 입력할 수 있습니다.

// 이름, 이메일, 웹사이트 Placeholder 변경하기
// Change the Name, Email and Website placehodlers in GeneratePress
add_filter( 'comment_form_default_fields', 'tu_filter_comment_fields', 20 );
function tu_filter_comment_fields( $fields ) {
    $commenter = wp_get_current_commenter();

    $fields['author'] = '<label for="author" class="screen-reader-text">' . esc_html__( 'Name', 'generatepress' ) . '</label><input placeholder="NEW NAME HERE *" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" />';

    $fields['email'] = '<label for="email" class="screen-reader-text">' . esc_html__( 'Email', 'generatepress' ) . '</label><input placeholder="NEW EMAIL HERE *" id="email" name="email" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" />';

    $fields['url'] = '<label for="url" class="screen-reader-text">' . esc_html__( 'Website', 'generatepress' ) . '</label><input placeholder="NEW WEBSITE HERE" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" />';


    return $fields;
}

웹사이트 부분은 잘 작동할지 모르겠습니다. 혹시 제대로 작동하지 않으면 url 부분 대신 다음 라인으로 대체하면 웹사이트 필드가 제거됩니다.

unset( $fields['url'] );

다른 방법으로 테마 파일을 직접 수정하는 것도 가능하지만, 테마가 업데이트되면 수정 사항이 사라지므로 바람직하지는 않습니다. /wp-content/themes/generatepress/inc/structure/comments.php 파일에서 직접 해당 문구를 변경할 수 있습니다.

'Post Comment' 문구 변경하기

댓글 내용을 입력한 후에 댓글을 제출할 때 사용되는 제출 버튼이 GeneratePress 테마에서는 "Post Comment"로 되어 있습니다. 이 문구를 변경하려면 다음과 같은 코드를 테마 함수 파일에 추가하도록 합니다.

// Change Default Post Comment Text
// 기본 "Post Comment" 텍스트 변경하기
add_filter( 'generate_post_comment', 'mj_generate_post_comment' );
function mj_generate_post_comment() {
    return 'Send Comment ⟶';
}

Send Comment... 부분을 적절히 변경하도록 합니다(예: '댓글 등록').

마치며

이상으로 GeneratePress 테마에서 댓글 섹션을 변경하는 몇 가지 예를 살펴보았습니다. 댓글 폼을 보다 정교하게 수정하고 싶은 경우 테마 폴더 내의 comments.php 파일을 수정할 수 있습니다. 이 파일을 수정하려면 먼저 차일드 테마를 만들어 작업하시기 바랍니다.

1. 차일드 테마를 만듭니다.
2. FTP를 통해 부모 테마 폴더 아래의 comments.php 파일을 PC로 다운로드한 다음, 다운로드한 파일을 (웹호스팅 서버의) 차일드 테마 폴더로 업로드합니다.
3. 차일드 테마 폴더 아래의 comments.php 파일을 원하는 대로 수정합니다.

그리고 CSS를 사용하여 댓글 섹션 내의 필드나 텍스트 크기, 컬러, 배경색 등을 변경할 수 있습니다.

참고

• 워드프레스 댓글 폼을 간결하게 만드는 방법