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

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 화면에서 한 라인에 표시되도록 하고 싶은 경우 다음과 같은 코드 스니펫을 차일드 테마의 스타일시트 파일(style.css)에 추가하도록 합니다.

// 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) 입력란이 같은 라인에 표시됩니다.

워드프레스 GeneratePress 테마 - 이름과 이메일 필드를 한 라인에 표시하기

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 &#10230;';
}

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

댓글 쿠키 ("다음 번 댓글 작성을 위해 이 브라우저에 이름, 이메일, 그리고 웹사이트를 저장합니다.") 제거 또는 변경하기

위의 방법으로 이름 필드와 이메일 필드를 한 라인에 표시하도록 수정하면 "다음 번 댓글 작성을 위해 이 브라우저에 이름, 이메일, 그리고 웹사이트를 저장합니다"(Save my name, email, and website in this browser for the next time I comment) 필드가 세로로 표시되는 현상이 발생합니다.

그런 경우 다음과 같은 CSS 코드를 추가하면 제대로 표시됩니다.

/* 댓글 쿠키 필드 너비 조정하기 */
.comment-form-cookies-consent {
    width: 100%;
}

댓글 쿠키를 완전히 제거하고 싶은 경우 토론 설정에서 댓글 폼 쿠키 동의 필드를 비활성화할 수 있습니다.

설정 » 토론 » 기타 댓글 설정의 "댓글 쿠키 선택 체크박스를 보여서 댓글 작성자 쿠기 설정 허용" 옵션을 해제합니다.

워드프레스 댓글 폼 쿠키 동의 필드 제거하기

댓글 쿠키 문구를 변경하고 싶은 경우에는 다음 코드를 사용할 수 있습니다.

// 댓글 쿠키 문구 변경하기
add_filter( 'comment_form_default_fields', 'tu_filter_comment_fields', 20 );
function tu_filter_comment_fields( $fields ) {
    $commenter = wp_get_current_commenter();

    $consent   = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';

    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' . '<label for="wp-comment-cookies-consent">이름과 이메일을 기억합니다.</label></p>';

    return $fields;
}

"이름과 이메일을 기억합니다" 부분을 적절한 문구로 바꾸시기 바랍니다.

웹사이트 필드 제거하기

댓글에서 URL 필드를 제거하고 싶은 경우 위에서 제시한 방법으로 제거가 가능할 것입니다. 만약 제거가 안 되는 경우 다음과 같은 코드를 테마 함수 파일에 추가하면 웹사이트 필드가 제거됩니다.

// 웹사이트 필드 제거, Remove Website field
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']);
    return $fields;
}

Clearfy와 같은 일부 최적화 플러그인에서는 댓글에서 URL 필드를 제거하는 옵션을 제공하기도 합니다. 하지만 그런 플러그인에서 댓글 URL 필드를 제거하도록 설정해도 GeneratePress 테마에서 제거되지 않을 수 있습니다. 그런 경우에 위의 방법을 제거가 가능합니다. 또한, CSS로 숨기는 것도 가능하지만, CSS로 숨기는 방법은 실제 URL 필드가 제거되는 것은 아니고 브라우저상에서만 사용자에게 표시되지 않도록 합니다.

마치며

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

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

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

부록: CSS 코드와 PHP 코드 추가 방법

CSS 코드 추가 방법

CSS 코드는 몇 가지 방법으로 추가가 가능합니다.

  1. 워드프레스 관리자 페이지 내에서 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가할 수 있습니다.
  2. 또는, 아바다, 엔폴드, 뉴스페이퍼, Divi 등 일부 유료 테마에서는 자체 테마 옵션 내에서 커스텀 CSS를 추가할 수 있는 공간을 제공하기도 합니다. 예를 들어, 뉴스페이퍼 테마의 경우 Newspape > Theme Panel > Custom Code > Custom CSS 섹션에 사용자 정의 CSS 코드를 추가할 수 있습니다.
  3. 또는, FTP에 접속하여 테마 폴더 내의 스타일시트(style.css) 파일에 사용자 정의 CSS를 추가할 수 있습니다. 이 방법을 이용할 경우 반드시 차일드 테마를 설치하여 차일드 테마 내의 스타일시트 파일에 추가하시기 바랍니다.

커스텀 코드 추가하기

이 글에 제시된 PHP 코드는 테마 폴더 내의 함수 파일(functions.php)에 추가하시기 바랍니다. 마찬가지로 차일드 테마를 만들어서 자식 테마 내의 함수 파일에 추가하세요. 그렇지 않을 경우 테마가 업데이트되면서 추가한 코드가 모두 사라지게 됩니다.

