워드프레스에서 대부분 댓글 입력 폼은 댓글 목록 아래에 위치하게 됩니다. 댓글 입력 폼 위치를 하단에서 댓글 섹션의 상단으로 이동하는 방법에 대하여 살펴보겠습니다. GeneratePress 테마를 기준으로 설명하지만 다른 테마에서도 비슷한 방법으로 응용이 가능합니다.
다른 방법으로 CSS flexbox를 사용하여 댓글 입력 폼이 댓글 리스트 위에 표시되도록 할 수 있습니다.
워드프레스 GeneratePress 테마의 댓글 입력 폼 위치 변경 방법
아무런 커스텀을 하지 않는 경우 제너레이트프레스 테마의 댓글 섹션은 다음과 비슷하게 표시될 것입니다.
댓글 입력 양식이 댓글 리스트 아래에 표시됩니다. 이 블로그에서는 다음과 같이 커스텀해 보았습니다.
댓글 입력 폼이 댓글 목록 위에 표시됩니다. 그리고 CSS를 사용하여 스타일을 변경했습니다.
댓글 입력 폼(comment_form())을 댓글 목록 위로 이동하려면 comments.php 파일을 수정해야 합니다.
- 차일드 테마가 설치되지 않은 경우 차일드 테마를 설치하고 활성화합니다.
- 부모 테마 폴더 내의 comments.php 파일을 PC로 다운로드한 다음, 다시 차일드 테마 폴더로 업로드합니다.
- comments.php 파일에서 comment_form() 함수의 위치를 적절한 곳으로 이동시킵니다.
엘리멘트 프로나 아바다, Divi 등의 테마 등 전체 사이트 편집(Full Site Editing, FSE) 기능을 제공하는 페이지 빌더나 테마를 사용하는 경우 댓글 템플릿 파일을 직접 수정할 필요 없이 알림판에서 댓글 템플릿을 만들 수 있는지 체크해보시기 바랍니다.
차일드 테마 설치 및 활성화
차일드 테마(자식 테마)를 설치하지 않은 경우 먼저 차일드 테마를 설치하고 활성화하도록 합니다.
차일드 테마(자식 테마)에 대해서는 여기를 참고해보시기 바랍니다.
자식 테마를 설치하지 않고 직접 작업할 경우 추후 테마 업데이트 시 수정 사항/추가 사항이 초기화되어 사라지게 됩니다.
댓글 템플릿 파일 업로드
댓글 폼의 위치를 바꾸고 댓글 섹션의 레이아웃을 변경하고 싶은 경우 comments.php 파일을 편집해야 합니다.
FTP/SFTP에 접속하여 부모 테마 폴더(예: /wp-content/themes/generatepress) 내의 comments.php 파일을 컴퓨터로 다운로드한 다음, 다시 차일드 테마 폴더(예: /wp-content/themes/generatepress-child)로 업로드합니다.
실제 테마 폴더와 차일드 테마 폴더 이름은 다르므로 상황에 맞게 적절한 폴더로 comments.php 파일을 업로드하시기 바랍니다.
댓글 템플릿을 수정하는 데 어려움을 겪는 경우 네이버 카페에서 comments.php 파일(GeneratePress 테마)을 다운로드할 수 있습니다.
이 작업을 위해서는 FTP/SFTP에 접속할 수 있어야 합니다.
댓글 템플릿 파일 수정하기
댓글 템플릿 파일에서 comment_form() 함수의 위치를 원하는 곳으로 이동시킬 수 있습니다. GeneratePress 테마의 경우 <h3 class="comments-title"> 이하 부분을 다음과 같이 수정하면 이 블로그의 comments.php 파일과 동일하게 됩니다.
<h3 class="comments-title">
<span>
<?php
if (!have_comments()) {
echo "댓글 남기기";
}
else {
$comments_number = get_comments_number();
echo $comments_number . " 개 댓글";
}
?>
</span>
</h3>
<?php
comment_form();
if ( have_comments() ) : ?>
<?php
/**
* generate_below_comments_title hook.
*
* @since 0.1
*/
do_action( 'generate_below_comments_title' );
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-above" class="comment-navigation" role="navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'generatepress' ); ?></h2>
<?php paginate_comments_links( array('prev_text' => '« PREV', 'next_text' => 'NEXT »') ); ?>
</nav><!-- #comment-nav-above -->
<?php endif; ?>
<ol class="comment-list">
<?php
/*
* Loop through and list the comments. Tell wp_list_comments()
* to use generate_comment() to format the comments.
* If you want to override this in a child theme, then you can
* define generate_comment() and that will be used instead.
* See generate_comment() in inc/template-tags.php for more.
*/
wp_list_comments( array(
'callback' => 'generate_comment',
) );
?>
</ol><!-- .comment-list -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-below" class="comment-navigation" role="navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'generatepress' ); ?></h2>
<?php paginate_comments_links( array('prev_text' => '« PREV', 'next_text' => 'NEXT »') ); ?>
</nav><!-- #comment-nav-below -->
<?php endif;
endif;
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.', 'generatepress' ); // WPCS: XSS OK. ?></p>
<?php endif;
?>
</div><!-- #comments -->댓글 입력 필드를 이름과 내용만 입력하도록 하고 싶은 경우 다음 글을 참고하시기 바랍니다.
기본적인 CSS를 익히면 댓글 섹션의 제목 등의 스타일을 원하는 대로 변경할 수 있을 것입니다.
이 블로그에서는 다음과 같은 CSS 코드가 사용되었습니다. 상황에 맞게 적절히 응용하여 활용하시기 바랍니다.
/* Changing the Style of the Comment Section in the GeneratePress Theme */
.comments-area {
margin-top: -20px;
}
h3.comments-title {
font-weight: 600;
}
.comment-content code {
background-color: #4a4a4a;
display: block;
color: #dbdfe4;
padding: 10px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.comment-content .reply {
background-color: #666;
padding: 5px 14px;
display: inline-block;
margin-top: 5px;
}
.comment-content .reply a {
color: white;
}
.comment-content .reply:hover {
background-color: #272727;
}
.comment-content {
padding: 15px 20px 25px;
margin: 25px 0 0;
font-size: 1.01em;
border: none;
border-radius: 3px;
line-height: 1.8em !important;
background-color: #f8f8f8;
}
#respond {
margin-top: 45px;
}
.comment .children {
border-left: none;
}
ol.comment-list {
background-color: #fff;
padding: 24px 20px 10px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(23,43,99,.14) 0 7px 28px;
}
@media (min-width: 769px) {
.comment-form #author, .comment-form #email, .comment-form #url {
width: 100%;
}
p.form-submit {
text-align: right;
}
}
.comment-form {
display: flex;
flex-direction: column;
}
.comment-form #author {
order: 1;
border-radius: 6px;
}
.comment-form .comment-form-comment {
order: 2;
}
.comment-form #email { order: 3;
display: none !important; }
.comment-form #url { order: 4;
display: none !important; }
.comment-form-cookies-consent {
order: 5;
margin-bottom: 2px;
}
.comment-form .form-submit {
order: 6;
}
textarea#comment {
overflow-y: scroll;
border-radius: 6px;
}
#reply-title {
display: none;
}
#comment {
height: 120px;
}
#commentform {
margin-top: -17px;
margin-bottom: 17px;
}
.form-submit #submit {
color: #fff;
cursor: pointer;
line-height: 25px;
outline: 0;
background: #2196F3;
padding: 7px 25px;
border-radius: 30px;
}
#submit:disabled {
background-color: #c4c4c4;
color: white;
cursor: not-allowed;
}
.no-comments + #respond {
margin-top: 0;
}
li.recentcomments {
font-size: 14.5px;
}
h3.comments-title span {
line-height: 17px;
display: inline-block;
padding: 7px 12px 4px;
background-color: #222;
color: #fff;
}
h3.comments-title {
line-height: 1;
margin-top: 0;
margin-bottom: 26px;
border-bottom: 2px solid #222;
}
.comments-area {
margin-top: -20px;
}
h3.comments-title {
font-weight: 600;
}
.comment-content code {
background-color: #4a4a4a;
display: block;
color: #dbdfe4;
padding: 10px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.comment-content .reply {
background-color: #666;
padding: 5px 14px;
display: inline-block;
margin-top: 5px;
}
.comment-content .reply a {
color: white;
}
.comment-content .reply:hover {
background-color: #272727;
}
.comment-content {
padding: 15px 20px 25px;
margin: 25px 0 0;
font-size: 1.01em;
border: none;
border-radius: 3px;
line-height: 1.8em !important;
background-color: #f8f8f8;
}
#respond {
margin-top: 45px;
}
.comment .children {
border-left: none;
}
ol.comment-list {
background-color: #fff;
padding: 24px 20px 10px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(23,43,99,.14) 0 7px 28px;
}
@media (min-width: 769px) {
.comment-form #author, .comment-form #email, .comment-form #url {
width: 100%;
}
p.form-submit {
text-align: right;
}
}
.comment-form {
display: flex;
flex-direction: column;
}
.comment-form #author {
order: 1;
border-radius: 6px;
}
.comment-form .comment-form-comment {
order: 2;
}
.comment-form #email { order: 3;
display: none !important; }
.comment-form #url { order: 4;
display: none !important; }
.comment-form-cookies-consent {
order: 5;
margin-bottom: 2px;
}
.comment-form .form-submit {
order: 6;
}
textarea#comment {
overflow-y: scroll;
border-radius: 6px;
}
#reply-title {
display: none;
}
#comment {
height: 120px;
}
#commentform {
margin-top: -17px;
margin-bottom: 17px;
}
.form-submit #submit {
color: #fff;
cursor: pointer;
line-height: 25px;
outline: 0;
background: #2196F3;
padding: 7px 25px;
border-radius: 30px;
}
#submit:disabled {
background-color: #c4c4c4;
color: white;
cursor: not-allowed;
}
.no-comments + #respond {
margin-top: 0;
}
li.recentcomments {
font-size: 14.5px;
}
h3.comments-title span {
line-height: 17px;
display: inline-block;
padding: 7px 12px 4px;
background-color: #222;
color: #fff;
}
h3.comments-title {
line-height: 1;
margin-top: 0;
margin-bottom: 26px;
border-bottom: 2px solid #222;
}상기 CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 입력하거나 차일드 테마 내의 style.css 파일에 추가하시기 바랍니다.
댓글 제출 버튼을 오른쪽으로 정렬하고 싶은 경우에는 다음과 같은 코드를 사용할 수 있습니다.
.comment-form>.form-submit {
text-align: right;
}이 링크를 클릭하여 GeneratePress 테마를 구입하시면 이 블로그와 네이버 카페 운영에 도움을 주실 수 있습니다.
이메일과 웹사이트 필드를 제거 했다면 아래와 같은 코드를 사용해도 될까요?
.comment-form {
display: flex;
flex-direction: column;
}
.comment-form #author {
font-size: 20px;
order: 1;
border-radius: 6px;
width: 100%;
}
.comment-form .comment-form-comment {
order: 2;
}
.comment-form-cookies-consent {
order: 3;
margin-bottom: 2px;
}
.comment-form .form-submit {
order: 4;
}
아래 코드가 닉네임과 댓글 내용을 입력하는 칸 위 아래를 바꾸는 부분인가요?
.comment-form {
display: flex;
flex-direction: column;
}
.comment-form #author {
order: 1;
border-radius: 6px;
}
.comment-form .comment-form-comment {
order: 2;
}
.comment-form #email { order: 3;
display: none !important; }
.comment-form #url { order: 4;
display: none !important; }
.comment-form-cookies-consent {
order: 5;
margin-bottom: 2px;
}
.comment-form .form-submit {
order: 6;
}
댓글 남기기와 ~개 댓글을 어떻게 합칠 수 있나요?
https://cafe.naver.com/wphomepage/37884 여기에서 다운로드하여 comments.php 파일을 차일드 테마 폴더로 업로드해보시겠어요?
comment_form(); 위치만 변경했는데, 댓글폼이 아예 사라져버렸어요. 댓글입력란만 상단으로 위치이동하고싶은데 comment_form();를 정확히 어느 위치에 넣어야하나요?
이런 작업을 하려면 PHP에 대한 기본적인 지식이 있어야 가능합니다.
GeneratePress 테마를 사용하는 경우 https://cafe.naver.com/wphomepage/37884 에서 다운로드할 수 있습니다.
이 블로그처럼 닉네임 입력란 위치를 댓글 입력란 위로 바꾸고 싶은데 어떻게 하나요?
이 글에 제시된 CSS 코드를 적용하면 닉네임 입력란이 댓글 입력란 위로 이동할 것입니다.
기본적인 CSS를 익히시면 응용할 수 있을 것입니다.
https://cafe.naver.com/wphomepage/16730