PHP 코드 스니펫을 추가할 수 있는 플러그인을 사용하면 워드프레스 알림판에서 직접 추가하는 것도 가능하지만, 가급적 차일드 테마 내의 함수 파일에 추가할 것을 권장합니다.

참고


24개 댓글

  1. 함수 파일에 추가하는 이메일 필드와 웹사이트 필드 제거하기 코드 대신에 아래의 CSS 코드를 사용해도 되나요?

    .comment-form #email {
    display: none !important;
    }

    .comment-form #url {
    display: none !important;
    }

  2. 이메일 필드와 웹사이트 필드를 제거하고 이름 작성 후 댓글을 등록하면 ‘오류: 필수 항목을 채워주세요.’ 이렇게 나옵니다 ㅠㅠ

      1. 아 그런데 제가 찾은 링크에 나와 있는 함수 코드는 댓글 입력란에 글자를 입력하면 설정한 특정 문구가 사라지질 않네요^^; 그래서 또 찾았습니다!!!

        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 );

  3. 이 사이트처럼 닉네임과 의견을 작성해야 댓글 등록 버튼이 활성화 되게끔 하려면 어떻게 하나요?

      1. 답변 감사합니다! 모바일 화면에서는 위치가 그대로인데, 모바일에서도 버튼 위치를 우측으로 바꿀 수 있나요?

      2. 해당 코드를 이 블로그에 추가해 보았습니다.

        캐시 때문에 방문한 적이 있는 글에서는 버튼이 아마 왼쪽에 표시될 수 있지만, 방문한 적이 없는 글을 방문하면 등록 버튼이 오른쪽으로 표시될 것입니다.

        (간혹 캐시 때문에 CSS 변경 사항이 잘 적용되지 않는 경우가 있습니다.)

    1. 개인정보를 수집하지 않도록 이메일 필드를 없애고 "이름" 필드를 "닉네임" 필드로 바꾸었습니다. 또, IP 주소를 수집하지 않도록 조치를 취했습니다.

      다음 글을 참고해보세요.

      https://www.thewordcracker.com/intermediate/%EA%B0%9C%EC%9D%B8%EC%A0%95%EB%B3%B4-%EC%88%98%EC%A7%91%ED%95%98%EC%A7%80-%EC%95%8A%EB%8F%84%EB%A1%9D-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EB%8C%93%EA%B8%80-%ED%8F%BC-%EB%B3%80%EA%B2%BD/

      세부적인 스타일은 CSS로 조정해야 합니다.

      https://cafe.naver.com/wphomepage/16730

  4. @media (min-width: 769px) {
    이름 이메일을 가로로 하려고 했더니 오류가 발생됩니다.

    PHP 코드 변경사항은 wp-content/themes/generatepress-child/functions.php 파일의 32행의 오류로 인해 되돌려졌습니다. 수정하고 다시 저장해주세요.

    syntax error, unexpected ':', expecting ')'

    1. CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가하거나 차일드 테마 내의 스타일시트 파일에 추가해야 합니다.

      (본문에 오류가 있었습니다. 해당 부분은 수정했습니다.)

      먼저 기본적인 CSS에 대해 살펴보시면 도움이 될 것입니다. 다음 글을 참고해보세요.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/

    1. 감사합니다~

      저는 comments.php 파일을 조금 수정하여 사용하고 있습니다.ㅎ

      비가 계속 내리네요. 빗길 조심하시기 바랍니다.

  5. 일전에 남겨주신 GeneratePress 의 ResentPost 코드가 정상적인 작동을 안하는거 같은데 혹시 아직도 사용중이신가요?

      1. 해당 글에 제시된 코드로도 가능할 것 같습니다.

        GeneratePress에서는 Elements 모듈을 사용하여 후크로 포스트 본문 아래에 관련 글 리스트를 표시할 수 있을 것입니다.

        https://www.thewordcracker.com/intermediate/generatepress-%ED%85%8C%EB%A7%88-%ED%9B%84%ED%81%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

        코드로 직접 만드는 방법도 있지만, GeneratePress 테마에서는 연관 글을 표시하는 플러그인을 사용하는 것이 간편합니다. 다음 글을 참고해보세요.

        https://avada.co.kr/themes/generatepress-%ED%85%8C%EB%A7%88%EC%97%90-%EA%B4%80%EB%A0%A8-%EA%B8%80-%ED%91%9C%EC%8B%9C/

댓글 남기기

* 이메일 주소는 공개되지 않습니다.